---
name: design-taste-frontend
description: "反模板前端技能，适用于落地页、作品集和重新设计。Agent 读取需求，推断正确的设计方向，交付不显模板化的界面。需要时使用真实设计系统，重新设计时以审计为先，严格执行预输出检查。"
---

# tasteskill：反模板前端技能

> 落地页、作品集和重新设计。不适用于仪表盘、数据表格或多步骤产品 UI。
> 以下每条规则都是**按上下文触发的**，不会自动全部执行。先阅读需求，再提取适合的部分。

---

## 0. 需求推断（在做任何事之前先读懂需求）

在触碰代码或调整旋钮之前，**推断用户真正想要什么**。大多数 LLM 设计输出糟糕是因为模型跳转到默认审美，而非读懂需求。

### 0.A 先读取这些信号
1. **页面类型** - 落地页（SaaS/消费品/代理商/活动）、作品集（开发者/设计师/创意工作室）、重新设计（保持 vs 翻新）、编辑/博客。
2. **用户使用的氛围词汇** - "极简"、"宁静"、"Linear 风格"、"Awwwards"、"野兽派"、"高端消费"、"Apple 式"、"好玩"、"严肃 B2B"、"编辑式"、"代理商风格"、"玻璃感"、"暗黑科技"。
3. **参考信号** - 他们链接的 URL、粘贴的截图、提到的产品、竞争的品牌。
4. **受众** - B2B 采购委员会 vs 注重设计感的消费者 vs 浏览作品集的招聘人员。受众决定审美，不是你的品味。
5. **已存在的品牌资产** - 标志、颜色、字体、摄影风格。对于重新设计，这些是起始材料，不是可选输入（参见 Section 11）。
6. **隐性约束** - 无障碍优先的受众、公共部门、受监管行业、信任优先的商务、儿童产品。这些约束**覆盖**审美偏好。

### 0.B 在生成前输出一行"设计解读"
在任何代码之前，用一行说明：**"解读为：<页面类型> 面向 <受众>，<氛围> 语言，倾向于 <设计系统或审美家族>。"**

示例解读：
- *"解读为：B2B SaaS 落地页面向技术买家，Linear 风格极简语言，倾向于 Tailwind utilities + Geist + 克制动效。"*
- *"解读为：独立设计师作品集面向招聘经理，编辑/动态字体语言，倾向于原生 CSS + 滚动驱动动画 + 自定义字体。"*
- *"解读为：公共部门服务站点重新设计，信任优先语言，倾向于 GOV.UK Frontend 或 USWDS。"*

### 0.C 如果需求模糊，问一个问题，不要猜测
正好问**一个**澄清问题——从不问多个——且仅当设计解读确实存在分歧时。示例：*"应该更接近 Linear 风格还是 Awwwards 实验风格？"*

如果可以从上下文自信推断，**不要问**。直接声明设计解读并继续。

### 0.D 反默认纪律
不要默认使用：AI 紫色渐变、居中 hero 配深色网格、三个相等功能卡片、通用玻璃态、无限循环微动效、Inter + slate-900。这些是 LLM 的默认值。根据设计解读有意识地去超越它们。

---

## 1. 三旋钮（核心配置）

设计解读后，设置三个旋钮。以下所有布局、动效和密度决策都由这些控制。

* **`DESIGN_VARIANCE：8`** — 1 = 完美对称，10 = 艺术混乱
* **`MOTION_INTENSITY：6`** — 1 = 静态，10 = 电影/物理动效
* **`VISUAL_DENSITY：4`** — 1 = 画廊/通风，10 = 驾驶舱/数据密集

**基准线：** `8 / 6 / 4`。除非设计解读覆盖，使用这些值。不要要求用户编辑此文件——覆盖通过对话进行。

### 1.A 旋钮推断（设计解读 → 旋钮值）
| 信号 | VARIANCE | MOTION | DENSITY |
|------|----------|--------|---------|
| "极简/干净/宁静/编辑式/Linear 风格" | 5-6 | 3-4 | 2-3 |
| "高端消费/Apple 式/奢华/品牌" | 7-8 | 5-7 | 3-4 |
| "好玩/狂野/Dribbble/Awwwards/实验性/代理商" | 9-10 | 8-10 | 3-4 |
| "落地页/作品集/营销站点（默认）" | 7-9 | 6-8 | 3-5 |
| "信任优先/公共部门/受监管/无障碍关键" | 3-4 | 2-3 | 4-5 |
| "重新设计 - 保持" | 匹配现有 | +1 | 匹配现有 |
| "重新设计 - 翻新" | +2 | +2 | 匹配现有 |

