DESIGN TO CODE · PRODUCT PREVIEW
Lattice 设计工作台
设计就是拼搭，一键生成代码
用 Daren Design 的组件、区块和模板直接拼出页面。人可以在画布上设计，Agent 也能按同一套契约协作；无需二次翻译，设计结果就是可运行、可维护的代码。
工作台待发布查看装配流程
所见即所得契约驱动人和 Agent 共用
01 · THE COMPLETE SYSTEM资产库负责“有什么”，
资产库负责“有什么”，
你决定“怎么组装”。
Daren Design 先提供开箱即用的资产，缺件时再由蒸馏器制造。成熟资产既可以手动或交给 Agent 拼装，也可以进入 Lattice 做可视化装配。
REFILL WHEN NEEDED蒸馏器缺组件、区块或模板时，制造并沉淀新资产
↘READY-MADE ASSETSDaren Design基础 · 组件 · 模板 · 图标，现成资产直接使用
CHOOSE HOW TO ASSEMBLE三种装配方式手动开发Agent 拼装Lattice 装配
DELIVER页面 + 生产级代码可运行 · 可维护 · 可继续开发
02 · READY-MADE ASSETS
不是从空白画布开始。
每一项资产都有机器可读的语义、状态和边界，既能被人拖入画布，也能被 Agent 稳定调用。
03 · ASSEMBLY FLOW从模板到代码，
从模板到代码，
沿着一条装配轨道完成。
画布不是最终交付物的图片预览，而是页面模型的直接操作面。每次拖放、配置和 Agent 修改都作用于同一个可导出的结构。
01选择模板
从空白页面或经过验证的工作台模板开始。
App Shell / Dashboard↓02拖入资产
组件、区块、图片和图标进入明确插槽。
Button · Card · Table · Image↓03配置属性
调整内容、布局、外观、响应式与状态。
Layout / Appearance / Responsive↓04人与 Agent 协作
自然语言修改与直接操作共享同一页面模型。
“把项目列表改成双栏，并补一个空态”↓05实时验证
越界组合、缺失状态与 token 漂移立即暴露。
Contract ✓ · Tokens ✓ · States 8/8↓06导出代码
输出与画布一致、可继续开发的页面代码。
React + Daren Design · 12 files
04 · ONE MODEL, TWO OPERATORS人和 Agent，
人和 Agent，
操作的是同一个界面。
你可以直接拖拽、缩放和修改属性，也可以描述目标让 Agent 完成批量调整。两种操作都受组件契约、插槽边界和页面模型约束。
HUMAN直接操作
选择、拖放、嵌套、缩放、编辑内容和调整属性。
拖入 Card→选择 3 列→调整间距
AGENT意图操作
按自然语言理解页面目标，组合现有资产并解释改动。
描述目标→生成计划→应用修改
05 · DESIGN IS DELIVERY画布上的结果，
画布上的结果，
就是可质检、可交付的代码。
结构一致
图层树、画布和代码来自同一页面模型，不靠二次翻译。
设计系统一致
视觉值来自 Daren Token，组件来自 Registry，减少手写漂移。
交互完整
状态、事件与响应式行为是装配对象的一部分，不是导出后的补丁。
证据可追踪
导出前运行契约与保真检查，失败就明确指出资产和节点。
选好资产，开始装配。
当前工作台为探索原型；项目持久化、生产导出与完整 Agent 执行仍按验证结果逐步开放。
工作台待发布先浏览页面模板
正在连接 Lattice 装配工作台载入布局契约与设计资产…