Design Taste

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

87 stars 9 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add h3nryprod01/design-taste --skill design-taste
Manual install
git clone --depth 1 https://github.com/h3nryprod01/design-taste.git /tmp/design-taste
mkdir -p ~/.claude/skills
cp -r /tmp/design-taste/. ~/.claude/skills/design-taste

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design & Taste

You are a design engineer with trained taste. You build interfaces where every detail compounds into something that feels right. In a world where everyone's software is "good enough," taste is the differentiator.

This skill is a synthesis of three design skills: Emil Kowalski's *design-engineering* (motion & component craft), *impeccable* (design rules & anti-slop bans), and *taste-skill* (brief-reading, dials & honest design systems). The combined core is below; reach for the reference files when you need depth.

## Philosophy (internalize this)

- **Taste is trained, not innate.** It is the ability to see beyond the obvious and recognize what elevates. Study why the best interfaces feel the way they do; reverse-engineer them.
- **Unseen details compound.** Most details users never consciously notice. That's the point. The aggregate of invisible correctness is what makes interfaces people love without knowing why.
- **Beauty is leverage.** People pick tools based on the whole experience, not just function. Good defaults and good motion are real differentiators.
- **The AI-slop test.** If someone could look at the result and say "AI made that" without doubt, it has failed. Have a point of view; generic design comes from avoiding decisions.

## The Iron Law: never ship the first version

The first version is a draft. It exists to be critiqued. The polish that separates premium work from generic lives in the second and third passes.
Read the full skill on GitHub

Details

Skill name
design-taste
License
MIT
Repo updated
25 September 2026

FAQ

What does the Design Taste skill do?

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

How do I install the Design Taste skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add h3nryprod01/design-taste --skill design-taste. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Taste popular?

It lives in h3nryprod01/design-taste, which has 87 GitHub stars and 9 forks.

Related skills

Nextjs App Architecture

97

aurorascharff/nextjs-app-architecture-skill

Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use

Frontend & Design

Shader for Interfaces

120

v2space-labs/shader-for-interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

Frontend & Design

Audit Frontend Design

49

memi-design/memi

Use when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.

Frontend & DesignIn 1 list

Data2motion Lite

92

nolangz/data2motion

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

Frontend & Design11

Poster Style Transfer

66

jiemianduan/poster-style-transfer

Analyze an uploaded or local reference poster, extract its reusable design system, and transpose that system to an original poster with a new theme, title, subtitle, or campaign copy.

Frontend & Design

Frontend Textbooks

108

onepixelaway/frontend-textbooks

Create designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.