prototype-prompt-generator

Prototype Prompt Generator

Overview

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?
• Brand colors or visual preferences?
• Any design references or inspiration?

Feature Requirements:

• Key pages and features needed
• Navigation structure (tabs, drawer, stack navigation)
• Data to display (metrics, lists, forms, media)
• User interactions (tap, swipe, long-press, etc.)

Content & Data:

• Actual content to display (realistic text, numbers, names)
• Empty states, error states, loading states
• Any specific business logic or rules

Technical Constraints:

• Framework preference: Plain HTML, React, Vue, or framework-agnostic?
• CSS approach: Tailwind CSS, CSS Modules, styled-components?
• 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:

• File structure (single HTML, multi-page, component-based)
• Framework and version (e.g., Tailwind CSS CDN)
• Device simulation (viewport size, device chrome)
• Asset sources (Unsplash, Pexels, real images)
• Icon libraries (FontAwesome, Material Icons)
• Custom configuration (Tailwind config, theme variables)

4. Visual Design Requirements Provide detailed specifications:

(a) Color Palette: Include all colors with hex codes:

• Background colors (main, section, card)
• Primary and accent colors with usage
• Status colors (success, warning, error)
• Text colors (title, body, secondary, disabled)
• UI element colors (borders, dividers)

(b) UI Style Characteristics: Specify for each component type:

• Cards: background, radius, shadow, border, padding
• Buttons: variants (primary, secondary, ghost), dimensions, states
• Icons: style, sizes, colors, containers
• List items: layout, height, divider style, active state
• Shadows: type and usage

(c) Layout Structure: Describe each major section:

• Top navigation bar: height, title style, icons, background
• Content areas: grids, cards, lists, spacing
• Quick access areas: icon grids, layouts
• Data display cards: metrics, layout, styling
• Feature lists: structure, icons, interactions
• Bottom tab bar: height, tabs, active/inactive states, badges

(d) Specific Page Content: Provide actual content, not placeholders:

• Real page titles and section headings
• Actual data points (numbers, names, dates)
• Feature names and descriptions
• Button labels and link text
• Sample list items with realistic content

5. Implementation Details Cover technical specifics:

• Page width and centering approach
• Layout systems (Flexbox, Grid, or both)
• Fixed/sticky positioning for navigation
• Spacing scale (margins, padding, gaps)
• Typography (font family, sizes, weights)
• Interactive states (hover, active, focus, disabled)
• Icon sources and usage
• Border and divider styling

6. Tailwind Configuration If using Tailwind CSS, provide custom config:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3478F6',
        // ... all custom colors
      }
    }
  }
}

7. Content Structure & Hierarchy Visualize the page structure as a tree:

Page Name
├─ Section 1
│  ├─ Element 1
│  └─ Element 2
├─ Section 2
│  ├─ Subsection A
│  │  ├─ Item 1
│  │  └─ Item 2
│  └─ Subsection B
└─ Section 3

8. Special Requirements Highlight unique considerations:

• Design system-specific guidelines
• Primary color application scenarios
• Interaction details (tap feedback, animations, gestures)
• Accessibility requirements (contrast, touch targets, ARIA)
• Performance considerations (image optimization, lazy loading)

9. Output Format Specify the exact deliverable:

# 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:

Replace vague terms with precise specifications:

• ❌ "Use blue colors" → ✅ "Primary: #3478F6 (tech blue), Link: #576B95 (link blue)"
• ❌ "Make buttons rounded" → ✅ "Border radius: 4px (Tailwind: rounded)"
• ❌ "Add some spacing" → ✅ "Card spacing: 12px, page margins: 16px"
• ❌ "Display user info" → ✅ "Show username (15px bold), email (13px gray), avatar (48px circle)"

Use real content, not placeholders:

• ❌ "Lorem ipsum dolor sit amet" → ✅ "Customer Total: 14, Today's New Customers: 1, Today's Revenue: ¥0.00"
• ❌ "[Company Name]" → ✅ "Acme Insurance Co."
• ❌ "Feature 1, Feature 2, Feature 3" → ✅ "Customer Contact, Customer Moments, Customer Groups"

Specify all measurements:

• Component heights (44px, 50px, 64px)
• Font sizes (13px, 15px, 16px, 18px)
• Spacing values (8px, 12px, 16px, 24px)
• Icon sizes (24px, 32px, 48px)
• Border radius (4px, 8px, 10px)

Define all states:

• Normal: base colors and styles
• Hover: if applicable (desktop)
• Active/Pressed: opacity or background changes
• Disabled: grayed out with reduced opacity
• 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")
• Compon

---

Content truncated.