Back to Plugins

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. UI/UX specialist plugin that generates polished, creative code avoiding generic AI aesthetics. Supports React, Vue, Svelte, and vanilla HTML/CSS with modern design patterns.

frontenddesignuiuxreactofficial
By Claude Code Plugins
19k2.4kUpdated 3 days agoPython

Installation

/plugin install frontend-design@claude-plugins-official

Configuration

{
  "enabledPlugins": {
    "frontend-design@claude-plugins-official": true
  }
}

Commands

frontend-designLaunch guided frontend design workflow for components and pages
designQuick design mode for UI components
uiGenerate UI component with design system awareness
layoutCreate responsive layouts and page structures

How to install

  1. Open Claude Code in your terminal
  2. Run the installation command above
  3. The plugin will be enabled automatically
  4. Use the plugin's features in your Claude Code sessions

Claude Code Plugins Directory

A curated directory of high-quality plugins for Claude Code.

⚠️ Important: Make sure you trust a plugin before installing, updating, or using it. Anthropic does not control what MCP servers, files, or other software are included in plugins and cannot verify that they will work as intended or that they won't change. See each plugin's homepage for more information.

Structure

  • /plugins - Internal plugins developed and maintained by Anthropic
  • /external_plugins - Third-party plugins from partners and the community

Installation

Plugins can be installed directly from this marketplace via Claude Code's plugin system.

To install, run /plugin install {plugin-name}@claude-plugins-official

or browse for the plugin in /plugin > Discover

Contributing

Internal Plugins

Internal plugins are developed by Anthropic team members. See /plugins/example-plugin for a reference implementation.

External Plugins

Third-party partners can submit plugins for inclusion in the marketplace. External plugins must meet quality and security standards for approval. To submit a new plugin, use the plugin directory submission form.

Plugin Structure

Each plugin follows a standard structure:

plugin-name/
├── .claude-plugin/
│   └── plugin.json      # Plugin metadata (required)
├── .mcp.json            # MCP server configuration (optional)
├── commands/            # Slash commands (optional)
├── agents/              # Agent definitions (optional)
├── skills/              # Skill definitions (optional)
└── README.md            # Documentation

License

Please see each linked plugin for the relevant LICENSE file.

Documentation

For more information on developing Claude Code plugins, see the official documentation.

View source on GitHub