开源「设计工程」概念集，把界面「完成感」细节提炼成可执行规则
[设计工程 Skills 分享] Craft Design Engineering 作者 @heyimgustavo 开源的 "设计工程" 概念集，一份把界面“完成感”细节（等宽数字、光学对齐、嵌套...
朋友分享的「设计工程」概念集，把界面「完成感」细节（等宽数字、光学对齐）提炼成可执行规则，对写 UI 的 coding agents 很有用。
作者 @heyimgustavo 开源的「设计工程」概念集，将界面「完成感」细节（如等宽数字、光学对齐、嵌套圆角、hover克制等）提炼成精确可执行规则（含代码与推荐值），让 coding agents 在写 UI 前查阅遵循。内容包含七个概念（Tabular Numbers、Optical Alignment、Noise、Image Outlines、Nested Border Radius、HTML Background、Hover Restraint）和四条原则，每篇遵循统一模板，提供 Tailwind + 纯 CSS 双份代码，并附权威引用（MDN、W3C、Apple HIG）。
[设计工程 Skills 分享] Craft Design Engineering 作者 @heyimgustavo 开源的 "设计工程" 概念集，一份把界面“完成感”细节（等宽数字、光学对齐、嵌套...
[设计工程 Skills 分享] Craft Design Engineering 作者 @heyimgustavo 开源的 "设计工程" 概念集，一份把界面“完成感”细节（等宽数字、光学对齐、嵌套圆角、hover 克制等）提炼成精确可执行规则（含代码与推荐值）的设计工程 Skills，让 coding agents 在写 UI 前查阅遵循。 github.com/gustavo-fior/c… # 双形态架构：单一内容源 项目的核心设计是"一次写作，两处分发"： · 内容源：content/ 下按 section 组织的 MDX 文件（typography、color、layout、motion、sound、craft、data），带 frontmatter（title、section、order、publishedAt）。这是唯一的编辑入口。 · 网站：Next.js + Tailwind v4 + Content Collections，每个概念配一个可交互的 live demo；说服力来自"你亲手感受差异"，而不是截图。 · Skill：由 scripts/build-skill.ts（bun run build:skill）从 MDX 自动生成，产物提交进仓库。脚本先降级标题层级（h1→h2，让概念嵌套在 section 之下）、计算锚点，再按 section 聚合出 references/typography.md 等四个参考文件；SKILL.md 则采用标记拼接；只替换 <!-- concepts:start/end --> 之间的概念索引，手工编写的"使用协议"部分原样保留。只有已上线的概念才会被打包，草稿自动排除。 这个模式值得注意：Skill 不是手工维护的第二份文档，而是内容构建的副产物。维护说明写得很明确，要改就改文章本身，再重新生成。这从根上消除了"知识库与 Skill 版本漂移"的问题，也是对"Agent Skills 该如何长期维护"这一普遍难题的一个干净回答。 # Skill 本身：一份设计品味的使用协议 SKILL.md 的写法很能代表高质量 Skill 的范式——索引 + 渐进式披露 + 明确的使用规则： 1. 先按任务匹配概念索引（做按钮 → 查 hover/press/hit-area；做计时器 → 查 tabular numbers）； 2. 编码前必须读 references/ 里的完整文件，不许只凭一行摘要动手； 3. 优先使用站点给出的精确值（时长、缓动、圆角、透明度），不要自创； 4. Review UI 时用"Before / After / Concept"三列表格汇报改动，并链接对应概念； 5. 只能引用已索引的概念——索引里没有的，明说并转为一般判断。 第 5 条尤其克制：它防止 AI 借 "Skills 之名" 编造规则，是给模型划定的诚实边界。 # 内容：七个概念，四条原则 · Typography：Tabular Numbers（等宽数字）、Optical Alignment（光学对齐） · Color：Noise（噪点消色带）、Image Outlines（图片内描边） · Layout：Nested Border Radius（内圆角 = 外圆角 − padding）、HTML Background · Motion：Hover Restraint（高频交互零过渡） 每篇遵循同一模板：一句箴言式标题 → 问题 → 原理解释（为什么眼睛这样感知）→ 修复方案（Tailwind + 纯 CSS 双份代码）→ 权威引用（MDN、W3C、Apple HIG）。比如 Hover Restraint 的核心规则："发生得越频繁的东西，越承受不起动画"；hover 状态切换零过渡、首个 tooltip 延迟 400–700ms 而后续立即出现、按频率而非输入设备来划分要不要动画。 背后贯穿四条工程哲学：小细节会复利叠加（圆角、间距、缓动的正确默认值就是"完成感"）；一致性胜过新奇（少数几组缓动和圆角比例反复用）；动效必须挣得自己的位置；尊重物理直觉（光从上方来、嵌套圆角共享圆心）。 Gustavo @heyimgustavo introducing Craft a collection of design engineering concepts oss, free, and wip craft.gustavofior.com Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 0 🔄 0 ❤️ 1 👀 331 📊 1 ⚡
