Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By davepoon
Run interactive frontend design wizards to research UI/UX trends from Dribbble and Coolors, analyze websites for inspiration via browser screenshots and extractions, curate Tailwind-compatible color palettes and typography pairings, create visual moodboards, review HTML for design principles and accessibility issues, and generate production-ready UI code.
npx claudepluginhub davepoon/buildwithclaude --plugin frontend-design-proAnalyze a website for design inspiration (colors, fonts, patterns)
Interactive design wizard with trend research, moodboard creation, color/font selection, and code generation
Review generated design against anti-patterns, design principles, and accessibility guidelines
Browse and select color palettes from Coolors or curated fallbacks. Use to find the perfect color palette for a design project.
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.
Analyze websites for design inspiration, extracting colors, typography, layouts, and patterns. Use when you have specific URLs to analyze for a design project.
Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.
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.
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Agents for UI/UX design, accessibility, and user experience optimization
Shared Claude Code plugin for frontend teams, including frontend skills, subagents, hooks, and MCP integration for Figma/Sketch/MasterGo/Pixso/墨刀/摹客. All reports auto-saved as Markdown files.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Frontend platform discipline: CSS, Tailwind CSS v4, accessibility, and browser-specific practices
Frontend component development with accessibility and responsive design
建立獨特的生產級前端介面,具備高設計品質。產生富有創意、精緻的程式碼,避免通用的 AI 美學
Complete collection of 30 Claude Code skills for document processing, development, business productivity, and creative tasks
General debugging and utility commands
Agents for business analysis, financial modeling, and KPI tracking
Complete collection of 174 slash commands across 22 categories
Commands for optimizing build, bundle size, and performance
A plugin marketplace and discovery platform for Claude Code. Browse curated plugins, discover community contributions, and extend your Claude Code workflows.
# Add the Build with Claude marketplace
/plugin marketplace add davepoon/buildwithclaude
# Browse available plugins
/plugin search @buildwithclaude
# Install plugins
/plugin install <plugin-name>@buildwithclaude
Curated collections maintained in this repository:
| Type | Count | Description |
|---|---|---|
| Agents | 117 | Specialized AI experts (Python, Go, DevOps, Security, etc.) |
| Commands | 175 | Slash commands for automation (/commit, /docs, /tdd) |
| Hooks | 28 | Event-driven automation (notifications, git, formatting) |
| Skills | 26 | Reusable capabilities from plugins |
| Plugins | 50 | Bundled plugin packages by category |
The platform indexes plugins from the broader Claude Code ecosystem:
Browse, search, and explore everything at buildwithclaude.com





# Add marketplace
/plugin marketplace add davepoon/buildwithclaude
# Install specific plugins
/plugin install agents-python-expert@buildwithclaude
/plugin install commands-version-control-git@buildwithclaude
/plugin install hooks-notifications@buildwithclaude
# Or install everything
/plugin install all-agents@buildwithclaude
/plugin install all-commands@buildwithclaude
/plugin install all-hooks@buildwithclaude
# Clone repository
git clone https://github.com/davepoon/buildwithclaude.git
cd buildwithclaude
# Install agents
find plugins/agents-*/agents -name "*.md" -exec cp {} ~/.claude/agents/ \;
# Install commands
find plugins/commands-*/commands -name "*.md" -exec cp {} ~/.claude/commands/ \;
# Restart Claude Code



Agents are automatically invoked based on context, or explicitly called:
"Use the python-pro to optimize this function"
"@agent-security-auditor review this authentication code"
"Have the devops-troubleshooter help debug this deployment"
Commands use the / prefix: