UI/UX Prototype Prompt Generator

Generate comprehensive, structured prompts for creating production-ready UI/UX prototypes with detailed specifications and design system adherence.

When to Use This Skill

Use this skill when:

• Creating detailed design briefs for web or mobile applications
• Generating structured prompts for AI-assisted UI design
• Documenting UI specifications across multiple design systems
• Building design handoff documentation for development teams
• Prototyping mobile apps with specific design system constraints
• Generating comprehensive design documentation from high-level concepts

Trigger phrases:

• “Create a prototype prompt for [app description]”
• “Design a mobile app for [use case]”
• “Generate UI specifications for [feature]”
• “Build a design brief for [application type]”
• “Create design documentation for [platform]”

Supported Design Systems

This skill generates prompts compatible with:

Automatic adaptation: Prompts adjust component names, interaction patterns, and visual styles based on selected design system.

➜ Design system details: references/design-systems.md

Prompt Generation Process

Step 1: Gather Requirements

Extract from user input:

• Application type (e.g., task manager, e-commerce, social app)
• Target platform (iOS, Android, Web, Hybrid)
• Design system preference (if specified)
• Key features (user flows, core functionality)
• Target audience (demographic, use case context)

Step 2: Structure the Prompt

Generate a comprehensive prompt with these sections:

1. Project Overview – App purpose, target users, core value proposition
2. Design System Specification – Selected system and adherence requirements
3. Page/Screen List – Complete navigation structure
4. Detailed Specifications – Per-screen component breakdown:
   • Layout structure
   • Component hierarchy
   • Interaction states
   • Visual styling (colors, typography, spacing)
   • Accessibility requirements
5. User Flows – Critical paths and interactions
6. Edge Cases – Empty states, error handling, loading states
7. Responsive Behavior – Breakpoints and adaptive layouts (for web)
8. Design Tokens – Colors, typography scales, spacing system

Step 3: Output Structured Documentation

Deliver in Markdown format with:

• Clear section hierarchy (H2, H3 headings)
• Tables for component specifications
• Code blocks for design tokens
• ASCII diagrams for layouts (when helpful)

Quick Start

Example 1: Mobile Task Manager

User request:

“Create a prototype prompt for a mobile task management app using iOS Native design”

Generated prompt structure:

# Task Manager App - iOS Native Prototype

## Project Overview
- **Purpose**: Simple task management for personal productivity
- **Platform**: iOS (iPhone, iPad)
- **Design System**: iOS Human Interface Guidelines
- **Target Users**: 25-45 professionals managing daily tasks

## Core Features
1. Task list with priorities
2. Calendar view
3. Categories and tags
4. Quick add with Siri shortcuts

## Screen Specifications

### 1. Home Screen (Task List)
**Layout:**
- Navigation Bar: Title "Tasks", Add button (SF Symbol: plus)
- Search Bar (UISearchBar with cancel button)
- Segmented Control: "Today" | "Upcoming" | "All"
- Table View: Tasks with swipe actions

**Components:**
- UINavigationBar (large title)
- UISegmentedControl
- UITableViewCell (custom):
  - Checkbox (SF Symbol: circle / checkmark.circle.fill)
  - Task title (SF Pro Text, 17pt)
  - Due date (SF Pro Text, 15pt, secondary label color)
  - Priority indicator (colored dot)

**Interactions:**
- Swipe right: Mark complete (green checkmark)
- Swipe left: Delete (red trash icon)
- Tap: Navigate to detail view
- Pull-to-refresh: Sync tasks

...

➜ Complete example: examples/prompt-templates.md#task-manager

Example 2: Enterprise Dashboard (WeChat Work)

User request:

“Generate UI specs for a sales dashboard using WeChat Work design system”

Generated prompt includes:

