技能介绍

它解决什么问题

新建项目的视觉决策通常散落在设计师脑子里：配色跟着流行走，字体凭感觉挑，间距没有节奏。结果往往是首页像 2023 年的模板站，正文对比度不达标，深色模式变成最后补的补丁。这个技能把「视觉方向定义」变成一套可执行的检查：它要求你先回答品牌是谁，再决定色板和字体，而不是先挑一个好看的渐变。

核心能力与工作流程

技能覆盖四块内容：

配色系统：主色（仅用于 CTA 与激活态）、中性色（至少 5 级灰阶）、语义色（成功/警告/错误/信息）、可选强调色。文本对比度不得低于 4.5:1（WCAG AA）。深色场景用 #0A0A0A 到 #1A1A1A，生活类品牌用暖白 #FAFAF5 到 #F5F0EB。主色板中不允许超过 2 个彩色。
字体配对：最多 2 个字体家族。三种推荐组合：几何无衬线 + 人文无衬线（如 Inter + DM Sans）、现代衬线 + 中性无衬线（如 Fraunces + Inter）、等宽 + 无衬线（开发者工具）。标题至少是正文的 3 倍大小，正文不得小于 16px。
版式构图：非对称平衡、桌面端 120–200px 的纵向节奏、12 或 16 列网格（允许有意打破）。图片全宽，正文限制在 720px 内、每行 65–75 字符。
视觉语言：统一的图片风格与滤镜，优先真实摄影，不用 AI 生成图作主视觉，图片必须是 WebP/AVIF 并带 alt。

它内置几种模式：暗色优先（深色先设计，浅色由 CSS Custom Properties 派生）、文字型 Hero、交替背景节奏、单色 + 单一强调色、超大字体网格。文末 Checklist 逐项核对色板角色、字体数量、对比度、图标一致性、阴影层级（最多 5 级）等。

适用边界

它不是组件库，不输出代码组件，只定义方向与约束。色板原型与字体趋势在 references/archetypen.md。反模式清单（趋势拼贴、高饱和渐变、4 种以上字体混用、阴影滥用）在评审时同样重要。安全上，技能不会自动安装依赖或创建持久化任务；涉及发布、删除、部署等外部写入，会先展示目标与影响并等待确认。