关于 sketchbook
在项目现有技术栈中生成互动实验批次的技能,面向界面设计者和开发者。后续批次会根据 taste 文件记录的保留与淘汰选择调整方向。
主要功能
- 01每批生成 6–9 个互动实验
- 02使用项目自身技术栈构建实验
- 03依据保留和淘汰选择调整后续批次
- 04在同一画廊展示可交互实验
- 05将保留项转为组件并删除淘汰代码
适用场景
- 01探索项目界面的微交互
- 02根据过往选择生成新实验
- 03将选中的实验保存为可复用组件
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ playful-design/ router --skill sketchbook安装后在 Claude Code 中输入/sketchbook确认已加载。
附带文件agents/openai.yamlLICENSE
详细介绍
Sketchbook
这项技能会基于项目自身的技术栈,生成一批全新的小型交互实验。用户会决定保留或删除每个可交互卡片,因此下一批会更贴近他们保留的内容。
数量和技术栈必须准确
每次运行都会生成一批包含 6–9 个可交互实验的新内容。其中,1 或 2 个实验会偏离当前偏好。画廊是临时的,并使用项目自身的框架、样式、动画库、设计令牌和字体。
当用户说“sketchbook”“给我灵感”“给我一些交互创意”或“每日交互”时,使用此技能。当用户说“用一些微交互给我惊喜”“今天的新实验”或“保留这个,删除那个”时,也使用此技能。
缓动、时长、弹簧效果和减少动态效果设置归 motion 负责。卡片名称和单行说明归 copy 负责。表面样式归 defaults 负责,对比度归 color 负责。优先使用现有组件而不是新建组件归 reuse 负责。收集外部参考归 gather 负责。同一创意的变体归 prototype 负责。强行展开组件的所有状态归 lab 负责。
1. 阅读项目
阅读框架、样式、动画库、设计令牌和字体。未完成阅读就开始生成一批内容,属于 sketchbook-read-the-stack。
2. 阅读偏好文件
在选择这一批内容之前,先阅读项目根目录中的 sketchbook/taste.md。如果文件不存在,则视为尚无偏好,首次选择会创建该文件。如果已有摘要,下一批内容应进一步贴近用户保留的卡片。忽略已有文件中的内容,属于 sketchbook-read-taste。
跳过已列在 Kept 或 Killed 下的交互。重复内容属于 sketchbook-never-repeat。
3. 生成这一批内容
编写 6–9 个小型交互。每个交互都应属于悬停、切换、按压、显现、拖动、滚动、光标、文本、加载器或过渡效果。数量不在 6–9 之间,属于 sketchbook-batch-size。
每个交互都使用刚刚阅读的框架、样式、动画库、设计令牌和字体来构建。使用模拟稿或另一套技术栈,属于 sketchbook-real-stack。
加入 1 或 2 个偏离偏好摘要的实验。这 1 或 2 个实验能避免整批内容定格在一种风格上。如果摘要为空,这 1 或 2 个实验的类型应与其他实验不同。数量不是 1 或 2,属于 sketchbook-wildcards。
4. 展示一个画廊
将这一批内容单独放在 /sketchbook,以可交互卡片网格的形式呈现。静态页面、每个实验单独设一个路由,或在页面上展示另一批内容,都属于 sketchbook-one-gallery。
为每张卡片提供一个标题式名称、一行说明,以及 Keep 和 Kill 控件。名称和说明遵循 copy。没有选择控件的卡片属于 sketchbook-keep-or-kill。
5. 打开画廊
启动开发服务器,打开 /sketchbook,并逐一操作每张卡片。回复中只给出路径却没有实际打开,属于 sketchbook-open-it。
6. 保存选择
用户保留或删除某张卡片时,应在同一轮中更新 sketchbook/taste.md。文件包含三个标题:Kept、Killed 和 Summary。Killed 下的条目必须包含原因。摘要涵盖缓动、速度、密度、趣味性和色彩运用。重写摘要,让下一批内容进一步贴近保留的卡片。未更新、删除条目没有原因或采用其他格式,都属于 sketchbook-save-the-taste。
将保留的实验移至 sketchbook/kept/,整理为干净、可复用的组件,并移除画廊界面元素。仅留在路由上的保留卡片,属于 sketchbook-keep-the-component。
删除已删除的实验。偏好文件中只保留其名称和原因。执行 Kill 后仍留有代码,属于 sketchbook-delete-the-killed。
每张卡片都完成选择后,删除 /sketchbook 路由。一批内容处理完毕后仍留有画廊,或画廊仍可在生产环境中访问,属于 sketchbook-remove-the-gallery。
7. 推荐剪辑片段
指出哪些保留的卡片值得制作剪辑片段,并用一句话说明原因。如果没有保留任何卡片,请明确说明。结束评审时没有给出推荐,属于 sketchbook-suggest-a-clip。
配对关系
每项检查都是一组配对:有问题的做法旁边就是替代做法。
| 规则 | 有问题的做法 | 替代做法 |
|---|---|---|
sketchbook-read-the-stack | 尚未读取项目就编写一批实验 | 先读取框架、样式、动画库、设计令牌和字体 |
sketchbook-read-taste | 尚未读取 sketchbook/taste.md 就编写第二批实验 | 读取摘要,并据此引导实验批次 |
sketchbook-never-repeat | 「Press Scale」被淘汰后又重新尝试 | 使用新的交互,并将旧名称留在文件中 |
sketchbook-batch-size | 4 个卡片 | 6–9 个卡片 |
sketchbook-real-stack | 用 PNG 代替悬停效果 | 使用项目的技术栈构建悬停效果 |
sketchbook-wildcards | 9 个卡片都符合当前品味 | 7 个符合品味,2 个超出品味范围 |
sketchbook-one-gallery | 8 个路由,每个实验各占一个 | 一个包含实时卡片的 /sketchbook 网格 |
sketchbook-keep-or-kill | 卡片没有去留决定 | Soft Press、一条备注,以及 Keep 和 Kill |
sketchbook-open-it | 「已在 /sketchbook 构建」 | 打开画廊,并逐一体验每个卡片 |
sketchbook-save-the-taste | 只在回复中提到「你保留了 Soft Press」 | 将 Soft Press 记入 Kept,并更新摘要 |
sketchbook-keep-the-component | Soft Press 仍以内联形式留在画廊路由中 | 移至 sketchbook/kept/SoftPress,并移除画廊外壳 |
sketchbook-delete-the-killed | Cursor Trail 仍以注释形式留在画廊中 | 删除代码,并在品味记录中保留名称和原因 |
sketchbook-remove-the-gallery | 所有选择完成后,/sketchbook 仍有路由 | 删除路由,将保留的组件继续留在 sketchbook/kept/ 中 |
sketchbook-suggest-a-clip | 实验批次结束时没有下一步 | 「录制 Soft Press。收尾效果值得录个片段。」 |
报告
严重程度。 HIGH 指模拟实验批次、被删除的保留组件,或生产环境中仍可访问的画廊。MEDIUM 指数量不在 6–9 之间、缺少意外项、未读取品味文件或重复实验。还包括回复中未做出选择、仍留在路由中的保留卡片、未删除的淘汰代码,或整理后仍存在的画廊。LOW 指未打开画廊,或审查时没有建议录制片段。
格式。 每个根本原因列出一项发现:
file:line - [rule-id] what is wrong
然后提供 Rule | Count | Severity 摘要。若仍有任何 HIGH 项,则标记为 Block;否则标记为 Approve。将所有无法体验的卡片标记为 Not verified。