经 SAP 复杂设计系统实测的三步法:把你的设计系统变成 Make 真正会用的 Kit 与模板。
Figma deep dive: Make | Config 2026 · Laura
全片 29 分钟·真正值得盯屏约 14 分钟·3 个必看点
- 0:17 – 7:21听
破除“Make 不认设计系统”的误解
开场澄清最常见的抱怨:Make 完全可以基于你的设计系统产出,问题在于没人教它方法。界定设计系统支持、code layers、本地代码库三种接入方式与全场概念框架。
把组件库直接丢给 Make 没用,必须通过结构化路径“教会”它你的系统。
纯口头论述与概念铺垫,无关键画面,通勤听即可。▶ 跳到 0:17 - 7:21 – 12:01听
机器可读指南的三个核心文件
讲解如何把人类指南拆成 bite-sized 多文件结构:guidelines 定产品性格与必读顺序、discovery 教 agent 导航防幻觉、setup 精确写 import 与构建配置。SAP 案例全程转换只花约 42 分钟。
guidelines/discovery/setup 三个高层文件是 Make 及任何 LLM 用好设计系统的结构基础,转换比想象中容易。
以口头讲解文件职责为主,无演示画面,记住三个文件的分工即可。▶ 跳到 7:21 - 12:05 – 18:14看
实操:从零构建 SAP Make Kit
Brett 现场从设置入口建 Kit:对比 library styles 与 NPM 包两条路径,选入 SAP UI5 全套包写进 package.json,再批量导入机器可读指南并替换占位文件。
进阶团队走 NPM 包路径;每次只拖约两个指南文件夹便于排错,默认 Guidelines 入口文件绝不能删。
全程真实产品操作演示,界面入口、文件树变化和导入细节必须看画面才能照做。▶ 跳到 12:05 - 18:14 – 21:40看
发布前测试:合规 skill 与组件橱窗
用贴近自家产品的健壮 prompt 生成整屏界面,再用 Fury 合规检查 skill 验证产出用的是真实设计系统组件;发布前把起始屏改造成可交互组件橱窗,并设置名称、缩略图与版本管理。
别“YOLO”直接发布——“make me a button”级的测试太容易通过,要用整屏生成加合规 skill 才算真验证。
合规检查结果与组件橱窗效果都是画面呈现的关键证据,只听会错过验证方法的实际样子。▶ 跳到 18:14 - 21:40 – 25:36看
在 Kit 之上构建团队模板
Laura 演示挂载已发布 Kit 后,用一条极详尽的 scaffolding prompt(不附设计稿)生成页面模板,并内置 onboarding 弹层与 presets/recipes 面板,让任何人一键切换整个界面。
只用纯 prompt、严格限定 NPM 包与指南来生成模板,是检验设计系统与 Kit 是否扎实的硬核测试。
长 prompt 的写法、onboarding 与 presets 面板的实际交互都在屏幕上,是本段的核心信息载体。▶ 跳到 21:40 - 25:36 – 29:27听
收尾:交付物版图扩张与治理闭环
总结设计交付物正从 library 与文档扩展到指南、skill、Kit 与模板;Kit 更新会自动下推到所有消费它的模板与 Make 文件,形成持续治理与反馈循环。
这套基础设施的意义不在让个人变强,而在赋能整个团队在代码中、在设计系统之上做原型。
收束性论述与愿景陈述,无演示画面,听结论即可。▶ 跳到 25:36