Taste Skill：一仓 13 个反 slop 前端 skill，把「AI 味」写成可数的硬规则
Leonxlnx/taste-skill
一个 MIT 仓库装 13 个 skill：10 个输出代码，3 个只出参考图，一条 npx skills add 就能装进 Claude Code / Codex / Cursor。默认的 design-taste-frontend v2（experimental）是 1228 行 SKILL.md：先要求模型输出一行「设计判读」，再拧 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 三个旋钮，然后按 14 章硬规则实现——企业简报装官方设计系统包、审美借鉴必须在注释里标注、全页 0 个 em-dash、eyebrow 配额按段数算、bento 格数等于内容条数，最后逐格跑 50 多项起飞前检查。仓里还带 research/laziness 文献目录，用对照实验解释「模型为什么会偷懒」。
编辑判断最值得学的是把规则写成可数的机械判据：eyebrow ≤ ceil(段数/3)、bento 格数 = 内容条数、全页 0 个 em-dash、配色族跨项目轮换，每一条都直接打在「模型重复自己」这个点上，而不是停在形容词。边界它自己也说得诚实：v2 自报 experimental 仍在迭代，§13 明确不管 dashboard、数据表、多步表单、代码编辑器与原生移动端，仓里唯一的测试守的是 skill.sh 这个 shell helper 的 source 语义，不是设计规则本身。
npx skills add https://github.com/Leonxlnx/taste-skill一仓 13 个 skill：10 个写代码，3 个只出图
taste-skill（MIT，约 9.5 万 stars / 6,400+ forks，作者 Leonxlnx，官网 tasteskill.dev）不是一个 skill，而是一仓 13 个：10 个「实现类」输出代码，3 个「生图类」只输出参考图。全部放在 skills/ 下，每个目录一个 SKILL.md，frontmatter 里的 name: 字段才是安装名（与目录名不同），npx skills add 的 CLI 扫这个目录统一安装，所以代码类与生图类走同一条安装命令。
| 目录 | 安装名 | 干什么 |
|---|---|---|
taste-skill | design-taste-frontend | 默认主 skill（v2 experimental）：读简报、推断设计语言、拧三个旋钮，14 章硬规则加起飞前检查 |
taste-skill-v1 | design-taste-frontend-v1 | v1 原样保留，仅在依赖其精确行为时 pin |
gpt-tasteskill | gpt-taste | GPT/Codex 向的更严变体：模拟 Python 随机选布局、AIDA 页面结构、GSAP 强约束 |
image-to-code-skill | image-to-code | 图先行流水线：先生成站点参考图、深度分析、再按图实现前端 |
redesign-skill | redesign-existing-projects | 存量项目：先审计 UI，再修布局、间距、层级、样式，不推倒重写 |
soft-skill | high-end-visual-design | 柔和高端感：低对比、留白、premium 字体、弹簧动效 |
output-skill | full-output-enforcement | 反偷懒：完整输出、禁占位注释、token 上限处干净断点续写 |
minimalist-skill | minimalist-ui | 编辑风产品 UI（Notion/Linear 感）：克制配色、清晰结构 |
brutalist-skill | industrial-brutalist-ui | 硬机械语言：瑞士排版、极端尺度对比、实验性布局（Beta） |
stitch-skill | stitch-design-taste | Google Stitch 兼容的语义设计规则，含可选 DESIGN.md 导出格式 |
imagegen-frontend-web | imagegen-frontend-web | 只出图：网站 comp（hero、landing、多段），硬规则是每段一张独立横图 |
imagegen-frontend-mobile | imagegen-frontend-mobile | 只出图：iOS/Android/跨端屏幕与流程，多屏一致性优先 |
brandkit | brandkit | 只出图：品牌 kit 板（logo 方向、色板、字体、身份应用） |
默认安装名 design-taste-frontend 现在是 v2（experimental）：v1 原样留在 skills/taste-skill-v1/，CHANGELOG 写明「只有依赖 v1 精确行为时才 pin」。v2 的 SKILL.md 有 1228 行、14 个主章节加三个附录，是这一仓信息密度最高的文件，下面所有硬规则都出自它。
先「读简报」，再拧三个旋钮
§0 要求模型在碰代码之前先输出一行「设计判读」：把这一单读成「什么页面类型、给什么受众、用什么气质语言、倾向哪个设计系统或审美族」。判读吃六类信号：页面类型、用户嘴里的气质词（minimalist、Linear-style、brutalist、Apple-y、editorial）、参考链接与截图、受众（B2B 采购评审还是设计敏感消费者还是扫作品集的 recruiter）、已有品牌资产（重设计时它们是起点材料不是可选输入）、以及「安静约束」：无障碍优先受众、公共部门、受监管行业、信任优先电商、儿童产品，这些约束覆盖审美偏好。简报真的分叉时只许问一个问题，不许问卷式追问；能从上下文推断就直接声明判读往下走。§0.D 还列了不许默认伸手的东西：AI 紫渐变、暗色 mesh 上的居中 hero、三张等大 feature 卡、万物玻璃拟态、到处无限循环微动画、Inter 加 slate-900。
§1 是三个 1-10 的旋钮，基线 DESIGN_VARIANCE: 8 / MOTION_INTENSITY: 6 / VISUAL_DENSITY: 4，并给两张表：「判读到旋钮」的推断矩阵（minimalist/calm/editorial 落 5-6/3-4/2-3，premium consumer/Apple-y 落 7-8/5-7/3-4，playful/Awwwards/experimental 落 9-10/8-10/3-4，trust-first/公共部门落 3-4/2-3/4-5，redesign-preserve 是「匹配现有 / +1 / 匹配现有」），以及按用例的预设表（SaaS 主流 landing 7/6/4、agency landing 9/8/3、设计师作品集 8/7/3、编辑/博客 6/4/3）。全文所有布局、动效、密度决策都以这三个变量名为准，禁止自造 LAYOUT_VARIANCE、ANIM_LEVEL 这类别名。
§2 简报到设计系统映射：有官方包就用官方包
这一节把简报分成两类。读起来是某个企业设计系统的，就安装官方包：Microsoft/enterprise 读 Fluent UI、Google 味读 @material/web 加 Material 3 token、IBM 味 B2B 读 Carbon、Shopify 后台读 Polaris、Atlassian/Jira 味读 Atlaskit、GitHub 味开发者工具读 Primer、英国公共部门读 govuk-frontend、美国公共部门读 USWDS、本地商家快速 MVP 读 Bootstrap 5.3、自有组件的现代 SaaS 读 shadcn/ui 或 Tailwind v4。诚实条款有三条：不许手写复刻官方系统的 CSS，不许导入它的 token 再覆盖九成，一个项目只许一个系统（不许 Fluent React 混 Carbon、不许往 Material 3 应用里塞 shadcn 组件）。读起来是「审美」而不是系统的（玻璃拟态、bento、粗野主义、编辑/杂志风、暗黑科技、aurora 渐变、动态字体、Apple Liquid Glass），就用原生 CSS 加 Tailwind 加维护中的组件库，并在代码注释里诚实标注哪些是借鉴。附录 C 单写 Apple Liquid Glass：Apple 只在 Apple 平台文档化它，不存在官方 liquid-glass.css，web 实现都是 backdrop-filter 加分层边框加高光的近似，必须标成近似，并给 prefers-reduced-transparency 的实底回落。
硬规则：把「AI 味」逐条钉死，且尽量做成可数的检查
v2 相对 v1 的核心变化是规则从「建议」变成「带机械判据的硬规则」，失败即不算做完。最有代表性的十条：
| 规则 | 机械判据 |
|---|---|
| hero 必须进首屏 | 标题 ≤2 行、副文 ≤20 词且 ≤4 行、CTA 不滚动可见、顶部 padding ≤ pt-24、hero 文本元素总数 ≤4（eyebrow 或品牌条二选一、标题、副文、CTA） |
| eyebrow 配额 | 数所有 uppercase tracking 微标签 ≤ ceil(段数/3)，hero 计 1；超了即 Pre-Flight 失败 |
| bento 格数 | N 条内容 = N 格（3 条给 1+2 或 2+1），中段与尾段不许空格，有空格就是规划错了 |
| 布局族不重复 | 同一布局族一页至多出现 1 次，8 段至少 4 族；连续「左图右文」zigzag 最多 2 段 |
| 颜色一致性锁 | 一个强调色全页同用；高端消费简报禁米色+黄铜+espresso 的 hex 族（背景 #f5f1ea/#f7f5f1、强调 #b08947/#b6553a、文字 #1a1714 等），并给六个轮换替代族，上一个项目用过的族这一个必须换 |
| 形状一致性锁 | 一页一套圆角体系：全直角、全 12-16px、或交互全 pill，混用必须有写下来的规则且处处遵守 |
| 按钮与表单对比 | 每个 CTA 过 WCAG AA 4.5:1，白底白字、透明无边框按钮禁；CTA 标签桌面不许换行；同意图 CTA 一页只许一个标签（「Get in touch」与「Let's talk」同页即失败） |
| 破折号禁令 | 全页可见位置 0 个 em-dash，en-dash 当分隔符同禁，区间用连字符 |
| 长列表换组件 | >5 条不用 <ul> 加 divide-y，换双列分组、卡片网格、tabs、scroll-snap pills、carousel、marquee；规格表逐行 border-b 是最懒默认 |
| 真图优先 | 有生图工具必须先生图，没有用 picsum seed，都没有就留带注释的占位槽并在回答末尾列缺图位置；div 拼假截图、手绘装饰 SVG 当默认、「纯文字极简」全禁 |
字体规则同样带立场：Inter 不作默认（先考虑 Geist、Outfit、Cabinet Grotesk、Satoshi 或品牌合适的衬线）；衬线是「非常不鼓励的默认」，「感觉有创意/premium/editorial」不构成理由，Fraunces 与 Instrument_Serif 这两个 LLM 最爱直接禁；标题里强调某个词只能用同族的 italic 或 bold，不许往 sans 标题里塞一个 serif 词；斜体词含 y g j p q 时 leading-none 会切掉下伸部，必须 leading-[1.1] 起并加 pb-1 预留。logo 墙用 Simple Icons 或 devicon 的真 SVG，虚构品牌就生成一个简单 monogram，且只放 logo，不许在下方印「Vercel / hosting」这类行业标签。
§9.G 破折号禁令：一条二进制规则
全文最硬的一条：页面任何可见位置（标题、eyebrow、pill、按钮、正文、引文、署名、图注、alt 文本）零个 em-dash，en-dash 当分隔符同样禁，日期区间（2018-2026）与金额区间（€40-80k）用连字符，引文署名用「 - 」或换行加小字号名字。CHANGELOG 解释了为什么写成二进制而不是「节制使用」：预 v2 的生产测试里 em-dash 是出现频率第一的 AI 签名，而「use sparingly」这种措辞被模型稳定无视，所以规则不给任何额度，输出里出现一个即整份重写。
动效纪律：Motion 是默认，GSAP 只给 pin 和 scrub
§3 把动画库定为 Motion（motion/react，Framer Motion 改名后的包，旧包名仅作 legacy 别名）；连续值（鼠标位置、滚动进度、磁吸 hover）禁止用 useState 追，必须走 useMotionValue / useTransform / useScroll，因为 useState 每次变化都重渲染整棵 React 树、在移动端直接崩。§5 给三段「规范骨架」代码：Sticky-Stack（start: "top top"、pin: true、除最后一张外全部 pin、缩放与透明度由下一张卡片的 ScrollTrigger scrub 驱动、用 useId 把 class 作用域化防止两副 stack 互选、pin 外层而变换内层、reduced-motion 下落回普通列表）、Horizontal-Pan（end: "+=" + distance、scrub: 1）、以及更轻的 Motion-only Scroll-Reveal Stagger。§5.D 直接禁三类写法：window.addEventListener('scroll')、在 React state 里手算滚动、碰 React state 的 requestAnimationFrame 循环。另有两条态度规则：「motion claimed, motion shown」，声明 MOTION_INTENSITY 大于 4 页面就必须真动，动不了就把旋钮降到 3 发干净静态，绝不发半坏的动效；「动效必须有动机」，每段动画要能一句话说清它传达的是层级、叙事、反馈还是状态变化，说不清就删，「因为 GSAP 在手所以到处 GSAP」是业余。
§11 重设计协议：先审计，SEO 是头号风险
重设计先判模式：Greenfield、Redesign-Preserve（现代化但不破品牌）、Redesign-Overhaul（内容之上换视觉语言），含糊只问一次。动手前必须把现状记下来：品牌 token、信息架构与关键转化路径、哪些内容块在干活哪些是填充、要保留的签名交互与文案语气、要退役的 slop 与性能陷阱、现有站点的三旋钮读数（那是起点不是基线），以及 SEO 基线：当前排名页、meta title、结构化数据、OG 卡，原文写「SEO migration is the #1 redesign risk」。现代化杠杆按优先级排，满足简报就停：字体刷新（单位风险收益最大）→ 间距与垂直节奏 → 颜色再校准 → 动效层 → hero 与关键段重构 → 整块替换（仅在无可救药时）。IA、内容与 SEO 都健康就走定向演化，约七成价值四成风险；视觉债是结构性的才整站重做。URL 结构、主导航标签、表单字段名与顺序（会坏分析与自动填充）、品牌 wordmark、法务/同意/cookie 文案，未经显式批准永不改。
§14 起飞前检查：50 多个复选框，最后一道闸
输出代码前必须逐格跑完的检查矩阵，任何一格不能诚实打勾就算没做完。机械项可以直接数：em-dash 零个、eyebrow 计数 ≤ ceil(段数/3)、hero 文本元素 ≤4 且顶部 ≤ pt-24、导航桌面单行且 ≤80px、布局族不重复、bento 格数等于内容数、marquee 一页至多一个、长列表 >5 条不用 <ul> 加 divide-y、视口用 min-h-[100dvh] 而非 h-screen、图标只来自 Phosphor / HugeIcons / Radix / Tabler、动效隔离在带 'use client' 的叶子组件、useEffect 动画有严格 cleanup、空/加载/错误三态齐备、Core Web Vitals 可信达标（LCP < 2.5s、INP < 200ms、CLS < 0.1）。态度项同样在表里：每段动效一句话动机、copy 自查无语法坏句与 LLM 装深沉句、声明的动效真的在动。
其余 12 个 skill：一个 skill 只干一件事
三个值得单说。full-output-enforcement（output-skill）把「偷懒」定义成硬失败：代码里的 // ...、// rest of code、// TODO、// similar to above，散文里的「let me know if you want me to continue」「for brevity」「the rest follows the same pattern」，结构上的「要完整实现却给骨架」「只给首尾跳过中间」，全部禁止；执行流程是先数清交付物个数并锁住、逐个完整生成、输出前与原始请求对账；接近 token 上限时不压缩不跳段，写到干净断点（函数末、文件末、章节末）然后输出 [PAUSED - X of Y complete. Send "continue" to resume from: ...]。imagegen-frontend-web 的第一条硬输出规则是「每个 section 一张独立横图，永远」：8 段的落地页出 8 张图，没说段数的 landing page 默认 6 段 6 张，绝不把多段压进一张。stitch-design-taste 把这套反 slop 规则翻译成 Google Stitch 的语义设计语言，产出 DESIGN.md 作为 Stitch 生屏的单一事实来源，仓里还带一份示例 DESIGN.md。其余如 gpt-taste 用「模拟 Python 随机」强制打破模型的第一选择、high-end-visual-design 给三组气质原型加三组布局原型的组合引擎、industrial-brutalist-ui 把瑞士印刷与 CRT 终端两种原型二选一并commit 到底。
research/laziness：output-skill 背后的证据底座
仓里带一个 research/ 目录，主题是「LLM 为什么输出不完整」。根因四篇：RLHF 与算力经济如何造成系统性简短偏差、人类代码里的占位模式如何经训练数据传进模型、复杂任务上的认知捷径、上下文窗口不对称与消费档截断机制。结论部分引用 2025 年 12 月一项对照实验的三组结果：多部分指令合规实验里没有任何模型同时满足长度要求与全部子指令；解码次优性实验显示截断输出与模型最高置信解基本一致，截断是行为选择而不是解码失败；200 轮对话的上下文退化实验显示模型对关键事实与指令的保持远好于假设，上下文丢失不是主因。另引 Microsoft Research 的提示刺激对照数据：金钱激励框架（「$200 tip」）输出质量与长度 +45%，「take a deep breath」把逻辑任务准确率从 34% 提到 80%，利害框架 +10%，组合刺激最高 +115%；还有一项统计分析发现 12 月输出长度可测下降、与训练数据里假期产出减少相关。这些就是 output-skill 敢把「完整输出」写成契约而不是请求的底气。
实测判断与边界
强项很清楚：规则带机械判据而不是形容词；有「上一个项目用过什么」的轮换记忆要求（配色族、衬线字体），直接对抗模型自身的重复倾向；官方包优先与「审美要诚实标注」两条把设计系统与审美趋势分开，避免把趋势当官方标准卖；重设计协议把 SEO 基线列为头号风险，是同类 skill 里少见的工程意识；research 目录给反偷懒规则提供了文献底座。边界也要说清：v2 自报 experimental 且在迭代，规则会动，v2.0.0 stable 才锁 API；作用域自报是 landing、portfolio、marketing 页，§13 明说不管 dashboard、数据表、多步表单、代码编辑器、原生移动端、实时协作 UI，遇到这些要先说破并指向 Fluent/Carbon/TanStack/Monaco 等正确工具；仓里没有针对设计规则的行为测试，唯一的测试 tests/skill_test.sh 守的是 skill.sh 这个 shell helper 的 source 语义（help/list/查路径/未知名返回码）；gpt-taste 的「Python 驱动真随机」实际是用提示字符数做种子的确定性模拟，作用是打破模型第一选择，不是真随机；它对图标库的偏好（lucide 仅在用户点名或项目已依赖时可用）是立场而非行业共识，与项目自身规范冲突时以项目规范为准。
安装
# 全仓 13 个 skill 一起装
npx skills add https://github.com/Leonxlnx/taste-skill
# 只装默认 v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
# 只信 v1 的精确行为时 pin v1
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
# Claude Code 插件市场：skill 带 taste-skill: 命名空间，不与本地 skill 撞名
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
# 或软链安装：git pull 即更新所有已装 skill
./install.sh --codex # 链到 ~/.codex/skills
./install.sh --all-agents # Claude Code 与 Codex 都链
./install.sh --list # 看安装名到目录的映射