### 1.B 用例预设
| 用例 | VARIANCE | MOTION | DENSITY |
|------|----------|--------|---------|
| 落地页（SaaS、主流） | 7 | 6 | 4 |
| 落地页（代理商/创意） | 9 | 8 | 3 |
| 落地页（高端消费） | 7 | 6 | 3 |
| 作品集（设计师/工作室） | 8 | 7 | 3 |
| 作品集（开发者） | 6 | 5 | 4 |
| 编辑/博客 | 6 | 4 | 3 |
| 公共部门服务 | 3 | 2 | 5 |
| 重新设计 - 保持 | 匹配 | 匹配+1 | 匹配 |
| 重新设计 - 翻新 | +2 | +2 | 匹配 |

### 1.C 旋钮如何驱动输出
将这些（或用户覆盖的值）作为全局变量使用。本文档中的交叉引用指向这些确切的变量名——绝不创建像 `LAYOUT_VARIANCE` 或 `ANIM_LEVEL` 这样的别名。

---

## 2. 需求 → 设计系统映射

### 2.A 框架/设计系统选择
| 信号 | 推荐系统 |
|------|---------|
| "SaaS 落地页 / 品牌站点" | Tailwind v4 + shadcn/ui（基于 class）或 Tailwind v4 + React Aria（基于 render-prop） |
| "作品集 / 创意站点" | Astro + 自定义 CSS / Tailwind |
| "重新设计 / 现有项目" | 匹配现有系统。不要引入第二个 |
| "静态 / 内容站点" | Astro / 11ty |
| "快速原型" | 单 HTML 文件 |

### 2.B 次要信号 → 基调调整
| 信号 | 调整 |
|------|------|
| "B2B / 企业" | 降低 VARIANCE 1-2 档 |
| "创业 / 消费" | 接受更高 VARIANCE |
| "信任优先（金融/医疗）" | 降低 VARIANCE，增加 DENSITY |
| "公共部门 / 政府" | VARIANCE ≤ 4，MOTION ≤ 3 |

---

## 3. 氛围与质感原型

选择 1 个氛围原型和 1 个布局原型。这些定义整体感觉。

### 3.A 氛围（Vibe）原型

#### Ethereal Glass（空灵玻璃感）
- **颜色：** 冷色中性色、淡蓝/紫色调、解构主义柔光
- **排版：** 锐利几何无衬线 + 优雅衬线
- **动效：** 流畅滚动揭示、鼠标追踪视差
- **纹理：** 低透明度玻璃效果、径向光斑
- **适合：** AI/SaaS 消费品牌、创意工作室

#### Editorial Luxury（编辑式奢华）
- **颜色：** 暖色中性色、深墨色、编辑摄影
- **排版：** 衬线展示 + 无衬线正文、慷慨字号
- **动效：** 微妙的滚动触发行进
- **纹理：** 富文本质感、大幅摄影
- **适合：** 奢侈品牌、杂志风格、高端代理

#### Soft Structuralism（柔和结构主义）
- **颜色：** 暖色米色/骨色基底、大胆强调色、深色文字
- **排版：** 展示粗无衬线 + 常规正文、清晰层级
- **动效：** 卡片的悬停提升、小幅交错入场
- **纹理：** 干净边框、扁平表面、几何模板
- **适合：** 设计作品集、创意 SaaS、B2B 品牌

### 3.B 布局（Layout）原型

#### Asymmetrical Bento（不对称便当盒）
- 网格列大小不一，跨越的元素
- 没有两个相同大小的卡片
- 使用 CSS Grid，`grid-template-areas` 显式
- 动态度：中等至高

#### Z-Axis Cascade（Z 轴瀑布）
- 元素在向下滚动时分层
- 前一个元素部分重叠固定或创建视差感
- 需要滚动驱动动画
- 动态度：高

#### Editorial Split（编辑式分割）
- 左侧文字，右侧视觉（或交替）
- 清晰分隔区域
- 大幅摄影/艺术
- 动态度：低至中等

### 3.C 移动端折叠决策

对于每个布局原型，必要定义移动端行为：

- **Bento：** 所有列在移动端塌缩为单列。改变变化顺序。
- **Z-Axis：** 在移动端平面化为标准滚动。移除分层效果。
- **Split：** 移动端上下堆叠。视觉在上或下取决于上下文。

---

## 4. 绝对负面约束（禁止元素）

AI 必须严格避免以下通用 Web 开发默认值：

