Frontend Design Pro

Plugin Verified Active

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

6 Skills 0 MCPs

Purpose

To empower users with a structured and intelligent workflow for creating distinctive, high-quality frontend designs, from initial concept to production-ready code.

Features

Interactive design wizard
Trend research from design communities
Moodboard creation and refinement
Automated website analysis for inspiration
Color palette selection from Coolors
Font selection from Google Fonts
Production-ready HTML and Tailwind CSS generation
Anti-pattern detection and design principle checks
WCAG accessibility compliance integration
Fallback modes for browser-less operation

Use Cases

Creating a landing page for a new developer tool.
Analyzing competitor websites for design inspiration.
Generating a complete design system for a SaaS application.
Selecting appropriate fonts and color palettes for a brand refresh.

Non-Goals

Generating backend code or complex JavaScript functionality.
Performing SEO analysis or performance optimization beyond basic accessibility.
Replacing a full-fledged design IDE for intricate visual editing.

Documentation

info:Configuration & parameter referenceWhile many parameters and options are implicitly clear from the skill markdown and command descriptions, explicit documentation on configuration file precedence or default values for all settings is not readily available.

Installation

First, add the marketplace

/plugin marketplace add davepoon/buildwithclaude

/plugin install frontend-design-pro@buildwithclaude

Contains 6 extensions

Skill (6)

Color Curator Skill

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

Design Wizard Skill

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 Skill

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 Skill

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

Trend Researcher Skill

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 Skill

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

Quality Score

Verified

95 /100

Analyzed about 17 hours ago

Trust Signals

Last commit5 days ago

GitHub owner davepoon

Stars2.9k

LicenseMIT

Websitebuildwithclaude.com

Status

View Source

Similar Extensions

UI/UX Design Plugin

Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns

Plugin

wshobson

Agents Design Experience

Agents for UI/UX design, accessibility, and user experience optimization

Plugin

davepoon

Accessibility Compliance

WCAG accessibility auditing, compliance validation, UI testing for screen readers, keyboard navigation, and inclusive design

Plugin

wshobson

Brand Landingpage

Guides developers from brand discovery through iterative design to deployment-ready HTML via Stitch.

Plugin

wshobson

Shadcn

UI component and design system framework. Search registries, install components as source code, and audit your project.

Plugin

shadcn

Dotforge Stack React Vite Ts

React 18+ with Vite, TypeScript strict mode, Tailwind CSS, and Zustand rules for Claude Code.

Plugin

luiseiman