ui-designer

어떤 스킬인가요?

Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

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

---
name: ui-designer
description: Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
---

# 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:
```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
```

### 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