ux-design-from-scratch

从零开始设计（UX 创建编排器）技能

此技能的工作方式（请先阅读）

这是从零构建设计的入口，也是 ux-design-review 的生成式对应技能。ux-design-review 编排的是验证方向（生成 → 审查），而此技能编排的是组合方向（生成 → 生成）：它按需引入各个较低层级的技能，依次推进范围阶梯——基础 → 组件 → 屏幕 → 流程，然后将结果交给 design-review 进行验证。

这是 docs/orchestration-policy.md 中组合式编排章节的可执行形式。它的全部职责是避免两种失败：在没有底层系统支撑的情况下只构建一个屏幕，以及过度构建所有内容（全部基础项和全部 12 个组件），而产品实际上只需要其中几项。

**以下情况不要使用此技能：**如果用户要求某个具体产物（“设计一个定价页面”“构建一个日期选择器”），就让相应技能直接触发。此编排器适用于从零开始构建多个产物。明确指定的范围优先于编排。

---

步骤 0 — 确定上下文配置（一次即可）

这里最重要的字段，是审查场景的反向情况：

• 是否已有设计系统？真正从零开始构建时，答案通常是没有 → 基础技能在范围内，且应最先执行。如果用户已经有设计令牌或风格指南，则跳过基础部分，从组件/屏幕开始，并沿用其系统（将抑制矩阵应用于创建过程）。
• 要构建什么——带有配套系统的单个屏幕、小型流程，还是完整产品界面？这决定了要沿阶梯深入到哪个层级，以及要组合多少个屏幕/组件。
• 平台——移动端还是 Web（会影响布局、触控目标和导航模式）。
• 品牌 / 受众 / 行业——决定基础和屏幕技能中的条件性决策（色彩情绪、语气、安全策略）。

说明你将采用的假设，然后按顺序构建。

---

步骤 1 — 逐级组合阶梯，并在每一级进行筛选

从上到下沿阶梯推进。在每一级，将子技能归类为核心 / 提供 / 跳过（参见策略中的组合模型）——不要默认应用该级的所有技能。

子技能以其可安装技能的 name 命名。只有在已安装时才组合使用；如果缺少某个指定技能，就根据一般最佳实践在线应用该级的意图，并指出这一缺失，而不要因此阻止构建。

第 1 级 — 基础（仅在没有设计系统时）

先建立系统，确保其上的所有内容保持一致：

• 核心：ux-color、ux-typography、 ux-layout-spacing-grids——产品需要先有调色板、字体比例和间距系统，屏幕才有意义。
• 提供：ux-iconography（适用于图标较多的产品）。
• 如果已有设计系统，则完全跳过——沿用其设计令牌。

每个基础技能仍会对自身依赖上下文的决策进行筛选（不要自动选择深色模式、品牌饱和度等）。

第 2 级 — 组件（仅限屏幕所需组件）

根据正在构建的屏幕按需引入组件技能——而不是全部引入：

• 包含表单的屏幕 → ux-inputs-and-forms、ux-buttons、 ux-selection-controls。
• 数据屏幕 → ux-tables、ux-search。
• 覆盖层/反馈 → ux-modals-and-dialogs、 ux-notifications-and-toasts、ux-loaders-and-progress。
• 导航 → ux-navigation、ux-menus。

为了“以防万一”而构建每一种组件技能，就是盲目跟风的错误——只组合用户所需屏幕中实际包含的组件。

第 3 级 — 屏幕（用户要求的交付物）

使用相关技能构建所需屏幕（ux-login-signup、 ux-pricing、ux-dashboard、ux-settings、ux-empty-states、 ux-landing-page、ux-activity-feed、ux-contact-support）。每种 屏幕技能都会处理自身依赖上下文的杠杆，并复用上述基础和组件，而不是重新做决定。

第 4 级 — 流程（如果构建内容跨越多个屏幕，形成一段旅程）

如果产品需要一段用户旅程，请组合流程技能（ux-onboarding、 ux-checkout-payment、ux-error-recovery、ux-offboarding），将 屏幕编排成连贯的路径。

一致性规则： 在较低层级做出的决定会向上延续。在基础层确定一次的颜色／间距决策 应由每个组件和屏幕复用，不要针对每个 屏幕反复讨论。这正是自底向上构建的全部意义。

---

第 2 步 — 通过 design-review 进行验证

交付物完成后，将其交给 ux-design-review（如果已安装），由其应用 审查策略（Tier A 自动运行；Tier B 提供选用；而且由于你刚刚构建了基础层， 视觉基础审查属于此处的范围，不会被跳过——全新的设计系统值得检查）。将发现的问题 逐一解决，确保仍聚焦于主要任务。如果未安装 ux-design-review， 则直接运行当前可用的审查项，或按照策略自行审查。

---

常见的正确／错误做法

❌ 不要	✅ 应该
没有颜色／字体／间距系统就直接着手设计屏幕	先建立基础（如果尚无现成的设计系统）
为保险起见构建全部 12 种组件技能	只组合所需屏幕实际包含的组件
在每个屏幕中重新决定颜色／间距	在基础层一次决定，然后向上复用
针对单个已命名的屏幕／组件运行此编排器	直接触发对应技能（明确的范围优先）
因为“屏幕看起来没问题”就跳过基础	没有底层系统支撑的屏幕不算设计，只是模型图
生成后就宣布完成	交由 design-review 验证

---

与策略的关系

此技能以可执行形式呈现了 docs/orchestration-policy.md 中的组合编排部分。如果二者 存在差异，以策略为准；更新此技能，使其与策略保持一致。与之配套的 验证技能是 ux-design-review。

来源课程（Uxcel）

这是一个编排器——其核心内容存在于它所组合的技能中。请参阅它所路由到的每个基础、 组件、屏幕和流程技能中的来源课程（例如 ux-color、ux-inputs-and-forms、ux-pricing、 ux-onboarding）。