Atelier 设计到实现编排
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @org-02qudk26/atelier-zh。
技能介绍
要解决什么问题
设计到实现往往被拆成互不衔接的环节:Figma 提取、token 归一化、快速原型、像素级复现、幻灯片与营销资产、生产前端各自找不同 agent,交接靠自由文本,硬编码值会在下游悄悄回流。atelier 针对的是单次请求需要多种产物、且必须回到代码或可分发 spec 的场景——例如落地页从方向到 Artisan 代码、或 pitch deck + 营销资产 + 一页纸作为一包。
如何工作
atelier 是流水线编排器,不替 Vision 做美学决策,也不直接写生产代码。典型路径为 Muse/Frame → Forge → Artisan(视请求形态扩展 Pixel、Ink、Stage、Canvas、Morph、Vitrine 等)。
- ONBOARDING 与缓存:首次运行扫描代码库或委托 Frame 提取 Figma,将设计系统写入
.agents/design-system/{project}.json;后续先读缓存,仅在 token 漂移、文件哈希变更或显式刷新时重跑。 - 最小可行扇出:按产物形态选委托,每轮并发委托上限 5;独立产物轨(如 Stage + Ink + Forge)默认并行。
- DESIGNINTENTHANDOFF:向每个下游 agent 附带 token 引用、意图参数(含 parametric slider)、约束、可测量成功标准与出处,拒绝无 schema 的委托。
- 闭环交付:每次运行以 Artisan/Vitrine 代码、Canvas spec 或 Morph/Stage 可分发产物结束;DELIVER 前对视觉产物做 WCAG 2.2 AA 对比度校验。
工作流阶段:ONBOARDING → INTAKE → PLAN → EXECUTE → HANDOFF → DELIVER。子命令 pipeline(默认完整流水线)、extract、persist、assets 可收窄范围。
适用边界
- 仅调 token → Muse;仅原型 → Forge;仅方向无下游 → Vision;仅 Figma 提取 → Frame;仅按 spec 写前端 → Artisan;跨安全/数据/基础设施 → Nexus。
- 无
direction.md或用户显式美学简报时,atelier 不会发明方向,会先澄清或路由到 Vision。 - 注册表写入若会改既有 token 值或
brand.voice/ brand.do·dont,需用户确认后再持久化。
使用场景
- 已有 Figma 落地页稿,需要从 Frame 提取 token 并经 Forge 原型验证后交给 Artisan 出生产代码与 Vitrine Storybook
- 代码库里已有 CSS 变量与 Tailwind 配置,要 onboard 到 `.agents/design-system/{project}.json` 并据此原型化一块新 Dashboard 屏幕
- 品牌方向已在 direction.md 定稿,同一轮要并行产出 Marp pitch deck、Ink 营销图标集和 Morph 导出的一页纸 PDF
- Landing page 从 Vision 简报到 Vitrine 目录的完整闭环,且交付前需通过 WCAG 2.2 AA 对比度关卡
适合人员
- 负责 SaaS 或 Dashboard 产品、经常要把 Figma 与代码库设计 token 对齐再发版的前端 Tech Lead
- 市场或增长同学,需要在已定品牌简报下一次性拿到演示幻灯片、营销视觉与可分发一页纸,而不是分头找多个工具
- 设计系统 Owner,希望项目首次提取后持久化注册表,后续 agent 复用同一 token 版本且仅在漂移时刷新
- Claude Code / Codex 多 agent 工作流使用者,需要按产物形态最小扇出 Frame、Muse、Forge、Artisan 并带 DESIGN_INTENT_HANDOFF