agentleFS
Sign inStart free
aiagentwithdhruvaiagentwithdhruv/skills/design-website/SKILL.md

design-website

Skill16 starsChanged 9 months agoMITView on GitHub

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.

  • Reads credentials

2 other projects use a version of this, 2 of them edited.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    All CSS is inline, images are external URLs (Unsplash)

    line 65
  2. Distinctive:

    If no key is set, falls back to curated placeholder images from picsum.photos

    line 69
  3. Distinctive:

    No Unsplash key: Falls back to picsum.photos placeholder images

    line 81

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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):

ColumnMaps To
company_name / companyBusiness name (hero, nav, footer)
description / aboutAbout section + hero subtitle
keywords / servicesServices grid (comma-separated)
phone / phone_numberContact section
email / contact_emailContact section
address / full_addressContact section
city, state, countryLocation info
industry / categoryUnsplash image search queries
first_name, last_nameOwner attribution
title / roleOwner role

Scripts

  • scripts/read_prospect.py — Read a single prospect row from Google Sheets → JSON
  • scripts/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

NameTypeRequiredDescription
sheet_urlstringYesGoogle Sheet URL with prospect data
rowintegerYesRow number (1-indexed, excluding header)
worksheetstringNoWorksheet name (default: first sheet)

Outputs

NameTypeDescription
html_filefile_pathSelf-contained HTML file at .tmp/website_{slug}.html

Credentials

NameSource
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)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free