Design & UX

Design & UX skills for your AI agent.

Nine skills covering the distance between a screen that works and one people trust. Some are diagnostic: UX Heuristics rates every usability violation from 0 to 4, and Design of Everyday Things explains why a control invites the wrong action at all. Some are constructive: Refactoring UI supplies the spacing and shade scales, Web Typography sets measure and line height before arguing about typefaces, iOS HIG Design carries Apple’s conventions, Microinteractions specs the small moments, and Top Design aims at the one thing people screenshot. Two govern process rather than pixels — Lean UX turns a feature request into a testable hypothesis, and Steve Jobs Design Review ends in a verdict and a cut list.

The difference shows the moment you say “make this look better.” Without a framework an agent nudges padding, picks a third blue, and adds a fade. With these it audits in grayscale before touching color, names the heuristic a screen violates and rates how badly, and tells you the button hierarchy is the problem rather than the border radius.

9 skills Updated Free & MIT-licensed

Which design skill should I install?

Start from what is actually wrong. People can’t find things, or abandon the form halfway → UX Heuristics, which returns a severity-rated issue list rather than an opinion. They click the wrong control and nobody on the team can say why → Design of Everyday Things, the layer underneath: affordance, signifier, mapping, feedback. Working-but-plain, with flat hierarchy and four button styles → Refactoring UI. Headlines look sharp and nobody finishes a paragraph → Web Typography. Shipping to iPhone → iOS HIG Design, for safe areas, Dynamic Type and SF Symbols. Functionally complete and completely dead, every action landing with no acknowledgement → Microinteractions. Competent and forgettable, when being memorable is the actual requirement → Top Design. About to build the wrong thing beautifully → Lean UX, which restates the request as a hypothesis before anyone opens a design tool. A week from launch with everything “fine” → Steve Jobs Design Review.

Most people run several, and the order matters more than the count: comprehension before craft, craft before drama. The pairing that changes the most work is UX Heuristics plus Refactoring UI — one finds what confuses people, the other fixes what looks amateur, and between them they answer almost every “this feels off.” Add Top Design once the fundamentals hold; drama over broken hierarchy is just louder.

All 9 Design & UX skills

Refactoring UI

Refactoring UI — Adam Wathan & Steve Schoger

Refactoring UI packages Adam Wathan and Steve Schoger’s book into a skill your agent loads while it styles things. It works in grayscale before color, picks from constrained spacing and type scales instead of arbitrary pixel values, and builds hierarchy with weight and contrast rather than position alone — so the UI stops looking generated.

  • Visual Hierarchy
  • Spacing & Sizing Systems
  • Color Palette Strategy

Try “Redesign this settings page to have clearer visual hierarchy using refactoring-ui skill”

iOS HIG Design

Human Interface Guidelines — Apple

Apple’s Human Interface Guidelines run to hundreds of pages; the iOS HIG Design skill compresses the parts that change your code into something an agent can apply. It checks navigation choices, safe areas, Dynamic Type, SF Symbols, and haptics against platform convention, so a screen reads as native rather than as a web layout in a phone frame.

  • Navigation Patterns
  • SF Symbols & Iconography
  • Dynamic Type

Try “Design a tab-based navigation structure for my fitness app using ios-hig-design skill”

UX Heuristics

Don’t Make Me Think — Steve Krug & Jakob Nielsen

UX Heuristics folds two usability traditions into one skill: Jakob Nielsen’s ten heuristics and Steve Krug’s Don’t Make Me Think. It has your agent walk an interface the way an evaluator does — naming each violation, rating its severity from 0 to 4, and proposing the specific fix — instead of offering a general opinion on whether a screen looks usable.

  • Visibility of System Status
  • Recognition over Recall
  • Error Prevention

Try “Run a heuristic evaluation on my checkout flow using ux-heuristics skill”

Web Typography

On Web Typography — Jason Santa Maria

Typography gets decided once and then shapes every page forever, which is why Web Typography turns Jason Santa Maria’s On Web Typography into an agent skill. It sets measure, line height, and a fluid modular scale before it argues about typefaces, pairs faces with real structural contrast, and loads fonts under a budget so nothing reflows on arrival.

  • Typeface Selection
  • Typographic Scale
  • Measure & Line Height

Try “Select a font pairing for my SaaS marketing site using web-typography skill”

Design of Everyday Things

The Design of Everyday Things — Don Norman

