Generate comprehensive, production-ready prompts for UI/UX prototype creation. Transform user requirements into detailed technical specifications that include design systems, color palettes, component specifications, layout structures, and implementation guidelines. Output prompts are structured for optimal consumption by AI tools or human developers building HTML/CSS/React prototypes.
Fetches prototype-prompt-generator from cexll/myclaude and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/prototype-prompt-generator
Restart Cursor to activate prototype-prompt-generator. Access via /prototype-prompt-generator in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Generate comprehensive, production-ready prompts for UI/UX prototype creation. Transform user requirements into detailed technical specifications that include design systems, color palettes, component specifications, layout structures, and implementation guidelines. Output prompts are structured for optimal consumption by AI tools or human developers building HTML/CSS/React prototypes.
Workflow
Step 1: Gather Requirements
Begin by collecting essential information from the user. Ask targeted questions to understand:
Application Type & Purpose:
What kind of application? (e.g., enterprise tool, e-commerce, social media, dashboard)
Who are the target users?
What are the primary use cases and workflows?
Platform & Context:
Target platform: iOS, Android, Web, WeChat Mini Program, or cross-platform?
Device: Mobile phone, tablet, desktop, or responsive?
Viewport dimensions if known (e.g., 375px for iPhone, 1200px for desktop)
Design Preferences:
Design style: WeChat Work, iOS Native, Material Design, Ant Design Mobile, or custom?
Image assets: Real images, placeholders, or specific sources?
CDN dependencies or version requirements?
Ask questions incrementally (2-3 at a time) to avoid overwhelming the user. Many details can be inferred from context or filled with sensible defaults.
Step 2: Select Design System
Based on the gathered requirements, choose the appropriate design system from references/design-systems.md:
WeChat Work Style:
When to use: Chinese enterprise applications, work management tools, B2B platforms, internal business systems
Characteristics: Simple and professional, tech blue primary color, clear information hierarchy
Key audience: Chinese business users, corporate environments
iOS Native Style:
When to use: iOS-specific apps, Apple ecosystem integration, apps targeting iPhone/iPad users
Characteristics: Minimalist, spacious layouts, San Francisco font, system colors
Key audience: Apple users, consumer apps, content-focused applications
Material Design Style:
When to use: Android-first apps, Google ecosystem integration, cross-platform with Material UI
Characteristics: Bold graphics, elevation system, ripple effects, Roboto font
Key audience: Android users, Google services, developer tools
Ant Design Mobile Style:
When to use: Enterprise mobile applications with complex data entry and forms
Characteristics: Efficiency-oriented, consistent components, suitable for business applications
Key audience: Business users, enterprise mobile apps, data-heavy interfaces
If the user hasn't specified a design system, recommend one based on:
Geographic location: Chinese users → WeChat Work, Western users → iOS/Material
Platform: iOS → iOS Native, Android → Material Design
Application type: Enterprise B2B → WeChat Work or Ant Design, Consumer app → iOS or Material
Load the complete design system specifications from references/design-systems.md to ensure accurate color codes, component dimensions, and interaction patterns.
Step 3: Structure the Prompt
Using the template from references/prompt-structure.md, construct a comprehensive prompt with these sections:
1. Role Definition
Define expertise relevant to the prototype:
# Role
You are a world-class UI/UX engineer and frontend developer, specializing in [specific domain] using [technologies].
2. Task Description
State clearly what to build and the design style:
# Task
Create a [type] prototype for [application description].
Design style must strictly follow [design system], with core keywords: [3-5 key attributes].
3. Tech Stack Specifications
List all technologies, frameworks, and resources:
# Output Format
Please output complete [file type] code, ensuring:
1. [Requirement 1]
2. [Requirement 2]
...
The output should be production-ready and viewable at [viewport] on [device].
Step 4: Populate with Specifics
Replace all template placeholders with concrete values:
Selected: highlight color (often primary brand color)
Include all colors:
Every color mentioned must have a hex code. Reference the chosen design system from references/design-systems.md for accurate values.
Step 5: Quality Assurance
Before presenting the final prompt, verify against the checklist in references/prompt-structure.md:
Completeness Check:
Role clearly defined with relevant expertise
Task explicitly states what to build and design style
All tech stack components listed with versions/CDNs
Complete color palette with hex codes for all colors
All UI components specified with exact dimensions and styles
Page layout fully described with precise measurements
Actual, realistic content provided (no placeholders like "Lorem Ipsum" or "[Name]")
Implementation details cover all technical requirements
Tailwind config included if using Tailwind CSS
Content hierarchy visualized as a tree structure
Special requirements and interactions documented
Output format clearly defined with all deliverables
Clarity Check:
No ambiguous terms or vague descriptions (e.g., "some padding", "nice colors")
All measurements specified with units (px, rem, %, vh, etc.)
All colors defined with hex codes (e.g., #3478F6, not just "blue")
Component states described (normal, hover, active, disabled, selected)
Proper HTML structure implied (semantic elements, hierarchy)
Feasible layout techniques (Flexbox/Grid patterns that work)
Accessible markup considerations (touch targets ≥44px, color contrast)
If any checks fail, refine the prompt before proceeding.
Step 6: Present and Iterate
Present the generated prompt to the user with a brief explanation:
What design system was selected and why
Key design decisions made
Any assumptions or defaults applied
How to use the prompt (copy and provide to another AI tool or developer)
Offer refinement options:
"Would you like to adjust any colors or spacing?"
"Should we add more pages or features?"
"Do you want to change the design system?"
"Any specific interactions or animations to emphasize?"
Iterate based on feedback:
If the user requests changes:
Update the relevant sections of the prompt
Maintain consistency across all sections
Re-verify against the quality checklist
Present the updated prompt
Save or Export:
Offer to save the prompt to a file:
Markdown file for documentation
Text file for easy copying
Include as a code block for immediate use
Best Practices
1. Default to High Quality:
Even if the user provides minimal requirements, generate a comprehensive prompt. It's easier to remove details than to add them later. Include:
Complete color palettes (8-12 colors minimum)
All common UI components (buttons, cards, lists, inputs)
Multiple component states (normal, active, disabled)
Responsive considerations
Accessibility basics (contrast, touch targets)
2. Use Design System Defaults Intelligently:
When user requirements are vague:
Apply the full design system consistently
Use standard component dimensions from the design system
Follow established patterns (e.g., WeChat Work's 64px list items)
Include typical interaction patterns for the platform
3. Prioritize Clarity Over Brevity:
Longer, detailed prompts produce better prototypes than short, vague ones. Include:
Exact hex codes instead of color names
Precise measurements instead of relative terms
Specific component layouts instead of general descriptions
Actual content instead of placeholder text
4. Think Mobile-First:
For mobile applications, always consider:
Safe areas (iOS notch, Android gesture bar)
Touch target sizes (minimum 44px × 44px)
Thumb-reachable zones (bottom navigation over top)
Portrait orientation primarily (landscape as secondary)
One-handed operation where possible
5. Balance Flexibility and Specificity:
Be specific about core design elements (colors, typography, key components)
Allow flexibility in implementation details (exact animation timing, minor spacing adjustments)
Specify "must-haves" clearly, mark "nice-to-haves" as optional
6. Consider the Full User Journey:
Include specifications for:
Entry points (splash screen, onboarding if applicable)
Primary workflows (happy path through key features)
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
