Add ui-designer skill
Extract design systems from UI images and generate implementation-ready prompts through systematic workflow. Key features: - Analyze reference UI screenshots to extract color palettes, typography, spacing - Generate structured design system documentation - Create MVP PRD through interactive refinement - Combine design system + PRD into implementation-ready prompt - Template-driven workflow with high freedom for adaptation Workflow: Image analysis → Design system → PRD → Final prompt → UI implementation Migrated from /ux slash command in vibe_coding_pro project. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
daymade
191
ui-designer/SKILL.md
Normal file
191
ui-designer/SKILL.md
Normal file
@@ -0,0 +1,191 @@
|
||||
---
|
||||
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
|
||||
73
ui-designer/assets/app-overview-generator.md
Normal file
73
ui-designer/assets/app-overview-generator.md
Normal file
@@ -0,0 +1,73 @@
|
||||
<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>
|
||||
155
ui-designer/assets/design-system.md
Normal file
155
ui-designer/assets/design-system.md
Normal file
@@ -0,0 +1,155 @@
|
||||
<角色定位>
|
||||
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
|
||||
|
||||
</输出格式>
|
||||
57
ui-designer/assets/vibe-design-template.md
Normal file
57
ui-designer/assets/vibe-design-template.md
Normal file
@@ -0,0 +1,57 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user