ui-layout

---
name: ui-layout
description: UI 布局审美 —— 给 AI 编码助手用的网页/界面排版审美技能。当用户要做官网首屏、落地页、产品页，或者页面"看着很普通/很模板/没有设计感"想要改排版时使用。它解决的是"版面骨架"问题（留白、主次、字号对比、配色克制），不是具体交互动效（那是 ui-motion 管的）。
---

# UI 布局审美

你的目标：排出来的版面要有"主次分明、留白克制、经得起放大看细节"的高级感，不是"四平八稳但很模板"的 AI 默认排版。

## 工作方式

1. 先问清楚（或从上下文判断）用户想要的调性：精密克制 / 冲击力强 / 温暖亲和……从 `references/designs.md` 设计点库里挑最贴近的几条组合使用，不用全部用上。
2. 严格按设计点里的具体数值实现（色号、占比、字重、裁切规则），不要"大概意思对就行"。库里没有完全匹配的场景，按 `references/foundations.md` 的布局基础原则自己设计，但仍要给出具体数值。
3. 交付前按 `references/anti-template.md` 逐条自检，排除掉"一眼 AI 感"的典型问题。

## 场景判断（怎么选设计点）

用户说要做某个页面或某种感觉时，按下面的对照表判断该用哪个设计点：

| 用户需求 | 推荐设计点 | 不用的情况 |
|---|---|---|
| 想要"精密仪器感"、高级冷静的产品/官网首屏 | 配色极度克制 2 Colors Only | 品牌本身调性活泼多彩 / 电商类需要突出促销色 |
| 首屏标题太"规矩"、想要标题本身成为视觉主体 | 标题顶满边缘 Edge-to-Edge Type | 标题文字本身很长（裁切会丢失关键信息）/ 品牌名必须完整露出（如法务要求） |
| 想要科技感、参与感强的产品展示，又不想用真实产品照片 | 线稿3D模型不填色 Wireframe 3D | 产品需要强调真实质感、材质（如美食、服装）/ 没有 3D 建模资源和预算 |
| 技术型工作室想证明实力，不想堆文案自夸（跨界：偏交互） | 按住触发物理反馈 Press-and-Hold Physics | 用户群体非技术向、交互成本太高 / 移动端触屏不直觉 |
| 首屏3D主视觉想用一套模型讲两种调性，不想重新建模（跨界：偏交互） | 同模型换材质 Material Swap on Same Model | 只需单一调性 / 模型复杂导致渐变过渡诡异 / 移动端性能敏感 |
| 案例多且杂，想不跳页就能快速对比分类（跨界：偏交互） | 点击筛选重排 Filter-and-Reflow | 分类需要承载大量独立详情信息 / 内容总量很少 |
| 年度回顾/时间线等长页面，用户滚着滚着会迷路 | 标题当锚点 Anchor Title | 短页面没有迷路问题 / 标题太长固定后挤占内容 |
| 作品集/图集想要随手翻相册的松弛感，不要商品目录感 | 错落照片墙 Scatter Wall | 电商商品列表需要整齐对比 / 需要强秩序权威感 |
| 以照片为绝对主角，想让照片色彩最大化跳出来 | 框架无彩 Mono Frame | 没有足够好看的照片撑场 / 品牌强调彩色识别 |
| 产品造型普通，想靠排版制造冲击力和记忆点 | 大字当背景 Type as Background | 产品造型/材质本身是卖点 / 关键词太长放不下 |
| 多口味/多型号系列展示，想让滚动浏览有翻色卡的节奏感 | 整屏换色 Full-screen Swatch | 成员数量很多 / 需要同屏对比规格 / 品牌要安静克制 |
| 营养表/参数/条款等枯燥信息，想带上品牌个性 | 小报营养版 Tabloid Nutrition | 医疗金融法务等严肃调性 / 信息需绝对严谨中立 |

库里没有完全匹配的需求时，按下面"布局审美底线"自己设计，但要给出具体数值（色号、px、百分比），不说"留白多一点""字大一点"这种模糊描述。

## 布局审美底线（所有排版都要满足的通用准则）

- **有克制**：一个页面的"主色+强调色"控制在 2-3 种以内，强调色出现的次数越少越贵（理想情况只出现 1 次）。
- **有主次**：同一屏里只能有一个最大的视觉焦点（标题或主视觉之一），不能让标题、按钮、卡片同时抢视线。
- **有呼吸**：留白不是"没内容"，是故意的节奏控制；不要把元素摆满整屏凑数据密度。
- **有理由**：每一个"反常规"的设计决定（裁切文字、留超大空白、不填色）都要能用一句话讲清楚为什么，讲不出理由的"反常规"就是乱来。
- **可验证**：排版决定尽量落到具体数值（占屏幕宽度多少%、字重多少、色号是多少），方便 AI 稳定复现，而不是"看起来高级就行"这种无法执行的描述。

## 输出要求

- 给用户的描述词要包含：一句话定调 + 色号写死并说明用途 + 字体数量≤3种 + 具体数字（占比/px/字重）+ "不许擅自改进"的明确约束 + 验收标准。
- 排版建议优先给可以直接复制执行的完整描述词，而不是零散的几条意见。

• SKILL.md 5 KB
• references/anti-template.md 2 KB
• references/designs.md 19 KB
• references/foundations.md 3 KB