1661f91930
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>
156 lines
4.0 KiB
Markdown
156 lines
4.0 KiB
Markdown
<角色定位>
|
||
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
|
||
|
||
</输出格式>
|