Design Website
Goal
Generate a polished, single-page HTML website mockup for a prospect's business. The website matches the buildinamsterdam.com aesthetic: bold typography, off-white backgrounds, editorial grid layouts, terracotta accents. Used to pitch web design services.
Inputs
- Google Sheet URL with prospect data
- Row number (1-indexed, excluding header) to select which prospect
- Optional: worksheet name (defaults to first sheet)
Expected Sheet Columns
The script maps these columns (case-insensitive, flexible matching):
| Column |
Maps To |
| company_name / company |
Business name (hero, nav, footer) |
| description / about |
About section + hero subtitle |
| keywords / services |
Services grid (comma-separated) |
| phone / phone_number |
Contact section |
| email / contact_email |
Contact section |
| address / full_address |
Contact section |
| city, state, country |
Location info |
| industry / category |
Unsplash image search queries |
| first_name, last_name |
Owner attribution |
| title / role |
Owner role |
Scripts
scripts/read_prospect.py — Read a single prospect row from Google Sheets → JSONscripts/generate_website.py — Generate HTML website from prospect JSON
Process
Step 1: Read prospect data
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # optional
Outputs JSON to stdout.
Step 2: Generate website
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
Or with a JSON file:
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
Step 3: Preview
Open the generated file in browser:
open .tmp/website_*.html
Outputs
.tmp/website_{company_slug}.html — Self-contained HTML file, viewable in any browser- All CSS is inline, images are external URLs (Unsplash)
Environment
UNSPLASH_ACCESS_KEY in .env — Required for stock photos. Get free key at https://unsplash.com/developers- If no key is set, falls back to curated placeholder images from picsum.photos
- Google OAuth credentials (token.json / credentials.json) for Sheets access
Design System
- Font: Inter (Google Fonts CDN)
- Colors: Off-white
#F2EFE6, Black #000, White #FFF, Terracotta #C38133
- Typography: Bold uppercase display (72-100px), section heads (36-48px), body (16-18px)
- Layout: Full-viewport hero, 2-col about, 3-col services grid, 2x2 gallery
- Buttons: Bordered, uppercase, letter-spaced
Edge Cases
- Missing columns: Script uses sensible defaults (e.g., "Welcome" if no description)
- No Unsplash key: Falls back to picsum.photos placeholder images
- Long company names: CSS handles wrapping with responsive font sizing
- Special characters: HTML-escaped in output
Schema
Inputs
| Name |
Type |
Required |
Description |
sheet_url |
string |
Yes |
Google Sheet URL with prospect data |
row |
integer |
Yes |
Row number (1-indexed, excluding header) |
worksheet |
string |
No |
Worksheet name (default: first sheet) |
Outputs
| Name |
Type |
Description |
html_file |
file_path |
Self-contained HTML file at .tmp/website_{slug}.html |
Credentials
| Name |
Source |
UNSPLASH_ACCESS_KEY |
.env (optional, falls back to picsum) |
Composable With
Skills that chain well with this one: scrape-leads, gmaps-leads
Cost
Free (Unsplash free tier)
1---2name: design-website-33description: Generate a premium mockup website for a prospect using the buildinamsterdam.com template style. Use when user asks to design a website, create a mockup, or build a prospect website.4---56# Design Website78## Goal9Generate a polished, single-page HTML website mockup for a prospect's business. The website matches the **buildinamsterdam.com** aesthetic: bold typography, off-white backgrounds, editorial grid layouts, terracotta accents. Used to pitch web design services.1011## Inputs12- **Google Sheet URL** with prospect data13- **Row number** (1-indexed, excluding header) to select which prospect14- Optional: **worksheet name** (defaults to first sheet)1516### Expected Sheet Columns17The script maps these columns (case-insensitive, flexible matching):18| Column | Maps To |19|---|---|20| company_name / company | Business name (hero, nav, footer) |21| description / about | About section + hero subtitle |22| keywords / services | Services grid (comma-separated) |23| phone / phone_number | Contact section |24| email / contact_email | Contact section |25| address / full_address | Contact section |26| city, state, country | Location info |27| industry / category | Unsplash image search queries |28| first_name, last_name | Owner attribution |29| title / role | Owner role |3031## Scripts32- `scripts/read_prospect.py` — Read a single prospect row from Google Sheets → JSON33- `scripts/generate_website.py` — Generate HTML website from prospect JSON3435## Process3637### Step 1: Read prospect data38```bash39python3 .claude/skills/design-website/scripts/read_prospect.py \40 --url "SHEET_URL" \41 --row ROW_NUMBER \42 --worksheet "WORKSHEET_NAME" # optional43```44Outputs JSON to stdout.4546### Step 2: Generate website47```bash48python3 .claude/skills/design-website/scripts/read_prospect.py \49 --url "SHEET_URL" --row 1 | \50python3 .claude/skills/design-website/scripts/generate_website.py51```52Or with a JSON file:53```bash54python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json55```5657### Step 3: Preview58Open the generated file in browser:59```bash60open .tmp/website_*.html61```6263## Outputs64- `.tmp/website_{company_slug}.html` — Self-contained HTML file, viewable in any browser65- All CSS is inline, images are external URLs (Unsplash)6667## Environment68- `UNSPLASH_ACCESS_KEY` in `.env` — Required for stock photos. Get free key at https://unsplash.com/developers69- If no key is set, falls back to curated placeholder images from picsum.photos70- Google OAuth credentials (token.json / credentials.json) for Sheets access7172## Design System73- **Font**: Inter (Google Fonts CDN)74- **Colors**: Off-white `#F2EFE6`, Black `#000`, White `#FFF`, Terracotta `#C38133`75- **Typography**: Bold uppercase display (72-100px), section heads (36-48px), body (16-18px)76- **Layout**: Full-viewport hero, 2-col about, 3-col services grid, 2x2 gallery77- **Buttons**: Bordered, uppercase, letter-spaced7879## Edge Cases80- Missing columns: Script uses sensible defaults (e.g., "Welcome" if no description)81- No Unsplash key: Falls back to picsum.photos placeholder images82- Long company names: CSS handles wrapping with responsive font sizing83- Special characters: HTML-escaped in output8485---8687## Schema8889### Inputs90| Name | Type | Required | Description |91|------|------|----------|-------------|92| `sheet_url` | string | Yes | Google Sheet URL with prospect data |93| `row` | integer | Yes | Row number (1-indexed, excluding header) |94| `worksheet` | string | No | Worksheet name (default: first sheet) |9596### Outputs97| Name | Type | Description |98|------|------|-------------|99| `html_file` | file_path | Self-contained HTML file at .tmp/website_{slug}.html |100101### Credentials102| Name | Source |103|------|--------|104| `UNSPLASH_ACCESS_KEY` | .env (optional, falls back to picsum) |105106### Composable With107Skills that chain well with this one: `scrape-leads`, `gmaps-leads`108109### Cost110Free (Unsplash free tier)
aiagentwithdhruv