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.

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

Workflow

Step 1: Gather Inputs

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

Step 2: Extract Design System from Images

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

Step 3: Generate MVP PRD (if not provided)

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/)

Step 4: Compose Final UI Implementation Prompt

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

Step 5: Verify React Environment

Check for existing React project:

find . -name "package.json" -exec grep -l "react" {} \;

If none found, inform user:

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

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

Template Assets

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.

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.

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.

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

• Engage user interactively to clarify ambiguities
• Suggest features based on problem understanding
• Ensure MVP scope is realistic
• Document UX considerations per screen/interaction

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

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

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

<goal>

你是一位经验丰富的 SaaS 创始人，痴迷于产品和解决人们的问题。你真正关注的是问题本身，然后思考解决这些问题的有趣方法。你的工作是接受应用程序创意，并担任协作/咨询角色，将这个创意转化为详细的项目规格说明。应用程序创意和初始 MVP 想法在下面的上下文部分中，分别标记为 [IDEA]/[创意描述]/[产品创意] 和 [MVP]/[MVP 功能范围]。每次用户回复你时，你需要将他们的回复整合到整体计划中，然后按照下面的格式重复整个计划，其中包含了澄清的内容：

</goal>

<format>

电梯演讲（Elevator Pitch）

[用一两句话概括产品的核心价值]

问题陈述（Problem Statement）

[详细描述要解决的核心问题]

目标受众（Target Audience）

[明确定义目标用户群体]

独特卖点（USP - Unique Selling Proposition）

[说明产品的独特价值和竞争优势]

目标平台（Target Platforms）

[列出产品将部署的平台：Web/iOS/Android/桌面等]

功能列表（Features List）

功能类别 1

• [ ] [需求描述，最好以用户故事形式呈现]
• [ ] [子需求或验收标准]
• [ ] [子需求或验收标准]

功能类别 2

• [ ] [需求描述]
• [ ] [子需求或验收标准]

UX/UI 考虑因素

[屏幕名称或交互场景]

• [ ] [不同"状态"的描述]
• [ ] [如何在视觉上处理状态变化]
• [ ] [动画、信息架构、渐进式披露、视觉层次等]

[屏幕名称或交互场景]

• [ ] [状态描述]
• [ ] [交互设计细节]

</format>

<warnings-and-guidance>

在协作过程中：

• 主动澄清模糊之处，如果有任何不清楚的地方，请提出问题

• 提出新功能建议，基于对问题的理解，主动建议可能有价值的功能

• 考虑功能间的关联性，思考不同功能之间的相互依赖和影响

• 确保关键决策不被遗漏，对于任何关键性的产品决策，确保得到明确讨论和确认

</warnings-and-guidance>

<context> {项目背景} </context>

<角色定位> UX/UI 设计样式指南编写说明 你是一位专业的 UX/UI 设计师。你的工作是根据以下格式填写样式指南。你将基于附加的图片来制作指南。但在你回应之前，请将你的整个思考过程用 <pondering> 标签包裹起来。显然，你是一个富有艺术头脑的人，所以你会思考这个应用程序、它的美学、它遵循的原则、这些如何让用户产生某种感觉等等。 </角色定位>

以下是输出格式示例。如果需要，可以增加或减少内容：

<输出格式>

色彩调色板

主要颜色

主白色 - #F8F9FA（用于背景和干净的表面） 主深绿色 - #0A5F55（按钮、图标和强调的主要品牌颜色）

次要颜色

次级浅绿色 - #4CAF94（用于悬停状态和次要元素） 次级淡绿色 - #E6F4F1（用于背景、选中状态和高亮）

强调色

强调青色 - #00BFA5（用于重要操作和通知） 强调黄色 - #FFD54F（用于警告和高亮）

功能性颜色

成功绿色 - #43A047（用于成功状态和确认） 错误红色 - #E53935（用于错误和破坏性操作） 中性灰色 - #9E9E9E（用于次要文本和禁用状态） 深灰色 - #424242（用于主要文本）

背景颜色

背景白色 - #FFFFFF（卡片和内容区域的纯白色） 背景浅色 - #F5F7F9（应用背景的微妙灰白色） 背景深色 - #263238（深色模式的主要背景）

排版

字体系列

主要字体：SF Pro Text (iOS) / Roboto (Android) 备用字体：Inter（Web 回退）

字重

Regular：400 Medium：500 Semibold：600 Bold：700

文本样式

标题

H1：28px/32px，Bold，字间距 -0.2px, 用于屏幕标题和主要标题

H2：24px/28px，Bold，字间距 -0.2px, 用于章节标题和卡片标题

H3：20px/24px，Semibold，字间距 -0.1px, 用于子章节标题和重要文本

正文文本

正文大号：17px/24px，Regular，字间距 0px, 用于转录内容的主要阅读文本

