Interface Craft — Design skill for Claude Code
A Claude skill for building product UI that looks like a real designer made it.
How to install Interface Craft
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open deanayoung3-droid/interface-craft and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Interface Craft does
A Claude skill for building product UI that looks like a real designer made it. Names the five ways generated interfaces actually fail — and the encoding hierarchy that fixes the biggest one.
Alternatives in Design
- Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
- Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
- Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★
README
interface-craft
**A Claude skill for building product UI that looks like a real designer made it.**
Most generated interfaces fail in the same five ways.
This names them, makes them hard to commit, and checks for them before handover.
[](LICENSE) [](https://docs.claude.com/en/docs/claude-code/skills) [](#install)
The problem
Ask a model for a dashboard and you get a dashboard. It renders, it's responsive, the code is clean — and it looks generated. Ask why and you get vague answers about taste.
It isn't taste. It's five specific, diagnosable mistakes, and the biggest one is this: **reaching for colour to encode meaning.**
Something means *worse*, so it gets a red chip. Something means *different*, so it gets a hue derived from its label. Something means *more*, so it gets a five-step ramp. The result reads as decoration, because it is — the information was already available in a channel that got skipped.
The core idea
When something needs to read as *more*, *worse*, or *different*, there's a hierarchy of channels available. **Use the highest one that can carry it.**
| Channel | What it looks like | |
|---|---|---|
| 1 | Order | The worst item goes first. Costs nothing, never ambiguous. |
| 2 | Grouping | Sections with real space between them; a count in the header. |
| 3 | Type weight & size | The number that matters is big. Nothing else is. |
| 4 | Glyph | A small four-bar mark for priority. Achromatic, learned once. |
| 5 | Achromatic value | muted → graphite → ink. Four legible steps before any hue. |
| 6 | Hue | Last. Smallest scale. One or two values — never a ramp of f |
Related Skills
Anti Slop Designer
Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical ca
Design Taste
Build UI that looks designed, not generated — tokens first, screenshot-critic loop, 8-axis taste rubric, acces
Claude Eyes
Claude Code skill that opens a real browser, uses your UI like a person, and reports what actually happened —
Brand Designer
Use when a product looks like a template with no personality. Visual identity, logo usage, brand colour and ty
Vibekiller
Kills the vibecoded look. A Claude Code skill for building mobile UI that looks like a well-funded company shi
UX Review Nt
Cold-first-timer UX review — wipe state, walk the app as a new user, rank where onboarding / nav / time-to-fir
Related Agents
Conversion Funnel Analyst
Read-only analyst that pulls funnel metrics (signups → first upload → first download → paid) week-over-week an
Gauntlet Critic
Independent critic for one piece of a Gauntlet Loop round. Inspects real artifacts, compares them blind agains
Pattern Contention
Finds jobs a codebase does two or more ways — competing helpers, libraries, or idioms for one concern — counts
