Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
tasteskill：反模板前端技能
落地页、作品集和重新设计。不适用于仪表盘、数据表格或多步骤产品 UI。 以下每条规则都是按上下文触发的，不会自动全部执行。先阅读需求，再提取适合的部分。
0. 需求推断（在做任何事之前先读懂需求）
在触碰代码或调整旋钮之前，推断用户真正想要什么。大多数 LLM 设计输出糟糕是因为模型跳转到默认审美，而非读懂需求。
0.A 先读取这些信号
- 页面类型 - 落地页（SaaS/消费品/代理商/活动）、作品集（开发者/设计师/创意工作室）、重新设计（保持 vs 翻新）、编辑/博客。
- 用户使用的氛围词汇 - "极简"、"宁静"、"Linear 风格"、"Awwwards"、"野兽派"、"高端消费"、"Apple 式"、"好玩"、"严肃 B2B"、"编辑式"、"代理商风格"、"玻璃感"、"暗黑科技"。
- 参考信号 - 他们链接的 URL、粘贴的截图、提到的产品、竞争的品牌。
- 受众 - B2B 采购委员会 vs 注重设计感的消费者 vs 浏览作品集的招聘人员。受众决定审美，不是你的品味。
- 已存在的品牌资产 - 标志、颜色、字体、摄影风格。对于重新设计，这些是起始材料，不是可选输入（参见 Section 11）。
- 隐性约束 - 无障碍优先的受众、公共部门、受监管行业、信任优先的商务、儿童产品。这些约束覆盖审美偏好。
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 模板
- [ ] 无玻璃态作为默认
- [ ] 无纯灰阴影
