Aura.build DESIGN.md 工作流：把网站灵感变成设计系统

看到喜欢的网站后，传统做法是截图、取色、测量间距，再手动整理成规范。URL 转 DESIGN.md 的思路，是先让工具提取页面结构和视觉变量，再由设计师筛选、修正并转成可执行的项目规则。

一份设计系统应包含什么

颜色角色：背景、文字、边框、强调色和状态色。
字体层级：字体家族、字号、行高、字重和标题比例。
布局规则：最大宽度、网格、间距、断点和容器关系。
组件状态：默认、悬停、聚焦、禁用、错误和移动端变化。
内容语气：按钮、提示、空状态和错误信息的表达方式。

推荐工作流

只对有权参考的公开页面进行分析，先确认品牌和素材使用边界。
输入 URL，生成初版 DESIGN.md。
把自动提取结果和浏览器实际渲染逐项比对。
删除不适合自身产品的品牌元素，补充键盘焦点、对比度和移动端规则。
把最终文件放进项目仓库，让前端 Agent 读取并按规则实现。

自动提取很容易遗漏交互状态、响应式断点和动态内容，因此它适合做勘探和起稿，不适合直接复制页面。好的设计系统还要回答“为什么这样设计”，而不仅是罗列色码。

设计评审清单

[ ] 颜色在浅色和深色背景上都有足够对比度
[ ] 字体和图标具备可使用的授权
[ ] 组件状态和键盘操作已经定义
[ ] 移动端没有依赖固定宽度
[ ] 参考站点的商标、图片和文案没有被直接复制

来源

本文根据 AI 邮报原文整理。Aura.build 的实际功能和可用范围会变化，使用前请查看其最新产品说明。