Skill 文件

Skill 是一份写给编码 agent 的单文件规范：不铺垫背景，只写该怎么做、什么会被驳回。把文件交给 agent，它照着做，你不必在对话里逐条复述规范。

本站提供两份，都可直接下载：

对应章节的页面右上角也有下载按钮（设计规范、3D 预览）。

design.md 必须和它描述的代码一起到达 agent 手里。 它带着模板的完整地址，以及一条硬规则：动手搭页面之前先把对应模板抓下来。怎么给，取决于你的 agent 能不能抓 URL。

• 能抓：只给 design.md 一份就够，地址是 https://dev.atomm.com/design.md。它会读布局页的决策表，自己去抓需要的那份骨架版（换成它选中的布局，例如 https://dev.atomm.com/templates/layout-3-generate.skeleton.html），然后在那个文件上做。
• 抓不了：把 design.md 和匹配你布局的那一份骨架版一起贴进去。没有模板时，规范要求 agent 停下来向你索取，而不是自己编——这是「慢一点」和「错了」的区别。

两条路的结果一样：项目里多出两个文件。

your-project/
├── design.md                      # 规范，让 agent 先读它
└── index.html                     # 匹配你生成器的那份骨架版的副本
                                   #   <style>  令牌 + 组件类，不要重写
                                   #   结构与类名要一致，控件接什么逻辑你自己定

抓一份模板，不是五份。 五份共用同一份样式表，骨架版的体积大半是它——全给只花上下文，不增加信息。用布局页的决策表挑出基底；后面确实要用到只有另一份才有的区块，到时再取那一份。

不要用设计稿链接或截图代替。截图只带走样子，不带数字——颜色、尺寸、间距全靠估，每次估得还不一样。这些数值模板里都有。

交给 Claude Code

存成 SKILL.md 放进项目的 skills 目录，agent 遇到相关任务时会自行加载：

.claude/skills/atomm-3d-preview/SKILL.md

3D 预览那份下载下来就叫 SKILL.md，建好目录直接放进去即可。

交给其他工具

Cursor、Copilot 等：把文件放进项目（例如 docs/atomm-3d-preview.md），在对话里 @ 引用；临时用也可以把内容整段贴进对话。

和 LLMs.txt 的分工

• LLMs.txt 是文档全集的索引，解决「agent 不知道 atomm 有什么能力」。
• Skill 是单件事的规范，解决「agent 知道了，但做出来不合格」。

做 3D 预览时两份都给：先让它按 llms.txt 摸清平台，再让它按 skill 落地。