The Vibe Design Workflow

"Vibe Design" is a methodology that prioritizes intent-based design by using CSS terminology as a bridge between human vision and AI execution. Instead of vague prompts like "make it look nice," developers use specific CSS vocabulary (e.g., "non-uniform grid," "scroll-timeline," "appearance: base-select") to guide AI agents. This transforms CSS knowledge from a purely implementation-level skill into a high-level design vocabulary.

The workflow relies on a three-step loop:

  1. Design: Prompting the AI (Stitch) with specific CSS concepts to generate layouts.
  2. Inspect: Using Chrome DevTools MCP servers to validate the generated DOM and styles against the intended design.
  3. Refine: Feeding insights from the inspection back into the agent to iterate on the code.

Establishing a Single Source of Truth

To prevent screens from becoming isolated "islands," the workflow uses a DESIGN.md file. This acts as an agent-readable specification that defines colors, typography, spacing, and component patterns. When Stitch generates a screen, it automatically maps these design decisions to Tailwind CSS utility classes and CSS custom properties. This ensures that every generated screen inherits the same visual identity, allowing for global updates by changing a single token in the design system.

Leveraging Modern CSS for Performance

The speakers emphasize using modern CSS features to replace heavy JavaScript libraries, which improves performance by offloading tasks to the browser's compositor thread:

  • Scroll-Driven Animations: By using animation-timeline: scroll(), developers can bind animations directly to scroll progress without JavaScript listeners or layout recalculations.
  • Native Select Styling: The appearance: base-select property allows developers to fully style native <select> elements while retaining default accessibility and keyboard behavior, eliminating the need for custom JS-based dropdown components.
  • Grid Layouts: Using non-uniform grid tracks and col-span properties allows for complex, responsive bento-grid layouts that maintain structural hierarchy.

Tooling and Integration

The setup utilizes the Antigravity IDE environment with two primary MCP (Model Context Protocol) servers:

  • Stitch MCP: Enables the agent to programmatically create, edit, and manage design projects.
  • Chrome DevTools MCP: Allows the agent to inspect live pages, read the DOM, and check computed styles, closing the feedback loop between generated code and browser rendering.