Design Skill Lab设计技能实验室
GitHub

让 agent 当设计师，把搭建留给实现者

给设计师和设计工程师的三件 skill，按一间设计工作室分工：design-studio 读需求、出方向、定系统、画出每一种状态，渲染出来自己看；critique-design 在全新的上下文里挑错、打分、验收；implement-design 只在设计已经存在时上场，把它在你的技术栈里做出来。

装进 Claude Code

  1. /plugin marketplace add caocong1/design-skill-lab
  2. /plugin install design-skill-lab@design-skill-lab

装好后直接说需求，不用点名哪件 skill；下面每张卡片里的例句都可以直接用。

Codex 或手动安装、从 0.7.x 升级

设计师

design-studio critique-design

决定、绘制、规定、交接、评审。懂技术栈能让交接更好做，但不是前提。

交接包：边界在这里

规格、handoff.json、按状态截的图、token、验收标准。实现者照它搭建，不必猜。

实现者

implement-design 或你的开发者

在目标技术栈里搭建，用构建截图证明还原度；稿子有缺口就退回设计师，不自己发挥。

稿子用 HTML/CSS/SVG 按目标的逻辑尺寸画，渲染成 PNG 再看；Web、iOS、Android、鸿蒙、小程序、桌面都用这一种媒介。宿主有图像模型时，可以另走一条出图通道（方向草图、照片级素材），但要记下模型、提示词、日期和授权，契约仍是 HTML。

工单

一件活在 design-studio 里走的工序：主线是设计循环，细线通向参考文件；第 9 道转交 critique-design 校对，第 11 道转交 implement-design 付印。

按力度看

deep：full、redesign、多个界面或平台。跑满整个循环，方向和评审交给互相隔离的子代理。

design-studio 的工单 一件活在 design-studio 里走的工序，顺时针：1 看宿主、2 真相文件、3 调研、4 发散、5 收敛、6 系统、7 绘制、8 渲染与底线检查（打样）、9 新会话评审（校对）、10 拔高、11 交付或交接（付印）、12 复盘，复盘回到入口。细线通向参考文件：第 1 站到 process，第 6 站到 fundamentals，第 7 站到 disciplines 和 platforms。第 9 道转交 critique-design（证据、判断、实测、复核、定论）；第 11 道转交 implement-design（看宿主、落 token、搭建、截图核对、验收），验收再转交 critique-design。下方的工序表列出同样的内容和每道工序要读的文件。 references/process/ 每一步怎么做：真相文件、调研、方向、重设计、系统、渲染核对、交接、出图 How each step runs How each step runs: truth files, research, directions, redesign, system, token formats, render and look, handoff, the image lane references/fundamentals/ 不会过时的底子：排版、中文排版、色彩、布局、材质、现代 CSS、无障碍、去套路、授权 The durable basics that outlast any trend The durable basics: type, CJK type, colour, layout and spacing, materials, modern CSS, accessibility, anti-slop, licences, portable mockups references/disciplines/ 画的是什么：界面、 数据密集界面、AI 体验、 官网、动效、图标、品牌、平面 What you are drawing What you are drawing: product UI, data-dense UI, AI experience, marketing sites, motion, icons, brand, graphics references/platforms/ 跑在哪里：iOS、Android、 鸿蒙、小程序、桌面、Web、 嵌入式宿主 Where it runs Where it runs: iOS, Android, HarmonyOS, mini-programs, desktop, web, embedded hosts critique-design fresh-eye review 证据 Evidence 判断 Judge (A) 实测 Measure (B) 复核 Vet 定论 Verdict implement-design build from the handoff 验收转交 critique-design acceptance mode 看宿主 Inspect host 落 token Land tokens 搭建 Build 截图核对 Verify by looking 验收 Acceptance 工单 Job ticket: the loop, clockwise 1 看宿主 Inspect host 2 真相文件 Truth files 3 调研 Research 4 发散 Diverge 5 收敛 Converge 6 系统 System 7 绘制 Draw 8 渲染·底线 Render + floor 打样Proof 9 新会话评审 Fresh critique 校对Correct 10 拔高 Elevate 11 交付·交接 Deliver, hand off 付印Print 12 复盘 Retro design-studio 排字Compose 入口：定模式与力度 Entry: mode and effort
主线：design-studio 的设计循环 一道工序，数字是顺序 转交后的另一件 skill 细线：参考文件 校对：转交 critique-design 当前力度跳过的工序

