设计系统
一套包含颜色变量、字体规范、间距标准、组件库及使用规则的系统化设计规范,用于保证产品界面的视觉一致性和开发效率,典型案例包括Google Material Design和Apple Human Interface Guidelines
核心事实
时间轴 (近 90 天)
设计文档最终被转化为设计系统,包含设计令牌(tokens)、排版规范(typography)、颜色系统(海军蓝搭配白色背景)、以及组件库。
字号比例常见有基于模块比的 1.25 倍或 1.333 倍递进体系,间距常以 4px 或 8px 的整数倍定义
在生成代码前先定义设计系统(约束主色、字体、间距单位、圆角、阴影等)能让AI输出的组件保持视觉统一
在将组件应用到真实业务页面前,先在 /design 路径生成样式指南页面集中审查设计系统,可作为 AI 后续生成的对齐锚点
维护设计系统时应重视变更的可回滚性与渐进式发布,避免大爆炸式改动
设计系统中一个底层 Token 的修改会通过 CSS 自定义属性或预处理器变量的层层继承影响所有引用它的组件
最小权限代理设计模式将模型的推理能力与工具执行能力解耦,并在两者间引入独立的策略执行层
全部知识事实 (8)
AI生成的代码往往缺乏统一的架构设计、命名规范和注释文档,更适合原型验证而非生产级系统
75%待验证设计文档最终被转化为设计系统,包含设计令牌(tokens)、排版规范(typography)、颜色系统(海军蓝搭配白色背景)、以及组件库。
50%待验证字号比例常见有基于模块比的 1.25 倍或 1.333 倍递进体系,间距常以 4px 或 8px 的整数倍定义
50%待验证在生成代码前先定义设计系统(约束主色、字体、间距单位、圆角、阴影等)能让AI输出的组件保持视觉统一
50%待验证在将组件应用到真实业务页面前,先在 /design 路径生成样式指南页面集中审查设计系统,可作为 AI 后续生成的对齐锚点
50%待验证设计系统中一个底层 Token 的修改会通过 CSS 自定义属性或预处理器变量的层层继承影响所有引用它的组件
50%待验证维护设计系统时应重视变更的可回滚性与渐进式发布,避免大爆炸式改动
50%待验证最小权限代理设计模式将模型的推理能力与工具执行能力解耦,并在两者间引入独立的策略执行层
50%