Sunbeam
Sunbeam は AstraFoundry の見た目です。温かいインク、ひとつの黄色、空気をつくる写真、焦点をつくる不透明な面。
Sunbeam らしさ
すべてのプロダクトに共通する 6 つの特徴です。各タイルが数手で 1 つずつ示します。開くと詳しいルールが読めます。
すること・しないこと
各例を切り替えて、ルールとそれが置き換える癖を見比べてください。
背景
背景ライブラリの流し撮りの自然写真にカードを載せる。
焦点
くっきりした不透明な面はひとつだけ。隣は半透明の色味で抑え、端からはみ出してもよい。
写真の上の文字
キャプションは左下のカード余白に、控えめな明るいインクで。下にインクのスクリムを敷く。
角丸
内側の角丸 = 外側の角丸 − 余白：28 − 10 = 18。
黄色
黄色は唯一の主要操作だけに使い、ほかはインクのまま。
モーション
見られたときに短いスプリングで一度だけ再生し、結果で止める。
使いはじめる
サイトはパッケージを入れ、エージェントはスキルか DESIGN.md を読みます。
パッケージ
Tailwind v4 用のトークン、背景写真、背景カード、モック UI のステージ。
pnpm add @astrafoundry/designエージェントスキル
Claude Code や Codex などのエージェントに、このサイトと同じルールを渡します。
npx skills add https://github.com/AstraFoundry/astrafoundry.si/tree/main/packages/design/skills/sunbeamDESIGN.md
ほかのエージェントやデザインツールが読むオープンな形式で、同じトークンとルールを提供します。
curl -fsSL https://astrafoundry.si/design.md -o DESIGN.md