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.
Profile →npx skills add nexu-io/open-design --skill taste-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill instructs the agent to read a design brief and infer the appropriate design direction for landing pages, portfolios, and redesigns. It then sets three global dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) based on the brief read, and chooses whether to use a real design system or to build with native CSS + Tailwind when no official system is applicable. It emphasizes auditing redesigns first, avoiding templated-looking results, and applying a strict pre-flight check.
How it works
- Read the brief and determine the page kind, audience, vibe, references, and constraints to infer design direction (Design Read).
- Output a one-line design read describing the target context, then set three dials: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY to values with baseline 8 / 6 / 4, adjusting per the brief according to the provided mappings. These values guide layout, motion, and density decisions throughout.
- If the brief maps to a real design system (e.g., Microsoft Fluent, Material, Carbon, Polaris, etc.), reach for the official package listed under 2.A; otherwise proceed with a native CSS + Tailwind approach as the default. Document the system choice clearly in the plan.
- Establish architecture conventions (React/Next.js with potential Server Components, Tailwind v4, Motion for animation, font handling via next/font or self-hosted fonts).
- Apply design-engineering directives (typography, color, icons, responsiveness, accessibility considerations) to craft interfaces that avoid AI-slop patterns and meet the brief’s constraints.
When to use it
Use when creating premium landing pages, portfolios, or redesigns where the brief specifies anti-slop or high-design-read requirements and a desire for real design systems or audit-first approaches. It is not intended for dashboards, data tables, or multi-step product UIs.
What it can touch
Tools declared: claude-code, codex, cursor. The skill references 3.A/B configurations and design-system choices, and expects checks of package.json before importing libraries. It instructs to install official design systems when applicable and to avoid importing libraries if not required.
Caveats
Uses a design-read and dial-based configuration that may override defaults based on the brief. If the brief does not map to an official design system, the skill falls back to native CSS + Tailwind with Motion for animation and enforces responsiveness and accessibility standards. Licenses referenced include Apache-2.0 for the skill; ensure compatibility with project licenses when integrating.
# tasteskill: Anti-Slop Frontend Skill > Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI. > Every rule below is **contextual**. None of it fires automatically. First read the brief, then pull only what fits. --- ## 0. BRIEF INFERENCE (Read the Room Before Anything Else) Before touching code or tweaking dials, **infer what the user actually wants**. Most LLM design output is bad because the model jumps to a default aesthetic instead of reading the room. ### 0.A Read these signals first 1. **Page kind** - landing (SaaS / consumer / agency / event), portfolio (dev / designer / creative studio), redesign (preserve vs overhaul), editorial / blog. 2. **Vibe words** the user used - "minimalist", "calm", "Linear-style", "Awwwards", "brutalist", "premium consumer", "Apple-y", "playful", "serious B2B", "editorial", "agency-y", "glassy", "dark tech". 3. **Reference signals** - URLs they linked, screenshots they pasted, products they named, brands they're competing with. 4. **Audience** - B2B procurement panel vs. design-conscious consumer vs. recruiter scanning a portfolio. The audience picks the aesthetic, not your taste. 5. **Brand assets
- 0. BRIEF INFERENCE (Read the Room Before Anything Else)
- 0.A Read these signals first
- 0.B Output a one-line "Design Read" before generating
- 0.C If the brief is ambiguous, ask one question, do not guess
- 0.D Anti-Default Discipline
- 1. THE THREE DIALS (Core Configuration)
- 1.A Dial Inference (design read → dial values)
- 1.B Use-Case Presets
- 1.C How the Dials Drive Output
- 2. BRIEF → DESIGN SYSTEM MAP
- 2.A When to reach for a real design system (use official packages)
- 2.B When the brief is an aesthetic, not a system
- 3. DEFAULT ARCHITECTURE & CONVENTIONS
- 3.A Stack
Material Web (Material 3) npm install @material/web Fluent UI React (v9) npm install @fluentui/react-components Fluent UI Web Components (framework-free) npm install @fluentui/web-components @fluentui/tokens IBM Carbon npm install @carbon/react @carbon/styles Radix Themes npm install @radix-ui/themes
What does the design-taste-frontend skill do?
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.
How do I install it?
Run `npx skills add nexu-io/open-design --skill taste-skill --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.