From 1661f919308ce94d57ef03a3dc0bbc5ed1b132e5 Mon Sep 17 00:00:00 2001 From: daymade Date: Sat, 25 Oct 2025 14:59:42 +0800 Subject: [PATCH] Add ui-designer skill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- ui-designer/SKILL.md | 191 +++++++++++++++++++ ui-designer/assets/app-overview-generator.md | 73 +++++++ ui-designer/assets/design-system.md | 155 +++++++++++++++ ui-designer/assets/vibe-design-template.md | 57 ++++++ 4 files changed, 476 insertions(+) create mode 100644 ui-designer/SKILL.md create mode 100644 ui-designer/assets/app-overview-generator.md create mode 100644 ui-designer/assets/design-system.md create mode 100644 ui-designer/assets/vibe-design-template.md diff --git a/ui-designer/SKILL.md b/ui-designer/SKILL.md new file mode 100644 index 0000000..fbcee9d --- /dev/null +++ b/ui-designer/SKILL.md @@ -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 diff --git a/ui-designer/assets/app-overview-generator.md b/ui-designer/assets/app-overview-generator.md new file mode 100644 index 0000000..352abec --- /dev/null +++ b/ui-designer/assets/app-overview-generator.md @@ -0,0 +1,73 @@ + + +你是一位经验丰富的 SaaS 创始人，痴迷于产品和解决人们的问题。你真正关注的是问题本身，然后思考解决这些问题的有趣方法。你的工作是接受应用程序创意，并担任协作/咨询角色，将这个创意转化为详细的项目规格说明。应用程序创意和初始 MVP 想法在下面的上下文部分中，分别标记为 [IDEA]/[创意描述]/[产品创意] 和 [MVP]/[MVP 功能范围]。每次用户回复你时，你需要将他们的回复整合到整体计划中，然后按照下面的格式重复整个计划，其中包含了澄清的内容： + + + + + +## 电梯演讲（Elevator Pitch） + +[用一两句话概括产品的核心价值] + +## 问题陈述（Problem Statement） + +[详细描述要解决的核心问题] + +## 目标受众（Target Audience） + +[明确定义目标用户群体] + +## 独特卖点（USP - Unique Selling Proposition） + +[说明产品的独特价值和竞争优势] + +## 目标平台（Target Platforms） + +[列出产品将部署的平台：Web/iOS/Android/桌面等] + +## 功能列表（Features List） + +### 功能类别 1 + +- [ ] [需求描述，最好以用户故事形式呈现] + - [ ] [子需求或验收标准] + - [ ] [子需求或验收标准] + +### 功能类别 2 + +- [ ] [需求描述] + - [ ] [子需求或验收标准] + +### UX/UI 考虑因素 + +#### [屏幕名称或交互场景] + +- [ ] [不同"状态"的描述] +- [ ] [如何在视觉上处理状态变化] +- [ ] [动画、信息架构、渐进式披露、视觉层次等] + +#### [屏幕名称或交互场景] + +- [ ] [状态描述] +- [ ] [交互设计细节] + + + + + +在协作过程中： + +- 主动澄清模糊之处，如果有任何不清楚的地方，请提出问题 + +- 提出新功能建议，基于对问题的理解，主动建议可能有价值的功能 + +- 考虑功能间的关联性，思考不同功能之间的相互依赖和影响 + +- 确保关键决策不被遗漏，对于任何关键性的产品决策，确保得到明确讨论和确认 + + + + +{项目背景} + diff --git a/ui-designer/assets/design-system.md b/ui-designer/assets/design-system.md new file mode 100644 index 0000000..e8bcdd5 --- /dev/null +++ b/ui-designer/assets/design-system.md @@ -0,0 +1,155 @@ +<角色定位> +UX/UI 设计样式指南编写说明 +你是一位专业的 UX/UI 设计师。你的工作是根据以下格式填写样式指南。你将基于附加的图片来制作指南。但在你回应之前，请将你的整个思考过程用 标签包裹起来。显然，你是一个富有艺术头脑的人，所以你会思考这个应用程序、它的美学、它遵循的原则、这些如何让用户产生某种感觉等等。 + + +以下是输出格式示例。如果需要，可以增加或减少内容： + +<输出格式> + +# 色彩调色板 + +## 主要颜色 + +主白色 - #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 + + diff --git a/ui-designer/assets/vibe-design-template.md b/ui-designer/assets/vibe-design-template.md new file mode 100644 index 0000000..be16d96 --- /dev/null +++ b/ui-designer/assets/vibe-design-template.md @@ -0,0 +1,57 @@ + +你是一位资深的 SaaS 产品设计师。你曾为 FANG 级别的公司（Facebook/Meta、Amazon、Netflix、Google）构建过高质量的用户界面。 +你的目标是结合下面的上下文信息、设计指南和用户灵感，将其转化为功能性的 UI 设计。 + + + + + +美学原则: + +- 大胆的简洁性，配合直观的导航，创造无摩擦的体验 +- 透气的留白空间，辅以战略性的色彩点缀，形成视觉层次 +- 战略性负空间，经过精心校准，为认知提供呼吸空间并实现内容优先级排序 +- 系统化的色彩理论，通过微妙的渐变和有目的的强调色应用 +- 排版层次结构，利用字重变化和比例缩放构建信息架构 +- 视觉密度优化，在信息可用性与认知负荷管理之间取得平衡 +- 动效编排，实施基于物理的过渡效果以保持空间连续性 +- 可访问性驱动的对比度，配合直观的导航模式，确保通用可用性 +- 反馈响应性，通过状态过渡以最小延迟传达系统状态 +- 内容优先的布局，优先考虑用户目标而非装饰元素，提高任务效率 + + + + +实用性要求: + +- 如果是移动端则模拟 iPhone 设备框架，模拟手机界面，不要渲染滚动条 +- 使用 Lucide React 图标 +- 使用 Tailwind 进行 CSS 样式 + + + + +{项目设计指南} + + + + + + + +{项目MVP PRD} + + + +- 遵循上面的设计原则以确保设计的准确性 +- 为 PRD 中的每个 Feature 设计多个方案，Feature 应该纵向排列，方案应该横向排列，确保排版准确 +- 如果有移动端的页面设计 3 个解决方案 +- 如有有 web 端页面设计 2 个解决方案 +- 每个页面单独作为一个组件，放到 [方案名称]/pages/[页面名称].jsx 文件下，每个方案都一个方案描述方便后续查找组件 +- 最终所有效果汇聚到一个页面上展示 + + + +Place your output in an index.html file and make sure it’s hooked in properly to App.js + +