mcpField
S
sketchbook

sketchbook

github.com/playful-design设计与 UI1683 次安装1 周前更新
代码仓库

关于 sketchbook

在项目现有技术栈中生成互动实验批次的技能,面向界面设计者和开发者。后续批次会根据 taste 文件记录的保留与淘汰选择调整方向。

主要功能

  1. 01每批生成 6–9 个互动实验
  2. 02使用项目自身技术栈构建实验
  3. 03依据保留和淘汰选择调整后续批次
  4. 04在同一画廊展示可交互实验
  5. 05将保留项转为组件并删除淘汰代码

适用场景

  1. 01探索项目界面的微交互
  2. 02根据过往选择生成新实验
  3. 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-size4 个卡片6–9 个卡片
sketchbook-real-stack用 PNG 代替悬停效果使用项目的技术栈构建悬停效果
sketchbook-wildcards9 个卡片都符合当前品味7 个符合品味,2 个超出品味范围
sketchbook-one-gallery8 个路由,每个实验各占一个一个包含实时卡片的 /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-componentSoft Press 仍以内联形式留在画廊路由中移至 sketchbook/kept/SoftPress,并移除画廊外壳
sketchbook-delete-the-killedCursor 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。

评论

支持 Markdown