Where are the design specifications stored?

All generated documentation, including style guides and user journeys, is systematically organized within the /docs/design-documentation/ directory of your repository.

Does this skill generate frontend code like React or CSS?

No, this skill is specifically designed to create high-level design specifications and documentation in Markdown format. It serves as a blueprint that guides the subsequent coding phase.

Does it support accessibility standards?

Yes, the skill prioritizes accessibility-first design, ensuring all specifications meet WCAG AA+ contrast ratios and include ARIA labels and keyboard navigation rules.

Can I use this for mobile app design planning?

Absolutely. The skill includes responsive design specifications for mobile, tablet, and desktop breakpoints, as well as touch target standards for mobile interfaces.

UX/UI Design Architect

Name: UX/UI Design Architect
Author: codewithpassion

bycodewithpassion

0•

디자인 도구

Generates comprehensive UX/UI design specifications, design systems, and accessibility-compliant documentation to bridge the gap between product strategy and frontend development.

The UX/UI Design Architect skill transforms user stories and feature requirements into professional, FAANG-level design documentation before a single line of frontend code is written. It establishes a structured design language by generating design tokens, style guides, and detailed component specifications. By focusing on accessibility-first principles and systematic user journeys, this skill ensures that your application has a cohesive visual identity, intuitive navigation, and clear developer handoff notes, all stored systematically within your project's documentation folder.

주요 기능

010 GitHub stars

02Comprehensive WCAG AA+ accessibility compliance checklists and guidelines

03Detailed user journey mapping and information architecture planning

04Component-level visual and interaction specifications for developer handoff

05Responsive layout documentation for desktop, tablet, and mobile breakpoints

06Automated design system generation including colors, typography, and spacing tokens

사용 사례

01Translating Product Manager feature stories into detailed UI/UX technical specifications

02Mapping complex user flows and screen states for advanced application features

03Creating a standardized design system for a new project to ensure visual consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codewithpassion/cwp-claude-marketplace ux-ui-designer

For use in Claude.ai and ChatGPT

Download Skill