66 lines
2.5 KiB
Markdown
66 lines
2.5 KiB
Markdown
---
|
||
name: designer-design-spec
|
||
description: 当 NianCode 美术设计师角色为学习者软件项目研究或定义 UI/UX 视觉方向、设计规则、布局、颜色、字体、无障碍、响应式行为和设计质检时使用。
|
||
---
|
||
|
||
# 设计规范
|
||
|
||
使用这个 skill，把项目计划和原型 Demo 转成开发工程师和市场运营都能遵循的清晰视觉规则。
|
||
|
||
## 给学生看的说话规则
|
||
|
||
必须使用 `youth-plain-language`。设计建议要翻译成看得见的规则，不只说“高级”“好看”“统一”；要说明颜色、文字、按钮和布局应该怎么做。
|
||
|
||
## 工作流程
|
||
|
||
1. 阅读项目目标、受众、第一版范围和原型 Demo。
|
||
2. 选择适合学习者项目的视觉方向，不套用泛泛风格。
|
||
3. 基于原型流程定义颜色、字体、间距、布局、组件和状态。
|
||
4. 包含响应式和无障碍规则。
|
||
5. 交接前指出风险。
|
||
|
||
## 设计保护规则
|
||
|
||
- 先理解产品目标、学习者范围和原型流程，再选择风格。
|
||
- 把视觉偏好转成可实现规则：明确色彩角色、字号层级、间距、组件状态和布局行为。
|
||
- 区分必须遵守的规则和可选打磨项。
|
||
- 交接前标出对比度、溢出、触控区域太小、固定宽布局、文字不可读等风险。
|
||
- 不要要求下一位角色“做得好看”，要给出可以执行的规则。
|
||
|
||
## UI/UX 课程质量
|
||
|
||
**必须使用的子 skill：** 交接设计规范前，使用 `ui-ux-course-quality`。
|
||
|
||
当无障碍、触控与交互、响应式布局、字体与颜色、状态反馈会影响产品流程时，设计规范必须覆盖这些内容。如果某项不相关，要简短说明原因，不要默认省略。
|
||
|
||
## 必须输出
|
||
|
||
返回设计规范，包含：
|
||
|
||
1. 设计方向
|
||
2. 参考关键词
|
||
3. 色彩规则
|
||
4. 字体和层级
|
||
5. 页面布局
|
||
6. 组件规则
|
||
7. 交互状态
|
||
8. 响应式和可访问性要求
|
||
9. UI/UX 质量检查
|
||
10. 给开发工程师的交付说明
|
||
|
||
## 纠偏清单
|
||
|
||
出现这些情况时纠偏：
|
||
|
||
- 设计只有装饰效果，没有支撑产品目标。
|
||
- 配色使用了太多无关颜色。
|
||
- 文字对比度或按钮状态不清楚。
|
||
- 布局只依赖固定桌面尺寸。
|
||
- 设计规范只说“可爱一点”或“现代一点”，没有具体规则。
|
||
|
||
用可实现规则替代模糊风格词。
|
||
|
||
## 交接
|
||
|
||
交接给开发工程师时，提供与原型一致的页面结构、组件规则、状态和视觉约束。如果原型缺少关键页面或操作，先请产品经理修补原型，再定稿设计规范。
|