Complete Website Builder
Builds a production-grade, agency-quality marketing website in one self-contained HTML file, with real researched photos, GSAP animations, glassmorphism, and a persona library picked for your business type.
Overview
Complete Website Builder produces marketing sites that look like a $15,000 agency shipped them, not templates and not AI slop. One self-contained HTML file with real photos that match the business, smooth animations, and design decisions tailored to the specific client.
How it works
Give it a business URL (Google Maps, Yelp, existing site) or a short description. It extracts the real details and assembles a bespoke site with a curated industry persona.
- Capture input: parse a URL or description into name, services, city, tone.
- Pick a persona: industry-specific color, font and feel from a built-in library.
- Research real photos: a mandatory Unsplash discovery and verification protocol so the images actually fit the business.
- Build one file: Ken Burns hero, GSAP staggered headlines, glassmorphism cards, asymmetric gallery, 3-step process, Swiper testimonials, all inline.
Examples
You: build me a website for this HVAC company [Google Maps URL]
Skill: extracts services + reviews, picks the "trusted local trades" persona,
researches real photos, outputs index.html with animated counters and a
click-to-call button.
The skill ships as a SKILL.md plus three reference files (personas.md,
photo-protocol.md, and build-spec.md) so the long build spec stays organized.
Ideal for client demos, landing pages, and quick prospect sites that must not look
generic.
Installation
You need Claude Code and Git.
- Clone the skills monorepo:
git clone https://github.com/lorenzomeolav32-png/ai-assets-directory-skills - Copy the skill folder into your global skills directory:
cp -r ai-assets-directory-skills/skills/complete-website-builder ~/.claude/skills/complete-website-builder - Restart Claude Code, or reload the project, so it picks up the new skill.
- Ask it to build a site from a real business URL, for example a Google Maps link, to confirm the skill is loaded.
Related assets
Frontend Design
Generates distinctive, production-grade UI that avoids generic "AI slop," with bold typography, cohesive color, and precise motion, implemented as real code.
Graphify
Turns a codebase, plus its docs, PDFs, images, and video, into a queryable knowledge graph that a coding agent can traverse instead of grepping raw files, and never guesses silently: every edge is tagged EXTRACTED, INFERRED, or AMBIGUOUS so you know what was found versus inferred.
Caveman
Makes your coding agent answer in a stripped down, high signal style that keeps every technical fact and cuts filler, saving output tokens on chat style questions.