Vibe Design
AI Generated UI
Published:
2026/03
Tools
Claude, Stitch, MagicPath (Screen coming soon)
Workflow
1. Conduct research with AI
Use Claude to gather market and product insights for restaurant management platforms across different countries.
2. Define tasks and generate structured prompts
Translate research into clear product scenarios and task flows. Design a use case where staff manage reservations, assign walk-in customers to seats, and monitor real-time order status.
3. Specify core features and logic
- Reservation Overview Dashboard: View real-time reservation status, including booked, available, and occupied seats in a centralized overview. - Walk-in Seat Assignment: Assign seats to walk-in customers based on current availability and update the status to “Seated” instantly. - Real-Time Order Visibility: Display order details in the overview once customers submitted, allowing staff to monitor all active orders at a glance. - Order Status Tracking: Track each dish with clear status indicators such as “Ordered” or “Dining,” along with waiting time for each item. - Delay Alert System: Highlight orders that exceed a 10-minute waiting time with warning indicators to help staff take immediate action.
4. Build a consistent design system
Create a new design system with a warm yet structured visual style. Use Claude to generate design tokens and translate them into Stitch (UI generation) and MagicPath (CSS output). ## Color Palette Background layers: --bg-base: #FAFAF8 (main background) --bg-surface: #F7F4EF (card / panel) --bg-elevated: #F2EDE4 (hover, modals) --bg-overlay: #EDE8DF (secondary panels) Primary accent: #C45E1A … ## Typography UI / Body: "DM Sans" or "Outfit" — clean, functional, readable at small sizes Monospace (data): "JetBrains Mono" — for numbers, IDs, timestamps Scale: --text-xs: 12px --text-sm: 13px --text-base: 15px --text-lg: 18px --text-xl: 24px --text-2xl: 32px --text-hero: 48px … ## Spacing & Layout … ## Component Rules …
5. Ensure consistency and accessibility
Refine prompts to enforce design consistency across screens and meet accessibility standards, including sufficient color contrast and reusable components like a fixed sidebar. - Prompts: Ensure sufficient color contrast, especially for small text (minimum 14px). - Prompts: This screen's sidebar must match the "Overview (Accessible & Consistent)" screen exactly. Replicate this sidebar without any modification. ACTIVE NAV ITEM: Reservations
Reflections
This process showed how AI can be guided to deliver consistent design outcomes when given clear structure and constraints. By defining tasks, features, and design rules upfront, I reduced ambiguity and achieved more predictable results with fewer iterations. It also highlighted that prompt precision plays a key role in maintaining UI consistency across screens. Moving forward, I see AI not just as a generation tool, but as a system that requires clear instruction and governance. The ability to structure tasks and control outputs will be essential to scale both speed and design quality.