Living collection
Design skills for Claude Code and Codex
Design skills for AI agents help shape how an interface looks and works. This collection compares resources for Claude Code, Codex and other agents by task: directing a website's design, building a visual hierarchy or reviewing an interface before publication. Each profile states its documented compatibility; the resources do not all work in the same environments.
UI UX Pro Max provides resources for shaping a visual system; Impeccable focuses on design criteria and polish; and Claude Code /design belongs to the Claude design workflow. The profiles explain what each option contributes and link to reviews covering requirements, examples and limitations.
Choose according to your project's needs: typography, colour, composition, frontend implementation or review. For ready-made website building blocks, also explore the UI component libraries collection. Instructions that guide an agent and libraries that supply components perform different jobs.
9 resourcesOrganized by use
Why I make these lists
I enjoy finding resources that help websites escape the same familiar mould. In an interface created with coding agents, I care about the judgement behind the result: what should stand out, how the page reads and what its visitor needs to do.
I organise design skills and frontend resources by the problem they help solve. Some guide visual direction; others help review typography, spacing or consistency. I want you to compare those roles, check compatibility with your agent and understand which decisions still depend on you.
The profiles help you choose, while individual reviews examine each project in more detail. Documented information and my own experience, when provided, are kept distinct. If you know a resource that adds useful design judgement, tell me.
Signed: Dani
Explore by category
Visual direction
5 resourcesReview and polish
4 resourcesFull profiles and sources
Claude Code /design
Claude Code design workflow
Connect a local component library to Claude's design workflow
A Claude Code design workflow that syncs local HTML components and previews with a design-system project in claude.ai.
Best for: Keeping generated interfaces aligned with a local component library.
Why it belongs here. Connects existing visual components to an agent's interface generation work.
Its limit. The Claude-specific workflow does not establish an equivalent feature in Codex or another agent.
It gives Claude examples from your own components so a generated screen can follow your visual system more closely.
Compatibility and setupRequirements and agent differences
Setup. The documented workflow is for Claude's tools. Do not label it Codex-compatible without separate evidence.
Real cost and licenseResource, agent and extra costs
Practical cost. Account, product and setup requirements can change; check the current official documentation before planning a production workflow.
Example and alternativeWhen it helps and what else to use
Useful route. Use it after you have real components and previews worth reusing, then inspect the generated interface against the source design.
Sources and reviewWhat is documented and what was tested
Evidence. This entry uses the existing Marketing Ultra review and the project's official source. Author documentation is not described as a hands-on test by Dani.
Resource detailsEditorial profile and links
UI UX Pro Max Skill
Resource
Turns any coding agent into a design-aware assistant: 192 industry-specific rules, 79 searchable styles, 74 typographic pairings, and automatic generation of complete design systems before any code is written.
Why it belongs here. Turns any coding agent into a design-aware assistant: 192 industry-specific rules, 79 searchable styles, 74 typographic pairings, and automatic generation of complete design systems before any code is written.
Its limit. No MCP integration: works as a skill installed in the assistant's directory, not as a server external tools can connect to. The free version generates no real visual assets and the premium tier has no published price.
Lets your AI agent (Claude Code, Cursor, Windsurf, and others) choose colors, typefaces, landing page patterns, and antipatterns before generating interface code. Instead of asking for "make me a landing page" and crossing your fingers, you give it design judgment tailored to your industry.
Compatibility and setupRequirements and agent differences
Compatibility. Works with more than 20 assistants: Claude Code, Cursor, Windsurf, Kiro, GitHub Copilot, Codex CLI, Gemini CLI, Warp, Augment, and others. Supports 22 tech stacks (React, Next.js, Vue, Svelte, Flutter, SwiftUI, Tailwind, etc.). Requires Python 3.x and Node.js/npm to install the CLI.
Real cost and licenseResource, agent and extra costs
Cost. Basic version free under MIT license. Premium version with brand identity, AI-powered visual asset generation, and dedicated support; price not published on the official website as of the review date (September 2026).
Example and alternativeWhen it helps and what else to use
Example. Install the CLI with npm install -g ui-ux-pro-max-cli, run uipro init --ai claude in your project, and ask "Build a landing page for my SaaS product". The skill generates a complete design system (palette, typography, pattern, antipatterns) before the agent writes any code.
Alternative. For injecting real visual references instead of abstract rules, Refero uses web screenshots via MCP. For ready-made components, conventional UI kits (shadcn/ui, Tailwind UI) solve the problem without an intermediate skill.
Sources and reviewWhat is documented and what was tested
Review. Reviewed from the repository README and the official website (uupm.cc) in September 2026. No hands-on test run; conclusions based on public documentation.
Resource detailsEditorial profile and links
Frontend Design de Anthropic
Resource
Official Anthropic skill for giving coding agents art direction. Free, compatible with Claude Code, Claude.ai, and the Claude API (and with Codex and Cursor per the Agent Skills standard). Forces the agent to plan palette, typography, and composition before writing code.
Why it belongs here. Official Anthropic skill for giving coding agents art direction. Free, compatible with Claude Code, Claude.ai, and the Claude API (and with Codex and Cursor per the Agent Skills standard). Forces the agent to plan palette, typography, and composition before writing code.
Its limit. Does not generate original design or replace a proper design system. Results depend on the brief, references, and the model. The license is proprietary (Anthropic Commercial Terms), not open source.
An instruction file that teaches your coding agent to think about visual design before writing CSS. Plans colors, typography, and composition so the result does not look like a generic template.
Compatibility and setupRequirements and agent differences
Compatibility. Claude Code, Claude.ai, Claude API and, per the Agent Skills standard, also Codex and Cursor. Requires an agent compatible with SKILL.md.
Real cost and licenseResource, agent and extra costs
Cost. Free. The skill has no cost, but the agent usage (Claude Code, API) has its own pricing depending on your plan.
Example and alternativeWhen it helps and what else to use
Example. In Claude Code, register the repository with /plugin marketplace add anthropics/skills and install with /plugin install example-skills@anthropic-agent-skills. Also available on Claude.ai (paid plans) and via the API. Ask the agent to create a landing page and the skill activates visual planning.
Alternative. Manual style prompts, UI UX Pro Max Skill (third-party), or the native Claude Code /design functionality (proprietary, a different product).
Sources and reviewWhat is documented and what was tested
Review. Review published on Marketing Ultra (September 2026), based on official documentation and the repository README. Does not include a locally executed test.
Resource detailsEditorial profile and links
Taste Skill
Resource
It turns three common design decisions—variety, motion and density—into explicit controls a SKILL.md-compatible agent can follow.
Why it belongs here. It turns three common design decisions—variety, motion and density—into explicit controls a SKILL.md-compatible agent can follow.
Its limit. The default version 2 is still labelled experimental, and there is no independent evidence showing better results or real adoption.
In plain English: it tells a coding agent how much to risk with composition, how much it can animate, and how much information to fit on each screen.
Compatibility and setupRequirements and agent differences
Compatibility. The documentation states support for tools that accept SKILL.md files and names Codex, Claude Code, Cursor, Gemini CLI, v0, Lovable and OpenCode.
Real cost and licenseResource, agent and extra costs
Cost. Taste Skill is open source under the MIT licence. Any costs for the agent, subscription or API used sit outside the tool itself.
Example and alternativeWhen it helps and what else to use
Example. It can guide a B2B landing page with moderate variety, restrained motion and enough density to explain the offer without turning it into a dashboard.
Alternative. The verified alternative is manually reviewing every generated interface and requesting hierarchy, spacing and animation corrections one by one.
Sources and reviewWhat is documented and what was tested
Review. Official sources reviewed on 23 September 2026. Compatibility is stated by the project and does not amount to local testing.
Resource detailsEditorial profile and links
Stitch Design Skills
Resource
It turns the visual rules of an existing front end into a reusable DESIGN.md and connects that document to other design and build workflows in the Stitch ecosystem.
Why it belongs here. It turns the visual rules of an existing front end into a reusable DESIGN.md and connects that document to other design and build workflows in the Stitch ecosystem.
Its limit. The README requires Stitch MCP to be configured and running for the package. The repository licence does not remove access requirements or guarantee official support.
In plain English: it reads how your website is designed and prepares a cheat sheet of its colours, type and components, so the agent does not improvise every screen's appearance.
Compatibility and setupRequirements and agent differences
Compatibility. The README lists Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode. OpenCode needs manual installation and adaptation of some names.
Real cost and licenseResource, agent and extra costs
Cost. The repository code uses an Apache-2.0 licence. No single euro price has been verified for Stitch, the agents or the required external services.
Example and alternativeWhen it helps and what else to use
Example. Analyse the /src folder and generate .stitch/DESIGN.md with detected colours, typography and components.
Alternative. The listing does not establish a direct substitute. Taste Skill and Anthropic's Frontend Design are related resources for managing visual judgement, not verified equivalents.
Sources and reviewWhat is documented and what was tested
Review. Documentation and repository structure checked on 27 September 2026; no personal testing or production results are claimed.
Official repository ↗Official Stitch MCP documentation ↗Stitch MCP setup ↗
Resource detailsEditorial profile and links
Impeccable
Skill
Design rules and review prompts for agent-built interfaces
Turns frontend design into decisions about hierarchy, color, typography, interaction and finish.
Best for: Reviewing and refining interfaces made with coding agents.
Why it belongs here. Gives an agent concrete design criteria for evaluating an interface instead of asking for vague visual polish.
Its limit. Rules and prompts do not establish that a screen serves its users; review the result in the actual browser and task context.
It gives the agent a sharper checklist for design decisions. The final screen still needs a human look and a real use case.
Compatibility and setupRequirements and agent differences
Setup. The project documents support for several coding agents; verify the current installation route for your agent and version.
Real cost and licenseResource, agent and extra costs
Practical cost. The repository publishes reusable design guidance. Budget time to review changes and check any additional tool or model requirements in the chosen workflow.
Example and alternativeWhen it helps and what else to use
Useful route. Use it to critique hierarchy, consistency and interface details after you have a working screen to inspect.
Sources and reviewWhat is documented and what was tested
Evidence. This entry uses the existing Marketing Ultra review and the project's official source. Author documentation is not described as a hands-on test by Dani.
Resource detailsEditorial profile and links
Emil Design Engineering (Emil Kowalski Skills)
Resource
It provides concrete criteria for agents to decide when to animate, for how long and how to handle microinteractions without adding motion for its own sake.
Why it belongs here. It provides concrete criteria for agents to decide when to animate, for how long and how to handle microinteractions without adding motion for its own sake.
Its limit. It codifies Emil Kowalski’s prescriptive vision, but does not replace an accessibility audit, testing on real devices or the judgment of a senior designer.
Put plainly: it gives your coding assistant a demanding cheat sheet so buttons, menus and transitions respond with more purpose and fewer fireworks.
Compatibility and setupRequirements and agent differences
Compatibility. The README documents installation through npx skills@latest add emilkowalski/skills. The attached evidence does not confirm specific CLI destinations or a local installation for this review.
Real cost and licenseResource, agent and extra costs
Cost. The repository is published as open source under the MIT license and does not document a purchase price. Costs for the coding assistant or infrastructure used fall outside the available evidence.
Example and alternativeWhen it helps and what else to use
Example. Install the package and request a review of a dropdown with an ease-in curve, 400 ms duration and a centered origin, asking for a Before/After table.
Alternative. Ask a senior designer to manually review animations and interaction details in their real-world context.
Sources and reviewWhat is documented and what was tested
Review. Profile reviewed on September 25, 2026 using the repository, official page, README, the SKILL.md pinned to a commit and license information. No local test was run.
Resource detailsEditorial profile and links
Web Design Guidelines de Vercel
Resource
Provides a systematic review of interface code against more than 100 accessibility, performance and UX rules.
Why it belongs here. Provides a systematic review of interface code against more than 100 accessibility, performance and UX rules.
Its limit. It does not create a visual identity or certify legal or WCAG compliance on its own.
Put plainly: it reviews a website’s code and flags details that can make it difficult to use even when it looks finished.
Compatibility and setupRequirements and agent differences
Compatibility. It is distributed through the Skills CLI. The public package page lists agents including Claude Code, Codex and Cursor.
Real cost and licenseResource, agent and extra costs
Cost. It is an open-source resource with an MIT licence declared in the README. The cost of the agent or its subscription is not part of the skill.
Example and alternativeWhen it helps and what else to use
Example. Audit a landing page before launching campaigns and review it against rules involving forms, focus, images, navigation and interaction.
Alternative. Carry out a manual UI review with an accessibility and UX checklist, especially when testing with assistive technology or human interpretation is needed.
Sources and reviewWhat is documented and what was tested
Review. Profile checked on 25 September 2026 against the official README and public package page.
Resource detailsEditorial profile and links
UI Skills de ibelick
Resource
It lets you browse and download design engineering skills through a website, a CLI and an MCP connection.
Why it belongs here. It lets you browse and download design engineering skills through a website, a CLI and an MCP connection.
Its limit. The catalogue brings together resources from different authors, and verified sources do not demonstrate that every skill runs fully in every agent or certify WCAG compliance.
In plain English: it helps find design instructions for agents, but you still need to review the attribution, scope and result of every resource.
Compatibility and setupRequirements and agent differences
Compatibility. The website organises the catalogue by agents, including Claude Code, Cursor, Codex and GitHub Copilot. This does not prove that every skill has been tested end to end in all of them.
Real cost and licenseResource, agent and extra costs
Cost. The repository releases its code under the MIT licence. The assistant, APIs and other external services retain their own terms, and no single price has been verified.
Example and alternativeWhen it helps and what else to use
Example. Browse the catalogue, choose a skill suited to the problem, and check its attribution and scope before applying changes.
Alternative. The verified listing does not identify a direct substitute; the catalogue itself brings together resources from different authors and approaches.
Sources and reviewWhat is documented and what was tested
Review. Reviewed on 27 September 2026 using the repository, its README, the licence and the official website.