工序

  1. 1

    看宿主

    品牌、token、组件库、字体、图标、惯例、目标平台。宿主已有的设计系统就是系统。

    读 truth-files

    这一档跳过

  2. 2

    真相文件

    PRODUCT.md、带设计判读的 brief、每个界面一份契约。重设计时先写功能图，再看现有界面。

    读 truth-files redesign

    这一档跳过

  3. 3

    调研

    收集、截图、拼联系表、看、拆成能用的招式；资源从目录里查。

    读 research 资源目录

    这一档跳过

  4. 4

    发散

    点破这一类产品的套路和它的反面，找它自己世界里的参照，按种子抽签，每个方向一个子代理，拼成方案板。

    读 directions

    这一档跳过；加 options 时补上

  5. 5

    收敛

    用户挑一个、混搭或全部否掉；连同种子记进 decisions.md。

    读 directions

    这一档跳过；加 options 时补上

  6. 6

    系统

    DESIGN.md 和 token；宿主已有设计系统就原地更新，不另起一份。

    读 system token-formats

    这一档跳过

  7. 7

    绘制

    按界面契约、按逻辑尺寸画，适用的每一种状态都画出来。

    读 disciplines platforms portable-mockups

    这一档跳过

  8. 8

    渲染与底线检查

    截图、lint、算对比度，按有限的轮次核对。没看过的如实写“未验证”。

    读 render-and-look accessibility

    这一档跳过

  9. 9

    新会话评审

    critique-design 在子代理里评审：只拿 brief、契约和截图清单，拿不到作者的推理。

    转交 critique-design

    quick 只做底线和启发式自查

  10. 10

    拔高

    先修 P0 和 P1；再把契约里那个值得记住的点做两版加强，让评审挑。

    这一档跳过

  11. 11

    交付或交接

    理由、被否掉的方案、这份设计不打算做什么、授权清单；要交给别人实现就出交接包。

    读 handoff

    转交 implement-design

    这一档跳过

  12. 12

    复盘

    静默收尾：被纠正、失败或缺东西时记一条反馈，回到入口，下一轮更准。

    读 feedback

    这一档跳过

细线的终点：参考文件

开工前只读 SKILL.md 加至多两份参考：这个模式的 process 文件，和这个界面需要的那一份 discipline 或 platform 文件。其余的到了用它的那一站再读。

process/ 每一步怎么做

disciplines/ 画的是什么

platforms/ 跑在哪里

fundamentals/ 不会过时的底子

另有 casebook（渲染出了错、又没有哪条规则能解释时查）和 catalog/（由资源目录生成，用 scripts/catalog.py 查）。

三件 skill

拿不准交给哪一件，就直接说需求：design-studio 是入口，需要评审时它会另开会话交给 critique-design。

排字

design-studio

所有设计需求的入口，从需求一路做到交接。

用在
  • 新做或重做：整个产品、一页、一屏、一个组件或流程
  • 动效、图标、App 图标、Logo、海报、社交图、演示稿
  • 要几套方案来挑，要灵感和参考拆解，要交接规格、标注和切图
产出
PRODUCT.md、brief、方案板、DESIGN.md 与 token、各种状态的界面稿、交接包；每一版都渲染过、看过。
不用于
评审已有的设计或实现（交给 critique-design）；照已有的稿子写代码（交给 implement-design）；不涉及设计决定的前端 bug。
迭代口令
bolderquieterdistillhardenclarifytypesetrecomposecolorizestreamlinedelight

可以这样说

“给这个运维后台出三套方向，我挑一套，再做成设计系统和交接包。”

“Redesign our settings flow for iOS 26. Start from what it does, not from the current screens.”

读 SKILL.md（GitHub）

校对

critique-design

新鲜眼光的评审、打分和验收，最好在全新的子会话里跑。

用在
  • 评审网站、界面、流程、组件、品牌物料或演示稿；截图、URL、mockup、Figma 导出都行
  • 无障碍（WCAG 2.2）检查、体验走查、设计 QA
  • 拿交接截图验收一个实现，查还原度
  • design-studio 第 9 站派出来的新会话评审
