Back to Details

ui-prototype-prompt-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Prototype Prompt Generator

UI/UX原型提示词生成器

Generate comprehensive, structured prompts for creating production-ready UI/UX prototypes with detailed specifications and design system adherence.
生成符合详细规格与设计系统要求的、可用于生产环境的UI/UX原型结构化提示词。

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]"
在以下场景使用本技能：
  • 为Web或移动应用创建详细设计 brief
  • 生成用于AI辅助UI设计的结构化提示词
  • 跨多个设计系统记录UI规格
  • 为开发团队创建设计交付文档
  • 在特定设计系统约束下制作移动应用原型
  • 从高层概念生成全面的设计文档
触发语句：
  • "为[应用描述]创建原型提示词"
  • "为[使用场景]设计移动应用"
  • "为[功能]生成UI规格"
  • "为[应用类型]制作设计 brief"
  • "为[平台]创建设计文档"

Supported Design Systems

支持的设计系统

This skill generates prompts compatible with:
Design SystemPlatformBest For
WeChat WorkEnterprise messagingInternal enterprise apps, workflow tools
iOS Native (HIG)Apple platformsConsumer iOS apps, native experiences
Material Design 3Android, WebCross-platform apps, Google ecosystem
Ant Design MobileMobile web, HybridAdmin panels, data-heavy mobile apps
Automatic adaptation: Prompts adjust component names, interaction patterns, and visual styles based on selected design system.
➜ Design system details: references/design-systems.md
本技能生成的提示词兼容以下设计系统：
设计系统平台适用场景
WeChat Work企业即时通讯内部企业应用、工作流工具
iOS Native (HIG)Apple平台消费级iOS应用、原生体验
Material Design 3Android、Web跨平台应用、Google生态系统
Ant Design Mobile移动Web、混合应用管理后台、数据密集型移动应用
自动适配：提示词会根据所选设计系统调整组件名称、交互模式和视觉样式。
➜ 设计系统详情：references/design-systems.md

Prompt Generation Process

提示词生成流程

Step 1: Gather Requirements

步骤1：收集需求

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)
从用户输入中提取：
  • 应用类型（如任务管理器、电商、社交应用）
  • 目标平台（iOS、Android、Web、混合应用）
  • 设计系统偏好（若指定）
  • 核心功能（用户流程、核心功能）
  • 目标受众（人群特征、使用场景背景）

Step 2: Structure the Prompt

步骤2：构建提示词结构

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
生成包含以下板块的全面提示词：
  1. 项目概述 - 应用用途、目标用户、核心价值主张
  2. 设计系统规格 - 所选系统及遵循要求
  3. 页面/屏幕列表 - 完整导航结构
  4. 详细规格 - 逐屏组件拆解：
    • 布局结构
    • 组件层级
    • 交互状态
    • 视觉样式（颜色、排版、间距）
    • 无障碍要求
  5. 用户流程 - 关键路径与交互
  6. 边缘场景 - 空状态、错误处理、加载状态
  7. 响应式表现 - 断点与自适应布局（针对Web）
  8. 设计令牌 - 颜色、排版尺度、间距系统

Step 3: Output Structured Documentation

步骤3：输出结构化文档

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)
以Markdown格式交付，包含：
  • 清晰的章节层级（H2、H3标题）
  • 组件规格表格
  • 设计令牌代码块
  • 布局ASCII示意图（如有帮助）

Quick Start

快速开始

Example 1: Mobile Task Manager

示例1：移动任务管理器

User request:
"Create a prototype prompt for a mobile task management app using iOS Native design"
Generated prompt structure:
markdown
undefined
用户请求：
"使用iOS Native设计为移动任务管理应用创建原型提示词"
生成的提示词结构：
markdown
undefined

Task Manager App - iOS Native Prototype

任务管理器应用 - iOS Native原型

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
  • 用途：用于个人效率提升的简易任务管理
  • 平台：iOS（iPhone、iPad）
  • 设计系统：iOS人机界面指南（HIG）
  • 目标用户：25-45岁管理日常任务的职场人士

Core Features

核心功能

  1. Task list with priorities
  2. Calendar view
  3. Categories and tags
  4. Quick add with Siri shortcuts
  1. 带优先级的任务列表
  2. 日历视图
  3. 分类与标签
  4. 支持Siri快捷指令的快速添加

Screen Specifications

屏幕规格

1. Home Screen (Task List)

1. 首页（任务列表）

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](examples/prompt-templates.md)

---
布局：
  • 导航栏：标题「Tasks」、添加按钮（SF Symbol：plus）
  • 搜索栏（带取消按钮的UISearchBar）
  • 分段控制器：「今日」|「即将到来」|「全部」
  • 表格视图：支持滑动操作的任务列表
组件：
  • UINavigationBar（大标题）
  • UISegmentedControl
  • UITableViewCell（自定义）：
    • 复选框（SF Symbol：circle / checkmark.circle.fill）
    • 任务标题（SF Pro Text，17pt）
    • 截止日期（SF Pro Text，15pt，次要标签颜色）
    • 优先级指示器（彩色圆点）
