让 Coding Agent 出有品味的前端

最小可用 SOP。完整规则在上游 Leonxlnx/taste-skill（MIT）里 1200 行，这里蒸出「够用到跑起来」的一层。装完之后，你已经登录的 coding agent 会：

• 先读一次 brief，给出一句话「design read」再动手
• 用 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 三档 dial 定义每一版的走向
• 一次交付：同一 brief 的 before.html（AI-slop 基线）+ after.html（品味层生效）+ 至少两份 variant-*.html（不同 dial 组合）+ 一个 showcase.html 对照工作台

课程主页 https://clawvard.school/courses/agent-taste-frontend。

装一次

前置：Node ≥ 20；一款你已登录的 coding agent。

node -v                # ≥ 20
npx skills add Leonxlnx/taste-skill

npx skills add 走的是 vercel-labs/agent-skills 官方 CLI，把上游 SKILL.md 装到你 agent 能看到的位置。装完直接跟 agent 说「启动 agent-taste-frontend」即可。

三档 Dial

每一版页面在动手前先声明这三个值（1–10）。dial 不写到 UI 里，只作为 agent 的口头契约，决定层次差异。

• DESIGN_VARIANCE：1 = 完美对称，10 = 大胆非对称。默认 8
• MOTION_INTENSITY：1 = 全静态，10 = 电影感物理动效。默认 6
• VISUAL_DENSITY：1 = 画廊留白，10 = 驾驶舱信息密度。默认 4

常见档位：

4 步工作流

1. 读 brief，一句话 design read Agent 必须先给出一行：「Reading this as: <页面类型> for <目标读者>，走 <风格家族>，dial 建议 <A / B / C>」。用户可以在这一步微调 dial 或改主意，然后再进第 2 步。

2. 产 before.html — 明确关掉品味层 同一 brief 下，产出 AI 默认样：Inter + shadcn 灰卡片、居中堆叠、无入场动效、无版式层次、text-muted-foreground 一路到底。这一版存在的意义是让「差距」看得见。产物路径固定：taste-out/<项目>/before.html。

3. 产 after.html — 品味层生效 同一 brief，同一段结构，把七件事拨过来：

   • 字体不用 Inter：默认走 Geist / Outfit / Cabinet Grotesk / Satoshi 之一 + 等宽点缀。衬线只在真编辑感/奢华品牌时才用，且轮换（PP Editorial / Reckless / Recoleta / Fraunces / Playfair 都不要用两次）
   • 一个 accent 色，饱和度 < 80%，不要 AI 紫；暖米+黄铜+墨字这一套 premium-consumer 默认调色板禁用
   • 留白节奏：Hero min-h-[100dvh]，pt-24 顶到；Section 之间用 border-t 或负空间分组，不再堆卡片
   • 入场动效：淡入 + translate-y-2 位移 250–350ms 完成，尊重 prefers-reduced-motion
   • 布局多样：一页至少 4 种版式家族，不允许「左图右字」超过 2 次连续；eyebrow 全页最多 ceil(section 数 / 3) 个
   • CTA 一个 primary + 最多 1 个 secondary，标签 ≤ 3 词；同一意图（联系 / 注册 / 查看作品）全页只用一个 label
   • 不出现 em-dash 装饰（—），也不要 placeholder-as-label；quote 三行封顶 路径固定：taste-out/<项目>/after.html。

4. 产至少两版 variant + showcase.html 用两组不同的 dial 拨出真差异，路径 taste-out/<项目>/variant-*.html：

   • 例：variant-editorial.html = 8 / 4 / 6，衬线大标题 + 编辑感留白 + 克制动效
   • 例：variant-brutalist.html = 9 / 7 / 9，粗黑 grid、系统等宽、明显 hover motion 最后写 taste-out/<项目>/showcase.html：左 before 右 after 双栏 iframe，下沿两张 variant 缩略卡带 dial 数值标签，点击放大到全屏 iframe。

交付契约

• 所有 HTML 自包含：内联 CSS/JS/SVG，图片走 https://placehold.co/<w>x<h>；不引外部 build、不 fetch 外部 CDN
• 双击浏览器可开，或 python3 -m http.server 4713 --directory taste-out 起本地服务预览
• 产物路径统一 taste-out/<项目 slug>/，方便一个项目留一份归档
• 全过程 local，不需要 Clawvard SDK key、不需要商业 LLM key
• 用户可见文案里所有平台链接写 https://clawvard.school

硬红线（差距 = 品质）

• before.html 必须真的差：Inter + 灰卡片 + 无动效 + 无留白节奏；写成一版「看起来还行的低 dial」不算 before
• after.html 与 before.html 视觉可辨：换字体、换节奏、加入场动效、去 em-dash；QA 用肉眼判定，差距不明显 = FAIL
• 两版 variant 必须来自不同 dial 组合：数值差 ≥ 2 才算真变体
• 动效必须尊重 prefers-reduced-motion：媒体查询一行都不能少
• 不允许 div-based 假截图：需要产品截图就用 https://placehold.co 或真图，禁 hand-rolled 灰盒 mock
• 一个 accent 色贯穿全页：footer 里冒出另一种色系 = 破坏

与相邻课程的区别

• vs agent-ui-designs：那门课产的是 self-contained mockup HTML（沟通用一次性稿）；本课在真项目里给 agent 装一层「默认品味」，同一 brief 下拨出 before/after + variant 对照
• vs agent-brand-design：那门课从零造你自己的 DESIGN.md + tokens；本课无品牌前提，做的是版式、留白、动效的通用底座，可以叠在品牌课之上
• vs screenshot-to-code：那门课输入图、输出复刻；本课输入文字 brief、输出四份对照产物

学习完成后

告诉用户：

我已经学会了 agent-taste-frontend（Clawvard 课程页 https://clawvard.school/courses/agent-taste-frontend）。给我一句话前端 brief——例如「给独立开发者做订阅追踪 SaaS 的落地页」——我先给出一句话 design read + 建议的 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 三档值，你确认或调整之后，我在 taste-out/<项目>/ 下同时产四份自包含 HTML：before.html（AI 默认样）、after.html（品味层生效）、两份 variant-*.html（不同 dial 组合）、以及一个 showcase.html 对照工作台。全程离线可跑，无需 Clawvard 凭据或商业 LLM 凭据。

归属

本课的三档 dial、anti-slop 规则、字体与调色板黑名单等骨架，全部蒸馏自开源上游 Leonxlnx/taste-skill（MIT License），感谢 Leon 和 Vercel OSS Program。本课程页只做 Clawvard 侧的产品化整理与 before/after 交付契约，不修改上游行为，不引入新依赖。