Ui Design

svengraziani/ui-design·1 plugin

Load UI design skills into Claude Code for palettes, typography, components, design principles, and WCAG 2.2 accessibility while building interfaces.

Overview

ui-design is a plugin marketplace for the Build phase that provides Claude Code UI skills covering color, typography, components, design principles, and WCAG 2.2.

What is this marketplace?

Color palette guidance for consistent product visuals
Typography rules and pairing patterns for web and app UI
Component pattern library conventions for implementation-ready design
Core design principles for layout, hierarchy, and interaction
WCAG 2.2 accessibility guidelines embedded in the skill set (marketplace v1.0.0)
1 plugin in the marketplace
Marketplace metadata version 1.0.0
WCAG 2.2 accessibility guidelines included in scope

Compatible agents: Claude Code, Cursor, Windsurf, any compatible agent

Community signal: 2 GitHub stars.

What problem does it solve?

Agent-generated interfaces often look inconsistent and fail accessibility basics because coding skills lack structured UI and WCAG guidance.

Who is it for?

Solo builders implementing their own UI in Claude Code who need accessible, coherent design constraints without a dedicated designer.

Skip if: Teams needing brand systems, illustration, or motion design marketplaces without hands-on frontend implementation.

What do I get? / Deliverables

After adding the marketplace, Claude can apply palette, type, component, and WCAG 2.2 patterns while you build frontend screens.

1 ui-design plugin (marketplace metadata version 1.0.0)
In-agent guidance for palettes, typography, components, and WCAG 2.2
Repeatable design principle framing for new pages and components

Plugins in this marketplace

1 plugin — install individually after you add the marketplace.

PluginVersion

Ui DesignUI design skills: color palettes, typography, component patterns, design principles, and WCAG 2.2 accessibility guidelines—

Recommended Marketplaces

AccesslintAccessLint/skills

accesslint is an AccessLint plugin marketplace that ships one plugin pairing WCAG 2.2 discovery with agent-driven remedi…54 stars

Agentic Pluginsjustjoheinz/agentic-plugins

agentic-plugins is a small Claude Code marketplace by justjoheinz with two complementary build-time plugins. ramsify gui…

Ai Design Componentsancoleman/ai-design-components

ai-design-components is a large Claude marketplace curated by Anton Coleman (Palo Alto Networks affiliation in metadata)…372 stars

Balkan Family Tree MarketplaceViaScopi/balkan-family-tree-plugin

The ViaScopi balkan-family-tree marketplace delivers one development plugin that teaches Claude Code how to work with Ba…

Bmad Dux Visual ArchitectYash-1511/bmad-dux-visual-architect

bmad-dux-visual-architect is a MIT-licensed Claude Code marketplace built around the dux plugin, a visual architecture s…1 stars

Cc Frontend Skillsoikon48/cc-frontend-skills

cc-frontend-skills is a one-plugin Claude marketplace curated by oikon48 for solo builders who want their agent to stop …68 stars

Journey fit

Primary fit

BuildUI/UX & frontend

Visual and accessible UI work happens primarily while you are building the product surface, so Build is the canonical shelf. The marketplace description centers frontend UI patterns and WCAG, which maps directly to the frontend subphase.

How it compares

Frontend UI and accessibility skill marketplace, not a component npm package or MCP database integration.

Common Questions / FAQ

Who is Ui Design for?

Indie builders and developers using Claude Code to design and code interfaces who want WCAG 2.2 and component patterns in-context.

When should I use Ui Design?

Use it while building or refining screens, design systems, or landing pages when typography, color, components, or accessibility must be explicit.

How do I add Ui Design to my agent?

Register the Ui Design marketplace in Claude Code and enable the Ui Design plugin so the bundled skills load for frontend tasks.