1实现原理 · 为什么它能做到
反 slop 完全靠 prompt 编排实现：skill 目录只有单文件 SKILL.md（87,253 字节 / 1206 行 markdown），没有任何脚本或数据文件；规则以『硬性禁令 + 计数阈值 + 自检清单』形式让 agent 在输出前自我过滤。
skills/taste-skill/SKILL.md (目录内唯一文件；仓库 skill.sh 注册表)
[taste-skill]="skills/taste-skill/SKILL.md"
仓库 git tree 显示 skills/taste-skill/ 下仅 SKILL.md 一个文件；skill.sh 只是把各 skill 映射到 SKILL.md 路径的本地注册脚本，不构成 skill 运行逻辑。
先『读 brief』再套规则：三拨盘（DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY）作为贯穿全文的全局伪变量，基线 8/6/4，一切版式/动效/密度决定都由它门控，规则只在该变量语境下生效。
skills/taste-skill/SKILL.md
**Baseline:** `8 / 6 / 4`. Use these unless the design read overrides them. Do not ask the user to edit this file - overrides happen conversationally.
1.C 进一步要求『never invent aliases like LAYOUT_VARIANCE or ANIM_LEVEL』，用命名纪律保证规则间可交叉引用（如 §4.3 ANTI-CENTER BIAS 仅在 VARIANCE>4 生效）。
反 slop 规则是可操作的『AI Tells 黑名单』：把 LLM 生成物的高频破绽逐一列成可识别签名（em-dash、eyebrow 计数、三卡均分、分屏 header、纯色版本脚注等），并配可数阈值，多数带明确的 override 路径。
skills/taste-skill/SKILL.md
**Em-dash (`—`) is COMPLETELY banned.** It is the LLM's signature stylistic crutch and it is the #1 visual Tell in production tests. There is no "limited use" allowance, no "natural language frequency" allowance, no "in body copy is fine" allowance. None.
§9.F 自称清单『came out of real LLM-generated landing-page tests』——规则由真实测试反推；§4.7 的 eyebrow 规则给出机械公式：count instances of `uppercase tracking` … If count > ceil(sectionCount / 3), the output fails。
强制终检矩阵：§14 PRE-FLIGHT CHECK 提供 50+ 个勾选盒覆盖此前所有规则，输出前必须逐项自检，任何一项打不了勾即『not done』。
skills/taste-skill/SKILL.md
Run this matrix before outputting code. This is the last filter. **THIS IS NOT OPTIONAL. Run every box. If any box fails, the output is not done.**
这是把上百条散落规则收敛成一份可执行的交付前 checklist，机制上是认知/自检而非程序化 lint。
提供『复制即用』的代码骨架与真实安装命令，防止 agent 靠记忆写错库：§5.A/B/C 内联 GSAP/Motion 的 TSX canonical skeleton，附录 A 给各设计系统真实 install 命令，附录 B 给官方文档链接。
skills/taste-skill/SKILL.md
The sections below are vendored reference content. They give the agent real install commands, real canonical doc links, and real working starter snippets for each design system named in Section 2. Use them to ground decisions in production reality, not training-data fiction.
§3.F 强制依赖校验：Before importing ANY 3rd-party library, check `package.json`. … **Never** assume a library exists。附录 C 则明示 Apple Liquid Glass 无官方 web CSS，只给标注为近似值的骨架——防 agent 假装有官方库。
跨项目轮换机制对抗『模型先验复用』：字体、premium 调色板都规定不得在连续项目里重复使用同一套，强制多样化。
skills/taste-skill/SKILL.md
**Palette-rotation rule:** if the previous premium-consumer project you generated used the beige+brass family, this one MUST use a different family. Do not ship the same warm-craft palette twice in a row.
同类约束还有 serif 轮换池（'rotate from this pool, do NOT reuse the same serif across consecutive projects'）——针对 LLM 输出趋同的问题。
2核心能力
01Brief Inference / 设计方向推断：先读信号（页面类型、vibe 词、参考链接、受众、品牌资产）再输出一行『Design Read』，歧义只问一个问题
02反 slop 硬规则库：§4 设计工程指令 + §9 AI Tells 黑名单（hero 结构上限、eyebrow 配额、zigzag 上限、em-dash 全禁、假数据/假名/假截图禁）
03三拨盘配置系统：VARIANCE/MOTION/DENSITY 1-10 级定义 + 从 brief 推断拨盘的映射表与用例预设
04brief→设计系统映射：12+ 官方系统（Fluent/Carbon/Material/GOV.UK/USWDS/Primer/Polaris…）选择表 + '一个项目一个系统' 纪律 + 诚实标注美学近似（如 Liquid Glass）
05可复制动画骨架与动效规范：sticky-stack / horizontal-pan / reveal-stagger 三个 canonical TSX + Motion/GSAP 选择规则 + 动效必须被动机驱动
06性能与无障碍护栏：只动 transform/opacity、prefers-reduced-motion 必须、双模式暗色、CWV 目标、DOM 成本/z-index 约束
07Redesign 协议：先审计后动手（品牌 token/IA/SEO 基线），Preserve/Overhaul 模式区分、现代化杠杆优先级、不静默改 IA/文案/分析事件
08Final Pre-Flight Check：50+ 项输出前自检矩阵，作为交付闸门
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx shadcn@latest |
| cli | npm install / yarn add（设计系统安装指令） |
| package | 设计系统：@fluentui/react-components、@material/web、@carbon/react、@primer/css、@radix-ui/themes、govuk-frontend、uswds、bootstrap、@atlaskit/* |
| package | 动效库：motion（motion/react）、gsap、three.js |
| package | 图标库：@phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react（lucide 降级） |
| network | 素材源（写进生成页面）：picsum.photos 占位摄影 / cdn.simpleicons.org 品牌 logo / unsplash、pexels（若明确允许） |
| network | Polaris Web Components CDN script（仅 Shopify app 场景，写入生成页面 head） |
| tool | 图像生成工具（条件式）：generate_image / MCP image tool / IDE-integrated gen / OpenAI image tools——仅在宿主环境可用时 |
| network | 官方文档链接（仅参考不抓取）：github.com、developer.mozilla.org、各设计系统官网、developer.apple.com 等 50+ 条 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据（文件路径与关键语句摘要）
- SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响
审计说明： 🟢 绿·纯指令：skill 目录仅一个 87KB markdown 文件，无脚本、无内置网络调用、无凭证读取、无自身文件写入；全部 55 个 URL 为文档链接或写入『生成页面』的素材源（picsum/simpleicons/Shopify CDN），执行发生在用户产物页面而非 skill。诱导的 npm/npx 安装与条件式图像生成属宿主 coding agent 的常规任务行为。需留意两点：产出页面含第三方 CDN 外链；87KB 长文是显著上下文载荷。
5第二遍独立确认
- [ok] 『无脚本、单文件』 — git ls-tree 确认 skills/taste-skill/ 下仅 SKILL.md；仓库根 skill.sh 只是 SKILL.md 路径注册表，非 skill 运行代码
- [ok] 『无网络外发』 — 全量提取 55 个 http(s) URL，全部为官方文档链接或写给生成页面的素材/CDN 源；SKILL.md 内无 fetch/axios/curl/wget
- [ok] 『无凭证读取』 — 全文唯一命中 api-key 的是 Polaris 模板中的 <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" /> 占位符，写入的是用户页面；无 env/keychain/密钥读取指令
- [ok] 『安装命令仅文字指示』 — npm/npx/yarn 只出现在 Appendix A 代码块与 §2.A 表格，作为给 agent 的安装提示；npx shadcn 为官方初始化器
- [discrepancy] §12 引用的 blocks/ 目录 — SKILL.md 内唯一内部路径引用 skills/taste-skill/blocks/（§12.A）在本 commit 不存在；正文已自述 'Blocks will be added iteratively'，属未兑现契约而非缺陷
- [ok] em-dash 自洽性（正文宣称全禁却含 em-dash） — 全文仅 5 个 —，均为禁令规则演示文本；git log 339afcb 证实 'purge em-dashes throughout (177 -> 6)'，与声明一致
- [ok] 『strict pre-flight check』是否夸大 — §14 确实给出 50+ 勾选盒矩阵并声明 'THIS IS NOT OPTIONAL'；但它是认知自检而非程序化校验——文档未声称有自动化，无夸大
- [ok] 『real design systems when applicable』是否夸大 — §2.A 表 + Appendix B 官方文档 + Appendix A 真实安装命令俱全；Appendix C 主动声明 Apple Liquid Glass 无官方 web 实现，诚实度高于多数同类 skill
6结论
适合： 想给编码 agent 注入审美纪律的前端开发者：用 Claude Code/Cursor/Codex 等长上下文宿主做 landing page / portfolio / 官网改版；喜欢『硬规则 + 可数阈值 + 交付前自检』式确定性约束、而非『参考 Awwwards』式玄学提示的人。
不适合： dashboard/数据密集型产品 UI（作者明示 out of scope）；需要程序化 lint/CI 强制校验的工作流（该 skill 是纯自检）；短上下文模型（87KB 载荷）；无真实图片/生成图能力的纯文本环境（§4.8 要求视觉资产，否则产出被自判为 slop）
Install Agent-Ready
① Verified Mirror 2026-09-06
Option A · Direct DownloadDownload design-taste-frontend.tar.gz
sha256:
Option B · Copy Guide for Agent1cf075267bf20c7a…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ccbc15639c.