ui-decomposerUI 拆解提炼
UI Decomposition捕获来源、解析结构与样式、识别交互状态，交付可执行蓝图、人读方案、证据与待确认项。
设计系统的下一站：
人和 Agent 协同的 UI 生产体系。
Daren Design 把 Token、组件、装配契约与质量门禁做成机器可读的统一真源——人用它精耕界面，Agent 用它可靠地生产界面。
01 · ASSET LIBRARY开箱即用的
开箱即用的
智能体设计资源库
282 个明暗成对的语义 Token、87 个注册组件、14 个正式图标与模板原型——全部以机器可读的 manifest 发布，Agent 不需要「看截图猜」，直接读契约消费。
- 语义 Token 双层结构：底层值 → 语义别名，换肤零改码
- 组件 manifest 携带实现位置、契约与成熟度
- 图标 Registry：Core、Business 与审批扩展统一投影
- 语义 Token
- 264
- 组件实现
- 100
- 模板原型
- 5
- 注册图标
- 14
02 · DESIGN SYSTEM快速搭建自己的
快速搭建自己的
UI/UX 设计系统
不用再从零拼凑零散工具。Daren Design 把 Foundations、Token、组件、图标、模板、装配契约和质量门组织成一套可直接落地的生产体系。
- 从视觉基础到页面模板，覆盖完整 UI/UX 资产层级
- 人和 Agent 共用机器可读的契约与设计真源
- 现有资产可直接消费，缺失资产有明确补全路径
daren-design/registry/components.manifest.json
Foundationsready
design-tokens/tokens/Components100
src/components/Templates5
src/templates/Harnessactive
package.json · tokens:lintfoundations → components → templates → delivery
03 · UI DISTILLER 产品预览把看中的界面，
了解 UI 蒸馏器 →
把看中的界面，
变成设计资产
从看懂界面到交付资产，六个动作各自独立闭环，也能按需组合。可以只拆解出方案、按蓝图复刻，也可以直接适配或检修已有资产。
- 按需启动、独立交付，在需要的环节继续
- 检修贯穿各环节，也能单独发起
- 仅检查出报告；检查并修复，形成复检闭环
独立发起按需组合仅检查检查并修复distiller · product preview
○拆解 · dissect
独立动作○复刻 · replicate
独立动作○适配 · adapt
独立动作○检修 · inspect
独立动作○入库 · register
后续扩展○上架 · publish
后续扩展六个动作 · 按需组合 · 检修贯穿各环节
- 拆解dissect
捕获、解析与提炼，交付方案与可执行蓝图。
- 复刻replicate
按蓝图还原目标界面的样式、状态与交互。
- 适配adapt
保留功能与交互，转换成自己的设计语言。
- 检修inspect
贯穿各环节：检查、修复、复检，也可仅检查。
- 入库register
整理、校验接口与依赖，将资产登记到指定组件库。（后续扩展）
- 上架publish
发布到设计站点，让资产可浏览、可发现、可使用。（后续扩展）
04 · LATTICE 产品预览设计就是拼搭，
设计就是拼搭，
一键生成代码
Lattice 的目标是让自然语言和直接操作共同作用于同一个页面模型：既能让 Agent 按契约生成界面，也能在画布上拼搭和调整，最终把设计结果交付为代码。
- 目标 · Chat to Code：描述目标，Agent 按设计契约生成界面
- 目标 · Design to Code：拖拽、嵌套和调属性，产出代码
- 目标 · 人和 Agent 共享页面结构、组件属性与响应式规则
lattice · product preview
harness · pipeline run
✓01 · 定义 Foundations
tokens 282✓02 · 实现 Assets
87 comps✓03 · 装配 Lattice
contract ok04 · 质检 Harness
running…○05 · 交付 Delivery
queuedevidence：3 screenshots · report.html · 可重放
05 · PRODUCTION PIPELINE重构 Design to Code
流水线使用指南 →
重构 Design to Code
生产流水线
定义、实现、装配、质检、交付——五个环节各有明确的上下游契约与质量门。任何资产从候选到上架，路径唯一、证据留痕、状态诚实。
- 组件生命周期闭环：缺件 → 复刻 → 上架 → 迭代，回到缺件
- 质量门机器可判：lint、conformance、证据、成熟度
- 未交付能力公开标注「规划中」，不伪装成已交付
tokens:lint ✓conformance:check ✓evidence 可重放 ✓成熟度分级 ✓- 定义Foundations
Token、交互状态与基础约束，明暗成对。
- 实现Assets
组件、图标、模板沉淀为可消费资产。
- 装配Lattice
契约驱动布局与工作界面的可控组装。
- 质检Harness
tokens:lint + conformance:check，证据可重放。
- 交付Delivery
可安装、可升级、可追踪的消费渠道。
06 · AGENT SKILLS六大技能，让 Agent
六大技能，让 Agent
可靠执行
从看懂界面、还原原样到适配规范，六个技能围绕明确任务交付成果。MVP 聚焦拆解、复刻、适配与质检修复，资产入库和上架作为后续扩展。
- 各自独立发起，也可按输入与目标组合执行
- 质检修复贯穿各环节：可仅检查，也可检查、修复并复检
- 蓝图、复制品、适配版与质量报告分别交付，保留证据和边界
distiller · skill roadmap
六个技能 · 产品规划
○ ui-decomposer
○ ui-replica-engine
○ design-system-adapter
○ ui-audit-repair
○ design-asset-registrar
○ design-asset-publisher
$
ui-replica-engineUI 原样复刻
UI Replication根据有效蓝图，还原约定范围内的布局、样式、状态和交互，交付可运行复制品与预览。
design-system-adapter设计系统适配
Design System Adaptation将已有界面映射到目标 Token、组件与设计规范，交付独立适配版和差异说明。
ui-audit-repairUI 质检修复
UI Audit & Repair按检查目标发现问题，在授权范围内修复并复检，交付质量报告、修订资产和剩余问题。
design-asset-registrar设计资产入库
Design Asset Registration唯一的资产补全与入库入口；校验 adapted component、冲突和授权，写入 distilled collection 并交付 RegistrationReceipt。
design-asset-publisher设计资产上架
Design Asset Publishing消费新鲜入库凭证，把资产接入当前 Astro 站的分类、详情、隔离预览和检索，交付 PublicationReceipt。
先在 Mindex 跑通，
再向社区和外部项目开放。
同一套体系，服务三类生产场景：Mindex Dogfood · Mindex Community · Open Source。
LATTICE · ASSEMBLY MODE正在装配工作台连接布局契约与设计工具…