How does this skill ensure design quality?

It utilizes a mandatory Quality Control (QC) loop where specialized subagents evaluate the design against predefined criteria and best practices.

What is the primary output of the mini-app-design skill?

The primary output is a detailed design.md file containing screen configurations, component specifications, ASCII wireframes, and the chosen technical stack.

Does it handle responsive design?

Yes, the generated design documentation explicitly includes responsive design policies and strategies for different screen sizes.

Can I customize the design principles it follows?

Yes, the skill references local assets like design_system_principles.md and design_template.md, which can be tailored to your specific project needs.

Does it require existing documentation to work?

Yes, it performs a 'Preflight' check to read requirements.md and other relevant materials to ensure the design aligns with your project goals.

Mini App UI/UX Designer

Name: Mini App UI/UX Designer
Author: matsuni-kk

bymatsuni-kk

디자인 도구

Streamlines the UI/UX and technical design process for mini-apps by generating comprehensive design documentation and ASCII wireframes.

소개

Mini App UI/UX Designer is a specialized Claude Code skill designed to bridge the gap between requirement definition and frontend implementation. It follows a rigorous workflow that includes preflight document analysis, template-driven design generation, and a multi-stage quality control loop via specialized subagents. The skill produces a standardized design.md file featuring ASCII wireframes, component specifications, color schemes, and responsive strategies, ensuring that every mini-app adheres to established design system principles and technical feasibility standards before development begins.

주요 기능

Integrated QC loop with specialized subagents to validate usability and technical feasibility.
Automated mapping of functional requirements to specific UI components and tech stacks.
0 GitHub stars
Seamless backlog integration that tracks design status and triggers next-action steps.
ASCII-based wireframing for clear visualization of screen layouts and navigation flows.
Template-first design generation ensuring consistent documentation across projects.

사용 사례

Transforming raw functional requirements into detailed UI/UX specifications and technical blueprints.
Rapidly prototyping screen configurations and component lists for small-scale web applications.
Enforcing design system consistency across a suite of internal tools or mini-apps.

소개

주요 기능

Integrated QC loop with specialized subagents to validate usability and technical feasibility.
Automated mapping of functional requirements to specific UI components and tech stacks.
0 GitHub stars
Seamless backlog integration that tracks design status and triggers next-action steps.
ASCII-based wireframing for clear visualization of screen layouts and navigation flows.
Template-first design generation ensuring consistent documentation across projects.

사용 사례

Transforming raw functional requirements into detailed UI/UX specifications and technical blueprints.
Rapidly prototyping screen configurations and component lists for small-scale web applications.
Enforcing design system consistency across a suite of internal tools or mini-apps.