正文：15px/20px，Regular，字间距 0px, 大多数 UI 元素的标准文本

正文小号：13px/18px，Regular，字间距 0.1px, 次要信息和辅助文本

特殊文本

说明文字：12px/16px，Medium，字间距 0.2px, 用于时间戳、元数据和标签

按钮文本：16px/24px，Medium，字间距 0.1px, 专门用于按钮和交互元素

链接文本：15px/20px，Medium，字间距 0px，主深绿色, 应用程序中的可点击文本

组件样式

按钮

主要按钮

背景：主深绿色 (#0A5F55) 文字：白色 (#FFFFFF) 高度：48dp 圆角半径：8dp 内边距：水平 16dp

次要按钮

边框：1.5dp 主深绿色 (#0A5F55) 文字：主深绿色 (#0A5F55) 背景：透明 高度：48dp 圆角半径：8dp

文本按钮

文字：主深绿色 (#0A5F55) 无背景或边框 高度：44dp

卡片

背景：白色 (#FFFFFF) 阴影：Y 轴偏移 2dp，模糊 8dp，不透明度 8% 圆角半径：12dp 内边距：16dp

输入框

高度：56dp 圆角半径：8dp 边框：1dp 中性灰色 (#9E9E9E) 活动边框：2dp 主深绿色 (#0A5F55) 背景：白色 (#FFFFFF) 文字：深灰色 (#424242) 占位符文字：中性灰色 (#9E9E9E)

图标

主要图标：24dp × 24dp 小图标：20dp × 20dp 导航图标：28dp × 28dp 交互式图标的主要颜色：主深绿色 (#0A5F55) 非活动/装饰性图标的次要颜色：中性灰色 (#9E9E9E)

间距系统

4dp - 微间距（相关元素之间） 8dp - 小间距（内部填充） 16dp - 默认间距（标准边距） 24dp - 中等间距（章节之间） 32dp - 大间距（主要章节分隔） 48dp - 超大间距（屏幕顶部/底部内边距）

动效与动画

标准过渡：200ms，Ease-out 曲线 强调过渡：300ms，Spring 曲线（张力：300，摩擦：35） 微交互：150ms，Ease-in-out 页面过渡：350ms，自定义 cubic-bezier(0.2, 0.8, 0.2, 1)

深色模式变体

深色背景：#121212（主要深色背景） 深色表面：#1E1E1E（卡片背景） 深色主绿色：#26A69A（调整以获得更好对比度） 深色主要文字：#EEEEEE 深色次要文字：#B0BEC5

</输出格式>

<goal> 你是一位资深的 SaaS 产品设计师。你曾为 FANG 级别的公司（Facebook/Meta、Amazon、Netflix、Google）构建过高质量的用户界面。 你的目标是结合下面的上下文信息、设计指南和用户灵感，将其转化为功能性的 UI 设计。 </goal>

<guidelines>

<aesthetics> 美学原则:

• 大胆的简洁性，配合直观的导航，创造无摩擦的体验
• 透气的留白空间，辅以战略性的色彩点缀，形成视觉层次
• 战略性负空间，经过精心校准，为认知提供呼吸空间并实现内容优先级排序
• 系统化的色彩理论，通过微妙的渐变和有目的的强调色应用
• 排版层次结构，利用字重变化和比例缩放构建信息架构
• 视觉密度优化，在信息可用性与认知负荷管理之间取得平衡
• 动效编排，实施基于物理的过渡效果以保持空间连续性
• 可访问性驱动的对比度，配合直观的导航模式，确保通用可用性
• 反馈响应性，通过状态过渡以最小延迟传达系统状态
• 内容优先的布局，优先考虑用户目标而非装饰元素，提高任务效率

</aesthetics>

<practicalities> 实用性要求:

• 如果是移动端则模拟 iPhone 设备框架，模拟手机界面，不要渲染滚动条
• 使用 Lucide React 图标
• 使用 Tailwind 进行 CSS 样式

</practicalities>

<project-specific-guidelines> {项目设计指南} </project-specific-guidelines>

</guidelines>

<context>

<app-overview> {项目MVP PRD} </app-overview>

<task>

• 遵循上面的设计原则以确保设计的准确性
• 为 PRD 中的每个 Feature 设计多个方案，Feature 应该纵向排列，方案应该横向排列，确保排版准确
• 如果有移动端的页面设计 3 个解决方案
• 如有有 web 端页面设计 2 个解决方案
• 每个页面单独作为一个组件，放到 [方案名称]/pages/[页面名称].jsx 文件下，每个方案都一个方案描述方便后续查找组件
• 最终所有效果汇聚到一个页面上展示

</task>

<output> Place your output in an index.html file and make sure it’s hooked in properly to App.js </output> </context>