菜单
Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/x3allamerican/design-skills --skill asymmetric-grid-systems命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | asymmetric-grid-systems |
| description | Use when designing editorial or luxury landing pages. Asymmetric grids feel curated; symmetric grids feel template-SaaS. |
Editorial design hangs on asymmetric grids. A 12-column grid with intentional 3+9, 4+8, or 5+7 splits creates rhythm that symmetric layouts can't.
Symmetric grids are the default. Asymmetric arrangements take intentional choice — they signal curatorial taste. Cream-on-ink editorial layouts (Bugatti, Nautilus, Bloomberg Businessweek) virtually always lead with asymmetric splits.
| Split | Use case | Feel |
|---|---|---|
| 4 + 8 | Hero with sidenote | Magazine cover |
| 5 + 7 | Article with margin notes | Editorial spread |
| 3 + 6 + 3 | Three-column with breath | Catalog |
| 7 + 5 (reverse) | Hero with image right | Counter-rhythm |
| 2 + 10 | Sidebar nav + content | App shell |
Pull-quotes, hero images, and section breaks should occasionally break the column grid. A pull-quote that spans cols 3-9 in an 8-col flow draws the eye. Used sparingly (1 break per 3 screens), this elevates the layout from grid to composition.
Tailwind: grid-cols-12 + intentional col-span-4 col-start-3 placements. CSS Grid: name your areas (grid-template-areas). Avoid bootstrap-style 50/50 splits — those read as template.
Foundation for every CardPrepAI page. Used to ground LLM design decisions in editorial logic.