premium-website-builder

Build premium, high-end websites using a proven 4-step framework: Inspiration, Build, Refine, Deploy. Includes 5 skills, 6 commands, 5 agents (design critic, accessibility auditor, performance auditor, SEO analyzer, content writer), and workflow automation hooks. Integrates with 21st.dev, Aceternity UI, Magic UI, and CodePen component libraries.

Installation guide →

5 skillsMIT GitHub

Keywords

websitelanding-pageweb-designreactvitenextjstailwindvercelpremiumcomponents21st-devaceternityaccessibilityseoperformanceframer-motionglassmorphism

Commands

add-component

Browse and add a premium component from 21st.dev, Aceternity UI, Magic UI, or CodePen into the current project

add-section

Add a new section to the website (testimonials, FAQ, pricing, CTA, etc.)

audit

Run an accessibility, performance, or SEO audit on the current project

build-site

Start the full premium website building workflow from scratch

refine-section

Polish a specific section of the website with targeted visual improvements

setup-analytics

Add analytics, monitoring, and tracking to the website project

Documentation

# Premium Website Builder — Claude Code Plugin

Build premium, high-end websites that actually look professionally designed — not AI-generated slop.

## The Problem

AI coding tools produce templated, generic websites no matter how clever your prompt is. The secret isn't a better prompt — it's providing context in the right way.

## The Solution

A proven 4-step framework that combines multi-modal context (screenshots + HTML/CSS + URL), component library integration, and iterative visual polish to produce websites that look like they were built by a professional design agency.

## The 4-Step Workflow

```
┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│ 1. INSPIRE  │───▶│  2. BUILD   │───▶│  3. REFINE  │───▶│  4. DEPLOY  │
│             │    │             │    │             │    │             │
│ Find a site │    │ Clone it at │    │ Add your    │    │ GitHub +    │
│ you love    │    │ 80% fidelity│    │ brand &     │    │ Vercel      │
│             │    │             │    │ premium UX  │    │             │
└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
```

## Installation

```bash
claude plugin install Stevesanchl/premium-website-builder
```

## What's Included

### Skills (5)
| Skill | Description |
|-------|-------------|
| `website-builder` | Main orchestrator — coordinates all 4 steps |
| `inspiration` | Find premium sites, extract screenshots + HTML/CSS + URL |
| `build` | Scaffold React/Vite/Tailwind clone at ~80% fidelity |
| `refine` | Messaging, component libraries, iterative visual polish |
| `deploy` | GitHub + Vercel deployment with CI/CD |

### Commands (6)
| Command | Description |
|---------|-------------|
| `/build-site [description]` | Start the full 4-step workflow |
| `/add-component [type]` | Browse and add premium components from 21st.dev etc. |
| `/add-section [type]` | Add a new section (testimonials, FAQ, pricing, etc.) |
| `/refine-section [name]` | Polish a specific section with targeted improvements |
| `/audit [type]` | Run accessibility, performance, or SEO audit |
| `/setup-analytics` | Add analytics and monitoring to the project |

### Agents (5)
| Agent | Description |
|-------|-------------|
| `design-critic` | Section-by-section design review with component library recommendations |
| `accessibility-auditor` | WCAG AA/AAA compliance, contrast, keyboard nav, ARIA |
| `performance-auditor` | Lighthouse metrics, bundle size, image optimization |
| `seo-analyzer` | Meta tags, Open Graph, heading hierarchy, structured data |
| `content-writer` | Copywriting improvements, CTA optimization, brand voice |

### Hooks
- **SessionStart** — Detects existing projects and resumes workflow
- **PreToolUse** — Validates build commands and catches common errors
- **Stop** — Reminds you of current step and next actions before ending

## Quick Start

### Option 1: Full workflow
```
/premium-website-builder:build-site SaaS landing page for an AI writing tool
```

### Option 2: Already have a project
```
/premium-website-builder:add-component animated background
```

### Option 3: Audit an existing site
```
/premium-website-builder:audit accessibility
```

## Component Libraries Used

| Library | URL | Best For |
|---------|-----|----------|
| **21st.dev** | 21st.dev | Backgrounds, buttons, cards, text animations. Use "Copy Prompt". |
| **Aceternity UI** | ui.aceternity.com | 3D cards, spotlight effects, parallax, floating nav |
| **Magic UI** | magicui.design | Shimmer borders, marquee, orbiting circles, beam effects |
| **CodePen** | codepen.io | One-off glassmorphism, particle effects, custom animations |

## Default Tech Stack

- **Framework**: React + Vite (Next.js supported)
- **Styling**: Tailwind CSS
- **Animations**: Framer Motion
- **Deployment**: Vercel via GitHub
- **Package Manager**: npm (yarn/pnpm supported)

## Example Use Cases

- SaaS product landing pages
- Portfolio and personal brand sites
- Agency and startup homepages
- Product launch pages
- Developer tool documentation sites

## Requirements

- Claude Code installed
- Node.js 18+
- GitHub account (for deployment)
- Vercel account (free tier works)

## License

MIT