Sunbeam
Sunbeam 是 AstraFoundry 的样子：暖色墨水、一种黄色，照片营造氛围，实色表面承载焦点。
Sunbeam 的特征
六个特征贯穿每一个产品。每块磁贴用几步动作演示一个，点开查看完整规则。
该做与不该做
切换每个示例，对比规则和它要取代的习惯做法。
底图
卡片以背景库中动态模糊的自然照片为底图。
焦点
只让一个表面实色清晰，相邻元素用半透明色调压低存在感，并允许它们延伸出边缘。
照片上的文字
说明文字放在左下角的卡片边距处，用柔和的浅色墨水，下方垫墨色渐变。
圆角
内圆角等于外圆角减去内边距：28 − 10 = 18。
黄色
黄色只用在唯一的主操作上，其余都用墨色。
动效
被看到时用短促的弹性播放一次，然后停在结果上。
开始使用
网站安装 npm 包，Agent 加载 Skill 或读取 DESIGN.md。
npm 包
适用于 Tailwind v4 的 Token、背景照片、背景卡片和模拟界面舞台。
pnpm add @astrafoundry/designAgent Skill
让 Claude Code、Codex 等 Agent 遵循与本站相同的规则。
npx skills add https://github.com/AstraFoundry/astrafoundry.si/tree/main/packages/design/skills/sunbeamDESIGN.md
以其他 Agent 和设计工具读取的开放格式，提供同一套 token 和规则。
curl -fsSL https://astrafoundry.si/design.md -o DESIGN.md