Directions Lab 是 paperclipai/paperclip 仓库中用于创建设计探索页面的技能。它生成一个单页实验室，将已发布的 UI（Today）与 2-3 个设计方向并排展示，覆盖该功能出现的所有表面，并使用统一的控件，使共享链接对所有人呈现一致。已有的 artifact directions lab（ui/src/artifact-directions）是冻结的参考先例，本技能以相同形态生成新实验室，无需手动重绘底层结构。
用途
Directions Lab 用于在仓库中进行设计探索：一个页面、一个功能、Today 加上两到三个方向、该功能出现的每个表面，以及每次相同的控件。它帮助团队在真实产品上下文中比较不同设计方向，并保持一致的动效和交互体验。
主要能力
生成的实验室包含以下部分：
页面：ui/<slug>-directions.html 加上 ui/src/<slug>-directions/，作为第二个 Vite 入口，无后端。所有状态保存在 URL 中（?d=&s=&theme=&chrome=&anim=，以及 proposal=1 用于提案调色板）。注册表模块是方向 ID、数字键、标签、表面、落地视图和故事 ID 的唯一来源；工具栏、键盘、概览板和捕获脚本在运行时读取它，add-direction 保持故事的每方向导出同步。
工具栏：第一行是方向行，编号方向后跟 0.Today 作为分段控件，Theme 和 Animation 右对齐。第二行是表面行，包含 Overview 加上每个表面一个标签页。仅当实验室以多个表面搭建时才会写入第二行；单表面时键盘图例加入第一行。
Today：始终存在，始终为 0.Today，始终是通过小型适配器和 fetch 存根挂载在实验室夹具上的已发布组件。它是每个方向评判的基准，因此从不重绘。
方向：两到三个，编号，每个是自包含的套件目录，拥有自己的 scoped tokens.css。每个方向逐字携带 V1 MVP 动效块，并有测试证明，使悬停体验在各实验室间一致。
目录条目：在 ui/storybook/stories/design-proposals/ 下有一个故事文件，具有稳定 ID，编目为提案。design-proposals Storybook 正在成为设计系统的规范目录；实验室从首次提交起就存在于那里。
硬性规则：提交的任何内容中不得有代码注释；实验室中不得有 600 行或以上的文件（check 在 600 行时拒绝）；不得有 package.json 脚本；不得更改 lockfile；仓库中不得有截图或生成的目录文件。
使用方式
从仓库根目录在自有分支上运行（claude/<slug>-directions，基于 origin/master）。检查 ui/node_modules/.bin/vite 是否存在；若不存在，运行 pnpm install --frozen-lockfile。然后运行生成器自身的测试：
node --test .agents/skills/directions-lab/scripts/scaffold.test.mjs
阅读简报后，通过 grep 定位主题：
rg -l "<Subject>" ui/src/components ui/src/pages rg -n "<subject word>" maps/feature-map/*.md
最多问两个问题（方向数量和表面），在单次 AskUserQuestion 调用中完成，跳过简报已回答的问题。然后陈述所有推导值，运行生成器：
node .agents/skills/directions-lab/scripts/scaffold.mjs new
--slug composer --title "Composer"
--surfaces thread:Task-thread:960@tasks,panel:Right-panel:434@tasks
--directions 3 --dry-run
阅读计划后去掉 --dry-run 并运行。new 在内存中渲染所有内容，拒绝已存在的路径，写入实验室、html 入口、Vite 配置、故事文件、两个 .claude/launch.json 条目和一行 .gitignore，然后验证：Storybook 目录检查、实验室自身的 Vitest 文件和 Vite 构建。任何失败都会删除已写入内容并恢复两个共享文件。
启动开发入口预览，打开三个 URL 确认动效和状态。提交未修改的脚手架，然后按阶段绘制：框架、夹具和 Today、方向。每个阶段后运行 scaffold.mjs check --slug <slug>。
捕获：node ui/src/<slug>-directions/shot.cjs --port <dev> --d all --out <scratch dir>，捕获 1440×900、DPR 2、两种主题的静止状态。
交接：node .agents/skills/directions-lab/scripts/scaffold.mjs check --slug <slug> --strict --run，然后打开 PR。
后续操作：add-direction 添加方向，list 列出实验室，重命名/添加表面/生命周期移动需手动按参考文档操作。发布使用 vercel deploy。
适用场景
适用于在 paperclipai/paperclip 仓库中进行 UI 设计探索和方向比较，特别是需要将已发布 UI 与多个设计方向并排展示、统一动效体验、并通过 Storybook 编目管理设计提案的场景。
限制
不得同时运行两个完整的 ui Vitest 套件；不得从开发服务器以 d=all&s=board 落地超过八个单元格；不得复制 artifact lab 的 html:not(.dark) token 惯用法；不得编辑实验室中的动效块；不得添加注释、package.json 脚本、lockfile 更改、PAP ID 或 localhost URL 到 PR 内容中。生成器拒绝第四个方向，除非使用 --force-count。阶段 2 重新定义 slot props 后，add-direction 会拒绝并打印手动步骤。