Skip to main content
affpapa.org
RU EN
skill CX Codex

design-taste — Claude Code skill for interface design

This skill guides interface design and review, from visual direction to typography, layout, motion, and component states. Use it when building or polishing a web UI.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code
Open on GitHub

What design-taste does

The skill starts by reading the brief and setting a design direction, then follows a build, critique, and refinement cycle. Three dials shape the result: design variance, motion intensity, and visual density. Its guidance covers typography, color, responsive layouts, and component states.

Motion rules address timing, CSS properties, and prefers-reduced-motion. Keyboard-triggered actions should not be animated. That constraint matters when polishing interactions: every animation needs an alternative for users who request reduced motion.

What it helps with

  • derive a visual direction from a project brief
  • check text hierarchy and color contrast
  • revise spacing and page layout
  • design focus, loading, and error states
  • adapt interface motion for reduced-motion preferences

Example prompts for the agent

  • Review this landing page against the brief, choose a visual direction, and refine the interface.
  • Audit this form for typography, contrast, and component states.
  • Adjust the menu animation and account for prefers-reduced-motion.

How to install design-taste

1Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code

2Manually: put the files in place

~/.claude/skills/design-taste/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-taste/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about design-taste

How do I install design-taste in Claude Code?

Run npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code. The skill file is at ~/.claude/skills/design-taste/SKILL.md.

What does design-taste do?

It helps build, critique, and refine web interfaces, with guidance on typography, color, layout, motion, and component states.

How does the skill handle reduced motion?

It calls for a prefers-reduced-motion fallback for every animation, such as a crossfade or an instant change.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor