Back to Details

ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Designer

UI Designer

Overview

概述

This skill enables systematic extraction of design systems from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create PRD → produce implementation-ready UI prompts.
该Skill能够通过多步骤工作流从参考UI图像中系统性提取设计系统：分析视觉模式 → 生成设计系统文档 → 创建PRD → 生成可直接用于开发的UI设计提示词。

When to Use

使用场景

  • User provides UI screenshots, mockups, or design references
  • Need to extract color palettes, typography, spacing from existing designs
  • Want to generate design system documentation from visual examples
  • Building MVP UI that should match reference aesthetics
  • Creating multiple UI variations following consistent design principles
  • 用户提供UI截图、线框图或设计参考
  • 需要从现有设计中提取调色板、排版、间距规范
  • 希望通过视觉示例生成设计系统文档
  • 构建与参考风格匹配的MVP UI
  • 遵循一致设计原则创建多种UI变体

Workflow

工作流

Step 1: Gather Inputs

步骤1：收集输入

Request from user:
  • Reference images directory: Path to folder containing UI screenshots/mockups
  • Project idea file: Document describing the product concept and goals
  • Existing PRD (optional): If PRD already exists, skip Step 3
向用户请求：
  • 参考图像目录：存放UI截图/线框图的文件夹路径
  • 项目构思文件：描述产品概念与目标的文档
  • 现有PRD（可选）：如果已有PRD，跳过步骤3

Step 2: Extract Design System from Images

步骤2：从图像中提取设计系统

Use Task tool with general-purpose subagent, providing:
Prompt template from 
assets/design-system.md
:
  • Analyze color palettes (primary, secondary, accent, functional colors)
  • Extract typography (font families, sizes, weights, line heights)
  • Identify component styles (buttons, cards, inputs, icons)
  • Document spacing system
  • Note animations/transitions patterns
  • Include dark mode variants if present
Attach reference images to the subagent context.
Output: Complete design system markdown following the template format
Save to: 
documents/designs/{image_dir_name}_design_system.md
使用Task工具及通用子Agent，提供以下内容：
来自
assets/design-system.md
的提示模板：
  • 分析调色板（主色、辅助色、强调色、功能色）
  • 提取排版规范（字体家族、字号、字重、行高）
  • 识别组件样式（按钮、卡片、输入框、图标）
  • 记录间距系统
  • 标注动画/过渡效果模式
  • 若存在深色模式则包含其变体
将参考图像附加到子Agent的上下文中。
输出结果：遵循模板格式的完整设计系统Markdown文档
保存路径：
documents/designs/{image_dir_name}_design_system.md

Step 3: Generate MVP PRD (if not provided)

步骤3：生成MVP PRD（若未提供）

Use Task tool with general-purpose subagent, providing:
Prompt template from 
assets/app-overview-generator.md
:
  • Replace 
    {项目背景}
    with content from project idea file
  • The template guides through: elevator pitch, problem statement, target audience, USP, features list, UX/UI considerations
Interact with user to refine and clarify product requirements
Output: Structured PRD markdown
Save as variable for Step 4 (optionally save to 
documents/prd/
)
使用Task工具及通用子Agent，提供以下内容：
来自
assets/app-overview-generator.md
的提示模板：
  • 用项目构思文件中的内容替换
    {项目背景}
  • 模板将引导完成：电梯游说、问题陈述、目标受众、独特卖点、功能列表、UX/UI注意事项
与用户交互以细化和明确产品需求
输出结果：结构化的PRD Markdown文档
保存为变量用于步骤4（也可选择保存到
documents/prd/
）

Step 4: Compose Final UI Implementation Prompt

步骤4：撰写最终UI开发提示词

Combine design system and PRD using 
assets/vibe-design-template.md
:
Substitutions:
  • {项目设计指南}
    → Design system from Step 2
  • {项目MVP PRD}
    → PRD from Step 3 or provided PRD file
Result: Complete, implementation-ready prompt containing:
  • Design aesthetics principles
  • Project-specific color/typography guidelines
  • App overview and feature requirements
  • Implementation tasks (multiple UI variations, component structure)
Save to: 
documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md
使用
assets/vibe-design-template.md
组合设计系统和PRD：
替换内容：
  • {项目设计指南}
    → 步骤2生成的设计系统
  • {项目MVP PRD}
    → 步骤3生成的PRD或用户提供的PRD文件
最终结果：完整的、可直接用于开发的提示词，包含：
  • 设计美学原则
  • 项目专属的色彩/排版规范
  • 应用概述与功能需求
  • 开发任务（多种UI变体、组件结构）
保存路径：
documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md

Step 5: Verify React Environment

步骤5：验证React环境

Check for existing React project:
bash
find . -name "package.json" -exec grep -l "react" {} \;
If none found, inform user:
bash
npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react
检查是否存在现有React项目：
bash
find . -name "package.json" -exec grep -l "react" {} \;
若未找到，告知用户执行以下命令：
bash
npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

Step 6: Implement UI

步骤6：实现UI

Use the final composed prompt from Step 4 to implement UI in React project.
The prompt instructs to:
  • Create multiple design variations (3 for mobile, 2 for web)
  • Organize as separate components: 
    [solution-name]/pages/[page-name].jsx
  • Aggregate all variations in showcase page
使用步骤4生成的最终提示词在React项目中实现UI。
提示词将指导完成：
  • 创建多种设计变体（移动端3种，网页端2种）
  • 按独立组件组织：
    [solution-name]/pages/[page-name].jsx
  • 在展示页面汇总所有变体

Template Assets

模板资源

assets/design-system.md

assets/design-system.md

Template for extracting visual design patterns. Includes sections for:
  • Color palette (primary, secondary, accent, functional, backgrounds)
  • Typography (font families, weights, text styles)
  • Component styles (buttons, cards, inputs, icons)
  • Spacing system (4dp-48dp scale)
  • Animations (durations, easing curves)
  • Dark mode variants
Use this template when analyzing reference images to ensure comprehensive design system coverage.
用于提取视觉设计模式的模板，包含以下章节：
  • 调色板（主色、辅助色、强调色、功能色、背景色）
  • 排版（字体家族、字重、文本样式）
  • 组件样式（按钮、卡片、输入框、图标）
  • 间距系统（4dp-48dp尺度）
  • 动画（时长、缓动曲线）
  • 深色模式变体
分析参考图像时使用此模板，确保全面覆盖设计系统内容。

assets/app-overview-generator.md

assets/app-overview-generator.md

Template for collaborative PRD generation. Guides through:
  • Elevator pitch
  • Problem statement and target audience
  • Unique selling proposition
  • Platform targets
  • Feature list with user stories
  • UX/UI considerations per screen
Designed for interactive refinement with user to clarify requirements.
用于协作生成PRD的模板，引导完成：
  • 电梯游说
  • 问题陈述与目标受众
  • 独特卖点
  • 平台目标
  • 包含用户故事的功能列表
  • 各页面/交互的UX/UI注意事项
设计用于与用户交互式细化，以明确需求。

assets/vibe-design-template.md

assets/vibe-design-template.md

Final implementation prompt template combining design system and PRD. Includes:
  • Aesthetic principles (minimalism, whitespace, color theory, typography hierarchy)
  • Practical requirements (Tailwind CSS, Lucide icons, responsive design)
  • Task specifications (multiple variations, component organization)
This template produces prompts ready for UI implementation without further modification.
结合设计系统与PRD的最终开发提示词模板，包含：
  • 美学原则（极简主义、留白、色彩理论、排版层级）
  • 实际需求（Tailwind CSS、Lucide图标、响应式设计）
  • 任务规范（多种变体、组件组织）
