Two MCP Servers Create the Design, Inspect, Refine Loop

▶ Watch (3:09)

Dion and David set up two MCP servers with Antigravity as their IDE. Stitch MCP connects the coding agent to Stitch, letting it create projects and generate screens from prompts. Chrome DevTools MCP lets the agent inspect the live DOM, read computed styles, and check the console. The workflow runs three steps: design in Stitch, inspect in Chrome, refine. Each iteration sharpens the result because the developer injects CSS knowledge into the prompt.

CSS Vocabulary Turns a Prompt Into a Four-Column Bento Grid

▶ Watch (5:14)

The first demo built a meta site where each card describes a CSS feature and uses that same technique. David prompted Stitch with a four-column grid, the scroll-animations card spanning two columns and two rows as a hero, the customizable select in a tall single column, and secondary features filling the rest. Stitch output grid-template-columns: repeat(4, 1fr) with col-span-2 and row-span-2. Then David asked for drag-and-drop reordering using vanilla JavaScript with pointer events, and Stitch maintained the span dimensions.

Design MD Becomes a Single Source of Truth for Visual Identity

▶ Watch (7:35)

Every Stitch project includes a design MD file: a plain-English spec for colors, typography, spacing, and component patterns. When Stitch generates a screen, it also creates a design system (e.g., “technical curator”) with a color scheme, typography hierarchy, and component visuals. That design MD exports alongside the project, and its tokens become a Tailwind CSS config. Changing one accent color in the design system updates every screen, following the CSS custom properties model.

One CSS Property Binds Animation to Scroll Position

▶ Watch (10:10)

David built a scroll-linked progress spine: a thin vertical line fixed to the viewport center that grows as the user scrolls. The CSS uses animation-timeline: scroll(root block), transform-origin: top center, and a scaleY keyframe from 0 to 1. The agent placed the spine div as a direct child of the body so fixed positioning works, and centered it with left: 50%; margin-left: -0.5px to keep the transform property free for scaleY. Only opacity and transform change, so the browser routes work to the compositor thread with zero JavaScript listeners.

Appearance-Base-Select Tames the Native Drop-Down

▶ Watch (13:56)

The last demo contrasted a default system select with one styled using appearance-base-select. That single declaration tells the browser to surrender control of the visual chrome. The styled select got a warm gray background, a blue bottom border, a custom icon, and custom typography — all pure CSS on a native form element. Keyboard accessibility, focus rings, and arrow-key navigation work automatically. The precise prompt referenced the design tokens and the property name, producing the output on the first try.

Notable Quotes

CSS is the shared language between you, design, code, and the agent. Dion Almaer · ▶ Watch (2:04)

Your CSS knowledge turns vague intent into precise direction. Dion Almaer · ▶ Watch (1:58)

The magic is the rule animation-timeline-scroll. David East · ▶ Watch (10:48)

One CSS property, appearance-base select, and that single declaration tells the browser to stop rendering its own Chrome and hand control over to you. David East · ▶ Watch (14:43)

Your CSS knowledge isn’t just for implementation anymore. It’s your design vocabulary. Dion Almaer · ▶ Watch (15:59)

Key Takeaways

  • CSS vocabulary turns vague UI requests into precise, machine-executable prompts.
  • Stitch + Chrome DevTools MCP form a closed loop: design, inspect, refine.
  • Design MD files export tokens that become Tailwind configs, preserving design intent across handoffs.