Atelier 设计工作室

要解决什么问题

用通用大模型直接「画界面」，常见结果是：后台像落地页、仪表盘像营销站、间距与配色靠默认审美堆叠，产出带着明显的 AI slop（渐变滥用、假数据曲线、emoji 当图标）。更麻烦的是，前后几次对话之间没有 单一真源——改一版 HTML 就丢令牌与组件约定，前端落地时又与原型脱节。

技能如何工作

本技能把角色定为「有取舍的设计师」，先 总路由 判断任务属于哪条链路，再按需展开参考文档（渐进披露，避免一次塞满上下文）：

• 风格启发：需求模糊时做精简访谈，锁定品类标杆与内容范围，从风格库给出 3 个差异化方向（不是换色）。
• 原型设计：按平台/媒介（Web 后台、落地页、App、幻灯片、动效等）定范式，用 DESIGN.md 建或读 设计契约，高保真产出须把契约里的 CSS 变量（尤其 --space-*）完整写入 :root。
• 设计评估：按多维 rubric 打分，输出结论、指到元素的原因、可执行改进项。
• 前端开发：把令牌映射到目标栈（React/Vue/Tailwind/AntD 等），实现后仍要对齐契约。

三条铁律贯穿全程：契约优先于默认审美；动手与收尾对照反 slop 清单；交付前必过 五道 Gate（令牌完整性脚本、实机截图、内容忠实、品类贴合、品质自审）。涉及真实品牌时需官方 logo/产品图；产品事实用检索核实，不靠训练记忆断言。

适用边界

HTML/前端是主要交付形态，幻灯片为 1920×1080 可切换 deck，动效为时间轴驱动；图片/视频生成与导出依赖宿主或其它插件，技能本身不内置。跨 Claude Code、Cursor 等兼容 Skills 的宿主时，核心是同一套契约与自检纪律，而非绑定某一框架。