Website Creation (1 Skill)

Part 1: What You're Getting

This skill turns Claude Code into a web designer. You describe what you want - or give it a screenshot to recreate - and it builds a complete, responsive website as a single HTML file.

No API keys. No dependencies. No design experience needed.

Create Websites

Two modes:

Original Design Mode - You describe what you want and it builds from scratch. It doesn't just throw together a generic template. It picks a bold aesthetic direction (brutally minimal, luxury, editorial, maximalist, retro-futuristic, organic, playful, or brutalist), selects typography that fits, builds a color system, and adds purposeful animations. The output is a single HTML file with Tailwind CSS that you can open in any browser.

Pixel-Perfect Recreation Mode - You give it a screenshot of a website you like, and it recreates it within 2-3px accuracy. It analyzes the layout, colors, typography, spacing, and effects, then builds an exact match. It even takes its own screenshots to compare against your reference and iterates until it's precise.

What you get:

  • A single index.html file with everything inline (Tailwind CSS, fonts, icons, animations)
  • Mobile-first responsive design (375px, 768px, 1024px, 1440px breakpoints)
  • Real typography from Google Fonts (not system defaults)
  • Lucide or Heroicons for icons
  • Placeholder images from placehold.co (swap with your real images later)
  • No server needed - just open the HTML file in your browser

You need: Nothing. No API keys, no accounts, no paid services. Everything uses free public CDNs.

Optional: If you want to use the pixel-perfect recreation mode, install Puppeteer for screenshot comparison:

npm install -g puppeteer

8 aesthetic directions built in:

  • Brutally Minimal - stripped to essentials, stark contrast, dramatic whitespace
  • Luxury/Refined - serif type, muted tones, subtle animations, editorial spacing
  • Editorial/Magazine - grid layouts, mixed type sizes, print-inspired
  • Maximalist/Bold - oversized type, vivid colors, layered elements
  • Retro-Futuristic - monospace fonts, neon accents, tech-noir aesthetic
  • Organic/Warm - natural textures, rounded shapes, earth tones
  • Playful/Toy-like - bouncy animations, bright colors, friendly rounded elements
  • Brutalist/Raw - system fonts, harsh borders, anti-design on purpose

Anti-patterns it avoids (things that make websites look generic):

  • Blue/purple gradient hero with centered text
  • Three identical feature cards in a row
  • Generic stock photo descriptions
  • Overly rounded + pastel with no contrast
  • Lorem ipsum
  • Cookie-cutter layouts
  • Purposeless animations

Part 2: Copy-Paste This Into Claude Code

Copy everything below and paste it into Claude Code. It will install the skill and confirm it's ready.

I want you to install the Website Creation skill. Here's what to do:

Step 1 - Install the skill:

Run these commands:

git clone https://github.com/bohdan-aif/cc-websites.git /tmp/cc-websites

cd /tmp/cc-websites && ./install.sh --all

Step 2 - Check optional dependency:

Check if Puppeteer is installed globally (npm list -g puppeteer). If not, let me know it's optional - only needed for pixel-perfect recreation mode where it takes screenshots to compare against a reference image. Ask if I want to install it.

Step 3 - Verify installation:

Confirm the skill is installed at ~/.claude/skills/create-websites/ and the SKILL.md file is there.

Step 4 - Quick demo:

To show me it works, build a simple one-page landing page for a fictional AI startup called "NeuralFlow" - make it look premium and distinctive, not generic. Save it as /tmp/neuralflow-demo.html and open it in my browser.

After the demo, tell me the skill is ready and remind me of the two modes:

  1. Original design: just describe what I want
  2. Pixel-perfect recreation: give it a screenshot to match
← Previous
Next →