Living collection
Visual direction | 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
Visual direction
Visual direction
5 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 ↗