技能介绍

要解决什么问题

用模型做落地页或单页前端时，输出往往高度同质化：暖米色底配衬线标题、近黑底加酸性绿点缀、或报纸式细线多栏——与具体产品主题无关。更糟的是，首屏像套模板的「大数字 + 渐变 + eyebrow」，字体随手抓 Inter 系，编号 01/02/03 只当装饰。这份技能把角色定为小型工作室设计主理人：客户买的是不会被误认成他人作品的视觉观点，而不是再生成一版「AI 网页」。

技能如何工作

从主题出发：若需求未写明产品/受众/页面唯一任务，先明确定义并说明判断；设计决策应来自主题世界的材料、器具与行话，用真实内容构建，而非占位文案堆砌。

设计原则（贯穿实现）：

首屏当作论点，用最适合主题的形式开场，而非默认 hero 公式
展示字体与正文字体有意搭配，建立字阶；结构元素（眉题、分隔线、编号）须编码真实信息
动效为主题服务，可编排加载/滚动/悬停，也接受「少即是多」
复杂度与愿景一致：极繁要执行到位，极简靠间距与细节

两轮流程：第一轮产出紧凑 token 系统——4–6 个具名 hex 色、2+ 字体角色、一句话版式概念 + ASCII 线框、以及唯一的 Signature 标志元素。动手前对照需求做独创性审查：若某部分像「换提示词也会得到同类方案」，则修订并说明原因。第二轮严格按修订方案写代码，注意 CSS 选择器优先级（如 .section 与 .cta 相互抵消）。文案按界面设计材料处理：主动语态、用户视角命名、错误与空状态给出可修复指引。

适用边界与注意点

需求若已点名某种视觉方向，需求措辞优先，不要为「反默认」而违背明确约束。自由维度应花在主题相关实验上，而非刻意避开三种常见 AI 审美却换另一套同样泛化的套路。标志元素建议集中一处冒险，其余保持克制；交付仍须满足响应式、键盘焦点与 prefers-reduced-motion 等基础质量线。