Vibe design to build incredible web UI

Key Concepts

• Vibe Design: A methodology where user intent is translated into design through specific CSS vocabulary and technical descriptions rather than vague requests.
• Stitch: An AI-powered design tool that generates HTML and Tailwind CSS based on natural language prompts.
• MCP (Model Context Protocol): A standard for connecting AI agents to external tools (e.g., Stitch MCP for design, Chrome DevTools MCP for inspection).
• CSS Custom Properties: Used as a "single source of truth" for design tokens (colors, typography, spacing) to ensure consistency across screens.
• Scroll-Driven Animations: Using the scroll-timeline CSS property to bind animations directly to the scroll position without JavaScript.
• appearance: base-select: A modern CSS property that allows developers to fully style native <select> elements while retaining built-in accessibility and keyboard functionality.

---

1. The "Vibe Design" Workflow

The presenters argue that CSS knowledge is the bridge between human intent and AI execution. Instead of asking an AI to "make it look nice," developers should use specific CSS terminology (e.g., "non-uniform grid," "scroll-timeline," "transform-origin") to guide the agent.

The Three-Step Loop:

1. Design: Prompt Stitch using specific CSS concepts.
2. Inspect: Use the Chrome DevTools MCP to validate the generated DOM and computed styles.
3. Refine: Feed the insights gained from inspection back into the next prompt to iterate.

---

2. Tooling and Environment Setup

• Stitch MCP: Connects the coding agent to the Stitch platform, enabling programmatic creation and editing of screens via tools like generate_screen_from_text.
• Chrome DevTools MCP: Allows the agent to read the live DOM, check computed styles, and monitor the console of a running application.
• Antigravity: The IDE used to orchestrate these MCP servers.
• Local Development: A CLI tool (npx @_davideast/stitch-mcp) is used to serve generated screens locally, allowing the DevTools MCP to access the live environment.

---

3. Structural Design and Layout

• Grid Hierarchy: The presenters emphasize using CSS Grid with non-uniform track sizes to establish spatial hierarchy. By specifying grid-template-columns and row-span/col-span properties, the AI can create complex "bento grid" layouts.
• Design Systems (DESIGN.md): Stitch generates a DESIGN.md file that acts as an agent-readable specification. This file defines color roles (primary, secondary, etc.), typography, and spacing. These are exported as Tailwind CSS tokens, ensuring that every generated screen inherits the same visual identity.

---

4. Advanced CSS Implementations

Scroll-Driven Animations

• Mechanism: The presenters demonstrate a progress spine that grows as the user scrolls.
• Technical Implementation:
  • animation-timeline: scroll(root block): Binds the animation progress to the scroll position.
  • transform-origin: top center: Ensures the element scales downward.
  • Performance: By limiting changes to opacity and transform, the browser offloads the work to the compositor thread, avoiding expensive layout recalculations and JavaScript listeners.

Styling Native Select Elements

• The Problem: Historically, styling <select> elements required complex JavaScript libraries to override OS-level rendering.
• The Solution: appearance: base-select. This property strips the browser's default styling, allowing developers to apply custom backgrounds, borders, and icons while maintaining native accessibility and keyboard navigation (e.g., arrow key support).

---

5. Notable Quotes

• "CSS is the shared language between you, design, code, and the agent." — David East
• "Your CSS knowledge turns vague intent into precise direction." — Dion Almaer
• "Every feature you learn... gives you a new word in that vocabulary." — Dion Almaer

---

Synthesis

The core takeaway is that AI design tools are most effective when the user acts as a "technical curator." By leveraging deep CSS knowledge, developers can move beyond generic AI outputs and create highly performant, accessible, and visually consistent applications. The combination of Stitch for generation, MCPs for inspection, and CSS-first prompting creates a powerful, iterative workflow that keeps the developer in control of the final product's architecture and performance.