Don Norman gave the field its vocabulary — affordance, signifier, mapping, feedback — and the Design of Everyday Things skill puts that vocabulary to work on software. Your agent uses it to explain why a control fails: what it invites you to do, what it signals, whether its layout matches what it affects, and what it tells you afterwards.

  • Affordances
  • Signifiers
  • Natural Mapping

Try “Audit this interface for missing affordances and signifiers using design-everyday-things skill”

Top Design

Elite Agency Techniques — Locomotive, Studio Freight, AREA 17

Distilled from how agencies like Locomotive, Studio Freight, and AREA 17 work, Top Design is the skill for the last two points — the gap between a site that looks professional and one that gets shared. It pushes your agent toward a signature moment, a dramatic type scale, custom easing curves, and motion that never leaves transform and opacity.

  • Visual Storytelling
  • Scroll-Driven Animation
  • Whitespace as Design

Try “Design a hero section with cinematic scroll reveal using top-design skill”

Lean UX

Lean UX — Jeff Gothelf & Josh Seiden

Lean UX moves design from deliverables to experiments, applying Jeff Gothelf and Josh Seiden’s book of the same name. The skill has your agent restate a feature request as a testable hypothesis — we believe this change produces that outcome, and we will know when this metric moves — then design the smallest thing that could disprove it.

  • Hypothesis-Driven Design
  • Outcomes over Outputs
  • Cross-Functional Collaboration

Try “Frame this feature idea as a Lean UX hypothesis with measurable outcomes using lean-ux skill”

Microinteractions

Microinteractions — Dan Saffer

A save button that just sits there, a toggle with no in-between state, a form that fails silently — the Microinteractions skill, built on Dan Saffer’s book of that name, fixes exactly these. It applies his four-part structure — trigger, rules, feedback, loops and modes — so your agent specs the small moments deliberately instead of defaulting to a transition.

  • Triggers
  • Rules
  • Feedback

Try “Design microinteractions for our button states, loading, and success feedback using microinteractions skill”

Steve Jobs Design Review

Steve Jobs — Walter Isaacson

Steve Jobs Design Review turns your agent into an unusually harsh reviewer, drawing on Walter Isaacson’s biography and the documented accounts of how Jobs ran product reviews. It judges the experience end to end, demands a kill for every addition, and returns a binary verdict — insanely great, or not done — with a cut list attached.

  • Simplicity Is the Ultimate Sophistication
  • Focus Means Saying No
  • Design Is How It Works

Try “Review this landing page like Steve Jobs would — verdict, cut list, fix list using steve-jobs-design-review skill”

npx skills add wondelai/skills --all --global

This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.

Frequently asked questions

Do I need all nine design skills?

No. Two cover most complaints — UX Heuristics for “users are confused” and Refactoring UI for “this looks generated.” Add Web Typography if you publish long-form text, iOS HIG Design only if you ship to Apple platforms, and Top Design only when being memorable is a stated requirement rather than a wish. Microinteractions, Lean UX and Steve Jobs Design Review are situational: polish, process, and a pre-launch gate respectively.

Will Refactoring UI and Top Design pull my agent in opposite directions?

They can, and it’s worth knowing why. Refactoring UI raises the floor through constraint — one spacing scale, restrained shadows, hierarchy from weight rather than novelty. Top Design raises the ceiling through deliberate rule-breaking: viewport-filling type, asymmetric composition, custom easing. Run them in order rather than at once. On a dashboard, Refactoring UI alone is correct. On a launch page, let Top Design override it in exactly the places you chose.

I’m a developer with no design background. Are these usable?

That’s the intended reader. None of them ask you to have taste — they give your agent checkable rules, so the output is arguable rather than assertive. Refactoring UI in particular exists because its authors watched developers ship functional, ugly software. You’ll still make the calls; you just get told that the grays have no temperature and that hierarchy is being carried by position instead of emphasis.

How is this different from running the Create a Website journey?

The journey sequences ten skills across a whole build — message first, then design, then conversion — and asks you a decision question at each phase. These pages are for when you already know which part is broken and want one framework applied to it now. Install individual skills when you have a specific complaint about a specific screen; run the journey when you’re starting from a blank page and the order is the hard part.

Work with us

We build the skills you already use. Now we’ll build yours.

Custom skills · Subagents · MCP integrations — shipped to production, not demoed.

Sprints from $3K · shipped to production, or you don’t pay the final milestone.