Can I use this for both web and mobile apps?

Yes, it intelligently adapts prompts based on the target platform, whether it is a native mobile app or a responsive web application.

Does it handle accessibility and edge cases?

Yes, comprehensive output includes WCAG compliance guidelines, screen reader considerations, and states for loading or error handling.

What design systems does this skill support?

The skill supports iOS Native (HIG), Material Design 3, WeChat Work (WeUI), and Ant Design Mobile, allowing for platform-specific accuracy.

How does this improve the code Claude generates?

By providing Claude with structured specifications, component names, and design tokens, the generated code is significantly more accurate and adheres to professional design standards.

Can I customize the level of detail in the prompt?

Yes, you can request three different verbosity levels: Brief for quick references, Standard for development, and Comprehensive for full documentation.

UI Prototype Prompt Generator

Name: UI Prototype Prompt Generator
Author: chaorenex1

bychaorenex1

•

Design Tools

Generates structured, production-ready UI/UX design prompts for various mobile and web design systems including iOS, Material Design, and Ant Design.

The UI Prototype Prompt Generator is a specialized tool for Claude Code designed to bridge the gap between high-level application concepts and production-grade frontend implementation. It automates the creation of comprehensive design briefs, providing detailed specifications for component hierarchies, interaction states, and design tokens across multiple systems like WeChat Work, iOS Native, Material Design 3, and Ant Design Mobile. This skill is essential for developers and designers who need consistent, high-fidelity UI documentation and structured AI prompts that lead to accurate code generation.

Key Features

01Comprehensive generation of design tokens, including color scales and typography

021 GitHub stars

03Adjustable verbosity levels from brief references to comprehensive technical specs

04Automated component mapping across different design frameworks

05Detailed documentation of user flows, edge cases, and accessibility requirements

06Multi-system support for iOS HIG, Material Design 3, WeChat Work, and Ant Design

Use Cases

01Rapidly prototyping cross-platform mobile interfaces with design system consistency

02Generating detailed design handoff documentation for development teams

03Creating high-fidelity AI prompts for frontend code generation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chaorenex1/coding-workflow ui-prototype-prompt-generator

For use in Claude.ai and ChatGPT

Download Skill