Does this skill require external design tools?

No, it generates text-based ASCII wireframes and specifications that can be viewed directly in your terminal or IDE, though it recommends tools like Figma for final high-fidelity design.

Does it support responsive design planning?

Yes, it includes specific strategies and layouts for mobile, tablet, and desktop breakpoints, following a mobile-first approach.

How does it use user stories?

It maps Epic requirements to screen groups and converts specific user stories into step-by-step user flows and interface elements.

Is accessibility included in the output?

Yes, the skill ensures compliance with WCAG 2.1 AA standards by including checklists for screen readers, contrast ratios, and keyboard navigation.

What documentation does this skill produce?

It generates two primary files: a comprehensive UI/UX design specification (uiux.md) and a detailed style guide (style-guide.md).

UI/UX Design Architect

Name: UI/UX Design Architect
Author: cna-bootcamp

bycna-bootcamp

•

Design Tools

Generates comprehensive UI/UX design specifications, wireframes, and style guides based on user stories and core solutions.

This skill acts as a bridge between project requirements and frontend implementation by automating the creation of detailed UI/UX design documentation. It provides a structured framework that includes information architecture, user flows, and detailed ASCII-based wireframes for core screens. By defining a complete design system—including color palettes, typography, component libraries, and interaction patterns—this skill ensures that the development process follows a consistent visual language. It also incorporates WCAG 2.1 accessibility standards and responsive design strategies, making it indispensable for planning production-grade user interfaces within a Claude-driven workflow.

Key Features

018 GitHub stars

02Interactive user flow mapping based on user stories

03Information Architecture & Sitemap generation

04Comprehensive style guides for colors, typography, and spacing

05WCAG 2.1 accessibility and responsiveness checklists

06Detailed ASCII wireframes for core application screens

Use Cases

01Translating complex user stories into functional interface blueprints

02Establishing a standardized design system before frontend development

03Generating rapid prototypes and wireframes for design reviews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cna-bootcamp/aiguide 16-uiux-design

For use in Claude.ai and ChatGPT

Download Skill