One agent. 22 design skills. One safe prompt.
Paste it into Claude Code from your project folder. Your Web Designer agent, curated skills, and starter context files install without overwriting existing work.
Hit Copy above. The entire install command lands in your clipboard.
Open Claude Code from your project folder and paste. The kit installs with no silent overwrites.
Your Web Designer agent now has professional design intelligence. Describe your site and it builds something genuinely beautiful.

“I have particles floating in the background, a circle following my cursor, things glowing. I could not believe I built this in one session.”
Johanna
Cohort 1
Join the Business Automation Mastermind
A small, focused group of business owners who meet weekly to build real things, fast -- leaving more time to serve clients and be with the people you love.
What people said the first time they built a website in one session.
“I used to pay all these people; now I can do it myself.”

SunDari
Cohort 1
“I have particles floating in the background, a circle following my cursor, things glowing. I could not believe I built this in one session.”

Johanna
Cohort 1
“It pulled in my calendar link, my WhatsApp, all my deck photos. This is 90% of the website I wanted. In 45 minutes.”

Ronnie
Cohort 1
In the Business Automation Mastermind, this is how we go from zero to a fully equipped design environment in minutes.
Install Joe Che's Web Designer Agent Kit.
You are working inside my current website project folder. Treat "." as the project root on both Mac and Windows.
Rules:
- Detect whether I am on Mac, Windows PowerShell, or Windows Command Prompt.
- Use the matching terminal commands.
- Do not overwrite any existing files.
- If a target skill, agent, CLAUDE.md, USER.md, or SOUL.md already exists, leave it alone and report it as skipped.
- If git, node, or npm is missing, stop and tell me exactly what to install.
- If one external skill repo fails, continue installing the rest and report the failure clearly.
- Use relative project paths for the repo folder and context files.
- Clone the kit into ./.masterminds-web-designer-agent-kit.
- After installing, run the health check with --project=.
Steps:
1. Check:
git --version
node --version
npm --version
2. If the repo is not already in this project, clone it:
git clone https://github.com/josephtandle/web-designer-agent-kit .masterminds-web-designer-agent-kit
3. Install context files:
Mac:
node .masterminds-web-designer-agent-kit/scripts/install-context.mjs --target=.
Windows PowerShell:
node .\.masterminds-web-designer-agent-kit\scripts\install-context.mjs --target=.
4. Install the agent and skills:
Mac:
node .masterminds-web-designer-agent-kit/scripts/install-web-designer-kit.mjs
Windows PowerShell:
node .\.masterminds-web-designer-agent-kit\scripts\install-web-designer-kit.mjs
5. Run the health check:
Mac:
node .masterminds-web-designer-agent-kit/scripts/health-check.mjs --project=.
Windows PowerShell:
node .\.masterminds-web-designer-agent-kit\scripts\health-check.mjs --project=.
6. Tell me:
- installed skills
- skipped skills
- failed skills
- created/skipped CLAUDE.md, USER.md, and SOUL.md files
- the next prompt to pasteThe installer is designed to skip existing files by default and report exactly what changed. Review the public repo before installing anything new.
curated skills
Web Designer agent
silent overwrites
Every item links to its GitHub page so you can review it before installing.
The dedicated Claude Code agent that orchestrates the full website build.
Mastermind-specific web design operating loop and quality standard.
Strong frontend design fallback for layout, hierarchy, and polish.
Anti-slop visual quality standard for more premium, intentional interfaces.
Modern page composition, interface polish, and design direction.
Professional animation fundamentals from the GSAP team.
Orchestrated animation sequences for hero sections and page moments.
Scroll-linked animation patterns used on premium websites.
Animation performance guidance so effects stay smooth.
Framer Motion style interaction and component animation guidance.
Tasteful reveal effects for sections, cards, and calls to action.
Lightweight animation patterns for text, SVG, and microinteractions.
Three.js and WebGL guidance for immersive site moments.
React-friendly 3D scene patterns.
Fast 3D visual effects that do not require a heavy 3D app workflow.
Patterns for integrating 3D without breaking usability.
Reusable animated UI component ideas for faster builds.
Generative engine optimization for AI-search-friendly pages.
Search and social metadata essentials.
Structured data suggestions for businesses, offers, and FAQs.
Basic crawlability and technical SEO checks.
Improves page usefulness, clarity, and credibility.
P.S. This page took 4 minutes to build with these exact tools. I only looked at it once :)