此模板生成的提示词无需进一步修改即可直接用于UI开发。

Best Practices

最佳实践

Image Analysis

图像分析

  • Read all images before starting analysis
  • Look for patterns across multiple screens
  • Note both explicit styles (colors, fonts) and implicit principles (spacing, hierarchy)
  • Capture dark mode if present in references
  • 开始分析前通读所有图像
  • 寻找跨多个页面的模式
  • 记录显性样式（颜色、字体）和隐性原则（间距、层级）
  • 若参考中存在深色模式则需捕获

Design System Extraction

设计系统提取

  • Be systematic: cover all template sections
  • Use specific values (hex codes, px sizes) not generic descriptions
  • Document the "why" for design choices when inferable
  • Include variants (hover states, disabled states)
  • 系统化操作：覆盖模板所有章节
  • 使用具体值（十六进制代码、像素尺寸）而非通用描述
  • 可推断时记录设计选择的“原因”
  • 包含变体（悬停状态、禁用状态）

PRD Generation

PRD生成

  • Engage user interactively to clarify ambiguities
  • Suggest features based on problem understanding
  • Ensure MVP scope is realistic
  • Document UX considerations per screen/interaction
  • 与用户交互式沟通以澄清歧义
  • 根据对问题的理解建议功能
  • 确保MVP范围切实可行
  • 记录各页面/交互的UX注意事项

Output Organization

输出组织

  • Save design system with descriptive filename (based on image dir name)
  • Save final prompt with timestamp for version tracking
  • Keep all outputs in 
    documents/
    directory for easy reference
  • Preserve intermediate outputs for iteration
  • 使用描述性文件名保存设计系统（基于图像目录名称）
  • 为最终提示词添加时间戳以进行版本追踪
  • 将所有输出保存在
    documents/
    目录中以便查阅
  • 保留中间输出用于迭代和细化

Example Usage

使用示例

User provides:
  • reference-images/saas-dashboard/
    (5 screenshots)
  • ideas/project-management-app.md
    (project concept)
Execute workflow:
  1. Read 5 images from 
    reference-images/saas-dashboard/
  2. Use Task tool → design-system.md template → analyze images
  3. Save to 
    documents/designs/saas-dashboard_design_system.md
  4. Use Task tool → app-overview-generator.md with project concept
  5. Refine PRD through user interaction
  6. Combine design system + PRD using vibe-design-template.md
  7. Save to 
    documents/ux-design/project-management-app_design_prompt_20251025_153000.md
  8. Check React environment, inform user if setup needed
  9. Implement UI using final prompt
用户提供：
  • reference-images/saas-dashboard/
    （5张截图）
  • ideas/project-management-app.md
    （项目构思）
执行工作流：
  1. 读取
    reference-images/saas-dashboard/
    中的5张图像
  2. 使用Task工具 → design-system.md模板 → 分析图像
  3. 保存到
    documents/designs/saas-dashboard_design_system.md
  4. 使用Task工具 → app-overview-generator.md结合项目构思
  5. 通过用户交互细化PRD
  6. 使用vibe-design-template.md组合设计系统+PRD
  7. 保存到
    documents/ux-design/project-management-app_design_prompt_20251025_153000.md
  8. 检查React环境，若未配置则告知用户
  9. 使用最终提示词实现UI

Notes

注意事项

  • This is a high freedom workflow—adapt steps based on context
  • Templates provide structure but encourage thoughtful analysis over rote filling
  • User interaction during PRD generation is critical for quality
  • Final prompt quality directly impacts UI implementation success
  • Preserve all intermediate outputs for iteration and refinement
  • 这是一个高自由度工作流——可根据上下文调整步骤
  • 模板提供结构，但鼓励深度分析而非机械填充
  • PRD生成阶段的用户交互对质量至关重要
  • 最终提示词的质量直接影响UI开发的成功率
  • 保留所有中间输出用于迭代和细化