- 不要使用 "Inter"、"Roboto" 或 "Open Sans" 字体
- 不要使用通用细线图标库如 "Lucide"、"Feather" 或标准 "Heroicons"
- 不要使用 Tailwind 的默认重投影（如 `shadow-md`、`shadow-lg`、`shadow-xl`）。阴影必须几乎不存在或高度自定义为超扩散低透明度（< 0.05）
- 不要为大区域或部分使用主色背景（无亮蓝、绿或红 hero 区域）
- 不要使用渐变、霓虹色或 3D 玻璃态（除微妙的导航栏模糊外）
- 不要为大型容器、卡片或主要按钮使用 `rounded-full`
- 代码、标记、文本内容、标题或 alt 文本中不使用 emoji。用合适的图标或干净的 SVG 原语替代
- 不要使用通用占位符名称如 "某某某" 或 "公司名"。使用真实、有上下文的内容
- 不要使用 AI 文案套话："革新"、"无缝体验"、"颠覆"、"下一代"、"革命性"、"极致"。写朴素、具体的语言

---

## 5. 排版架构

界面必须依靠极端的排版对比和优质字体选择来建立编辑式感觉。

- **主无衬线（正文、UI、按钮）：** 使用有特色的干净几何或系统原生字体。目标：`'SF Pro Display'`、`'Geist'`、`'Helvetica Neue'` 等
- **编辑衬线（Hero 标题和引用）：** 目标：`'Newsreader'`、`'Playfair Display'`、`'Instrument Serif'` 等。使用紧密字间距（`-0.02em` 到 `-0.04em`）和紧凑行高（`1.1`）
- **等宽（代码、按键、元数据）：** 目标：`'Geist Mono'`、`'SF Mono'`、`'JetBrains Mono'`
- **文字颜色：** 正文字体绝不能是纯黑（`#000000`）。使用近黑/炭黑（`#111111` 或 `#2F3437`），行高 `1.6`。次要文字应为柔和灰（`#787774`）

---

## 6. 调色板（暖单色 + 点缀柔和色）

颜色是稀缺资源，仅用于语义含义或微妙点缀。

- 画布/背景：纯白 `#FFFFFF` 或暖骨色/近白 `#F7F6F3`
- 主表面（卡片）：`#FFFFFF` 或 `#F9F9F8`
- 结构边框/分隔线：超浅灰 `#EAEAEA` 或 `rgba(0,0,0,0.06)`
- 强调色：仅使用高度不饱和的淡色

---

## 7. 组件规范

- **便当盒功能网格：** 使用不对称 CSS Grid 布局。卡片必须为 `border: 1px solid #EAEAEA`。圆角 `8px` 或 `12px` 最大。内部间距慷慨（`24px` 到 `40px`）
- **主要 CTA（按钮）：** 实色背景 `#111111`，文字 `#FFFFFF`。轻微圆角（`4px` 到 `6px`）。无投影。悬停为微妙颜色变化或 `scale(0.98)`
- **标签和状态标记：** 药丸形状（`border-radius: 9999px`），极小字体（`text-xs`），大写宽间距
- **手风琴（FAQ）：** 移除所有容器框。仅用 `border-bottom: 1px solid #EAEAEA` 分隔项目

---

## 8. 预输出检查清单

在交付任何界面之前执行：

### 排版
- [ ] 未使用 Inter、Roboto 或 Open Sans
- [ ] 字体系列 ≤ 3
- [ ] Hero 标题 `clamp()` 最大值 ≤ 6rem
- [ ] 正文行长度 ≤ 75ch
- [ ] 字体对比度：正文字重 ≥ 400，标题 ≥ 600
- [ ] 正文无全大写

### 布局
- [ ] 卡片嵌套已修复
- [ ] 间距各不相同以创造节奏
- [ ] 移动端折叠已实现
- [ ] 触摸目标 ≥ 44px 在移动端
- [ ] 语义化 z-index 层级（无 999/9999）

### 色彩
- [ ] 正文对比度 ≥ 4.5:1
- [ ] 大号文字对比度 ≥ 3:1
- [ ] 无纯黑（`#000000`）或纯白（`#FFFFFF`）文字
- [ ] 无渐变文字
- [ ] 无 AI 紫蓝渐变

### 动效
- [ ] 所有动画使用 `prefers-reduced-motion` 降级
- [ ] 无弹跳/弹性缓动
- [ ] 交错入场使用 `calc(var(--index) * delay)`
- [ ] 仅动画 `transform` + `opacity`（非 layout 属性）

### 内容
- [ ] 无占位符或 Lorem ipsum
- [ ] 无营销套话
- [ ] 按钮标签：动词 + 对象
- [ ] 无 emoji
- [ ] 无 AI 文案陈词滥调

### 反模式
- [ ] 无侧边条纹边框
- [ ] 无眼眉标在每个区域上方
- [ ] 无编号部分标记（01/02/03）作为默认
- [ ] 无 hero-metric 模板
- [ ] 无玻璃态作为默认
- [ ] 无纯灰阴影