PRODUCT PREVIEW · 面向人和 Agent

设计系统的下一站:
人和 Agent 协同的 UI 生产体系。

Daren Design 把 Token、组件、装配契约与质量门禁做成机器可读的统一真源——人用它精耕界面,Agent 用它可靠地生产界面。

WORKS WITH THE FOLLOWING PLATFORMS
CodexClaudeCursorQoderWorkBuddy豆包工作
01 · DESIGN SYSTEM

快速搭建自己的
UI/UX 设计系统

不用再从零拼凑零散工具。Daren Design 把 Foundations、Token、组件、图标、模板、装配契约和质量门组织成一套可直接落地的生产体系。

  • 从视觉基础到页面模板,覆盖完整 UI/UX 资产层级
  • 人和 Agent 共用机器可读的契约与设计真源
  • 现有资产可直接消费,缺失资产有明确补全路径
查看完整设计资产 →
daren-design/registry/components.manifest.json
Foundationsreadydesign-tokens/tokens/
Components102src/components/
Templates9src/templates/
Harnessactivepackage.json · tokens:lint
foundations → components → templates → delivery
02 · ASSET LIBRARY

开箱即用的
智能体设计资源库

282 个明暗成对的语义 Token、87 个注册组件、14 个正式图标与模板原型——全部以机器可读的 manifest 发布,Agent 不需要「看截图猜」,直接读契约消费。

  • 语义 Token 双层结构:底层值 → 语义别名,换肤零改码
  • 组件 manifest 携带实现位置、契约与成熟度
  • 图标 Registry:Core、Business 与审批扩展统一投影
浏览资产库 →
DESIGN ASSET HUBDaren Design
语义 Token268
组件实现102
模板原型9
注册图标14
03 · UI DISTILLER 产品预览

把看中的界面,
变成设计资产

从看懂界面到交付资产,六个动作各自独立闭环,也能按需组合。可以只拆解出方案、按蓝图复刻,也可以直接适配或检修已有资产。

  • 按需启动、独立交付,在需要的环节继续
  • 检修贯穿各环节,也能单独发起
  • 仅检查出报告;检查并修复,形成复检闭环
独立发起按需组合仅检查检查并修复
了解 UI Distiller →
distiller · product previewRun #024
SOURCE
CANDIDATE
结构 98%视觉 96%交互 12 / 14
04 · LATTICE 产品预览

设计就是拼搭,
一键生成代码

Lattice 的目标是让自然语言和直接操作共同作用于同一个页面模型:既能让 Agent 按契约生成界面,也能在画布上拼搭和调整,最终把设计结果交付为代码。

  • 目标 · Chat to Code:描述目标,Agent 按设计契约生成界面
  • 目标 · Design to Code:拖拽、嵌套和调属性,产出代码
  • 目标 · 人和 Agent 共享页面结构、组件属性与响应式规则
了解 Lattice 设计工作台 →
lattice · product preview
05 · PRODUCTION PIPELINE

重构 Design to Code
生产流水线

定义、实现、装配、质检、交付——五个环节各有明确的上下游契约与质量门。任何资产从候选到上架,路径唯一、证据留痕、状态诚实。

  • 组件生命周期闭环:缺件 → 复刻 → 上架 → 迭代,回到缺件
  • 质量门机器可判:lint、conformance、证据、成熟度
  • 未交付能力公开标注「规划中」,不伪装成已交付
tokens:lint ✓conformance:check ✓evidence 可重放 ✓成熟度分级 ✓
流水线使用指南 →
harness · pipeline run
✓01 · 定义 Foundationstokens 282
✓02 · 实现 Assets87 comps
✓03 · 装配 Latticecontract ok
04 · 质检 Harnessrunning…
○05 · 交付 Deliveryqueued
evidence:3 screenshots · report.html · 可重放
06 · AGENT SKILLS

六大技能,让 Agent
可靠执行

从看懂界面、还原原样到适配规范,六个技能围绕明确任务交付成果。MVP 聚焦拆解、复刻、适配与质检修复,资产入库和上架作为后续扩展。

  1. 拆解dissect

    捕获、解析与提炼,交付方案与可执行蓝图。

    查看技能 ↗
  2. 复刻replicate

    按蓝图还原目标界面的样式、状态与交互。

    查看技能 ↗
  3. 适配adapt

    保留功能与交互,转换成自己的设计语言。

    查看技能 ↗
  4. 检修inspect

    贯穿各环节:检查、修复、复检,也可仅检查。

    查看技能 ↗
  5. 入库register

    整理、校验接口与依赖,登记到组件库。

    查看技能 ↗
  6. 上架publish

    发布到设计站点,方便浏览、发现与使用。

    查看技能 ↗

先在 Mindex 跑通,
再向社区和外部项目开放。

同一套体系,服务三类生产场景:Mindex Dogfood · Mindex Community · Open Source。