全部技能 / 设计 / design-taste-frontend
设计 · leonxlnx/taste-skill

design-taste-frontend

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.

风险提醒:绿色 · 放心使用AI 侦查报告
作者 leonxlnxGitHub leonxlnx/taste-skill ↗Stars 84793许可 MITcommit ccbc15639c
agent 宿主通常会约束 skill 执行权限;风险提醒为 AI 侦查观点,不构成质量或安全保证。第三方 skill 仅作拆解与展示,安装使用风险自负,版权归原作者。

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外部依赖

类型依赖
clinpx shadcn@latest
clinpm 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(若明确允许)
networkPolaris 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风险提醒 风险提醒:绿色 · 放心使用

风险提醒:绿色 · 放心使用
  • 全部约束靠模型自我遵从,无程序化执行 — 文档自己承认 'The agent has historically ignored em-dash limits when phrased as "use sparingly"'(§9.G)——弱模型或长输出场景下禁令可能漏执行;无 lint/校验兜底
  • 87KB/1206 行单文件是巨量上下文载荷 — 每次触发都需完整载入,短上下文或高成本模型下可能被截断/降采样,规则库后半段(§10-14、附录)可能失读
  • 诱导产物含第三方 CDN 外链 — 生成页面会按规则引用 cdn.simpleicons.org、picsum.photos,Shopify 场景插 cdn.shopify.com <script>;产物页有外网运行时依赖与可用性风险
  • Block Library 尚不存在,词表 > 实现 — §10 列 30+ 模式名,§12 承诺的实现目录在本 commit 为空——agent 只能靠词表名自行实现,无逐模式校验基准
  • 硬编码技术代际建议会随生态漂移 — 如 'Tailwind v4'、'motion/react'(原 framer-motion)、禁止 lucide 等断言有有效期;§3.F 依赖校验能缓解但版本性指令(如 v4 配置写法)可能过时
🟢 绿·纯指令: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结论

  • 反 slop 机制可操作:不是空泛『要有品味』,而是逐条可数的禁令(em-dash 全禁、eyebrow 配额公式、zigzag/hero 结构上限)与机械式 Pre-Flight 矩阵
  • 规则全部 contextual 且带 override,规避了风格 skill 最常见的『套模板』反噬
  • 规则库由真实 LLM 生成站点的生产测试反推并按测试轮次迭代,命中率有实证背书
  • 工程诚实度高:依赖先查 package.json、不给不存在的官方库背书(Liquid Glass 明示为近似)、附录给真实安装命令与官方链接防训练数据幻觉
  • 内联 canonical 代码骨架(GSAP/Motion 三组件)降低 agent 写出残次动效的概率,并给出明确的动效隔离/RSC 约束
  • 适合:想给编码 agent 注入审美纪律的前端开发者:用 Claude Code/Cursor/Codex 等长上下文宿主做 landing page / portfolio / 官网改版;喜欢『硬规则 + 可数阈值 + 交付前自检』式确定性约束、而非『参考 Awwwards』式玄学提示的人。
    不适合:dashboard/数据密集型产品 UI(作者明示 out of scope);需要程序化 lint/CI 强制校验的工作流(该 skill 是纯自检);短上下文模型(87KB 载荷);无真实图片/生成图能力的纯文本环境(§4.8 要求视觉资产,否则产出被自判为 slop)
    安装 agent 直装可复制
    ② 上游 GitHub · 原始来源
    能访问 GitHub?直接去上游安装(实时版,可能已更新)GitHub 原始 ↗
    本页镜像锁定 commit ccbc15639c;上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库leonxlnx / leonxlnx/taste-skill
    Stars84793
    最近推送2026-08-24
    本 skill commitccbc15639c
    许可MIT
    本站信息
    收录日期2026-09-06
    分类设计
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。