Can I use this skill to document an existing project?

Absolutely. You can use it to analyze and standardize your existing UI patterns into a formal, documented design system to improve code maintainability.

Is the output accessible for developers?

Yes, the skill is specifically designed for developer handoff, providing clear specifications for spacing, typography, and interactive states that are easy to translate into code.

Why does the skill use OKLCH for colors?

OKLCH is used because it provides perceptual uniformity, making it mathematically simpler to calculate accessible contrast ratios and maintain consistent vibrancy across light and dark modes.

What is the 'Full Mode' in this UX/UI skill?

Full Mode is designed for production projects requiring high-level detail. It generates exhaustive documentation including design tokens, individual component specifications, and feature-specific user journeys.

Does this skill generate actual CSS code?

Yes, it provides implementation references including ready-to-use Tailwind CSS configurations and standard CSS variables based on the design tokens it creates.

UX/UI Designer Agent (Full Mode)

Name: UX/UI Designer Agent (Full Mode)
Author: adnanmueller

byadnanmueller

•

Design Tools

Generates comprehensive design systems, component specifications, and detailed user journeys for production-grade software projects.

The UX/UI Designer Agent (Full Mode) is a specialized skill that establishes a single source of truth for your product's visual identity and user experience. It moves beyond basic styling to create professional-grade documentation, including perceptually uniform OKLCH color systems, responsive typography scales, and accessibility-compliant component specifications. By automating the creation of design tokens, implementation-ready CSS, and detailed user journey maps, this skill ensures long-term maintainability and consistency across complex, feature-rich applications.

Key Features

01Implementation-ready code exports for Tailwind CSS configuration and CSS Variables.

02Comprehensive user journey mapping and screen state analysis for complex feature design.

03Automated creation of OKLCH-based design token systems for perceptually uniform and accessible palettes.

041 GitHub stars

05Detailed component specification documentation covering states, variants, and accessibility requirements.

06WCAG accessibility matrix generation to ensure contrast and touch-target compliance.

Use Cases

01Establishing a robust, scalable design system for a new production-ready web application.

02Mapping out complex user flows and edge-case screen states before starting frontend implementation.

03Documenting a component library to ensure visual and functional consistency across large development teams.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adnanmueller/am-dev-plugins 02a-ux-ui-full

For use in Claude.ai and ChatGPT

Download Skill