English static mirror for SEO/GEO · AI-assisted translation · Read Chinese original

taste-skill: A Markdown File That Fixes AI's Generic Frontend Output

Forum topic · 小凯 · 2026-06-02

Summary

taste-skill is an open-source anti-slop framework created by 16-year-old developer Leonxlnx that improves the visual quality of AI-generated frontend code. Instead of training a new model, it works by injecting a SKILL.md file (a Markdown instruction format natively supported by Claude Code, Codex, Cursor, v0, and Bolt) into the AI's context before code generation, overriding the model's tendency to regress to common Tailwind/Bootstrap templates. The core mechanism uses three tunable parameters scored 1 to 10: DESIGN_VARIANCE (layout experimentation), MOTION_INTENSITY (animation depth), and VISUAL_DENSITY (information density). The project ships 13 variants including minimalist, brutalist, image-to-code, redesign, and Google Stitch-compatible versions. Install via `npx skills add https://github.com/Leonxlnx/taste-skill`. It demonstrates how in-context learning and negative instructions can shift LLM output distributions, raising questions about AI-driven design homogenization.

Overview

taste-skill is an open-source project by Leonxlnx (a 16-year-old developer) that addresses a specific problem in AI-assisted frontend development: nearly every AI-generated page looks the same. The framework, branded as *The Anti-Slop Frontend Framework for AI Agents*, uses a single Markdown file to steer AI coding tools away from generic templates.

  • Repo: https://github.com/Leonxlnx/taste-skill
  • Website: https://www.tasteskill.dev/
  • Install: npx skills add https://github.com/Leonxlnx/taste-skill
  • Key points

  • The slop problem. LLMs generate frontend code by regressing to the most common patterns in their training data (Tailwind templates, blue-purple gradients, centered hero sections, rounded-xl cards). The result is statistical mediocrity, not intentional design.
  • Mechanism: SKILL.md context injection. AI tools like Claude Code, Codex, Cursor, v0, and Bolt natively read a SKILL.md file from the project directory before generating code. taste-skill ships a carefully authored version that lists forbidden patterns, establishes design principles, and configures three numeric knobs.
  • Three tunable knobs (1–10):
  • DESIGN_VARIANCE — controls layout experimentation (centered/symmetric → asymmetric grids → experimental typography)
  • MOTION_INTENSITY — controls animation depth (hover-only → scroll/parallax → magnetic physics, 3D)
  • VISUAL_DENSITY — controls information density (spacious whitespace → balanced → dense dashboards)
  • Negative instructions matter. Explicit prohibitions (e.g., "no blue-purple gradients," "no default rounded-xl") are more salient in LLM attention than positive ones, which is why the anti-slop effect is strong.
  • v2 workflow. v2 simulates a human designer's process: read brief → infer design language → map design system → apply hard rules → scaffold GSAP animations → audit existing UI (for redesigns) → pre-flight check before output.
  • 13 variants available, including design-taste-frontend (default v2), design-taste-frontend-v1 (stable original), gpt-taste (stricter for GPT/Codex), high-end-visual-design (soft/luxury), minimalist-ui, industrial-brutalist-ui, image-to-code, redesign-existing-projects, full-output-enforcement, imagegen-frontend-web, imagegen-frontend-mobile, brandkit, and stitch-design-taste.
  • Tool compatibility. Works with Claude Code, Codex, Cursor, v0, Bolt, and any LLM that accepts Markdown instructions.
  • Before vs. After (illustrative)

    Without taste-skill, a typical AI-generated page: centered hero with blue-purple gradient, three feature cards, blue rounded-xl CTA, Inter font, slate-50 background.

    With taste-skill at DESIGN_VARIANCE=8, MOTION_INTENSITY=7, VISUAL_DENSITY=4: asymmetric hero with overflowing image, custom display + monospace pairing, GSAP scroll-triggered parallax and SplitText reveals, monochromatic palette inferred from brief, sharp 2px corners, no gratuitous animation.

    Limitations

  • v2 is experimental; pin to v1 (design-taste-frontend-v1) for stable output.
  • A Markdown rule set cannot replace genuine human design judgment, user research, or systems thinking.
  • Risk of *meta-slop*: if every AI frontend developer converges on taste-skill defaults, the framework itself could become a new default template. Diversity of knob values and variant selection mitigates this.

Why it matters

taste-skill reframes "taste" from an incommunicable intuition into a version-controlled, declarative configuration file, much like .prettierrc standardized code formatting. It demonstrates that smarter context can outperform bigger models for specific output-quality problems, and points toward a near-term workflow where humans author taste files while AI handles execution.

Tags

#taste-skill#ai-frontend#anti-slop#skill-md#claude-code#cursor#design-systems#llm-prompting

This page is an English static mirror generated for search and AI citation. It may be a full translation or structured summary of the Chinese original. Canonical interactive discussion lives on the Chinese page: https://zhichai.net/topic/177980754