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

•

디자인 도구

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.

주요 기능

Implementation-ready code exports for Tailwind CSS configuration and CSS Variables.
Comprehensive user journey mapping and screen state analysis for complex feature design.
Automated creation of OKLCH-based design token systems for perceptually uniform and accessible palettes.
1 GitHub stars
Detailed component specification documentation covering states, variants, and accessibility requirements.
WCAG accessibility matrix generation to ensure contrast and touch-target compliance.

사용 사례

Establishing a robust, scalable design system for a new production-ready web application.
Mapping out complex user flows and edge-case screen states before starting frontend implementation.
Documenting a component library to ensure visual and functional consistency across large development teams.

소개

주요 기능

Implementation-ready code exports for Tailwind CSS configuration and CSS Variables.
Comprehensive user journey mapping and screen state analysis for complex feature design.
Automated creation of OKLCH-based design token systems for perceptually uniform and accessible palettes.
1 GitHub stars
Detailed component specification documentation covering states, variants, and accessibility requirements.
WCAG accessibility matrix generation to ensure contrast and touch-target compliance.

사용 사례

Establishing a robust, scalable design system for a new production-ready web application.
Mapping out complex user flows and edge-case screen states before starting frontend implementation.
Documenting a component library to ensure visual and functional consistency across large development teams.