用途：这是一套设计工程概念集合，用于在编写界面代码或审查现有 UI 时，按主题查找并应用具体的设计规则，让界面细节更完整。
主要能力：概念按排版、颜色、布局、动效分类。排版含 Tabular Numbers（数值变化时保持数字等宽）与 Optical Alignment（按视觉而非数学居中）；颜色含 Noise（颗粒感掩盖色带并增加质感）与 Image Outlines（图片内侧淡边）；布局含 Nested Border Radius（内圆角等于外圆角减内边距）与 HTML Background（为页面绘制画布背景）；动效含 Hover Restraint（高频交互应即时响应）。每条概念包含完整推理、规则和代码片段。
使用方式：先在下述索引中找到与当前工作匹配的概念，例如按钮需要 hover、press 和 hit-area 概念，表格或计时器需要 tabular numbers，含图片的界面需要 image outlines。写代码前先阅读 references/ 中对应文件，不要仅凭一句话摘要就套用概念。应用规则时优先采用站点给出的精确值（时长、缓动、圆角、透明度），不要自行发明。审查现有 UI 时，把每处改动写成表格行，列为 Before、After、Concept，并附概念 URL 供用户阅读和试用演示。只引用索引中存在的概念；若问题超出索引范围，应说明并回退到一般判断。
原则：无人注意的细节仍会累积，圆角、间距、缓动和对比度的正确默认值决定界面是否显得完成；一致性优于新奇，全产品复用两三种缓动、相同圆角比例和阴影配方；动效必须值得，高频且有意的交互应即时，罕见或空间性交互才可动画；尊重物理直觉，事物不会凭空出现，嵌套圆角共享圆心，光从上方来。
限制：本文件与 references/ 由 Craft 仓库通过 bun run build:skill 从站点内容生成，应编辑文章而非 references。资料未提供收费、价格、平台或效果等信息。