交互：
  • 右滑：标记完成（绿色对勾）
  • 左滑：删除（红色垃圾桶图标）
  • 点击：跳转到详情页
  • 下拉刷新：同步任务
...

➜ **完整示例**：[examples/prompt-templates.md#task-manager](examples/prompt-templates.md)

---

Example 2: Enterprise Dashboard (WeChat Work)

示例2：企业仪表板（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
用户请求：
"使用WeChat Work设计系统生成销售仪表板的UI规格"
生成的提示词包含：
  • WeChat Work导航组件（TabBar、NavigationBar）
  • 企业配色方案（主色：#07C160）
  • 单元格组件（weui-cell、weui-media-box）
  • 图表与数据可视化规格
  • 基于角色的访问控制UI元素
➜ 完整示例：examples/prompt-templates.md#enterprise-dashboard

Example 3: Material Design 3 E-commerce

示例3：Material Design 3电商应用

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
用户请求：
"使用Material Design 3设计移动电商应用"
生成的提示词包含：
  • Material You动态色彩系统
  • FAB（浮动操作按钮）布局
  • 产品展示的Material卡片布局
  • 筛选器底部弹窗
  • 导航栏（平板）、底部栏（手机）
  • 动效规格（缓入缓出曲线）
➜ 完整示例：examples/prompt-templates.md#ecommerce-app

Design System Adaptation Rules

设计系统适配规则

Component Mapping

组件映射

When switching design systems, automatically map equivalent components:
Generic ComponentWeChat WorkiOS NativeMaterial DesignAnt Design Mobile
Primary Buttonweui-btn_primaryUIButton (filled)Filled ButtonButton (type="primary")
List Itemweui-cellUITableViewCellList itemList.Item
Input Fieldweui-inputUITextFieldText fieldInputItem
NavigationTabBarUITabBarNavigation barTabBar
Modalweui-dialogUIAlertControllerDialogModal
切换设计系统时，自动映射等效组件：
通用组件WeChat WorkiOS NativeMaterial DesignAnt Design Mobile
主按钮weui-btn_primaryUIButton（填充式）Filled ButtonButton (type="primary")
列表项weui-cellUITableViewCellList itemList.Item
输入框weui-inputUITextFieldText fieldInputItem
导航栏TabBarUITabBarNavigation barTabBar
模态框weui-dialogUIAlertControllerDialogModal

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
iOS Native：
  • 模糊效果（半透明导航栏）
  • 使用SF Symbols图标
  • SF Pro字体家族
  • 大标题（44pt）
Material Design 3：
  • 层级阴影（0-5）
  • Material图标
  • Roboto字体家族
  • 带层级的FAB
WeChat Work：
  • 扁平化设计（无阴影）
  • WeUI图标
  • 系统字体栈
  • 绿色主色（#07C160）
Ant Design Mobile：
  • 细边框（0.5px）
  • Ant Design图标
  • PingFang SC / Roboto字体
  • 蓝色主色（#1677FF）
➜ 完整规格：references/design-systems.md#component-mapping

Prompt Templates

提示词模板

Template Structure

模板结构

All generated prompts follow this structure:
markdown
undefined
所有生成的提示词遵循以下结构：
markdown
undefined

[App Name] - [Design System] Prototype

[应用名称] - [设计系统]原型

1. Project Overview

1. 项目概述

  • Purpose: [Brief description]
  • Platform: [iOS/Android/Web/Hybrid]
  • Design System: [Selected system]
  • Target Users: [Demographics and use cases]
  • 用途：[简要描述]
  • 平台：[iOS/Android/Web/混合应用]
  • 设计系统：[所选系统]
  • 目标用户：[人群特征与使用场景]

2. Information Architecture

2. 信息架构

  • [Navigation structure]
  • [Screen hierarchy]
  • [导航结构]
  • [屏幕层级]

3. Design Tokens

3. 设计令牌

css
/* Colors */
--primary: #[HEX];
--secondary: #[HEX];
...

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

/* Spacing */
--space-unit: [base unit]px;
css
/* 颜色 */
--primary: #[HEX];
--secondary: #[HEX];
...

/* 排版 */
--heading-1: [字号] / [行高] [字体家族];
...

/* 间距 */
--space-unit: [基础单位]px;

4. Screen Specifications

4. 屏幕规格

[Screen Name]

[屏幕名称]

Layout: [Description] Components:
  • States:
  • Default: [Description]
  • Loading: [Description]
  • Error: [Description] ...
布局： [描述] 组件：
  • [组件1]：[规格]
  • [组件2]：[规格] 状态：
  • 默认：[描述]
  • 加载中：[描述]
  • 错误：[描述] ...

5. User Flows

5. 用户流程

[Critical paths with step-by-step interactions]
[带分步交互的关键路径]

6. Accessibility

6. 无障碍适配

  • [WCAG compliance requirements]
  • [Screen reader considerations]
  • [Keyboard navigation]
  • [WCAG合规要求]
  • [屏幕阅读器适配考量]
  • [键盘导航支持]

7. Edge Cases

7. 边缘场景

  • Empty states
  • Network errors
  • Permission requests

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

---
  • 空状态
  • 网络错误
  • 权限请求

➜ **可自定义模板**：[examples/prompt-templates.md](examples/prompt-templates.md)

---

Integration with Other Skills

与其他技能的集成

Workflow Combinations

工作流组合

UX Design → Prompt Generation:
bash
undefined
UX设计 → 提示词生成：
bash
undefined

Step 1: Use ux-design-gemini for user research

步骤1：使用ux-design-gemini进行用户研究

memex-cli run --stdin <<'EOF' ---TASK--- backend: gemini ---CONTENT--- 创建用户画像：任务管理App的目标用户 ---END--- EOF
memex-cli run --stdin <<'EOF' ---TASK--- backend: gemini ---CONTENT--- 创建用户画像：任务管理App的目标用户 ---END--- EOF

Step 2: Use this skill to generate prototype prompt

步骤2：使用本技能生成原型提示词

(Based on research insights)

（基于研究洞察）


**Prompt Generation → Code Implementation:**
```bash

**提示词生成 → 代码实现：**
```bash

Step 1: Generate prototype prompt (this skill)

步骤1：生成原型提示词（本技能）

Step 2: Use code-with-codex to implement UI

步骤2：使用code-with-codex实现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:
```bash
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
memex-cli run --stdin <<'EOF' ---TASK--- backend: codex model: gpt-5.2-codex ---CONTENT--- 实现以下UI规格：[粘贴生成的提示词] ---END--- EOF

**多平台设计：**
同时为所有平台生成提示词：
```bash
memex-cli run --stdin <<'EOF'
---TASK---
id: ios-version
backend: gemini
---CONTENT---
生成iOS原生版本的UI规格：[应用描述]
---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]"
等级1：简洁版（快速参考）
  • 仅包含组件列表
  • 基础交互说明
  • 无设计令牌
