site-redesign

Skill: Site Redesign

What This Skill Does

Takes a local business's existing website content and generates a single index.html file that looks like a $5,000+ custom design. No build step. No framework. Deploys instantly to Vercel.

Installation

Claude Code

Place this file at .agent/skills/site-redesign/SKILL.md. Claude Code auto-loads it.

OpenClaw

Paste the contents of this file into your system prompt. Use the website prompt from prompts/website_prompt_v1.md as your generation template.

How to Invoke

/site-redesign

Reads qualifying leads from qualify_results.json automatically and processes all YES entries.

Or for a single business:

/site-redesign https://zennailbar.com

What the Agent Does

For each lead where qualify === "YES":

1. Reads their current website content with read_url_content
2. Checks sites/build-log.md to avoid repeating a design combo
3. Picks a unique palette + font + layout combination
4. Searches Unsplash for 2–3 photos relevant to the business type
5. Verifies each photo URL loads (200 status) before using it
6. Generates a complete index.html using the design system below
7. Saves to sites/{business-slug}/index.html
8. Logs the combo used in sites/build-log.md

Architecture Rules (NEVER BREAK)

• One file only — all CSS in <style>, all JS in <script>, no separate files
• No frameworks — no React, no Vue, no Tailwind build, no npm
• CDN only — Google Fonts, GSAP, Lucide Icons
• No placeholder text — write real copy from the scraped business data
• 6 sections always — Navbar, Hero, Services, Philosophy, Contact, Footer
• Dynamic copyright year — never hardcode the year. Use new Date().getFullYear() in JS to set it

Required CDN scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>

DESIGN SYSTEM

Pick ONE from each column. Never repeat the same combo. Check sites/build-log.md first.

COLOR PALETTES

Dark:

Light:

FONT PAIRINGS

Google Fonts URL pattern:

<link href="https://fonts.googleapis.com/css2?family=FONT_PARAMS&display=swap" rel="stylesheet">

LAYOUTS

PHOTOS (Unsplash — free, dynamic search)

Do NOT use a fixed photo bank. Instead, find photos relevant to each specific business.

How to find photos:

1. Determine the business type and category (e.g. nail salon, wedding venue, med spa)
2. Search Unsplash for relevant terms: https://unsplash.com/s/photos/{search-term}
3. Pick 2–3 photos that are relevant to what the business actually does
4. Use the direct image URL format: https://images.unsplash.com/photo-{ID}?w={width}&h={height}&fit=crop&q=80

Rules:

• Photos must be relevant to the business — a nail salon gets nail photos, a wedding venue gets wedding photos
• Use at least 2 photos per site, max 3
• Before using any photo, verify it loads by fetching https://images.unsplash.com/photo-{ID}?w=400&q=60 and confirming a 200 status (not 404). Unsplash photos can be removed at any time.
• If a photo returns 404, find a replacement — never leave a broken image in the final site
• The hero photo should be high impact and relevant to the business atmosphere

QUALITY STANDARDS (always applied)

• GSAP scroll-triggered fade-up animations on all sections
• Noise texture overlay (opacity: 0.04 dark / 0.02 light)
• Magnetic button hover (scale(1.03), translateY(-1px))
• Responsive at 375px mobile and 1440px desktop
• Clickable tel: and mailto: links
• Navbar transitions on scroll

JS Safety — prevent invisible cards

/* Always include this */
.service-card { opacity: 1 !important; }

// Always init Lucide before GSAP
try { lucide.createIcons(); } catch(e) {}
gsap.registerPlugin(ScrollTrigger);

Output

• File: sites/{business-slug}/index.html
• Log entry appended to: sites/build-log.md

Slug format: lowercase, hyphenated. Zen Nail Bar → zen-nail-bar