Design Taste Frontend Skill: Anti-Slop UI

What is the design-taste-frontend skill?

design-taste-frontend is the install name of the default skill in the leonxlnx/taste-skill repository, which lives in the skills/taste-skill folder. It is a long, rule-based SKILL.md for landing pages, portfolios and redesigns. The README calls this version v2 and marks it experimental.

It states its own limits. Dashboards, data tables, multi-step forms, code editors and native mobile apps are out of scope, and the skill tells the agent to say so and point to a better tool.

What changes in your agent's output

• Before any code, the agent writes a one-line design read: page kind, audience, vibe and the design family it leans toward.
• It sets three dials, DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY, with a baseline of 8, 6 and 4 that the brief can override.
• If the brief matches a real system such as Fluent, Carbon, Polaris, GOV.UK or shadcn/ui, it installs the official package instead of rewriting that system's CSS.
• It steers away from listed defaults: AI-purple gradients, a centered hero over a dark mesh, three equal feature cards and Inter on slate.
• Heroes stay inside the first viewport, eyebrow labels are rationed, and the page keeps one theme, one accent color and one corner-radius scale.

How the dials work

Every layout, motion and density decision is gated by the dials. Minimalist briefs map to about 5 to 6 variance, 3 to 4 motion and 2 to 3 density. Agency or Awwwards briefs push variance to 9 or 10 and motion to 8 to 10.

Who the design-taste-frontend skill is for

Best for

• Landing pages, marketing sites and portfolios where the default AI look is the problem.
• Redesigns that need an audit first. The skill extracts brand tokens and keeps URLs, nav labels and form fields stable unless you approve a change.
• Agents that fall back on the same fonts, gradients and card grids every time.

Not for

• Dashboards, data tables, admin panels and multi-step product UI. SKILL.md lists them as out of scope.
• A short rule set. The file is long, with numbered sections from 0 to 14 plus appendices. For a lighter single-file option, see frontend-design.
• Other stacks without a check. The defaults are React or Next.js with Tailwind v4 and Motion, so confirm the stack before you accept the output.

Use it with UiChemy

The skill's default output is React or Next.js code, not a WordPress page. If you ask your agent for plain HTML, CSS and JavaScript instead, UiChemy AI to WordPress can import the build as an editable page. Click Get Started on uichemy.com.

How to install Design Taste Frontend Skill: Anti-Slop UI

git clone https://github.com/Leonxlnx/taste-skill.git

1. Clone the repository

   Run git clone https://github.com/Leonxlnx/taste-skill.git. The default skill is the skills/taste-skill folder, and the name in its SKILL.md frontmatter is design-taste-frontend.

2. Add it to your agent

   The README says you can copy any SKILL.md into your project or paste it into ChatGPT or Codex conversations. For an agent that loads skill folders, copy skills/taste-skill into its skills directory as design-taste-frontend so the folder matches the skill name.

3. Ask for a page

   Describe the page and its audience, for example: build a landing page for a B2B invoicing tool aimed at finance teams. Expect a one-line design read before any code.

4. Tune it in chat

   SKILL.md says not to edit the file to change the dials. Override them conversationally, for example: lower the motion to 3 and keep the density airy.

Check that it loaded

Ask for a small landing page. The agent should open with a line that starts Reading this as, giving page kind, audience and vibe, state the dial values, and only then write code.

Read the official instructions on GitHub

Key features

• Brief inferenceThe agent reads page kind, vibe words, references, audience, existing brand assets and quiet constraints such as accessibility, then states a one-line design read. It asks one question only when the read truly splits.
• Three dialsDESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY run from 1 to 10 with a baseline of 8, 6 and 4. Presets cover SaaS landings, agency pages, portfolios, editorial and public-sector sites.
• Design-system mapA table maps briefs to official packages, including Fluent UI, Material Web, Carbon, Polaris, Atlaskit, Primer, govuk-frontend, USWDS, Radix Themes and shadcn/ui. Trends such as glassmorphism and bento are labeled as aesthetics with no official package.
• Default stackUnless a design system is chosen, the defaults are React or Next.js with Server Components, Tailwind v4 and Motion. Fonts load through next/font or self-hosting, not a link tag.
• Type and color rulesSerif display type and Inter are discouraged as defaults, one accent color is locked across the page, and a purple-glow look and a cream-and-brass palette for premium briefs are called out by name.
• Layout disciplineThe hero fits the first viewport with at most four text elements. Eyebrow labels are limited to one per three sections, split headers are banned by default and a layout family does not repeat.
• Motion guardrailsEach animation must be motivated. A scroll listener on window is banned in favor of Motion, ScrollTrigger or CSS scroll-driven animation, and anything above intensity 3 must honor prefers-reduced-motion.
• AI-tells listSection 9 lists patterns that mark a generated page, including fake-precise numbers, placeholder names, div-built fake screenshots and the em-dash, which is banned outright.
• Redesign protocolThe agent detects greenfield, preserve or overhaul mode, audits brand tokens, information architecture and the SEO baseline first, and never changes URLs, nav labels or form fields silently.
• Pre-flight checkSection 14 is a checklist the agent runs before it outputs code: design read declared, dials reasoned, one theme, one accent, one radius system, readable button contrast and no wrapped CTAs.

Frequently asked questions