claude

frontend-design-pro

Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, browser-based inspiration analysis, color/typography selection, and WCAG accessibility

3,741 on GitHubby BuildWithClaude Communityv1.0.0MITupdated 2 days agodevelopment
/

Plugin frontend-design-pro from marketplace buildwithclaude in davepoon/buildwithclaude. Commands read from the repo's manifest — yesterday.

What it installs

Skills (6)

  • color-curator

    Browse and select color palettes from Coolors or curated fallbacks. Use to find the perfect color palette for a design project.

  • design-wizard

    Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.

  • inspiration-analyzer

    Analyze websites for design inspiration, extracting colors, typography, layouts, and patterns. Use when you have specific URLs to analyze for a design project.

  • moodboard-creator

    Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.

  • trend-researcher

    Research latest UI/UX trends from Dribbble and design communities. Use when starting a design project to understand current visual trends, color palettes, and layout patterns.

  • typography-selector

    Browse and select fonts from Google Fonts or curated pairings. Use to find the perfect typography for a design project.

Slash commands (3)

  • /frontend-design-pro:analyze-site

    Analyze a website for design inspiration (colors, fonts, patterns)

  • /frontend-design-pro:design

    Interactive design wizard with trend research, moodboard creation, color/font selection, and code generation

  • /frontend-design-pro:review

    Review generated design against anti-patterns, design principles, and accessibility guidelines

View source on GitHub buildwithclaude.com

More from davepoon/buildwithclaude

All 277 plugins →

all-skills

claude

Complete collection of ~110 Claude Code skills across document processing, development, automation, CRM, DevOps, and more

200 skills

3,741

all-commands

claude

Complete collection of 174 slash commands across 22 categories

177 commands

3,741

all-agents

claude

Complete collection of 117 specialized AI agents across 11 categories

117 agents

3,741

gsd

claude

Get Shit Done -- a structured workflow plugin for Claude Code that adds planning, execution, and verification commands with MCP-backed project state

83 skills · 33 agents · 1 MCP server

3,741

forge

claude

Full-lifecycle SDLC orchestrator: a 12-stage pipeline (SRS, architecture, spec, plan, build, eval, deploy, monitor, release) driven by specialized agents, persistent cross-session memory, auto-reflection, gate enforcement, and semantic skill mining that proposes new skills from recurring workflows.

45 skills · 27 agents · hooks

3,741

suede-skills

claudecodex

74 skills for Claude Code and Codex. A build DAG researches your repo, fans out disjoint lanes, and refutes its own review before anything lands. A blunt A-F ship grade blocks the bad merge instead of complimenting it. The same folder designs the page, writes the copy, and ships native iOS and Android builds.

70 skills · 1 MCP server

3,741

Similar plugins

mattpocock-skills

claude

Matt Pocock's agent skills for real engineering (grilling, spec/ticket flows, TDD, code review, domain modelling and more).

39 skills

mattpocock/skills 323,108

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

nextjs

claude

Official Next.js skills: adopt and optimize Cache Components, adopt Partial Prefetching, and verify runtime behavior against a running dev server.

6 skills

vercel/next.js 143,495

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

diagram-design

claudecodex

Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.

1 skill · 7 commands

cathrynlavery/diagram-design 66,757

context7

claudecodex

Up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your coding agent's context.

1 MCP server

upstash/context7 64,709

Maintain frontend-design-pro?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins277 plugins