AI-FIRST DESIGN & DEVELOPMENT WORKFLOW

AI trip agent building a governed design system and intelligent product in one sprint

Key Tools & Techniques

  • Cursor IDE
  • Claude
  • IBM Carbon Design System v11
  • Storybook
  • Figma MCP
  • Tambo AI
  • Firebase
  • Leaflet
Go to Live DemoGo to Design System Documentation

01

Challenge

Organizations building AI-powered products face a dual challenge. First — how to maintain design system consistency when the majority of code is generated by an AI agent, not hand-written by a developer reviewing style guides. Second — how to rapidly deliver intelligent, conversational product functionality (an AI agent) without losing weeks on UI boilerplate, backend integrations, and component documentation.

The goal was to build a complete pipeline: from Carbon Design System tokens, through a custom design system documented in Storybook with production components, to Figma screens generated by AI — while simultaneously delivering a working product with a built-in AI agent that plans trips through natural language.

02

Process

  • Design system as a contract for the AI agent. A 500+ line .cursorrules file encodes Carbon component selection, spacing tokens, button hierarchy, modal patterns, a11y requirements, and anti-patterns. The AI agent operated within this contract from line one — every component was Carbon-native by design, not by review.

    Design system as a contract for the AI agent. A 500+ line .cursorrules file encodes Carbon component selection, spacing tokens, button hierarchy, modal patterns, a11y requirements, and anti-patterns. The AI agent operated within this contract from line one — every component was Carbon-native by design, not by review.

  • Documented design system in Storybook — generated, not hand-written. The AI agent produced a complete Storybook: 5 foundations, 12 primitives, 11 app components, 5 composition patterns. Each with documentation, a11y tests, and play tests. Deployed to Vercel with CI/CD as living documentation.

    Documented design system in Storybook — generated, not hand-written. The AI agent produced a complete Storybook: 5 foundations, 12 primitives, 11 app components, 5 composition patterns. Each with documentation, a11y tests, and play tests. Deployed to Vercel with CI/CD as living documentation.

  • AI-generated Figma screens as a starting point for designers. Using Figma MCP, the agent generated screens reflecting the component structure and design tokens. Not a finished design — a structured starting point with correct hierarchy and tokens for designers to iterate on. The workflow closes the loop: code → Storybook → Figma.

    AI-generated Figma screens as a starting point for designers. Using Figma MCP, the agent generated screens reflecting the component structure and design tokens. Not a finished design — a structured starting point with correct hierarchy and tokens for designers to iterate on. The workflow closes the loop: code → Storybook → Figma.

  • AI agent as a product feature. A Tambo AI co-pilot understands the user's plan context and can search places, add locations, generate transport routes (OSRM), and build complete attraction-level itineraries through a two-step vibe-based wizard. The agent's tool-calling infrastructure was itself built by the AI coding agent.

    AI agent as a product feature. A Tambo AI co-pilot understands the user's plan context and can search places, add locations, generate transport routes (OSRM), and build complete attraction-level itineraries through a two-step vibe-based wizard. The agent's tool-calling infrastructure was itself built by the AI coding agent.

03

What Was Built

  • Multi-day trip plan creation with auto-save to Firebase

  • Adding locations via map click, search, or conversation with the AI — each enriched with images and descriptions from Wikidata/Wikipedia

  • Transport planning with real road-following routes (OSRM), showing distance, time, and transport type

  • Drag-and-drop reordering of locations within and across days

  • AI co-pilot with tool-calling that understands plan context and generates full itineraries through natural language

  • Interactive map with numbered markers per day, route polylines, and multiple tile styles

  • Design system — documented and ready for evolution

04

Key Takeaways

  • Design System Governance at Generation Time. cursorrules enforced Carbon compliance before code was written, not after. Result: 29 stories, 6 MDX docs, zero manual design system refactoring.

  • Code → Storybook → Figma: The Inverted Design Pipeline. Production code became the source of truth. AI-generated Figma screens gave designers a structured starting point with correct tokens and hierarchy — eliminating the traditional handoff drift.

  • AI Building an AI-Powered Product. The in-product trip planning agent (tool-calling, plan context, generative UI) was itself built by an AI coding agent. One sprint, both layers delivered.