Skills / 设计系统
AI 时代,设计系统需要演进
好的设计系统,承接 AI 时代团队中每个角色的职能任务——设计师定义规则,工程师调用组件,PM 对齐预期,AI Agent 执行生成。它是团队共同的产品语言,也是降低跨角色沟通摩擦的最短路径。
01AI 生成的 UI 为什么总是「差一点」?
UI 不符合规范
AI 生成的界面颜色、间距、圆角随机,每次输出都不一致。团队花大量时间手动修正。
设计语言无法统一
多人协作或跨产品线时,AI 没有统一的视觉标准可参考,每个页面看起来像不同产品。
复杂业务场景
当前的传统工作流无法有效支撑。当面临复杂业务时,缺乏沉淀的业务组件库会导致 AI 生成的界面脱离实际可用性。
Prompt 工程脆弱
靠「请用蓝色主题」这样的自然语言控制样式,结果不可预测、不可复现。
02重构策略
从基础控件到业务对象
Button → OrderTicket设计师的起点不是画 Button 和 Input,而是理解业务、将核心业务解构为带有语义的产品组件。Agent 接管重复的组件绘制,设计师专注于定义 Market、Order、Position 这些业务对象的交互逻辑。
从静态画布到可编程容器
视觉稿 → 可编程 API通过 Figma MCP,设计工具从「只能看」变成「可读写」。Agent 能直接在 Figma 中创建组件、写入元数据、验证复用逻辑——Figma 本身成为 AI 可操作的组件库。
从视觉规范到可执行规则
PDF 文档 → Skill 路由设计系统不再是 PDF 或 Figma 标注。它被拆解为 Component Registry(组件清单)、Workflow Index(流程映射)和 AI Skill(执行路由)三层可被 AI 直接调用的结构。
03落地工作流:从 Figma 组件库到 Skill
Coding Agent 介入
第一步不是让 AI 直接画页面,而是先理解 Market、Order、Position 等业务对象。把 AI 的注意力从「基础控件」拉回「业务组件」。
Figma MCP 读写
Figma 不只是静态画布,更是可读写的组件容器。Agent 通过 MCP 协议直接在其中创建组件、写入元数据和验证复用逻辑。
业务组件与模板沉淀
跨越 Button 等基础控件,逐步演进并沉淀为 OrderTicket 等正式业务组件,直至组合成完整的页面模板(Workbench)。
Registry & Index 索引
构建清晰的组件清单(Registry)与业务流程映射(Index),让 AI 明确知道在什么场景选用哪些组件,消除组合幻觉。
封装为 AI Skill
将设计规则与索引打包成 Skill,使其作为「组件库使用路由器」,指引 AI Agent 按规范拼装页面。
团队自然语言调用
团队成员只需一句自然语言触发 Skill,AI 即可自动读取规范、选取业务模板,生成结构正确、设计一致的终端界面。
04核心洞察
从画图者到基础设施构建者
不再局限于「画稿、交付、等开发」的传统单向流。AI Native 设计师的核心价值,是把设计系统建设成可被 AI 调用的基础设施,赋能整个团队自助产出。
让设计资产转化为可执行的 API
设计系统从静态文档变成了 Agent 可调用的 Skill。设计师通过维护底层业务组件和规则路由,让设计资产在工程团队中无缝流转与自动拼装。
像迭代产品一样迭代 Skill
Skill 不是一劳永逸的静态交付物,而是需要跟随业务演进的动态系统。建立从「创造、评测」到「迭代、优化」的生命周期闭环,将是未来设计师的核心竞争力。