智能体
x.com ·
@shao__meng
开源项目 Craft：把设计工程细节提炼为 coding agent 可用的 Skills
介绍作者 @heyimgustavo 开源的 Craft Design Engineering 概念集，将界面完成感细节（等宽数字、光学对齐、嵌套圆角、hover 克制等）写成含代码与推荐值的可执行规则，供 coding agents 写 UI 前查阅。项目采用单一内容源架构：content/ 下的 MDX 为唯一编辑入口，网站用 Next.js + Tailwind v4 渲染交互 demo，Skill 由 build-skill.ts 自动生成并提交仓库，避免知识库与 Skill 版本漂移。SKILL.md 采用索引加渐进式披露，要求编码前读完整参考文件、优先使用给定精确值、Review 时用 Before/After/Concept 表格汇报，并禁止引用未索引概念。内容覆盖 Typography、Color、Layout、Motion 四类共七个概念，附 MDN、W3C、Apple HIG 引用。项目自述为开源、免费且仍在开发中。
AI推荐理由 对开源项目 Craft Design Engineering 的详细拆解，包含具体架构（MDX 单一内容源自动生成 Skill、Next.js + Tailwind v4 站点）、SKILL.md 使用协议、七个设计概念与四条工程原则，并给出 GitHub 与站点链接，信息密度高、可验证性强。对 Agent Skills 的长期维护方式（内容构建副产物而非手工第二份文档）提供了可借鉴的工程范式。局限是项目自述为 WIP，实际效果未经第三方评估。
72
浏览 331
点赞 1
评论 0
转发 0
正文
[设计工程 Skills 分享] Craft Design Engineering
作者 [@heyimgustavo](https://x.com/heyimgustavo) 开源的 "设计工程" 概念集，一份把界面“完成感”细节（等宽数字、光学对齐、嵌套圆角、hover 克制等）提炼成精确可执行规则（含代码与推荐值）的设计工程 Skills，让 coding agents 在写 UI 前查阅遵循。
[github.com/gustavo-fior/c…](https://github.com/gustavo-fior/craft)
# 双形态架构：单一内容源
项目的核心设计是"一次写作，两处分发"：
· 内容源：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 则采用标记拼接；只替换 之间的概念索引，手工编写的"使用协议"部分原样保留。只有已上线的概念才会被打包，草稿自动排除。
这个模式值得注意：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](https://craft.gustavofior.com)
[Your browser does not support the video tag.](https://video.twimg.com/amplify_video/2100659366978277376/vid/avc1/1920x1080/kJnSnwdWuT3uFX1p.mp4?tag=29)
[🔗 View on Twitter](https://x.com/heyimgustavo/status/2100659957267870001/video/1)
[🔗 View Quoted Tweet](https://x.com/heyimgustavo/status/2100659957267870001)