• WeChat Work navigation components (TabBar, NavigationBar)
• Enterprise color scheme (primary: #07C160)
• Cell components (weui-cell, weui-media-box)
• Charts and data visualization specs
• Role-based access control UI elements

➜ Complete example: examples/prompt-templates.md#enterprise-dashboard

Example 3: Material Design 3 E-commerce

User request:

“Design a mobile e-commerce app with Material Design 3”

Generated prompt includes:

• Material You dynamic color system
• FAB (Floating Action Button) placement
• Material card layouts for products
• Bottom sheet for filters
• Navigation rail (tablet), bottom bar (phone)
• Motion specifications (ease-in-out curves)

➜ Complete example: examples/prompt-templates.md#ecommerce-app

Design System Adaptation Rules

Component Mapping

When switching design systems, automatically map equivalent components:

Visual Style Adaptation

iOS Native:

• Blur effects (translucent navigation bars)
• SF Symbols for icons
• SF Pro font family
• Large titles (44pt)

Material Design 3:

• Elevation shadows (0-5)
• Material icons
• Roboto font family
• FAB with elevation

WeChat Work:

• Flat design (no shadows)
• WeUI icons
• System font stack
• Green primary color (#07C160)

Ant Design Mobile:

• Hairline borders (0.5px)
• Ant Design icons
• PingFang SC / Roboto
• Blue primary color (#1677FF)

➜ Full specification: references/design-systems.md#component-mapping

Prompt Templates

Template Structure

All generated prompts follow this structure:

# [App Name] - [Design System] Prototype

## 1. Project Overview
- Purpose: [Brief description]
- Platform: [iOS/Android/Web/Hybrid]
- Design System: [Selected system]
- Target Users: [Demographics and use cases]

## 2. Information Architecture
- [Navigation structure]
- [Screen hierarchy]

## 3. Design Tokens
```css
/* Colors */
--primary: #[HEX];
--secondary: #[HEX];
...

/* Typography */
--heading-1: [size] / [line-height] [font-family];
...

/* Spacing */
--space-unit: [base unit]px;

4. Screen Specifications

[Screen Name]

Layout: [Description] Components:

• States:
• Default: [Description]
• Loading: [Description]
• Error: [Description] …

5. User Flows

[Critical paths with step-by-step interactions]

6. Accessibility

• [WCAG compliance requirements]
• [Screen reader considerations]
• [Keyboard navigation]

7. Edge Cases

• Empty states
• Network errors
• Permission requests

➜ **Customizable templates:** [examples/prompt-templates.md](examples/prompt-templates.md)

---

## Integration with Other Skills

### Workflow Combinations

**UX Design → Prompt Generation:**
```bash
# Step 1: Use ux-design-gemini for user research
memex-cli run --stdin <<'EOF'
---TASK---
backend: gemini
---CONTENT---
创建用户画像：任务管理App的目标用户
---END---
EOF

# Step 2: Use this skill to generate prototype prompt
# (Based on research insights)

Prompt Generation → Code Implementation:

# Step 1: Generate prototype prompt (this skill)
# Step 2: Use code-with-codex to implement UI
memex-cli run --stdin <<'EOF'
---TASK---
backend: codex
model: gpt-5.2-codex
---CONTENT---
实现以下UI规格：[paste generated prompt]
---END---
EOF

Multi-Platform Design: Generate prompts for all platforms simultaneously:

memex-cli run --stdin <<'EOF'
---TASK---
id: ios-version
backend: gemini
---CONTENT---
生成iOS原生版本的UI规格：[app description]
---END---

---TASK---
id: android-version
backend: gemini
dependencies: ios-version
---CONTENT---
基于iOS版本，生成Material Design 3规格
---END---
EOF

Output Customization

Verbosity Levels

Level 1: Brief (Quick reference)

• Component list only
• Basic interaction notes
• No design tokens

Level 2: Standard (Default)

• Full component specifications
• Interaction states
• Design tokens included
• One user flow example

Level 3: Comprehensive

• All Level 2 content
• Multiple user flows
• Accessibility annotations
• Edge case documentation
• Responsive behavior details

Request specific level:

“Generate a brief prototype prompt for [app]” “Create a comprehensive design spec for [app]”

Best Practices

For High-Quality Prompts

1. Be specific about target users

   • Good: “25-35 year old professionals managing personal tasks”
   • Bad: “Anyone who needs a task manager”

2. Specify design constraints

   • Good: “iOS app following HIG, accessibility priority”
   • Bad: “Mobile app”

3. Clarify feature priorities

   • Good: “Core: task list, categories, quick add. Future: collaboration, attachments”
   • Bad: “Task manager with all features”

4. Indicate technical constraints

   • Mention if it’s a web app (responsive required)
   • Note if it’s a native app (platform-specific components)
   • Specify if hybrid (framework limitations)

Common Pitfalls to Avoid

❌ Mixing design systems

• Don’t combine iOS navigation with Material Design buttons

❌ Ignoring platform conventions

• Don’t use Android back button on iOS
• Don’t use iOS swipe gestures as primary on Android

❌ Overcomplicating initial screens

• Start with core flows, add secondary features later

✅ Follow system defaults

• Use native components when possible
• Respect platform interaction patterns
• Adhere to accessibility guidelines

Additional Resources

Reference Files

Detailed documentation for design system specifications:

• references/design-systems.md – Complete design system guide
  • Component libraries
  • Visual styles
  • Interaction patterns
  • Platform-specific guidelines

Example Templates

Working prompt examples for common app types:

• examples/prompt-templates.md – Template library
  • Task manager (iOS Native)
  • Enterprise dashboard (WeChat Work)
  • E-commerce app (Material Design 3)
  • Admin panel (Ant Design Mobile)
  • Social app (Cross-platform)

Related Skills

• ux-design-gemini – User research and design workflow
• code-with-codex – UI implementation from specs

Quick Reference

Common Commands

Generate prompt for iOS app:

“Create a prototype prompt for a [description] using iOS Native design”

Generate prompt for Android app:

“Generate UI specifications for a [description] with Material Design 3”

Generate prompt for enterprise app:

“Build a design brief for a [description] using WeChat Work components”

Generate cross-platform specs:

“Design a [description] with responsive web layout using Material Design”

Output Format

All prompts are delivered in Markdown format with:

• H2 headings for major sections
• Tables for component specifications
• Code blocks for design tokens (CSS custom properties)
• ASCII diagrams for complex layouts (when needed)
• Links to reference images (when helpful)

Limitations

• Not a code generator: Produces specifications, not implementation code
• Requires AI execution: Prompts are designed for AI code generation tools (Codex, Claude)
• Platform expertise needed: Generated specs assume familiarity with target platform
• Static specifications: Does not include animation timings or micro-interactions (add manually)
• No visual mockups: Generates text descriptions, not visual designs (use Figma/Sketch separately)

For detailed examples and design system specifications, refer to references/ and examples/ directories.