/prototype-prompt-generator

name: prototype-prompt-generator
description: This skill should be used when users need to generate detailed, structured prompts for creating UI/UX prototypes. Trigger when users request help with "create a prototype prompt", "design a mobile app", "generate UI specifications", or need comprehensive design documentation for web/mobile applications. Works with multiple design systems including WeChat Work, iOS Native, Material Design, and Ant Design Mobile.

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