Frontend Design Skills for AI Coding Agents

Best for: Giving an AI coding agent a deliberate visual direction before implementation

Anthropic's frontend-design starts with an explicit design plan. It asks the agent to make deliberate choices about the subject, audience, palette, typography, wireframe, and one aesthetic risk grounded in the brief before writing interface code.

The workflow rejects generic template answers such as stock gradient heroes and unconsidered typography. It is useful for both new builds and reshaping an existing interface when the visual direction needs to become intentional rather than defaulting to the model's statistical center.

• Official Anthropic skill with a plan-before-code workflow
• Subject-grounded choices for palette, type, and wireframe
• Rejects generic template patterns instead of reproducing them
• Works for new interfaces and substantial reshaping

Best for: Reviewing generated UI before it ships

Vercel's web-design-guidelines is a review skill: ask the agent to inspect UI files against the Web Interface Guidelines and report actionable findings in a terse file-and-line format.

The source workflow covers interface details such as accessibility, UX patterns, forms, typography, and performance. It is a review pass after direction and implementation, not a replacement for choosing the visual language of a new page.

• Maintained by Vercel with a review-first workflow
• Reports findings in a practical file:line format
• Checks accessibility, UX, forms, typography, and performance
• Pairs with a direction skill without steering the initial design

Best for: Making agent-built UI accessible by default

Addy Osmani's accessibility skill gives an AI coding agent a WCAG 2.2 audit and remediation workflow. It organizes checks around the POUR principles and gives concrete conformance guidance for common interface patterns.

The primary-source guidance covers accessible names and alt text, contrast, keyboard navigation, focus management, and assistive technology support. Use it as the default accessibility pass for public-facing UI, regardless of the framework.

• Based on WCAG 2.2 and the POUR principles
• Written by Addy Osmani of the Chrome team
• Concrete checks for names, contrast, keyboard, and focus
• A framework-agnostic audit for public-facing UI

Best for: Starting a token set from a public site's visual language, not reproducing it pixel-perfectly

extract-design-system drives a browser against a public reference site and turns observed colors, fonts, spacing, radius, and shadow values into starter token files such as tokens.json and tokens.css.

This is a bootstrap tool, not a pixel-perfect copying workflow. A single public page is not proof of a whole product's design language, so use the extracted values as a starting point when a reference site is relevant to the task.

• Extracts colors, fonts, spacing, radius, and shadow values
• Produces starter tokens.json and tokens.css files
• Bounded to public-reference-site token bootstrapping
• Explicitly not a pixel-perfect reproduction tool

Best for: Querying a focused design-system recommendation before a new page or a targeted UX fix

ui-ux-pro-max is a searchable design-intelligence workflow rather than a framework preset. It starts by selecting the smallest useful query: a full design-system pass for a new page, a domain search for one UX concern, or a detected-stack query only when implementation guidance is actually needed.

Its source directs agents to verify the returned category and fit before applying a recommendation, retry once when a query misses, and avoid persisting an unverified design system. That makes it useful when a brief needs concrete typography, color, layout, or interaction decisions without inventing a new toolchain.

• Searches a local design, UX, typography, icon, and motion corpus
• Uses a design-system query for new pages and focused domains for fixes
• Requires fit checks and one narrower retry for weak search results
• Keeps stack guidance conditional instead of making it the workflow

Best for: Comparing genuinely different UI directions before committing one to production

prototype is a deliberate divergence workflow for one UI piece at a time. It creates several fully working directions behind an isolated visual picker, so a team can compare layout, density, personality, motion, or interaction models at full scale instead of debating minor color variations.

The skill keeps exploration out of production code, asks the user to choose a winner, then promotes only that winner and removes the prototype surface. It is for resolving a real design choice, not for snapshot testing or browser automation.

• Builds three to five defensibly different working variants
• Uses a full-size visual picker instead of misleading thumbnails
• Keeps prototype code isolated until a user selects a direction
• Cleans up the exploration surface after promotion

Best for: Landing pages, portfolios, and redesigns that need a specific visual direction instead of a template default

design-taste-frontend starts by reading the kind of page, audience, references, and visual constraints before it chooses a design direction. It turns that reading into explicit variance, motion, and density dials rather than allowing an agent to drift into a stock gradient-and-card layout.

The workflow is deliberately scoped to landing pages, portfolios, and redesigns—not dashboards or multistep product UI. Use it when a customer-facing page needs an opinionated but brief-grounded visual language.

• Requires a brief-grounded design read before implementation
• Uses explicit visual-variance, motion, and density dials
• Guards against default AI layout, type, and color patterns
• Scoped to marketing surfaces and redesigns, not product dashboards

Best for: A bounded, high-craft visual refinement pass after a design direction is already settled

impeccable is a complete visual craft workflow that begins with the product and the existing design truth before an agent touches code. It distinguishes refinement, which preserves an established identity, from redesign, which replaces it deliberately instead of leaving a confused halfway state.

Its verification loop is intentionally bounded: inspect representative desktop and mobile states together, fix the findings in one batch, then confirm once. Use it for a finishing pass when a general UI review is not enough and the visual direction is already known.

• Starts from product context and incumbent visual evidence
• Separates identity-preserving refinement from full redesign
• Uses a bounded desktop-and-mobile verification loop
• Sets an explicit craft floor before UI edits begin