设计系统迭代
Redesigning the TT4G Design Systemwith Vibe Coding
从组件样本整理设计系统规则，并探索高重复场景的自动化路径
Why are we doing this?
面向 Vibe Coding 的组件代码化
降低人工维护成本
现有设计系统样式偏旧，新设计稿已出现零散调整。以 TUX 基础能力为起点，结合 TT4G 业务组件与优秀产品参考，优化整体设计系统
AI 能力推动设计交付从设计稿延伸至代码层。设计系统需同步梳理 Token、Skill 与组件规范，并与研发封装对接，使更新后的组件具备可调用基础
设计与工程基础
Design Skill 与封装组件为 AI 提供可复用的设计和代码能力
仓库内 Vibe Coding
设计师在代码仓库中创建分支，通过 Vibe Coding 完成页面开发与迭代，让原型更直观
代码直接交付
产出可预览、可审查并直接合并的前端代码
UI Kit
设计系统迭代涉及大量组件、状态与规则，人工逐项修改和校对工作量大，重复性高，因此需要先验证 AI 是否适合这些重复调整
Project Goals
把组件样本沉淀为系统规则、组件规范和可验证的自动化路径
Design System
对照组件样本整理 Token 与视觉角色
Component
补全组件结构、属性、状态与使用边界
Plugin
用原型检查设计师定义的样式轴与组合范围
Token
迁移 TUX Design System 的 Token 构建方法，结合 TT4G 页面校准，形成平台 Token 体系。
拆解并迁移 TUX 体系
理解 Token 与组件的映射关系，复用 TUX 的分层和命名方法建立 TT4G 初始结构
收敛样式规范
盘点全量页面的样式取值，合并重复项、统一视觉规则，沉淀平台 Token 规范
Component
从全量场景反推组件结构与变体，再调研优秀产品实践，校准每一类组件的样式与交互表达。
- Shadcn
梳理页面场景
逐页记录组件在不同任务中的内容、状态与交互
收敛组件变体
合并重复用法，将场景差异转化为属性与变体
参考优秀产品优化组件
从优秀产品中提炼成熟解决方案，结合平台场景优化组件样式与交互
从业务变化中收敛组件变体与使用规范
识别不同业务场景中的必要差异，将重复需求收敛为可复用的组件变体，并明确各变体的适用条件与使用规范。
从设计判断到可验收的研发输入
- 01
「设计输入」用前后对照明确组件的修改范围与规则。
- 02
「规则边界」列明状态、尺寸、样式、交互与不变项。
- 03
「验收条件」提供实现后可逐项核对的统一依据。
02 · 设计迭代
用结构化规则探索高重复组件的自动化路径
交互原型记录路径取舍；工程交接是当前依据，Agent 与 Plugin 仅作为条件探索。
基础组件资产覆盖范围
完成 9 类基础组件的视觉样式与状态整理，作为组件系统覆盖范围的补充证明。
Button
There is a info message.
Draft
Wait Online
Offline
Rejected
TagInput
Tag
suffix
Input
TagInput
TagInput
+2
TagInput
TagInput
+2
TagInput
TagInput
+2
TagInput
Select
Zhejiang/Ningbo/Haishu
Cascader
TreeSelect
Banner
There is a toast message
There is a toast message
There is a toast message
There is a toast messageToast
DatePicker
Videos
1.6K
Videos
1.6K
5.2%
5.2%Videos
1.6K
vs last 7d
13.6%
13.6%Videos
-
Metric Cards
业务抽象
从真实场景定义业务组件的结构、状态和使用边界
协作落地
把设计判断转译成研发可执行、可对照验收的修改依据
Agent 路径原型
展示结构化规则如何进入批量修改流程
Plugin 组合原型
展示设计师如何选择样式轴与组合范围