Layout Discipline · 规范排版

一个给 Claude / AI 用的 Agent Skill：在 AI 生成网页 / HTML / demo 时，自动施加一套排版规范，专治最常见的三类毛病——字号层级浑浊、间距随手乱写、卡片各长各的。

An Agent Skill for Claude and other AI agents. It enforces a consistent set of layout rules on AI-generated HTML / demos, fixing the three most common flaws: muddy type hierarchy, off-grid spacing, and inconsistent cards.

它不负责让设计有个性（那是审美层的事），只负责在内容和审美都做完之后，把版面里"歪的、糊的、不成体系的"按死规矩拍整齐。

It doesn't give the design personality (that's the aesthetic layer's job). It runs after content and aesthetics are done, snapping everything misaligned, muddy, or inconsistent into one coherent system.

它管什么 · What it covers

字号只用 5 档，相邻档位差距拉开，消灭 14/15/16px 挤一堆的浑浊感
间距只用 4 的倍数，禁止 13px / 27px 这类歪数
对齐铁律：统一左边界、等宽栏距、网格排列、图标文字光学居中
卡片标准件：圆角 / 阴影 / 内边距一套规格，不许特立独行
颜色走变量：集中在 :root 按角色命名，正文里不许散落裸 hex
行高与垂直节奏：正文行高、段间距统一，读起来顺
交付前自检 + 自动体检脚本：产出后先自查再交付

In English:

Only 5 font sizes, with a clear step between adjacent levels — no more muddy 14/15/16px clusters.
Spacing only in multiples of 4 — no off-grid values like 13px / 27px.
Alignment rules: one shared left edge, equal gutters, grid layout, optical centering of icons and text.
One card spec: shared radius, shadow, and padding — no card goes its own way.
Colors as variables: defined once in :root and named by role; no scattered raw hex in the body.
Line height & vertical rhythm: consistent body line height and paragraph spacing for easy reading.
Pre-delivery self-check + auto-check script: review before shipping.

目录结构 · Structure

layout-discipline/
├── SKILL.md                  # 核心：触发描述 + 六条军规 + 自检清单
│                             # Core: trigger description + six rules + checklist
└── scripts/
    └── check_layout.py       # 轻量体检脚本（纯标准库，零依赖）
                              # Lightweight check script (stdlib only, zero deps)

怎么用 · How to use

在 Claude.ai / App 里使用 · In Claude.ai / the app

进入设置 → Capabilities / Skills（技能）
上传本仓库里的 layout-discipline 文件夹（或打包好的 .skill 文件）
之后只要你让 Claude 做网页、HTML、demo、卡片、原型，或抱怨"排版不齐、间距乱、不规范"，它会自动按这套规范产出并自检

In English:

Go to Settings → Capabilities / Skills.
Upload the layout-discipline folder from this repo (or the packaged .skill file).
From then on, whenever you ask Claude to build a web page, HTML, demo, card, or prototype — or complain that the layout is misaligned or messy — it will produce output that follows these rules and self-checks it.

单独跑体检脚本 · Run the check script standalone

python3 layout-discipline/scripts/check_layout.py 你的文件.html

脚本只读取、不修改文件，会按行号列出"非 4 倍数间距、超出 5 档字号、散落裸色值"三类问题。

The script only reads, never modifies. It lists three kinds of issues by line number: off-grid spacing (not a multiple of 4), font sizes outside the 5-tier scale, and scattered raw hex colors.

已知边界：脚本是零依赖的文本扫描器，不解析完整 CSS 语法树。因此正文文字里若出现 hex 色值（如文档示例），也会被当作"散落颜色"一并报出。真实样式表里极少在正文写 hex，日常基本不受影响；如需精确解析可自行接入第三方 CSS 解析库，但会牺牲"零依赖、易分发"的优点。

Known limitation: the script is a zero-dependency text scanner, not a full CSS parser. Hex values that appear in body text (e.g. in docs) will also be flagged as "scattered colors." Real stylesheets rarely put hex in body text, so this seldom matters in practice. For precise parsing you can plug in a third-party CSS parser, at the cost of the zero-dependency, easy-to-distribute design.

自定义 · Customizing

规范里的具体数值（5 档字号、间距阶梯、颜色变量）都集中在 SKILL.md 的 :root 代码块里，想改直接改。注意：如果改了字阶，记得同步更新 check_layout.py 顶部的 ALLOWED_FONT_SIZES_*，否则体检会误报。

All concrete values (the 5-tier type scale, spacing steps, color variables) live in the :root block inside SKILL.md — edit them directly. Note: if you change the type scale, also update ALLOWED_FONT_SIZES_* at the top of check_layout.py, or the checker will produce false positives.

许可 · License

MIT

Layout Discipline

README