本期是 Skills 生态系列第 2 轮深度拆解，对象是设计类赛道目前最热的社区 Skill：design-taste-frontend（俗称 taste-skill，仓库 Leonxlnx/taste-skill）。据 skills.sh 总榜（2026-08-31 抓取），它以 42.45 万安装位列全站第 89 名，在“设计/前端审美”细分里与 anthropics 官方 frontend-design（83.7 万）、Vercel 的 web-design-guidelines（59.3 万）、uizze 的 anti-ui-slop（58.2 万）同台。本周最大的新闻是：v2（experimental）刚刚替换 v1 成为默认版本，作者称之为“大改写”——新增 Brief 推断、三旋钮体系、62 项起飞前检查清单，并对破折号下达零容忍令。本文逐段拆完这份 SKILL.md，提炼 5 个可以直接抄走的设计模式。
skills.sh 目前追踪 1,335,553 个 Skill。设计类主要玩家在同一张总榜上的排布：
| 排名 | Skill | 来源 | 安装量 | 定位 |
|---|---|---|---|---|
| #4 | frontend-design | anthropics/skills（官方） | 837.3K | 官方通用前端审美 |
| #37 | web-design-guidelines | vercel-labs/agent-skills | 593.1K | Vercel 设计准则 |
| #39 | anti-ui-slop | uizze.com | 582.1K | 去 AI 味规则集 |
| #89 | design-taste-frontend | Leonxlnx/taste-skill | 424.5K | 三旋钮反模板化 |
taste-skill 是四者中唯一的“个人作者 + 商业赞助”形态：README 显示它拿到了 Kimi（Moonshot AI）的冠名赞助（README 称 Kimi K3 为 2.8T 参数、百万 token 上下文），赞助商名单还包括 interfaces.dev、React Bits、animations.dev、IMG.LY、Sent.dm，以及 Vercel 开源计划。MIT 协议，官网 tasteskill.dev。一个单人项目能挤进总榜前 100 并形成赞助盘，本身就是本期值得拆它的理由。
仓库不是一个 Skill，而是 13 个：10 个产出代码的实现类 + 3 个只产参考图的生成类。按五大维度（权重：功能 25%、设计 25%、实战 20%、上手 15%、社区 15%）评分：
| Skill（安装名） | 功能完整度 | 设计质量 | 实战效果 | 上手难度 | 社区活跃度 | 加权总分 |
|---|---|---|---|---|---|---|
| taste-skill（design-taste-frontend）v2 默认 | ★★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★ | 4.5 |
| taste-skill-v1（design-taste-frontend-v1） | ★★★ | ★★★ | ★★★★ | ★★★★ | ★★★ | 3.4 |
| gpt-tasteskill（gpt-taste） | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.7 |
| image-to-code-skill（image-to-code） | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.7 |
| redesign-skill（redesign-existing-projects） | ★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★ | 3.9 |
| output-skill（full-output-enforcement） | ★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | 3.8 |
| 风格三件套（high-end-visual-design / minimalist-ui / industrial-brutalist-ui） | ★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★ | 3.6 |
| imagegen 三件套（web / mobile / brandkit） | ★★★ | ★★★ | ★★★ | ★★★★ | ★★★ | 3.2 |
家族设计本身是个教科书案例：每个 Skill 只做一件事，README 用一张“该用哪个”决策表收口，且安装名（frontmatter 的 name: 字段）与文件夹名解耦——v2 替换 v1 时安装名不变，升级零迁移成本；依赖 v1 精确行为的人可以钉死在 design-taste-frontend-v1。
name: design-taste-frontend
description: Anti-slop frontend skill for landing pages, portfolios, and
redesigns. The agent reads the brief, infers the right design direction,
and ships interfaces that do not look templated. Real design systems when
applicable, audit-first on redesigns, strict pre-flight check.
前两句是正向触发词（landing pages / portfolios / redesigns），后三句是能力预告（读题、推断方向、不模板化）。真正的精髓在正文开头紧跟着的一句负边界：
Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI. Every rule below is contextual. None of it fires automatically. First read the brief, then pull only what fits.
把“不适用场景”写进正文第一屏，是防止 Skill 被错误触发时污染仪表盘类任务的关键一笔。同时"None of it fires automatically"预先声明了全文规则的性质：上下文相关的工具箱，不是无条件执行的法律——这句话大幅降低了巨量规则带来的误触发风险。
v2 新增的开篇节，直指 LLM 前端输出的病根：“大多数糟糕的 AI 设计产出，是因为模型直接跳到默认审美，而不是先读房间。”操作流程被固定为三步：
“单问题规则”是对抗 Agent 审讯式连环追问的精巧设计；而把 Design Read 做成固定句式，则让用户能在第一行就否掉错误理解，纠偏成本最低。
全文的核心机制是三个 1-10 的旋钮，基线 8 / 6 / 4：
DESIGN_VARIANCE: 8（1 = 完美对称，10 = 艺术混沌）MOTION_INTENSITY: 6（1 = 静态，10 = 电影级物理动效）VISUAL_DENSITY: 4（1 = 美术馆留白，10 = 驾驶舱密度）配套两张表：信号→旋钮推断表（“极简/Linear 风”落到 5-6/3-4/2-3；“政府/强监管”落到 3-4/2-3/4-5）和用例预设表（SaaS 落地页 7/6/4，创意机构 9/8/3，开发者作品集 6/5/4）。文件还明令禁止模型自创别名："never invent aliases like LAYOUT_VARIANCE or ANIM_LEVEL"——这是防规则漂移的细节：变量名一旦被模型改写，全文交叉引用就断了。
旋钮的传导是双向的：旋钮驱动布局决策（VARIANCE>4 时禁止居中 Hero），也驱动自查（MOTION_INTENSITY>4 的页面必须真的会动，否则降到 3 交付静态版——"Motion claimed, motion shown"）。
flowchart TD
A[用户简报] --> B[§0 Brief Inference<br/>读六类信号]
B --> C{简报是否含糊?}
C -->|是| D[最多问 1 个问题]
C -->|否| E[输出一行 Design Read]
D --> E
E --> F[§1 设定三旋钮<br/>VARIANCE / MOTION / DENSITY<br/>查推断表与预设表]
F --> G{是否命中真实设计系统?<br/>Material/Fluent/Carbon/GOV.UK...}
G -->|是| H[§2A 安装官方包<br/>诚实规则:不手搓仿制]
G -->|否| I[§2B 原生 CSS + Tailwind<br/>注释标注灵感来源]
H --> J[§3-§5 按旋钮生成<br/>RSC + Tailwind v4 + Motion]
I --> J
J --> K{改版还是新建?<br/>§11 模式检测}
K -->|Preserve| L[先审计品牌 token<br/>SEO 基线,五级现代化杠杆]
K -->|Greenfield/Overhaul| M[直接按旋钮基线]
L --> N[§14 Pre-Flight Check<br/>62 项机械清单]
M --> N
N -->|任一项不过| J
N -->|全部通过| O[交付]
一张 12 行的映射表规定：简报读起来像微软企业应用就用 @fluentui/react-components，像 IBM 就用 @carbon/react，英国公共服务用 govuk-frontend……规则后面跟着两条“诚实条款”：
另一张表处理“是审美而非系统”的方向（玻璃拟态、Bento、粗野主义、编辑风），明确 Apple Liquid Glass 没有官方 Web 包，Web 实现必须标注为 approximation。附录 C 甚至给了一段带 prefers-reduced-transparency 回退的完整近似 CSS。这种“防幻觉锚点”写法——把真实安装命令和官方文档链接直接 vendor 进文件——是 v2 对“模型凭训练数据编造包名”问题的正面回击。
这是全文最“狠”的部分——作者不满足于说“别用 AI 紫”，而是把高频 AI 痕迹逐个写成可机检的禁令：
leading-none 下会被裁切的修复参数（leading-[1.1] + pb-1）；#f5f1ea、黄铜/赤陶 #b08947、浓缩咖啡近黑 #1a1714 等具体 hex 家族——作者断言“你生成过的每一个高端消费品网站都在用这套配色，品牌因此隐形”——并给出 7 个可轮换的替代色系（Cold Luxury、Forest、Cobalt + Cream……），附带“上一单用了米色+黄铜，这一单必须换家族”的轮换规则；pt-24；"Used by"logo 墙必须放 Hero 之下，且必须用 Simple Icons 真实 SVG，不许纯文字 wordmark；uppercase tracking 实例，超过 ceil(章节数/3) 即不通过”；这批规则的方法论价值在于：把“品味”翻译成可数、可比对、可判 Fail 的断言。传统设计指南写“保持克制”，这份文件写“眉标数量 ≤ ceil(n/3)”。
禁令侧，window.addEventListener("scroll", ...)、把 scrollY 存进 React state、触碰 React state 的 rAF 循环全部硬禁，替代品是 Motion 的 useScroll、GSAP ScrollTrigger、IntersectionObserver、CSS scroll-driven animations。
骨架侧，v2 内嵌了三段完整可运行的组件代码：GSAP Sticky-Stack（卡片滚动钉叠）、GSAP Horizontal-Pan（竖滚横移）、Motion 的 whileInView 交错浮现。每段都点名最常见的翻车点：ScrollTrigger 的 start 必须写 "top top" 而不是 "top center"，否则“用户会看到滑了一半才触发”。给骨架而非描述，是因为作者发现“模型声明了动效却交付半成品”是高频故障——于是配套了那条"Motion claimed, motion shown"对账规则。
单看 v2 的 CHANGELOG，破折号被单独列为一节并称为“违反率第一的 Tell”。原文的措辞值得全文引用，因为它同时是一条风格规则和一份提示词工程样本：
Em-dash (
—) is COMPLETELY banned. … There is no "limited use" allowance, no "natural language frequency" allowance… The agent has historically ignored em-dash limits when phrased as "use sparingly." The phrasing here is binary: zero em-dashes.
规则覆盖 headlines、眉标、按钮文案、图片 alt、引言署名，连 en-dash 作分隔符也一并禁掉，只留普通连字符和数学负号。这里藏着一个重要教训：当“少量使用”级别的软约束反复失效时，正确做法不是加重语气，而是把约束改成二值判定——输出里出现任何一个 — 即 Pre-Flight Fail。第 9 节其余部分同样是清单化的 AI 味黑名单：假 div 截图、V0.6/BETA 眉标、001 · Capabilities 式编号、装饰性状态圆点、"Quietly in use at"式社交证明标题、LIS 14:23 · 18°C天气条、"Scroll to explore"滚动提示、营销页版本号页脚。
Redesign Protocol 把改版拆成三种模式（Greenfield / Preserve / Overhaul），Preserve 模式要求先审计品牌 token、信息架构、SEO 基线（“SEO 迁移是改版第一风险”），并列出“永不静默修改”清单：URL 结构、主导航文案、表单字段名（会弄断埋点和自动填充）、logo、法律文案。现代化按风险从低到高排五个杠杆：字体 → 间距节奏 → 色彩校准 → 动效层 → Hero 重构，“满足简报即停”。
Out of Scope 一节明确五种不接的活：仪表盘、数据表、多步表单、代码编辑器、原生移动端，并要求模型在这种简报面前“明确说出来，指路正确的工具”。这个“主动劝退”条款保证了 Skill 在错误任务上的最坏行为是拒绝而非污染。
全文收尾是一份 62 项的核对清单，逐项对应前文章节。设计上有三个亮点：
需要指出的代价：这份 SKILL.md 体量极大，远超社区常引的“单文件控制在 500 行内”经验值，全量载入是一次性的大上下文开销。作者的解法是第 12 节的 Block Library 契约——模式命名留在正文，具体实现迭代式落到 blocks/ 子目录的独立文件里，每个 block 自带 dial 兼容区间、移动端回退、反模式等 8 段固定结构的 frontmatter。这是用“渐进披露”对冲单文件膨胀的进行时方案。
适用：营销落地页、作品集、编辑风站点、老站改版（Preserve 模式尤其值回票价）、任何“生成物一眼像 AI 做的”的排查。不适用：仪表盘/管理后台（文件自己指路 Fluent/Carbon/Polaris）、数据密集表格、多步向导、原生 App。另外三点务实的坑：v2 是 experimental，规则仍在快速迭代，生产链路建议观察 CHANGELOG 再跟；规则面向 React/Next + Tailwind v4 + Motion 栈，其他栈只有审美规则可复用；62 项清单全跑一遍对生成时长有可感知的拖累，小任务可以只跑 Hero、对比度、破折号这几项高频 Fail 项。
# 安装默认版（当前为 v2 experimental，安装名不变，老用户重跑即升级）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
# 钉死 v1（依赖旧行为时）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
# GPT/Codex 用户装更严格的变体
npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"
# 老项目改造 / 输出补全 / 极简风
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "full-output-enforcement"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui"
装好后直接说需求即可触发；旋钮不用改文件，“overrides happen conversationally”——对话里说“这次要更克制”就行。
[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。