playful-design-router

Playful Design Router

一个了解其他技能的技能。阅读请求，判断适用哪些设计技能，并以合理的顺序使用它们。由 Playful Design 策划（playfuldesign.app/skills）。

1. 查看已安装的技能

在进行路由前，检查以下技能中哪些已安装。查看项目中的 .claude/skills/、.agents/skills/ 和 .cursor/skills/，以及 ~/ 下的同名文件夹。只路由到已存在的技能。如果某项技能显然有帮助但尚未安装，只需说明一次，并提供末尾表格中的安装命令。未经询问，不要安装任何内容。

2. 始终启用（标准）

对每项界面变更应用以下标准。无需点名说明：

• scope：只修改要求的内容，保留有效部分，并完成每一项。
• restraint：用最精简的方案解决问题；删除没人要求的内容。
• reuse：优先使用项目自身的组件，其次是维护中的库，最后是原生功能。
• copy：界面标签简短、直白。
• defaults：遵循关于焦点、表单、加载、对话框、滚动边缘和字体的项目默认规范。
• color：对比度严格符合精确比例，通过角色令牌设置颜色，并使用完整的深色调色板。
• motion 或 emil-design-eng：确定动画内容、缓动、时长、弹簧效果及减少动态效果的设置。如果两者都已安装，动画决策使用 emil-design-eng，项目默认数值使用 motion。

项目自身的规范（如其 CLAUDE.md、AGENTS.md、设计令牌或样式指南）优先于以上规则。规则冲突时，说明你遵循了哪一项。

3. 按意图选择路由

请求内容	使用
设计前查找参考或灵感	gather
将一句话的动作或动画构想转化为完整提示词	blank-page
复制或重现指定的网站、屏幕或组件	match
虚构或模拟的产品 UI、主视觉或功能卡片插图、便当盒网格、光标或产品演示动画	stageshow
在 Web 上构建新动画或过渡效果	animate（之后若动画开销较大，则使用 animation-performance）
React Native 或 Expo 中的动画	animate-expo
手势、弹簧、面板、材质、Apple 风格的观感	apple-design
“让它更有活力”或“哪些地方应该加动画？”	find-animation-opportunities
“感觉很慢”或“动画太多了”	remove-animations
修复整个应用动效的计划	improve-animations
为动效命名，以便准确提出需求	animation-vocabulary
希望在手机上呈现原生体验的 Web 应用	mobile-native
使用最坏情况的数据对屏幕进行压力测试	break-ui
选择 UI 库（图表、OTP、通知、命令菜单）	建议使用 /pick-ui-library
Sonner 通知	ask-sonner
Swift 代码	write-swift
在不同设计方向间做选择（“试几种”“展示选项”）	建议使用 /prototype（Raphael 会在同一页面上构建并标注不同变体；Emil 会将它们放在实时选择器中；由于名称相同，只能安装其中一个）
查看真实组件的所有状态和变体	建议使用 /lab
用物体制作的吉祥物或角色	建议使用 /avatar
缺少应与现有图标集匹配的图标	icons
每日一批小型交互实验	建议使用 /sketchbook
理解现有动画或交互	建议使用 /deconstruct
长篇写作：文章、案例研究、设计笔记	prose
审查 UI 代码的无障碍性、焦点、表单、动效和性能	web-design-guidelines
严格审查动效代码	建议使用 /review-animations
检查改动在运行中的应用里是否确实有效	verify
响应式布局、溢出、裁切、缩放文本	viewports
像素对齐、间距和圆角略有偏差	建议使用 /alignment
键盘访问和焦点顺序	建议使用 /keyboard
卡顿、丢帧、输入迟缓	使用 animation-performance，或建议使用 /frames 获取测量跟踪数据
用户反复提出的修正意见	rule
“全面审查”或任务结束时的设计检查	建议使用 /audit
提交、合并和发布	仅在用户要求发布时建议使用 /ship
Grok Bots 作品集页面	建议使用 /bots

标记为“建议”的技能只有在用户按名称调用时才会运行（disable-model-invocation）。请说出命令及其用途；不要尝试自行运行。

4. 工作顺序

对于超出单行修复范围的工作：

1. 开始构建前： 如果参考资料很重要，则使用 gather 或 match；如果方向尚未确定，则建议使用 /prototype。
2. 构建过程中： 始终遵循规范；为仿真 UI 和营销视觉素材使用 stageshow；为新动效使用 animate 或 animate-expo。
3. 宣布完成前： 在运行中的应用里使用 verify；对布局改动使用 viewports；对数据密集型屏幕使用 break-ui；对改动涉及的 UI 文件使用 web-design-guidelines。如果改动涉及相关领域，还可建议使用 /alignment、/keyboard 或 /frames。
4. 之后： 如果某项修正意见出现了两次，则使用 rule。仅在用户提出要求时使用 /ship。

保持适度。调整文案只需要 scope 和 copy，无需执行完整流程。

5. 汇报使用的路由

用一行简短说明你使用了哪些技能，例如：“使用 stageshow 制作主视觉模拟图，并通过 verify 和 viewports 进行检查。”

安装命令

技能	安装
全部（此路由器及下方所有技能）	npx skills add playful-design/router
仅此路由器	npx skills add playful-design/router --skill playful-design-router
stageshow（Benji Taylor）	npx skills add benjitaylor/skills --skill stageshow
Emil Kowalski 的技能集合	npx skills add emilkowalski/skills
Emil 的其中一项技能	npx skills add emilkowalski/skills --skill <name>
web-design-guidelines（Vercel）	npx skills add vercel-labs/agent-skills --skill web-design-guidelines
blank-page（Stewdio）	npx skills add StewdioAI/blank-page
Raphael Salaja 的技能集合	npx skills add raphaelsalaja/skills
其中一项技能	npx skills add raphaelsalaja/skills --skill <name>

每项技能的功劳都归其作者所有。此路由器仅指引方向。