98.8K+Download
Skip to the usage guide
design-taste-frontendby Leonxlnx

Design Taste Frontend Skill.

A Claude Code and Codex skill for UI design: anti-slop frontend design for landing pages, portfolios, and redesigns.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/taste-skill/SKILL.mdSKILL.md
--- name: design-taste-frontend description: 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. --- ## 0. BRIEF INFERENCE (Read the Room Before Anything Else) ## 1. THE THREE DIALS (Core Configuration) ## 2. BRIEF → DESIGN SYSTEM MAP ## 3. DEFAULT ARCHITECTURE & CONVENTIONS ## 4. DESIGN ENGINEERING DIRECTIVES (Bias Correction) ## 5. CONTEXT-AWARE PROACTIVITY
Front matter and section headings read from the upstream file on 2026-09-14 · 87,126 characters in full

01 What it does

What the design-taste-frontend Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

An anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers a design direction, then sets three dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that gate every layout, motion, and density decision. It maps briefs to real design systems where one exists (Fluent, Carbon, GOV.UK, Polaris) and labels aesthetic-only directions honestly.

Hard rules cover hero viewport fit, eyebrow restraint, one accent and one theme per page, banned AI tells, and specific icon, font, and animation libraries. Redesigns start with an audit. It closes with a mechanical Pre-Flight Check whose every box must pass before code ships.

What it produces

  • A one-line Design Read stated before any code: page kind, audience, vibe language, and the design system or aesthetic family being leaned toward.
  • Frontend code on Tailwind v4 by default, falling back to v3 only when the existing project demands it.
  • Code comments that say plainly which parts are borrowed inspiration and which are official material.
  • Clearly labeled placeholder slots when no image source exists, plus a closing list of the real images still needed.
See the example prompt ↗

How It Works

  1. 01
    Read the Brief Before Anything

    The agent infers what the user actually wants from page kind, vibe words, references, audience, existing brand assets, and quiet constraints instead of jumping to a default aesthetic.

  2. 02
    Set the Three Dials

    Baseline is 8 / 6 / 4, overridden conversationally by the design read. Presets exist per use case, from public-sector service (3 / 2 / 5) to agency landing (9 / 8 / 3).

  3. 03
    Choose a Foundation Honestly

    If the brief reads as Microsoft, IBM, GitHub, Shopify, Atlassian, or public-sector, install and use the official package rather than recreating its CSS by hand.

  4. 04
    Apply the Default Stack

    React or Next.js with Server Components, Tailwind v4, and Motion imported from motion/react, with animation isolated in client leaf components.

  5. 05
    Run the Pre-Flight Check

    Before outputting any code, every box in the Section 14 matrix must pass; a single unticked box means the work is not done.

02 Find your fit

When to Use the design-taste-frontend Skill

Use the design-taste-frontend skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Landing pages, portfolios, and redesigns, explicitly not dashboards, data tables, or multi-step product UI.
  • Redesign work where the brand must survive: audit first, extract brand tokens, evolve gradually rather than reimagining.
  • Public-sector and trust-first services, where the official design system is expected and the dials drop to a restrained 3 / 2 / 5.
  • Premium-consumer briefs, provided the palette rotates away from the previous project's warm-craft family.

Know the Boundaries

  • Dashboards, dense product UI, and admin panels belong to Fluent, Carbon, Atlassian, or Polaris instead.
  • Data tables are out of scope and should use TanStack Table or AG Grid.
  • No official Apple Liquid Glass package exists for the web; any implementation can only be labeled an approximation.
  • One design system per project: Fluent React and Carbon cannot share a tree, and shadcn/ui components cannot be dropped into a Material 3 app.

What to Provide

  • The brief's own vocabularyVibe words drive the dial inference, so words like minimalist, brutalist, Apple-y, or serious B2B should be passed through in the user's own phrasing.
  • Existing brand assets for redesignsLogo, color, type, and photography are treated as starting material rather than optional input, which is what allows the preserve mode to work.
  • Quiet constraintsAccessibility-first audiences, public-sector, regulated industries, trust-first commerce, and kids' products override aesthetic preference entirely.

03 Inside the skill

Rules the design-taste-frontend Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Zero em-dashes

    The em-dash character is forbidden everywhere on the page: headlines, eyebrows, pills, body copy, quotes, attribution, captions, button text, and alt text.

  2. Check package.json First

    Before importing any third-party library, verify it exists in package.json and print the install command if it is missing. Never assume a library is present.

  3. Ration the Eyebrow

    At most one small uppercase tracking label above a section headline per three sections, and the hero counts as one, so a nine-section page gets a maximum of three.

  4. Cap the Hero Stack

    The hero headline is at most 2 lines on desktop and the subtext at most 20 words, with CTAs visible without scrolling.

  5. Never Use h-screen

    Full-height hero sections use min-h-[100dvh] instead of h-screen, which prevents layout jumping when the iOS Safari address bar moves.

  6. Motion Values, Not State

    Continuous values driven by input such as mouse position, scroll progress, and magnetic hover must run through useMotionValue and useTransform, never useState.

  7. Two Banned Display Serifs

    Serif is very discouraged as a default, and Fraunces plus Instrument_Serif are specifically banned as the two LLM-favorite display serifs.

  8. Lock One Page Theme

    Pick light, dark, or auto at page level and lock it. Section-level tints inside the same theme family are fine, but no section flips to inverted mode mid-scroll.

04 Put it to work

Install design-taste-frontend in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-taste-frontend to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

Generic skills CLI form for skills/taste-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a landing page for [product name], aimed at [audience, e.g. technical buyers at mid-size companies]. The vibe should be [minimalist / premium consumer / agency-y] and here are my references: [URLs or screenshots]. It is a redesign, so preserve the existing brand colors and keep the nav labels as they are.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Run the full Section 14 matrix before outputting code; it is the last filter and every box has to be ticked honestly.
  • Count uppercase tracking micro-labels above section headlines across all components and confirm the total stays within one per three sections.
  • Re-read every visible string on the page before declaring the task done, flagging broken grammar, unclear referents, and fake-thoughtful copy.
  • Run Lighthouse before considering the page finished, against LCP under 2.5s, INP under 200ms, and CLS under 0.1.
  • Open the page in both light and dark modes during development and never ship a page seen in only one of them.
  • A single em-dash or en-dash anywhere visible to the user fails the Pre-Flight Check and forces a rewrite.

In OpenDesign design-taste-frontend is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/taste-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for design-taste-frontend.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. 0. BRIEF INFERENCE (Read the Room Before Anything Else)Infers page kind, vibe words, audience and quiet constraints, then states a one-line Design Read.
  2. 1. THE THREE DIALS (Core Configuration)Sets DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY with inference table and use-case presets.
  3. 2. BRIEF → DESIGN SYSTEM MAPMaps briefs to official packages like Fluent or GOV.UK, or labels aesthetics honestly.
  4. 3. DEFAULT ARCHITECTURE & CONVENTIONSStack, state, icons, emoji, responsiveness and dependency defaults when no official system is used.
  5. 4. DESIGN ENGINEERING DIRECTIVES (Bias Correction)Typography, color, layout, materiality, UI states, hero discipline, imager
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 87,126 characters. Read the full file on GitHub.

Design Taste Frontend

Run design-taste-frontend on a Real UI Design Task.

The design-taste-frontend skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows