Design director
ProThe core workflow: read, plan, review against generic UI, build and critique. Routes to every other skill.
Frontend design skills for AI agents
13 skills3 free7 agentsPlain files you own
Parth Sharma · Founder, WensityUpdated
Star on GitHubAgent skills that teach Claude Code, Codex, Cursor and other AI coding agents to design UI the way a design engineer would: a real type scale, spacing, color and motion, every state handled, and none of the usual AI tells. Built from the rules behind every Wensity component.
Works with
- Claude Code
- Codex
- Cursor
- +4
What is a frontend design skill?
A frontend design skill is a file of design rules that an AI coding agent such as Claude Code, Codex or Cursor loads on its own while it builds UI. It holds the exact values and decisions behind good interfaces, so the agent stops reaching for the same defaults every time: an uppercase label over every heading, three identical cards, a purple gradient and a form that only handles the happy path.
Wensity's skills come from the rules behind the Wensity component library, rewritten for any project. They keep the stack, fonts and components you already have and make the agent use them well.
- Format
- Agent Skills (SKILL.md), the open format agents share
- Works in
- Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI and OpenCode
- Projects
- React, Next.js, Tailwind CSS, shadcn/ui, or plain HTML and CSS
- The pack
- 13 skills: 3 free and 10 Pro, with two bundled scripts
- Install
- One command, or copy the file into your project by hand
- Price
- Free skills cost nothing. Pro is $169 a year or $199 once
Loads on its own
Ask the way you always do. Your agent reads each skill's description and loads the ones the task needs.
Fits your project
Your fonts, tokens and components stay. The skills change how the agent uses them, not what you chose.
Plain files you own
Each skill is a folder of text in your repo. Read it, edit it, or delete it like any other file.
A design director inside your agent
The core of the pack. It reads your project, writes a short design plan with real values, checks the plan for generic choices, builds with the focused skills and reviews what it made.
The director plans
Before any code, it writes a short plan with real values and checks it against the patterns that make UI look AI-made.
Focused skills build
Type, layout, color, surfaces, motion, states and copy each load only when that part of the work comes up.
Polish checks
A scanner reads the code for common defects, then the agent looks at the page and ranks what to fix.
One prompt, two builds
The same request, built once by an agent on its own and once with the design director. Drag the handle across the page.
Without the skill“Build a landing page for Paidby, invoicing for freelancers”With the director
The plan the director wrote before any code
- Type
- One sans in two weights. A tight 58px headline over body copy with room to breathe.
- Color
- A grey-50 page, one blue for the main action, and a single sky behind the product.
- Layout
- Centred hero over the real app, cut by the fold like a screenshot, instead of a side card.
- Copy
- Says what it does, who it is for and the free limit. No eyebrow, no slogan.
Free foundations: type, space and words
The three skills that change a page the most, free for everyone. Install them on their own or under the design director.
Typography
FreeFonts, a role-based type scale, line height, tracking, measure, line breaks, numbers and font loading.
Layout and spacing
FreeA 4px spacing scale, grouping by distance, alignment, containers, grids and responsive structure.
UX writing
FreeHeadings, buttons, error messages, empty states and realistic sample content, all written without filler.
Install all three in one command
terminal
pnpm dlx skills add wensity/skills
terminal
npx skills add wensity/skills
terminal
yarn dlx skills add wensity/skills
terminal
bunx skills add wensity/skills
wensity/skills
All three, open source under MIT. A star helps other developers find them.
Or add one by hand: each skill page has the file to copy or download and the folder for each agent.
Turn the free skills on one at a time
A settings panel as an agent writes it by default. Each switch adds one skill, and each skill fixes only its own part.
Notification Settings
Manage your notification preferences to stay informed and up to date with the latest activity.
- Payment NotificationsGet notified about payments.
- Overdue AlertsReceive alerts for overdue invoices.
- Weekly DigestStay informed with weekly updates.
Email Address
maya@studio-oak.comEnter your email address.
CancelSubmit
Without the skill: What an agent writes on its own: everything bold and one size, every row boxed with the same gap, two full-width buttons and copy that could sit in any app.
Color, surfaces and motion
The look and feel of an interface: color tokens that pass contrast in both themes, depth that stays quiet, and motion that explains a change instead of decorating it.
Color and dark mode
ProOKLCH role tokens, true neutral greys, one accent, both themes, and a script that checks contrast and gamut.
Surfaces and depth
ProA four-level depth ladder, shadows, hairlines, radius, buttons, inputs, icons, glass and image frames.
Motion and animation
ProWhen to animate, six duration tiers, four curves, springs without overshoot, reduced motion and 18 recipes.
Feel the difference
One card, finished twice. Move your pointer across each.
Without the skill
PaidbyBusiness
•••• 4821Parth09/29
Without the skill: Three hues that dull where they meet, one heavy shadow, and a tilt that jitters and snaps.
With the skill
PaidbyBusiness
•••• 4821Parth09/29
With the skill: One blue falling into its own navy, light on the edge, and a tilt that eases after you.
Landing pages, app screens and every state
Rules for the two kinds of page an agent builds most, plus every state behind them: loading, empty, errors, keyboard and screen readers.
Landing page
ProMessage first, page structure, hero, real proof, features, pricing, FAQ, motion and performance.
Dashboard and app UI
ProApp shells, data tables, settings, dashboards, charts, detail panels, command menus and keyboard shortcuts.
Accessibility and UI states
ProEvery interaction and data state, plus keyboard, touch, zoom, forced colors and screen readers.
One screen, every state
The app behind that landing page. Pick a state, then flip between the template an agent reaches for and the screen built with the skills.
Welcome back, User! 👋
Here's what's happening with your business today.
Total Revenue
$45,231.89
+20.1% from last month
Invoices
+2,350
+180.1% from last month
Clients
+12,234
+19% from last month
Active Now
+573
+201 from last month
Recent Invoices
| Client | Amount | Status |
|---|---|---|
| Studio Oak | $4,800 | Paid |
| Northline Coffee | $1,250 | Overdue |
| Mara Feld | $3,600 | Open |
| Hollis & Grey | $8,770 | Paid |
Without the skill: A greeting, four stat cards with trends nobody asked for, uppercase headers, amounts that do not line up and a pill on every row.
Review, document and reuse
Finish the work: a polish review with a code scanner, a DESIGN.md that keeps every later session on one design, and the Wensity catalog when a ready-made section fits.
UI review and polish
ProA tag-aware code scanner and a rendered review across 12 categories, ranked P0 to P2, with a full checklist.
DESIGN.md generator
ProPulls a project's real design system into DESIGN.md, or starts from four contrast-checked starter systems.
Wensity components
ProSearches the live Wensity catalog, installs with the CLI or MCP, and composes items without breaking them.
Ask for a piece, get the real one
With the Wensity components skill, your agent checks the catalog before it writes anything. What you see here is the real component, running live.
With the skill: The agent searches the catalog first, installs the real component with one command, and you get the finished piece: shaders, motion and states included.
Tested in Claude Code and Codex
Every skill is tested in Claude Code and Codex in a fresh project, installed exactly the way you install it, with requests written the way people type them. A test passes when the agent loads the right skills on its own and the polish scanner finds nothing serious in what it built.
The motion recipes run in a real browser with normal and reduced motion, and the four DESIGN.md starter systems pass the color skill's contrast check in both themes and Google's DESIGN.md linter with no errors.
Are the Pro skills worth it?
Start free: the typography, layout and spacing and UX writing skills install with no account. Pro adds the rest of the pack, with every Pro component, block and template.
Free
$0
The typography, layout and spacing and UX writing skills, plus free components and primitives.
Pro Annual
$169a year
Every design skill, plus every premium component, block and template, and new releases while active.
Pro Lifetime
$199once
Everything in Pro, forever, including every skill and update that comes later.
Design skills questions, answered
What people ask before they add a skill: which agents it works in, what is free and what it does to an existing design.
A skill is a folder with a SKILL.md file that Claude Code, or any other AI coding agent, loads when a task needs it. Wensity's design skills teach the agent how to design interfaces: type, spacing, color, surfaces, motion, every state of a component, interface copy, landing pages and app screens. They follow the open Agent Skills format, so the same files work across agents.
Anthropic's frontend-design skill is one free skill that steers Claude toward a distinctive look. Wensity's pack splits the work into focused skills with exact values for type, spacing, color, surfaces, motion, states and copy, adds a design director that plans and reviews the page, and ships a UI scanner and a contrast checker.
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI and OpenCode, and any other tool that reads the Agent Skills format. Claude Code reads skills from .claude/skills, the others from .agents/skills.
The typography, layout and spacing and UX writing skills are free, with no account. The other 10, including the design director that ties the pack together, come with Wensity Pro, $169 a year or $199 once, together with every Pro component, block and template.
No. The skills work in any React, Next.js, Tailwind CSS or plain HTML and CSS project. Only the Wensity components skill is about the Wensity catalog, and it is there for when you want a ready-made section instead of a hand-built one.
Yes. The skills keep the components and tokens your project already has. The color skill maps its tokens onto the shadcn/ui variables, and the states and app UI skills cover Radix and Base UI primitives.
No. When your project has fonts, colors or components, the agent keeps them and improves how they are used. Rules in your own DESIGN.md beat the skills' defaults, and a choice you reject does not come back.
The MCP server lets your agent search and install Wensity components. Skills teach it how to design. They work together: the Wensity components skill uses the MCP server when it is connected.
No. A skill is plain text your agent reads. The two bundled scripts, the polish scanner and the contrast checker, run with Node on your machine, read your files and never change or send them.
Parth
Founder, Wensity
Still have a question?
Ask about the skills, setting them up in your agent, or Pro, and you will hear back from me directly.
Email hey@wensity.com