产出
按严重程度（P0–P3）和证据等级排好的问题，每条写成 Before | After | Why，附截图；评分表分数；处置：ship、fix、rebuild 或 recapture。
流程
证据 → 判断（先凭眼睛）→ 实测（lint、对比度、截图）→ 复核 → 定论
不用于
新做或重做设计（design-studio）；在代码里修（implement-design）；没有视觉问题的代码评审。

可以这样说

“评审一下这个页面，按严重程度列问题，每条附截图证据。”

“Check this build against the handoff screenshots and tell me whether it can ship.”

读 SKILL.md（GitHub）

付印

implement-design

设计已经存在时，把它在你的技术栈里做出来，用截图证明做对了。

用在
  • 手上有交接包、HTML/CSS mockup、Figma 画板或定稿 PNG，要落进项目
  • React、Vue、Tailwind、Ant Design、uni-app、Flutter、SwiftUI、Compose、ArkUI、小程序等
  • 实现跑偏了，要照设计稿修回来
产出
落进宿主主题的 token 和映射表、每种状态都能打开的实现、和设计截图并排的构建截图、验收报告、视觉回归基线，以及偏差和规格缺口清单。
流程
看宿主 → 落 token → 搭建 → 截图核对 → 验收（交给 critique-design，不自己给自己打分）
不用于
决定或改进设计、UI 润色、整体优化、从零先设计再实现、切图标注（design-studio）；只出报告不修（critique-design）。

可以这样说

“按 .design/handoff/orders 的交接包，用 Next.js 和 Tailwind 实现，再按截图验收。”

“Build this Figma frame in SwiftUI and prove it matches the handoff shots.”

读 SKILL.md（GitHub）

真实产物

这套方法用在本站自己身上时交出的东西，都标日期。implement-design 还没有公开的实例。

design-studio

  1. 本站设计 brief

    读者、任务、使用场景、约束，以及必须避开的套路。

  2. 方向板：按种子抽出的三个方向

    同一份数据排三次；缩到 600px 宽，结构仍各不相同。

三个方向的首页首屏并排：A 标本馆、B 选型表、C 字架

critique-design

  1. 新会话评审本站：没过门槛

    5 个 P1，工艺、排版、无障碍各 2 分；这一版照它改。

  2. 盲评与决定：C 字架胜出

    抽签领先的 B 身份感只得 1 分，出局。

评审截下的旧资源列表：每条左边一张 120px 宽的网站截图
删改前，评审的截图：每条带一张 120px 宽的截图，一屏三条半。
改后的资源列表：只排字，同样的高度放下三条多
改改后：列表只排字，截图留在图版和批注里。

模式与力度

design-studio 先判断你要的是哪种模式，再按范围挑力度，并在设计判读里说出来。

模式 × 力度
模式用户要的力度
full从需求做出完整设计先读：truth-filesdeep
piece一页、一屏、一个组件、流程、动效、图标或一张图先读：对应的 discipline 文件quickstandard
options几套方案来挑；可以叠加在任何模式上先读：directions在当前力度上加第 4、5 站
inspire参考、拆解、风格 DNA，给现有产品找点子先读：researchstandard
critique诚实的评审和修改计划先读：critique-design交给 critique-design
redesign从产品做什么出发，整个重想先读：redesigndeep
handoff任何实现者都能照着做的交接包先读：handoffstandard
implement同一个 agent 接着把它做出来先读：精简交接（截图 + token），再 implement-designstandard

力度阶梯

  1. quick 一个组件、图标、小改、单张图

    读 → 画 → 渲染 → 底线 → 交付。至多读一份参考，不主动出多套方案。

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9
    10. 10
    11. 11
    12. 12

  2. standard 一屏、一页、一个流程、品牌物料、inspire、交接

    quick 之上加：看过参考、一片系统（token）、新会话评审、一轮拔高。

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9
    10. 10
    11. 11
    12. 12

  3. deep full、redesign、多个界面或平台

    跑满整个循环；方向和评审交给互相隔离的子代理。

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9
    10. 10
    11. 11
    12. 12

