# Design Maker

> （可选技能）为 0→1 产品或产品变更绘制 UI 页面原型、线框图与交互状态设计稿，输出全局变量、组件和空/加载/错误等核心变体。仅在设计产物能降低开发不确定性时使用；不用于恢复既有视觉行为的维护任务。

- Skill: `arctan303/design-maker` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add arctan303/design-maker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/arctan303/design-maker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: arctan303 (https://skillmd.com/u/arctan303)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/arctan303/design-maker

---


# 设计制图技能 (design-maker)

## Purpose

用最小必要的视觉产物消除页面结构、关键状态和交互上的开发不确定性。

## Trigger

- UI、布局、交互或品牌表达会显著影响开发计划。
- 用户需要在开发前检查关键页面或状态。
- Product Spec 和 Design Brief 已稳定，但文字仍不足以指导实现。

没有明显界面、常规 UI 可直接计划或设计只会增加装饰时跳过。

## Required context

- 当前相关需求与设计规则（复用 Spec/Design Brief、等价文档或明确确认）。
- 页面/流程范围、目标平台和响应式约束。
- 用户提供的截图、品牌资产、参考图或原型资料。

## Workflow

1. 映射需要视觉决策的关键流程和验收标准。
2. 选择线框图、高保真稿或实现注释中的最小充分产物。
3. 覆盖默认、空、加载、错误、成功和关键交互状态。
4. 标注全局变量、组件复用、响应式规则和与文档的映射。
5. 检查产物没有擅自扩大产品范围。

## Output

- 页面或流程清单。
- 关键布局、状态、交互与响应式规则。
- 设计稿、线框图或实现注释。
- 留给开发阶段处理的明确细节。

## Stop or escalate

- 相关需求或设计选择缺失且影响产物：补齐必要输入，不因缺少同名文档返回。
- 必要页面、流程或风格仍不稳定：返回前序阶段。
- 设计要求新增产品范围：升级为产品变更。
- 缺少品牌、内容或布局依据却要求高保真定稿：停止并说明缺口。

## References

执行前读取 [stage-contract.md](references/stage-contract.md)。