技能介绍

要解决什么问题

很多由模型生成的落地页会收敛到同一套「AI 审美」：暖奶油底、衬线大标题加赤陶强调色，或纯黑底配单一荧光强调色，再或是细线零圆角的报纸分栏。Brief 里若没写死风格，结果往往像模板换皮，而不是为这份内容与受众定制的识别系统。另一个常见缺口是 brief 只有结构没有真文案，Hero、层级和动效也容易被默认组件堆满，CSS 类名与选择器优先级互相打架。

技能如何工作

技能要求你以小型设计工作室设计主管的立场接单：在 brief 缺主题时，先自行界定具体主题、受众与页面唯一使命，并从主题世界的材料与语境里推导调色板、字体与布局，而不是从记忆里的「安全牌」出发。

核心流程是两轮制：

第一轮（头脑风暴与方案）：产出紧凑的 design token——4–6 个具名 hex 色、至少两种字体角色（展示 / 正文 / 可选辅助）、一句话布局概念加 ASCII 线框，以及一个标志性元素（页面会被记住的那一点）。
第二轮（批判与修订）：对照 brief 检查方案是否「换任何类似页面都会一样」；若是，必须说明改了什么、为什么改，确认具备相对独特性后再写代码，且每个色彩与字体决策都要能从方案追溯。

设计原则贯穿构建：Hero 即论点（用主题最具特征的开篇形式，慎用大数字+渐变等模板答案）；结构即信息（编号、眉题只在内容真是序列时才合理）；动效有意识（加载、滚动、悬停服务于主题，避免堆砌）；复杂度与所选极简/极繁愿景匹配。编码阶段需注意 .section 与 .cta 等选择器优先级导致的 margin/padding 互相抵消。界面文案按独立章节处理：用户侧命名、主动语态、错误与空白状态的说明口吻，文案是导航材料而非装饰。

适用边界与注意点

Brief 若明确指定某种视觉方向（包括上述三种常见 AI 风格），以 brief 文字为最高优先级。自由度只在 brief 未约束的维度上发挥，而不是刻意回避客户已选的风格。技能强调在脑中完成大量规划与迭代，置信度足够再展示；交付仍应满足基础品质：响应式、键盘焦点、prefers-reduced-motion 等。标志性元素宜集中一处大胆，其余界面保持克制，避免处处抢眼反而像生成稿。