用户要多套方案、或改动碰到导航和多个界面时往上走一档；用户说要快、或宿主的设计系统已经替你定了大部分时往下走。

核对有上限：先全部做完，然后一轮批量截图、一批修复、至多一轮确认；到此为止，剩下的如实说明。

“整体 UI 优化”“全站优化”“改版”“重新设计”是 redesign，不是润色；只有点名的一页或一个组件、改动有边界，才算 piece。

产出目录

产物都放进项目里的 .design/，每个文件都有一份模板可抄：抄结构，不抄里面的值。

.design/

  • PRODUCT.md0.8.0 新增产品的长期事实templates/PRODUCT.md
  • brief.md设计判读、参照、约束templates/brief.md
  • function-map.md对象、动作、频率templates/function-map.md
  • decisions.md决定、方案、理由、种子templates/decisions.md
  • surfaces/<surface>.md0.8.0 新增每个界面一份契约templates/surface-contract.md
  • inspiration/<topic>/笔记、截图、联系表
  • directions/<round>/方案板 index.html 和方向卡templates/options-board.html, direction-card.md
  • system/DESIGN.md、token、preview.htmltemplates/DESIGN.md, tokens.css, tokens.resolver.json
  • screens/ motion/ icons/ brand/ graphics/各类产物，附源文件
  • handoff/<feature>/规格、handoff.json、截图、mockup、素材、验收报告templates/handoff-spec.md, handoff.json, acceptance-report.md
  • critique/<date>-<target>/0.8.0 新增评审报告和精选的证据截图，入库
  • shots/批量截图，不入库（gitignore）

宿主已有的约定优先：design/、docs/design/、.stitch/，或 AGENTS.md、CLAUDE.md 里的说明。

宿主已有的设计系统（DESIGN.md、token 文件、主题化的组件库）原地更新，不在 .design/system/ 里另起一份。

brief 和 decisions 写短；quick 的活可以直接在对话里交。

看全部模板（GitHub）

评测

同一个模型、同一组固定 brief，装和不装套件对照：首轮三组（不装 skill、装 0.7.0、装 0.8.0），一格一个样本；第二轮两组（不装 skill、装 0.8.1），一格三个样本。评审看不到来源，只凭 brief 和统一渲染的 PNG 打分、两两比较；对比度、点击区域这类能量的，由脚本量好交给评审。要说“更好”，得在 6 份 brief 里至少赢 5 份，并且平均总分至少高 0.5；两轮都没有同时做到，结论都是“没有明确差别”。输掉的也照样公布。

评测方法、评审规则、结果格式

其他装法与升级

Claude Code 插件的两行命令在页首。三件最好整套装：critique-design 和 implement-design 会读 design-studio 的参考文件和脚本；单独装时，它们的 SKILL.md 也能独立用。

Codex 或手动安装：软链接整套 skill 
git clone --depth 1 https://github.com/caocong1/design-skill-lab
cd design-skill-lab
mkdir -p ~/.claude/skills        # Codex: ~/.codex/skills
for d in skills/*/; do
  ln -sfn "$PWD/${d%/}" ~/.claude/skills/"$(basename "$d")"
done
从 0.7.x 升级：旧的子 skill 去哪了

0.8.0 把原来的子 skill 都并进了 design-studio 的参考文件，入口只剩三件。旧名字的去向：

旧 skill 与新位置
旧 skill现在在
explore-design-directionsreferences/process/directions.md
find-design-inspirationreferences/process/research.md
build-design-systemreferences/process/system.md
handoff-designreferences/process/handoff.md
design-product-uireferences/disciplines/product-ui.md
design-marketing-sitesreferences/disciplines/marketing-sites.md
design-motionreferences/disciplines/motion.md
design-iconsreferences/disciplines/icons.md, app-icons.md
design-brand-identityreferences/disciplines/brand.md
design-graphicsreferences/disciplines/graphics.md

删掉旧的软链接（只删软链接，不碰真实目录）：

for n in explore-design-directions find-design-inspiration build-design-system \
  handoff-design design-product-ui design-marketing-sites design-motion \
  design-icons design-brand-identity design-graphics; do
  [ -L ~/.claude/skills/$n ] && rm ~/.claude/skills/$n
done