メニュー
Use when creating visual hierarchy between sections. Background variations (cream, cream-dim, cream-hint) define sections without color.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills --skill background-tone-variationsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when shipping a page. Accessibility tier (A, AA, AAA) sets minimum requirements; AA is the legal default in most jurisdictions.
Use when sizing images and embedded media. Consistent aspect ratios (16:9, 4:3, 1:1, 3:4) signal designed layout.
Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS.
| name | background-tone-variations |
| description | Use when creating visual hierarchy between sections. Background variations (cream, cream-dim, cream-hint) define sections without color. |
Section hierarchy via background tone variation (e.g., cream → cream-dim → cream-darker). All within 5-10% lightness range; never cross to different hue.
From base cream (#fbf6ec):
All within the same hue — no shifts to grey or yellow.
Use bg variations for:
Don't overuse — 3-4 bg shifts per page maximum.
In dark mode:
Same proportional shifts, same hue logic.
Used in CardPrepAI section design.