关于 craft-signals
Craft Signals 是一项设计技能，可在对话中应用细致的质量约束，重点关注一致性、界面状态、对齐和动效表现。
主要功能
- 01统一组件圆角与行为
- 02像素级对齐检查
- 03覆盖各类界面状态
- 04过渡时长指导
- 05动效与加载反模式
适用场景
- 01检查界面一致性
- 02审视加载、错误和空状态
- 03改进交互过渡效果
- 04在设计过程中应用工艺约束
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/craft-signals确认已加载。
详细介绍
工艺细节
区分“有设计”与“设计精良”的细节。
使用方法
/craft-signals将工艺质量约束应用于此对话。
约束
一致性检查
- MUST 确保圆角半径统一采用同一套刻度（4、8、12、16，不要这里用 4，那里用 5）
- MUST 确保需要对齐的元素达到像素级精准对齐。接近对齐的效果不如刻意错位。
- MUST 确保同一组件无论出现在哪里，外观和行为都一致
- SHOULD 确保过渡效果使用相同的缓动曲线，并遵循成比例的时长刻度
状态覆盖
- MUST 覆盖所有状态：加载、空内容、错误、成功、部分内容、溢出、截断
- MUST 有意设计每种状态，不依赖浏览器默认样式
- SHOULD 确保错误消息具体且可执行，而非泛泛而谈
- SHOULD 确保加载状态能提示即将呈现的内容布局（优先使用骨架屏，而非旋转图标）
过渡效果质量
- 反馈过渡（按钮按下、切换）：50-150ms，近乎即时
- 导航过渡（页面切换、面板打开）：200-400ms，清晰可感但迅速
- 强调过渡（通知、庆祝效果）：300-600ms，经过精心设计
- NEVER 让动画阻碍内容显示。如果必须等动画结束才能阅读，那就是个 bug。
反模式
- 不同组件类型的圆角半径不一致
- 加载状态持续时间超过实际加载时间
- 错误状态只说“出了点问题”，不给出任何指引
- 对每个元素都添加悬停效果（动效应引导注意力，而不是制造噪声）
评论
支持 Markdown