Could reduce TFWW website build time by 30-50% while improving design consistency, allowing us to serve more clients per month with same labor or reinvest time in higher-value add-on services.
Test Google's Stitch AI with Claude Code skills to generate systematic design systems for TFWW websites, potentially reducing build time 30-50%.
Business Applications
MEDIUM TFWW website build process - design standardization (website)Test the stitch-skills workflow on next 3 TFWW websites to measure build speed vs current Tailwind manual approach. If faster, create internal SOP.
LOW Claude Code optimization - skill library (general)Evaluate the 'enhance-prompt' skill pattern from stitch-skills repo for our Claude Upgrades project - could create similar prompt optimization skills for our specific workflows (sales scripts, CRM automations)
MEDIUM TFWW service tier differentiation (sales_script)If Stitch workflow produces noticeably better designs, use it for 'premium' tier websites while keeping current vanilla approach for standard free sites. Justify affiliate commission upsells on better design.
React AngleWe should test this Stitch workflow on a TFWW site immediately - if it cuts our build time while maintaining quality, we've just scaled our capacity without hiring. The 'enhance-prompt' skill pattern might also clean up our Claude Code sessions.
Joshua Stevenson - AI/web design content creator, demonstrating Claude Code workflows for developers/designers
Hook: Claims Claude Code + Google Stitch collaboration may have 'killed website designers' and shows how to make '$10,000 professional websites for free'
- Step 1: Install Google Stitch skill from GitHub repo 'stitch-skills' using one command
- Step 2: Install 'enhance-prompt' skill first before describing website - it rewrites prompts specifically for Google Stitch's design system
- Step 3: Enter prompt to generate DESIGN.md and SITE.md files containing professional design system with consistent colors, fonts, spacing
- Step 4: Run 'stitch-loop' skill which auto-builds all pages based on the design spec
- Step 5: Install React components skill and convert to production-ready React site
- Design system includes: Color palette (Midnight #1a1a2e, Electric violet #7f77dd), Typography (Syne, Inter, JetBrains Mono), Spacing scale (4px, 8px, 16px, 24px, 48px), Border radius (2px, 6px, 12px, 24px), Component specs
- Final output is a complete website that can be launched
“Everyone is building websites with Claude Code but most of the designs look like AI slop”
“Don't describe your website to Claude just yet. First install this skill”
“Claude will work with Google Stitch to create the DESIGN.md and SITE.md files”
What it is: A workflow combining Google Stitch (Google's AI design tool, currently in Beta) with Claude Code CLI to automate design system creation and website building. Uses custom Claude skills to generate DESIGN.md specifications with design tokens, then auto-builds pages with a 'stitch-loop' skill.
How it helps us: Highly relevant for TFWW - we build ~300 websites and currently use vanilla JS + Tailwind. This could standardize our design quality, speed up builds, and create consistent design systems for client sites. The 'enhance-prompt' skill technique could improve our Claude Code usage across all projects.
Limitations: We currently use static HTML/Tailwind, not React - the React conversion step adds complexity we may not need for simple client sites. '$10,000 website' claim ignores strategy, copywriting, SEO, and custom functionality that justify high prices. May be overkill for basic brochure sites.
Who should see this: TFWW dev team (Dylan/dev contractors) - to evaluate if this speeds up our free website builds
❌ [MISLEADING] "Claude Code + Google Stitch may have 'killed website designers'" — Hyperbolic marketing. Comments just say 'Website' (likely responding to CTA for guide), not confirming they replaced designers. Design systems help execution but don't replace strategy, UX research, content strategy, or custom development that justify professional fees.
Instead: Position as 'amplifier for designers' - handles boilerplate design systems so designers can focus on custom UX and conversion optimization.
⚠️ [QUESTIONABLE] "Creates '$10,000 professional websites for free'" — Generates design system and markup, but $10k websites require stakeholder management, custom functionality, SEO optimization, content strategy, responsive testing, accessibility compliance, and performance tuning - none of which are automated here.
Instead: Realistic value prop: 'Rapid design prototyping and consistent design system generation' rather than full website replacement.
🤔 [PLAUSIBLE] "Most Claude Code designs look like AI slop, but this fixes it" — Google Stitch specifically focuses on design system consistency (colors, typography, spacing), which addresses the 'inconsistent styling' common in AI-generated sites. The structured DESIGN.md approach forces systematic design thinking.
Instead: Valid technique - using structured design tokens and systems (like Stitch or custom Tailwind configs) does improve AI output consistency.