Meta 黑客松项目 Screenshot to Tokens：SAM 3.1 从截图秒生成设计系统

usamawahabkhan · x · 2026-11-05

为 Meta 全球 AI 开发者黑客松构建的开源项目「Screenshot to Tokens」：对一个没有任何 design token 的在线应用，从像素自动生成完整三级设计系统（primitive → semantic → component）。

流程：Playwright 截全页图并采集每个元素的计算样式；SAM 3.1 从像素中分割按钮、输入框、图标（即使标记缺失）；Muse Spark 为 token 命名并给出理由；人工在 HTML 报告中审核改名；然后把源码中的硬编码值改写为 var(--token, original) 保留原值作回退；最后四项检查（回退零像素变化、合并颜色不可见、改动可审、WCAG AA 对比度不降）通过后自动开 PR。仅两步用 Meta 模型，其余为确定性代码。作者还演示一次改 token 即全局换肤。