メニュー
Use when laying out hero, section transitions, and premium content. White space is the most expensive visual real estate.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills --skill white-space-as-luxuryコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SOC 職業分類に基づく
SKILL.md を表示中
| name | white-space-as-luxury |
| description | Use when laying out hero, section transitions, and premium content. White space is the most expensive visual real estate. |
Generous white space signals expensive. Tight layouts signal budget/template. The square inches NOT used define quality.
| Element | Padding above | Padding below |
|---|---|---|
| Hero | 5-10 vh | 5-10 vh |
| Major section | 4-8 vh | 4-8 vh |
| Sub-section | 2-4 vh | 2-4 vh |
| Paragraph | 0 | 1.5em |
| Footer | 8-10 vh | 4 vh |
Reserve 30-50% of screen as 'breathing room' on premium surfaces.
Width caps for readability:
Don't let text flow to viewport edge — set max-width.
Mobile reduces vertical white-space by 30-50% (real estate constraint) but maintains horizontal padding (16-24px). Don't let mobile become claustrophobic.
Used as a baseline scaling rule across CardPrepAI's responsive design.