[开源分享] Agent Native Design

狂刷排名

[开源分享] Agent Native Design

@builderio

@Steve8708
团队开源的 "Agent 原生" 设计工具，对标 Figma。它有一个很强的判断：设计的产物不是一张屏幕的图片，而是屏幕本身。
https://builder.io/blog/agent-native-design-figma-alternative

核心范式：产物即页面
传统设计工具的交付物是静态稿——一张"mock"。这个场景精准描述了痛点：评审通过的设计稿，三周后在 staging 上标题折行、空状态是灰框、320px 下筛选栏溢出。文件里根本没有这些，也不可能有——因为 mock 与真实页面之间的 gap，才是大部分工作真正存在的地方。

Agent Native Design 用换产物的方式填平这个 gap：
· Agent 生成的是自包含 HTML + Tailwind 样式 + Alpine 交互，在预览 iframe 中真实渲染；
· 响应式来自真实 CSS 断点，交互真实执行（表单可提交、状态可变、导航可达），空状态因为"真的能点进去"而必须存在；
· 预览、编辑、导出共用同一份源码——你审批的东西和交付的东西之间没有翻译层。导出格式为 HTML / ZIP / PDF。

工作流：三步，没有矢量画布
1. Describe——用自然语言描述要做的东西（落地页、产品 UI、品牌方向、交互原型），像给同事下 brief；
2. Generate——生成完整可运行的文档，可并行产出多个方向并排比较，再收敛到最强的一个继续深化；
3. Refine——两种粒度并存：知道确切想要什么时用 tweak 控件直接调设计变量；结构性工作交回 Agent（"标题更粗""换暖色""hero 更杂志风""出三个变体"），每条指令直接改底层 HTML 的文案、布局、颜色、间距、交互。

最关键的能力：基于你的设计系统生成
这是它与多数 AI 设计工具的分水岭。常见 AI 工具的产出是"看着合理但完全不像你的产品"——紫色渐变、陌生字体、来路不明的间距，然后有人花一天把它翻译回真实系统。

Agent Native Design 通过 DSI（Design System Intelligence） 索引你的组件、图标、设计 token，让 Agent 针对真实系统生成。可接入的来源：
· 已连接应用的 Builder 项目；
· 公开仓库 URL（Builder 负责索引组件与文档）；
· 包注册表条目（支持私有包 + token）；
· 直接上传的 Figma 文件与 Markdown 文档，可附使用说明。

索引后可浏览、搜索、剔除不想让 Agent 使用的组件。生成从你的既有原语出发——初稿即在品牌内，交付对话因此短得多。区别在于"AI 画出你产品形状的东西"与"AI 用你产品的真实零件做设计"。

底层架构：为什么对话编辑是"真"的
它不是"常规应用 + 外挂 AI 功能"，是构建在 Builder 的 Agent-Native 框架之上：每个能力建模为统一的 Action，人类 UI 与 Agent 走同一条代码路径。

因此对话式编辑操作的是真实源码而非平行表示；应用自描述，内置 Agent 能读取自身 schema，甚至安全地修改应用本身来加功能、修 bug。设计记录由 SQL 支撑，意味着你可以直接定制和扩展这个工具本身，而不是提交工单等厂商排期。