Home / All Skills / Design & Motion / design-taste-frontend
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · 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.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 84793License MITCommit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Anti-slop is achieved entirely through prompt orchestration: the skill directory contains only a single file, SKILL.md (87,253 bytes / 1,206 lines of markdown), with zero scripts or data files; rules enforce pre-output self-filtering via 'hard prohibitions + countable thresholds + self-check checklists'.

skills/taste-skill/SKILL.md (目录内唯一文件；仓库 skill.sh 注册表)
[taste-skill]="skills/taste-skill/SKILL.md"
The repository's git tree confirms that skills/taste-skill/ contains only SKILL.md; skill.sh is merely a local registration script mapping each skill to its SKILL.md path and contains no runtime execution logic for the skill.

'Read the brief' before applying rules: three dials (DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY) act as global pseudo-variables throughout the text with baselines of 8/6/4; all layout, motion, and density decisions are gated by them, and rules take effect only within the context of these variables.

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.
Section 1.C explicitly mandates 'never invent aliases like LAYOUT_VARIANCE or ANIM_LEVEL', using naming discipline to ensure cross-referencing between rules (e.g., §4.3 ANTI-CENTER BIAS only activates when VARIANCE > 4).

Anti-slop rules function as an actionable 'AI Tells Blacklist': high-frequency LLM flaws are cataloged as identifiable signatures (em-dashes, eyebrow counts, split 3-card layouts, split-screen headers, solid-color version footers, etc.) paired with countable thresholds, most of which offer explicit override paths.

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.
Section 9.F states that the checklist 'came out of real LLM-generated landing-page tests'—rules are reverse-engineered from empirical testing; §4.7 provides a mechanical formula for eyebrows: count instances of `uppercase tracking` … If count > ceil(sectionCount / 3), the output fails.

Enforced final check matrix: §14 PRE-FLIGHT CHECK provides 50+ checkboxes covering all preceding rules, requiring item-by-item self-verification prior to output; if any item cannot be checked, the status remains '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.**
This condenses hundreds of scattered rules into an actionable pre-delivery checklist; mechanistically, it operates as cognitive self-verification rather than programmatic linting.

Provides copy-paste-ready canonical code skeletons and real installation commands to prevent agents from hallucinating incorrect libraries: §5.A/B/C inlines canonical TSX skeletons for GSAP/Motion, Appendix A provides real install commands for various design systems, and Appendix B links to official documentation.

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.
Section 3.F enforces dependency verification: 'Before importing ANY 3rd-party library, check `package.json`. … **Never** assume a library exists.' Appendix C explicitly clarifies that Apple Liquid Glass has no official web CSS, providing only an approximation skeleton labeled as such—preventing the agent from hallucinating the existence of an official library.

Cross-project rotation mechanisms counteract 'model prior reuse': fonts and premium color palettes are barred from being reused across consecutive projects, enforcing diversification.

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.
Similar constraints apply to the serif rotation pool ('rotate from this pool, do NOT reuse the same serif across consecutive projects'), specifically targeting convergence across LLM outputs.

2Core Capabilities

01Brief Inference / Design Direction Deduction: Reads signals first (page archetype, vibe descriptors, reference links, audience, brand assets) before emitting a one-line 'Design Read'; asks at most one clarifying question if ambiguous
02Anti-Slop Hard Rulebase: §4 Design Engineering Directives + §9 AI Tells Blacklist (hero structural caps, eyebrow quotas, zigzag limits, complete em-dash ban, prohibition of placeholder data/names/screenshots)
03Three-Dial Configuration System: VARIANCE/MOTION/DENSITY 1–10 scale definitions + brief-to-dial inference mapping table and preset use cases
04Brief-to-Design-System Mapping: Selection matrix across 12+ official systems (Fluent/Carbon/Material/GOV.UK/USWDS/Primer/Polaris, etc.) + 'one system per project' discipline + honest labeling of aesthetic approximations (e.g., Liquid Glass)
05Ready-to-Copy Animation Skeletons & Motion Specs: Three canonical TSX skeletons (sticky-stack / horizontal-pan / reveal-stagger) + Motion vs. GSAP selection rules + requirement that motion must be intent-driven
06Performance & Accessibility Guardrails: Animate only transform/opacity, mandatory prefers-reduced-motion, dual-mode dark theme, CWV targets, and strict DOM cost/z-index budgets
07Redesign Protocol: Audit before action (brand tokens/IA/SEO baseline), explicit Preserve vs. Overhaul modes, modernization leverage prioritization, and zero silent modifications to IA, copy, or analytics events
08Final Pre-Flight Check: 50+ item pre-output self-verification matrix serving as a deployment gate

3External Dependencies

KindDependency / Endpoint
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+ 条

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt directives and rule text; no script execution or external side effects.
Audit Notes: 🟢 Green · Pure Directives: The skill directory contains solely an 87KB markdown file, with no scripts, no built-in network calls, no credential access, and no file writes of its own; all 55 URLs are documentation links or asset sources (picsum/simpleicons/Shopify CDN) written directly into 'generated pages', executing strictly within user artifacts rather than inside the skill. Triggered npm/npx installations and conditional image generation represent standard host coding agent tasks. Two aspects to note: generated pages reference external third-party CDNs; the 87KB prompt imposes a significant context window load.

5Second-Pass Verification

  • [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

6Verdict & Scenarios

  • Actionable anti-slop mechanism: Replaces vague pleas for 'good taste' with strictly countable prohibitions (complete em-dash ban, eyebrow quota formulas, zigzag/hero structure caps) and a deterministic Pre-Flight matrix
  • Fully contextual rules with explicit overrides, avoiding the 'templatization' backlash common in style-enforcing skills
  • Rulebase reverse-engineered and iterated from real production tests of LLM-generated sites, backed by empirical validation
  • High engineering integrity: Mandates checking package.json before imports, avoids endorsing non-existent official libraries (Liquid Glass is explicitly flagged as an approximation), and provides real install commands and official docs in appendices to prevent hallucination
  • Inlined canonical code skeletons (three GSAP/Motion components) significantly reduce defective motion implementations and provide clear motion isolation/RSC boundaries
    • Best for: Frontend developers looking to instill aesthetic discipline into coding agents: using long-context hosts like Claude Code, Cursor, or Codex to build landing pages, portfolios, or marketing site redesigns; and those who prefer deterministic constraints ('hard prohibitions + countable thresholds + pre-delivery checklists') over subjective prompt guidance like 'refer to Awwwards'.
    Not for: Dashboards / data-dense product UIs (explicitly out of scope by author); workflows requiring programmatic linting or CI enforcement (this skill relies entirely on agent self-verification); short-context models (87KB token payload); text-only environments lacking real images or image-generation capabilities (§4.8 mandates visual assets, failing which the output is self-flagged as slop).
    Install Agent-Ready
    ① Verified Mirror 2026-09-06
    Option A · Direct DownloadDownload design-taste-frontend.tar.gz
    sha256: 1cf075267bf20c7a…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ccbc15639c.