用结构化规则探索高重复组件的自动化路径

先用工作量与还原度形成路径假设；Agent 与 Plugin 仅作为待验证探索。

Problem组件库维护

从零太重，批量修改又重复

从零建设太重，批量刷新又高度重复。

Setup cost0→1
Repeated work×N
Exploration 01放弃
放弃

直接改造开源组件库 Shadcn

逐项开发与校准，工作量仍然过大。

Exploration 02存在偏差
存在偏差

从代码同步 UI Kit

设计稿与前端显示仍存在视觉偏差。

Storybook · 样式
Component
Code style
Figma UI Kit · 偏差
Component
Visual delta
Exploration 03保留
保留为基础

用设计规则对接研发

结构、规则与状态标注成为有效交付接口。

设计规则研发实现
间距
12 / 16 / 24
圆角
radius.8
状态
默认 · 悬停 · 禁用
Shared LearningDesign Rules
关键转折

把设计规则结构化

用同一套规则描述研发输入与自动化假设。

01视觉同步
02规则表达
03批量约束
Agent个人探索
待验证原型

Agent 读取结构化规则

展示规则进入批量修改流程的路径假设。

Component set
Variant
Layer naming
Properties
Tokens
Plugin个人探索
概念原型

Plugin 组合样式轴

展示设计师选择变量与组合范围的交互模型。

Style axes3 × 3 × … × n
Density
CompactDefaultLoose
Emphasis
SolidOutlineQuiet
More axes
State×Theme×… n
100%