asets-gobizit/make-website-design

make-website-design

Design-first website builder: Claude Design export + business inputs -> one Claude API call -> design-matched website -> GitHub Pages deployment.

FUNCTIONAL CODE

• make_website_design.py -- Interactive CLI that accepts an optional design file, collects business inputs, calls Claude API, writes index.html, and publishes to GitHub Pages

  python "C:\Users\dansk\.claude\skills\make-website-design\make_website_design.py"
  

---

When to Use

• User has a Claude Design export (HTML or screenshot) they want turned into a live website
• User says "make-website-design", "design website", "build from design", "match this design"
• User provides an HTML file or screenshot and wants a website built from it
• Also works WITHOUT a design file (falls back to vibe-based generation, same as make-website v1.3)

---

HOW TO INVOKE

python "C:\Users\dansk\.claude\skills\make-website-design\make_website_design.py"

The script walks through all inputs interactively. No arguments needed.

---

Design Input Formats

| Format | Extension | How it works | |--------|-----------|-------------| | HTML export | .html | Claude Design "Export as HTML" -- full HTML read and included as design reference in prompt | | Screenshot | .png, .jpg, .webp | Screenshot of design -- sent as vision input, Claude matches the visual | | No design | (skip) | Falls back to vibe-based generation (identical to make-website v1.3) |

---

Input Fields

With design (5 inputs):

| Step | Field | Type | |------|-------|------| | 0 | Design file | File path (HTML or image) | | 2 | Business name | Free text | | 3 | Industry | Enum (choose 1) | | 4 | Description | Free text | | 5 | Audience | Multi-select | | 6 | CTA | Enum (choose 1) |

Steps 1 (vibe) and 7 (reference sites) are skipped because the design file IS the visual spec.

Without design (7 inputs -- same as make-website v1.3):

All original fields: vibe, business name, industry, description, audience, CTA, reference sites.

---

Workflow

Phase 0   Collect design reference (HTML/image/skip)
Phase A   Collect business inputs (5 with design, 7 without)
Phase B   Build design-matched or vibe-based prompt
Phase C   ONE Claude API call (claude-sonnet-4-6, max_tokens=20000)
          - HTML design: text-only message with design HTML embedded
          - Image design: multimodal message (base64 image + text)
          - No design: text-only (same as original)
Phase D   Strip fences, validate HTML, write index.html + robots.txt + sitemap.xml
Phase D2  Download Unsplash images -> images/ folder, rewrite HTML to local paths
Phase E   git init -b main, commit, gh repo create, enable Pages
Phase F   Optional custom domain (CNAME or A records)
Phase G   Print live URL + mode used

---

Output

C:\Users\dansk\Claude\Websites\{business_name}\
  index.html    -- design-matched (CSS embedded in <style> tags)
  robots.txt    -- auto-generated, points to sitemap
  sitemap.xml   -- auto-generated with correct domain + build date
  images/       -- downloaded stock photos (self-hosted)
  CNAME         -- only if custom domain entered

---

Relationship to make-website

• make-website (v1.3) -- original vibe-based skill, unchanged
• make-website-design (v1.0) -- this skill, adds design-input capability
• Both produce identical output structure and deploy the same way
• This skill is a superset: without a design file it behaves identically to the original

---

Dependencies

pip install anthropic

Also requires: gh CLI, git

Set before running:

$env:ANTHROPIC_API_KEY = "sk-ant-..."

Or use the .env file in this skill folder.

---

Verification Checklist

• [ ] No-design mode: behaves identically to make-website v1.3
• [ ] HTML design mode: output matches the provided design's layout/colors/typography
• [ ] Image design mode: output attempts to match the screenshot visual
• [ ] GitHub Pages deployment works
• [ ] robots.txt + sitemap.xml generated correctly
• [ ] Images downloaded locally to images/ folder