设计 · Use case

Design with AI 全指南:工具对比→设计系统→Claude Skill 固化

TL;DR

  • 谁: 要从「随便出图」升级到可复用设计系统 + Skills 的 Design Engineer。
  • 结果: 一份组件清单 + 强制 spacing/type/color 的 Claude skill + 主流程 UX 测脚本。
  • 工具: Claude Design / ChatGPT / Grok / Paper / Figma Skills 等(按片选栈)。

视频

UI Collective · Design with AI - Full Guide (Tools, Workflows, Design Systems) · 2026-09-15 · 方法提炼自公开教程;Prompt 为站内 RCTCF 改写;嵌入许可需人工复核。

按片内工作流跟练(无字幕(429);据章节+描述重建)。

方法要点

  1. 明确 AI 时代设计师角色(Design Engineer)与期望。
  2. 用同一 Prompt 做多平台输出对比;区分平台≠模型。
  3. 在 Paper AI Canvas / Claude Design 做低保真与迭代。
  4. 用 Mobbin 做研究与客户交付参考。
  5. 把设计方向固化为 Claude skill → 再生成对齐设计系统的输出。
  6. 探索→原型→AI 测 UX→文档 Skills 保持一致性。

步骤 1 · 定义产品与 token

写下 {{PRODUCT}} 与 {{TOKENS}}(间距/字号/色)。 完成标志:token 表可粘贴进 Prompt。

步骤 2 · 同 Prompt 多平台对比

固定 Prompt,对比 2–3 平台输出,记录差异。 完成标志:对比表含「平台 vs 模型」结论。

步骤 3 · 低保真三方向

出 3 个 low-fi 方向,选 1 个深化。 完成标志:选定方向有理由。

步骤 4 · 组件清单 + Claude skill

生成组件清单,并写强制规则的 skill。 完成标志:skill 可安装/粘贴复用。

步骤 5 · UX 测脚本

为主流程写短测脚本并用 AI 辅助走查。 完成标志:测脚本可执行。

步骤 6 · 文档化保持一致

把成功 pattern 写回 Skills/文档。 完成标志:下一需求可套同一系统。

截图位:① 起始界面 ② 关键中间态(脱敏)③ 完成标志验收。

可复制 Prompt

粘贴到 Claude Design / ChatGPT 等。先填 token 再要方向。

Role: 你是 design engineer,输出必须对齐给定 design system tokens。

Context:
- Product: {{PRODUCT}}
- Design system tokens: {{TOKENS}}
- Primary user flow: {{FLOW}}
- Constraints: {{CONSTRAINTS}}

Task:
1) Propose 3 low-fi directions.
2) Pick one and generate a component checklist.
3) Write a Claude skill that enforces spacing/type/color rules.
4) Produce a short UX test script for the primary flow.

Constraints:
- Do not invent tokens; only use {{TOKENS}}.
- Prefer systems over one-off screens.
- Keep the skill copy-paste ready.

Format:
## 3 low-fi directions
## Chosen direction + rationale
## Component checklist
## Claude skill (paste-ready)
## UX test script

来源与版权