Master Claude Design in One Video (Complete Build)

The video opens with the host rejecting the typical 'one-shot Claude Design demo' format and instead using the tool to rebuild real parts of his business — the Aentic Academy on School.com — live on screen. He identifies four missing assets: a landing page, a design system, a mobile version of the command center UI, and a consistent slide deck.

Before building anything, the host explains what Claude Design actually is: everything it produces is code under the hood (HTML, CSS, JavaScript), making it closer to Claude Code than to Figma or Canva. He frames design tools in two camps — asset design (Canva territory) and system design (Figma/Claude Design territory) — and stresses that the tool is iterative and prompt-driven, not drag-and-drop.

The host identifies the single biggest cause of generic 'AI slop' output: skipping the design system setup. He references Reddit complaints that all Claude Design outputs share the same serif fonts, colored accent bars, and blinking green dots, and explains this happens because Claude Opus 4.7 has a baked-in default 'house style' with warm cream and off-white backgrounds that it falls back to without explicit design specifications.

To avoid this, he walks through three approaches to building a design system before touching Claude Design. Method one uses reference screenshots from websites he likes (Zerno.com, StackAI.com), fed into ChatGPT's image generation model to synthesize a custom one-page design system, avoiding Claude Design's token budget entirely for this thinking work. He also pulls 'forbidden patterns' (AI tells) from the open-source Taste skill — things like the Inter font, generic gradients, and teal — and instructs ChatGPT to avoid them. Method two uses the Skill UI CLI tool, which reverse-engineers any website's design system via Playwright browser automation into a Claude-ready skill folder containing color tokens, typography rules, spacing, screenshots, and a skill.md file. He demonstrates extracting StackAI.com's full design system this way.

Both resulting design systems are uploaded into Claude Design's design system builder at claude.ai/design, along with logos, font files, and color tokens. The host walks through Claude Design's card-based approval interface, where it presents colors, typography, button states, and hero sections for review one at a time. He notes that ticking 'looks good' costs no tokens, while 'needs work' does. He compares both design systems side by side and selects the StackAI-emulated one for its cleaner card layouts and fonts.

For the landing page build, he uploads screenshots of the current ad page and prompts Claude Design to restructure the content using the new design system — not to copy the layout. The result is praised for clean typography, alternating feature sections, and accurate text extraction from screenshots, though the tool struggles with custom graphic elements like a 'watch the video' arrow CTA, requiring multiple iterations and a workaround via ChatGPT image generation. He notes token usage stayed at around 30–32% through all of this on the 20x Max plan.

After completing the landing page, the host exports it to Claude Code and applies the Taste skill's 'redesign' function to add the final 10% polish — changing round numbers to specific ones, replacing circular testimonial avatars with rounded squares, adding natural typographic weight variety, and removing zigzag layout patterns. He also demonstrates the 'brutalist' and 'minimalist' skill variants as alternative aesthetic directions, with the brutalist output praised as distinctly non-AI-looking.

For the mobile wireframe of the command center, the host opens a new Claude Design project and keeps the brief intentionally open, triggering Claude's interactive Q&A mode. Claude asks detailed questions about screen fidelity, which screens to wireframe, how many variations per screen, navigation patterns, and how to handle specific UX decisions like starting a new goal. The host answers and Claude produces a Figma-style infinite canvas with three variations per screen (A, B, C), interactive 'tweaks' toggles for dark/light mode and sketchy/clean stroke styles, and device frames with annotation callouts — all using around 4–12% of token quota.

For slides, the host follows a tip from Peter Yang: generate a video first to get dynamic, animated output, then duplicate the project and convert it to a slide deck. He feeds in a YouTube transcript about seven levels of Claude Code usage, and Claude Design produces a fully animated, scene-by-scene video following the Aentic Academy design system. Duplicating and converting it to a slide deck yields a click-through presentation with embedded tweets, screenshots, and per-slide animations.

The video closes with consolidated tips: always build the design system first; ban specific AI aesthetic patterns upfront using tools like the Taste skill; use inline element comments for targeted edits rather than full reprompts; and for dynamic decks, start with a video then convert to slides. The host identifies Claude Design's biggest current limitation as the inability to import custom skills, requiring hybrid workflows with Claude Code to reach a fully polished result.