Design Skill Lab设计技能实验室
GitHub

让 coding agent 像资深设计师一样做设计，交出能照着开工的稿子。

给设计师和设计工程师：三件 skill 装进 Claude Code 或 Codex，agent 先写 brief，出几个真正不同的方向，渲染出来自己看，再换一个新会话挑错，最后交接。另附一份逐条标注的设计资源目录：怎么直达、什么授权、agent 能不能读到。

装进 Claude Code

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

装好后直接说需求，比如“给这个后台做三套方向”，或“评审一下这个页面”。

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

资源字架

共 812 条，分 15 个域812 entries in 15 domains

网站设计WebsitesWebsites网站设计59
产品界面Product UIProduct UI产品界面61
视觉素材Visual assetsVisual assets视觉素材46
品牌Brand identityBrand identity品牌36
字体排版TypographyTypography字体排版86

常用字盘Within reach

每个域先拿这一件，都是 S 级The first pick in each domain, all tier S

  1. A1 Gallery网站设计Websites
  2. Mobbin产品界面Product UI
  3. From Data to Viz数据可视化Data visualisation
  4. Shape of AIAI 设计AI design
  5. WCAG 2.2 Quick Reference无障碍Accessibility
  6. 60fps.design动效Motion
  7. Lucide图标Icons
  8. Poly Haven视觉素材Visual assets
  9. Logobook品牌Brand identity
  10. Letterform Archive Online平面Graphic design
  11. Fontsource字体排版Typography
  12. OKLCH Color Picker色彩Colour
  13. shadcn/ui设计工程Design engineering
  14. Rauno Freiberg: Web Interface Guidelines阅读Reading
  15. Are.na灵感社区Communities
设计工程Design engineeringDesign engineering设计工程101
数据可视化Data visualisationData visualisation数据可视化46
动效MotionMotion动效57
图标IconsIcons图标61
平面Graphic designGraphic design平面40
AI 设计AI designAI designAI 设计56
无障碍AccessibilityAccessibility无障碍26
色彩ColourColour色彩41
阅读ReadingReading阅读70
灵感社区CommunitiesCommunities灵感社区26

15 个域，按条目数排15 domains by size

校样

这套方法用在本站自己身上的产物

  1. 第二轮盲评：六份 brief 全胜，均分差仍不到门槛

    0.8.1 对不装 skill：brief 6:0，盲评组 17:1；均分 4.11 对 3.83，差 0.28，不到 0.5，按规则是“没有明确差别”。花费 2.0 倍。

  2. 首轮盲评：规则不允许说“更好”

    0.8.0 对不装 skill 赢 5 份、输 1 份，均分只高 0.17；落地页 0:3 输掉。

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

    评审挑出 5 个 P1，这一版照着改；下面是它在资源列表上标的一处。

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

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

评审截下的旧资源列表：每条左边一张 120px 宽的网站截图
删P2：列表里的截图只有 120px 宽，字看不清，一屏只放得下三条半。改后列表只排字，截图留在图版和批注里。

入藏记录

  1. 入藏Accessioned
    223 条223 entries
    目录生成Catalogue built
    812 条、15 个域、83 个小节812 entries, 15 domains, 83 sections
    截图Screenshots
    807 张通过质检；其余 5 条用排字卡807 passed QA; the other 5 get a set card
    agent 核验Agent check
  2. 入藏Accessioned
    589 条589 entries

这套 skill 怎么干活

  1. 排字design-studio

    读懂任务，写 brief，按种子出几个真正不同的方向，定下系统，画出每一种状态。

  2. 打样render → look

    每一版都真的渲染出来、截图、自己看；没看过的，如实写“未验证”。

  3. 校对critique-design

    换一个全新的子会话挑错，按严重程度写出带证据的报告。

  4. 付印implement-design

    照交接规格在你的技术栈里落地，再按截图验收。

该交给哪一件

  1. 1a已有设计稿、交接包或 mockup，要在某个技术栈里做出来付印implement-design
  2. 1b还没有能照着做的稿子看 2
  3. 2a已有页面或设计，要评审、验收、挑错校对critique-design
  4. 2b要新做或重做设计：页面、系统、方向、图标、动效、品牌排字design-studio

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

设计方向实验室：同一份目录的多种排法，每种附方向卡，写明它会在哪里失败。这套方法最早的试验品，留作对照。