AI Web Design Workbench

A universal workbench for rapidly generating production-ready HTML using AI, Tailwind CSS, and semantic design patterns.

Try It Now (BYOK) View on GitHub Get Started

Three Ways to Work

Choose the workflow that fits your style

🎨 IDE Workflow

Work directly in your favorite IDE with AI coding assistants for maximum power and control.

Full AI assistance
Complex customizations
Iterative design

🌐 Browser Workbench

Split-screen code editor with live preview, accessible through your browser.

Visual feedback
Quick prototyping
No setup required

⌨️ CLI Commands

Generate HTML directly from your terminal for automation and scripting.

Batch generation
CI/CD integration
Scriptable

Features

Three Styling Levels

Choose between full, mid, or low styling density

Curated Tailwind Whitelist

Only production-ready, tested classes

AI-Powered Generation

Connect your Claude API for intelligent HTML generation

Template Fallback

Works perfectly without AI using built-in templates

CLI-First

Generate HTML directly from your terminal/IDE

Semantic & Accessible

Follows HTML best practices and accessibility guidelines

Quick Start

Get up and running in minutes

Install Laravel Herd (Recommended)

The fastest way to get started with PHP, Composer, and Node.js included.

Download Laravel Herd

Clone the Repository

git clone https://github.com/alexramsey92/ai-web-design-workbench.git

Install Dependencies

composer install && npm install && npm run build

Configure Environment

cp .env.example .env && php artisan key:generate

Launch Workbench

Navigate to:

http://ai-web-design-workbench.test/workbench

Add your Claude API key (optional)

Enable AI generation by adding your key to .env:

ANTHROPIC_API_KEY=your_key_here

Get your Claude API key

View Full Documentation