等级2：标准版（默认）
  • 完整组件规格
  • 交互状态说明
  • 包含设计令牌
  • 一个用户流程示例
等级3：完整版
  • 包含等级2的所有内容
  • 多个用户流程
  • 无障碍适配注释
  • 边缘场景文档
  • 响应式表现细节
指定详细程度请求：
"为[应用]生成简洁版原型提示词" "为[应用]创建完整版设计规格"

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)
  1. 明确目标用户
    • 推荐："25-35岁管理个人任务的职场人士"
    • 不推荐："任何需要任务管理器的人"
  2. 指定设计约束
    • 推荐："遵循HIG的iOS应用，优先考虑无障碍适配"
    • 不推荐："移动应用"
  3. 明确功能优先级
    • 推荐："核心功能：任务列表、分类、快速添加。未来功能：协作、附件"
    • 不推荐："包含所有功能的任务管理器"
  4. 说明技术约束
    • 若为Web应用，需提及响应式要求
    • 若为原生应用，需说明平台特定组件要求
    • 若为混合应用，需说明框架限制

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
❌ 混合设计系统
  • 不要将iOS导航与Material Design按钮混用
❌ 忽视平台惯例
  • 不要在iOS上使用Android返回按钮
  • 不要在Android上以iOS滑动手势为主要交互方式
❌ 初始屏幕过度复杂
  • 从核心流程开始，后续再添加次要功能
✅ 遵循系统默认
  • 尽可能使用原生组件
  • 尊重平台交互模式
  • 遵循无障碍适配指南

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
设计系统规格的详细文档：
  • references/design-systems.md - 完整设计系统指南
    • 组件库
    • 视觉样式
    • 交互模式
    • 平台特定指南

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)
常见应用类型的可用提示词示例：
  • examples/prompt-templates.md - 模板库
    • 任务管理器（iOS Native）
    • 企业仪表板（WeChat Work）
    • 电商应用（Material Design 3）
    • 管理后台（Ant Design Mobile）
    • 社交应用（跨平台）

Related Skills

相关技能

  • ux-design-gemini - User research and design workflow
  • code-with-codex - UI implementation from specs
  • ux-design-gemini - 用户研究与设计工作流
  • code-with-codex - 基于规格的UI实现

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"
生成iOS应用提示词：
"使用iOS Native设计为[描述]创建原型提示词"
生成Android应用提示词：
"使用Material Design 3为[描述]生成UI规格"
生成企业应用提示词：
"使用WeChat Work组件为[描述]制作设计 brief"
生成跨平台规格：
"使用Material Design设计带响应式Web布局的[描述]"

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)
所有提示词均以Markdown格式交付，包含：
  • 主要章节使用H2标题
  • 组件规格表格
  • 设计令牌代码块（CSS自定义属性）
  • 复杂布局ASCII示意图（如有需要）
  • 参考图片链接（如有帮助）

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.
  • 非代码生成器：仅生成规格，不提供实现代码
  • 需AI执行：提示词为AI代码生成工具（Codex、Claude）设计
  • 需平台专业知识：生成的规格假定用户熟悉目标平台
  • 静态规格：不包含动画时长或微交互（需手动添加）
  • 无视觉原型：仅生成文字描述，不提供视觉设计（需单独使用Figma/Sketch）
如需详细示例与设计系统规格，请参考
references/
和
examples/
目录。