Three Ways to Build a Site from a Design System

Same brand. Same brief. Same underlying design system. I built the Bayside Physio website three completely different ways — and only changed one thing each time: how I art-directed it before it hit Claude Code. This is the follow-up to the build-and-deploy video. That one covered the loop — Figma design tokens in, Claude Code builds it, GitHub and Netlify keep it live. This one covers the part I skipped on purpose: how you actually decide what the site should look and feel like. Version 1: the design system and component library, straight uplift, no additional direction. Version 2: the same system, plus a five-minute mood board pulled from Pinterest. Version 3: the same system, plus a fully AI-generated cinematic scroll experience built with Higgsfield. Same design tokens underneath all three — only the creative brief changes, and Claude tells you exactly why the plain design-system version falls flat: "a component library will always give you a floor, never a ceiling." Timestamps: 0:00 The experiment: three ways to art-direct the same site 0:56 Disclaimer: synthetic Bayside Physio demo data 1:26 Recap: the site and design system from the last video 2:56 Inside the upgraded design system — atoms, molecules, organisms 4:26 Version 1 — uplifting the site with the design system alone 5:42 Version 1 result: consistent, but generic 6:26 Claude's verdict: "a floor, never a ceiling" 7:14 Version 2 — building a five-minute mood board in Figma 8:21 Briefing Claude with the mood board 9:05 Version 2 result: same system, more direction 10:02 Version 3 — setting up the Higgsfield MCP connector 11:12 Briefing an award-winning cinematic scroll site 12:27 Reviewing Higgsfield's generated hero footage 13:11 Version 3 result: the cinematic scroll build 13:49 Which version actually wins, and what matters more than the tool 14:35 Wrap-up Tools used in this video: → Claude Code: https://claude.ai/code → Figma: https://figma.com → Higgsfield AI: https://higgsfield.ai Resources: → Previous video — Build and deploy your website with Claude Code, GitHub, and Netlify (link once that video publishes) Note: This video uses Bayside Physio, a fictional demo practice. All data, content, and imagery shown is synthetic. No real patient information. Not clinical or regulatory advice. #ClaudeAI #ClaudeCode #DesigningAndBuildingWithAI