NewDesign AgentsPrivate beta
NewDesign Agents

Always-on design intelligence

Always-on design intelligence

Design AI that works on your product around the clock. Connected to your knowledge, tools, and teams to help you build the right thing, faster.

Design AI that works on your product around the clock. Connected to your knowledge, tools, and teams to help you build the right thing, faster.

Book a demo

Built by designers and engineers from

Product

What your users need is scattered across your tools , tickets , and data . Now there's a design agent that can find it.

What your users need is scattered across your tools , tickets , and data . Now there's a design agent that can find it.

Start from context, not a blank page

Dawn reads your research, tickets, roadmap, and product data before it touches a screen. So the first draft is already informed by your product, not a guess you have to correct

Direct connections to Notion, Linear, PostHog, Pendo, and more.

True to your product and design system

Dawn works in your components, tokens, and patterns. What it makes looks like your product because it is built from your product, not a generic library bolted on after the fact.

Build on your real components and tokens from Figma, Storybook, internal libraries, and more.

People and agents in the same workspace

Designers, PMs, and engineers work alongside Dawn's agents in one space. People set direction, agents do the legwork, and everyone sees the same work as it takes shape.

Real-time multiplayer, with people and agents side by side in Dawn Studio

Production-ready code to hand off to any coding agent

Every screen, flow, and feature is production React and HTML. A human reviews it, then hands it straight to your coding agent over MCP or opens a PR.

Connects to Claude Code, Codex, Cursor, and any MCP-compatible agent.

src/components/PageLayout.tsx
import React from 'react';
import Header from './Header';
import HabitGrid from './HabitGrid';
import DiscoveryCard from './DiscoveryCard';
import BottomNav from './BottomNav';
import RecommendationsFooter from './RecommendationsFooter';
export default function PageLayout() {
  return <div style={{
    width: '430px',
    minHeight: '932px',
    backgroundColor: '#FFFFFF',
    display: 'flex',
    flexDirection: 'column',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    paddingBottom: '150px',
    // Reserved space for BottomNav and RecommendationsFooter
    margin: '0 auto',
    position: 'relative'
  }}>
      
      <Header />
      
      <main style={{
      flex: 1
    }}>
        <HabitGrid />
        <DiscoveryCard />
      </main>
 
      <RecommendationsFooter />
      <BottomNav activeTab="Today" />
    </div>;
}
 
// === src/components/Header.tsx ===
import { HiArrowLeft, HiOutlineAdjustmentsHorizontal } from 'react-icons/hi2';
export default function Header() {
  return <header style={{
    padding: '24px 24px 16px 24px',
    backgroundColor: '#FFFFFF'
  }}>
      
      <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: '16px'
    }}>
        
        <button onClick={() => console.log('Back')} style={{
        width: '40px',
        height: '40px',
        borderRadius: '50%',
        border: 'none',
        backgroundColor: 'transparent',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer'
      }}>
          
          <HiArrowLeft size={20} color="#222222" />
        </button>
        <span style={{
        fontSize: '12px',
        fontWeight: 600,
        color: '#717171',
        textTransform: 'uppercase',
        letterSpacing: '0.05em'
      }}>
          
          Test Discovery
        </span>
        <button style={{
        width: '40px',
        height: '40px',
        borderRadius: '50%',
        border: '1px solid #E5E7EB',
        backgroundColor: '#FFFFFF',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer'
      }}>
          
          <HiOutlineAdjustmentsHorizontal size={20} color="#222222" />
        </button>
      </div>
      
      <h1 style={{
      fontSize: '32px',
      fontWeight: 700,
      color: '#222222',
      letterSpacing: '-0.02em',
      margin: 0
    }}>
        
        Habit Overview
      </h1>
      <p style={{
      fontSize: '16px',
      fontWeight: 500,
      color: '#717171',
      marginTop: '8px',
      lineHeight: '1.5'
    }}>
        
        Your daily habits directly impact your biomarkers. Track them here to see which tests are most relevant.
      </p>
    </header>;
}
 
// === src/components/HabitGrid.tsx ===
import { HiMoon, HiBolt, HiCheckCircle, HiExclamationCircle, HiFire, HiScale } from 'react-icons/hi2';
export default function HabitGrid() {
  const habits = [{
    id: 'sleep',
    name: 'Sleep',
    current_value: '6.2 hours',
    target_value: '7-9 hours',
    status: 'below target',
    trend: '-0.5 hours/week',
    icon: HiMoon,
    color: '#FF385C',
    isPrimary: true
  }, {
    id: 'exercise',
    name: 'Exercise',
    current_value: '3.2 sessions/week',
    target_value: '4-5 sessions/week',
    status: 'on track',
    trend: '+0.3 sessions/week',
    icon: HiFire,
    color: '#00A699'
  }, {
    id: 'nutrition',
    name: 'Nutrition',
    current_value: 'Moderate consistency',
    target_value: 'High consistency',
    status: 'needs improvement',
    trend: 'variable',
    icon: HiScale,
    color: '#FC642D'
  }, {
    id: 'stress',
    name: 'Stress',
    current_value: 'Elevated',
    target_value: 'Managed',
    status: 'elevated',
    trend: '+15% vs last month',
    icon: HiBolt,
    color: '#FC642D'
  }];
  return <section style={{
    padding: '0 24px'
  }}>
      <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: '16px',
      marginTop: '8px'
    }}>
        
        {habits.map((habit, index) => {
        const Icon = habit.icon;
        const statusColor = habit.status === 'on track' ? '#00A699' : habit.status === 'elevated' || habit.status === 'needs improvement' ? '#FC642D' : '#FF385C';
        return <div key={habit.id} data-nav-target={habit.isPrimary ? "habit-details" : undefined} style={sx(`habitgrid__card_${index}`, {
          backgroundColor: '#FFFFFF',
          borderRadius: '16px',
          padding: '16px',
          border: '1px solid #E5E7EB',
          boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
          cursor: 'pointer',
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
          transition: 'transform 0.2s ease, box-shadow 0.2s ease'
        })} onClick={() => console.log(`Navigating to ${habit.name}`)}>
              
              <div style={sx(`habitgrid__div_${index}`, {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-start'
          })}>
                <div style={sx(`habitgrid__div_1_${index}`, {
              width: '32px',
              height: '32px',
              borderRadius: '8px',
              backgroundColor: `${habit.color}15`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            })}>
                  
                  <Icon size={20} color={habit.color} />
                </div>
                {habit.status === 'on track' ? <HiCheckCircle size={20} color="#00A699" /> : <HiExclamationCircle size={20} color={statusColor} />}
              </div>
              
              <div>
                <h3 style={sx(`habitgrid__card_${index}_name`, {
              fontSize: '14px',
              fontWeight: 700,
              color: '#222222',
              margin: 0
            })}>
                  
                  {habit.name}
                </h3>
                <p style={sx(`habitgrid__card_${index}_value`, {
              fontSize: '16px',
              fontWeight: 600,
              color: '#222222',
              margin: '4px 0 0 0'
            })}>
                  
                  {habit.current_value}
                </p>
              </div>
 
              <div style={sx(`habitgrid__div_2_${index}`, {
            marginTop: 'auto'
          })}>
                <div style={sx(`habitgrid__div_3_${index}`, {
              fontSize: '12px',
              fontWeight: 500,
              color: '#717171',
              display: 'flex',
              alignItems: 'center',
              gap: '4px'
            })}>
                  
                  Target: <span style={sx(`habitgrid__span_${index}`, {
                fontWeight: 600,
                color: '#222222'
              })}>{habit.target_value}</span>
                </div>
                <div style={sx(`habitgrid__div_4_${index}`, {
              fontSize: '10px',
              fontWeight: 600,
              color: statusColor,
              marginTop: '4px',
              textTransform: 'uppercase',
              letterSpacing: '0.02em'
            })}>
                  
                  {habit.trend}
                </div>
              </div>
 
              {/* Sparkline Mockup */}
              <div style={sx(`habitgrid__div_5_${index}`, {
            height: '24px',
            width: '100%',
            marginTop: '8px',
            backgroundColor: '#F7F7F7',
            borderRadius: '4px',
            position: 'relative',
            overflow: 'hidden'
          })}>
                
                <svg width="100%" height="100%" viewBox="0 0 100 24" preserveAspectRatio="none">
                  <path d={index % 2 === 0 ? "M0 12 L20 18 L40 10 L60 14 L80 8 L100 20" : "M0 18 L25 12 L50 15 L75 8 L100 5"} fill="none" stroke={statusColor} strokeWidth="2" />
                  
                </svg>
              </div>
            </div>;
      })}
      </div>
    </section>;
}
 
// === src/components/DiscoveryCard.tsx ===
import { useState } from 'react';
import { HiSparkles, HiChevronRight } from 'react-icons/hi2';
export default function DiscoveryCard() {
  const [hovered, setHovered] = useState(false);
  return <section style={{
    padding: '24px'
  }}>
      <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} onClick={() => console.log('Proceeding to assessment')} style={{
      backgroundColor: '#222222',
      borderRadius: '16px',
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      cursor: 'pointer',
      position: 'relative',
      overflow: 'hidden',
      transition: 'transform 0.2s ease',
      transform: hovered ? 'scale(1.01)' : 'scale(1)',
      boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
    }}>
        
        <div style={{
        position: 'relative',
        zIndex: 2
      }}>
          <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '6px',
          backgroundColor: 'rgba(255, 56, 92, 0.15)',
          padding: '6px 12px',
          borderRadius: '9999px',
          border: '1px solid rgba(255, 56, 92, 0.3)'
        }}>
            
            <HiSparkles size={14} color="#FF385C" />
            <span style={{
            fontSize: '12px',
            fontWeight: 700,
            color: '#FF385C',
            textTransform: 'uppercase',
            letterSpacing: '0.05em'
          }}>
              Personalized Discovery
            </span>
          </div>
 
          <h2 style={{
          fontSize: '24px',
          fontWeight: 700,
          color: '#FFFFFF',
          margin: '12px 0 8px 0',
          lineHeight: '1.2'
        }}>
            
            See which tests fit your lifestyle
          </h2>
          
          <p style={{
          fontSize: '14px',
          fontWeight: 500,
          color: '#9CA3AF',
          margin: 0,
          lineHeight: '1.5'
        }}>
            
            Based on your sleep and stress trends, we've identified 3 priority health markers to investigate.
          </p>
 
          <button style={{
          marginTop: '20px',
          backgroundColor: '#FF385C',
          color: '#FFFFFF',
          border: 'none',
          borderRadius: '12px',
          padding: '14px 20px',
          fontSize: '16px',
          fontWeight: 600,
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          cursor: 'pointer'
        }}>
            
            Start Habit Assessment
            <HiChevronRight size={20} />
          </button>
        </div>
 
        {/* Decorative background circle */}
        <div style={{
        position: 'absolute',
        top: '-40px',
        right: '-40px',
        width: '180px',
        height: '180px',
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255, 56, 92, 0.2) 0%, transparent 70%)',
        zIndex: 1
      }} />
        
      </div>
      
      <div style={{
      marginTop: '24px',
      borderTop: '1px solid #E5E7EB',
      paddingTop: '24px'
    }}>
        <h3 style={{
        fontSize: '14px',
        fontWeight: 700,
        color: '#222222',
        marginBottom: '12px'
      }}>
          Recent Activity
        </h3>
        <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '12px 0'
      }}>
          
          <div style={{
          display: 'flex',
          gap: '12px',
          alignItems: 'center'
        }}>
            <div style={{
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            backgroundColor: '#00A699'
          }} />
            <div>
              <div style={{
              fontSize: '14px',
              fontWeight: 600,
              color: '#222222'
            }}>Wearable Sync</div>
              <div style={{
              fontSize: '12px',
              fontWeight: 500,
              color: '#717171'
            }}>2 minutes ago</div>
            </div>
          </div>
          <div style={{
          fontSize: '12px',
          fontWeight: 600,
          color: '#00A699'
        }}>Healthy Trend</div>
        </div>
      </div>
    </section>;
}
 
// === src/components/BottomNav.tsx ===
import { HiCalendarDays, HiChartBarSquare, HiSparkles, HiBeaker } from 'react-icons/hi2';
interface BottomNavProps {
  activeTab: string;
}
const tabs = [{
  name: 'Today',
  icon: HiCalendarDays
}, {
  name: 'Picture',
  icon: HiChartBarSquare
}, {
  name: 'Plan',
  icon: HiSparkles
}, {
  name: 'Tests',
  icon: HiBeaker
}];
export default function BottomNav({
  activeTab
}: BottomNavProps) {
  const normalizedActive = activeTab.toLowerCase();
  return <div style={{
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 100,
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderTop: '1px solid #E5E7EB',
    paddingBottom: 'max(8px, env(safe-area-inset-bottom))',
    paddingTop: '8px'
  }}>
      
      {tabs.map((tab, __idx) => {
      const isActive = tab.name.toLowerCase() === normalizedActive;
      const Icon = tab.icon;
      return <button key={tab.name} style={sx(`bottomnav__button_${__idx}`, {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px',
        padding: '8px 12px',
        backgroundColor: 'transparent',
        border: 'none',
        cursor: 'pointer',
        color: isActive ? '#FF385C' : '#9CA3AF',
        fontSize: '10px',
        fontWeight: isActive ? '600' : '500',
        transition: 'color 0.2s ease'
      })}>
            
            <Icon size={24} />
            <span>{tab.name}</span>
          </button>;
    })}
    </div>;
}
 
// === src/components/RecommendationsFooter.tsx ===
export default function RecommendationsFooter() {
  return <section style={{
    padding: '32px 24px',
    textAlign: 'center'
  }}>
      
      <button onClick={() => {}} style={{
      backgroundColor: 'transparent',
      border: 'none',
      color: '#717171',
      fontSize: '14px',
      fontWeight: 600,
      textDecoration: 'underline',
      cursor: 'pointer'
    }}>
        
        Browse all recommendations
      </button>
    </section>;
}

Features

Everything it takes to shape better products

Everything it takes to shape better products

One agent that reads your product, designs in your system, and ships real code.

Tool connections

Designs from your tools and data

Decision memory

Remembers every decision you make

Team & agent collaboration

Your team and its agents, one canvas

Multi-screen flows

Generates whole journeys, not single screens

Parallel variants

Explores several directions at once

Your design system

Builds in your components and tokens

MCP

Work with any AI assistant or coding agent

Production code

Output production React and HTML

What people are saying

Loved by product leaders

"Finally, design AI that anticipates the next move, concierge-style."

Dave Killeen

Field-CPO at Pendo, former VP of Product & Design at Productboard

"It finally feels like I'm in control of the AI, not the other way around."

Dave O'Dwyer

Director of Product

"I had something I was genuinely proud of in an hour. That used to take days."

Lisa O'Brien

Head of Design, Primer. Former Head of Product & Design at Thriva

"Output quality outperforms anything I've tried"

Mateo R.

Product & Service Designer

"Refreshingly polished, with a clear point of view. More than you can say for most design AI."

Hugo Cornejo

Former VP of Design at Monzo and CPO at Packfleet

"Two hours in and I'd already prototyped my PRD"

Ethan R;

Entrepreneur

"Finally, design AI that anticipates the next move, concierge-style."

Dave Killeen

Field-CPO at Pendo, former VP of Product & Design at Productboard

"I had something I was genuinely proud of in an hour. That used to take days."

Lisa O'Brien

Head of Design, Primer. Former Head of Product & Design at Thriva

"Refreshingly polished, with a clear point of view. More than you can say for most design AI."

Hugo Cornejo

Former VP of Design at Monzo and CPO at Packfleet

"It finally feels like I'm in control of the AI, not the other way around."

Dave O'Dwyer

Director of Product

"Output quality outperforms anything I've tried"

Mateo R.

Product & Service Designer

"Two hours in and I'd already prototyped my PRD"

Ethan R;

Entrepreneur

"Finally, design AI that anticipates the next move, concierge-style."

Dave Killeen

Field-CPO at Pendo, former VP of Product & Design at Productboard

"Refreshingly polished, with a clear point of view. More than you can say for most design AI."

Hugo Cornejo

Former VP of Design at Monzo and CPO at Packfleet

"Output quality outperforms anything I've tried"

Mateo R.

Product & Service Designer

"I had something I was genuinely proud of in an hour. That used to take days."

Lisa O'Brien

Head of Design, Primer. Former Head of Product & Design at Thriva

"It finally feels like I'm in control of the AI, not the other way around."

Dave O'Dwyer

Director of Product

"Two hours in and I'd already prototyped my PRD"

Ethan R;

Entrepreneur

Private Beta

Design Agents

We're working closely with a small number of teams to introduce Design Agents. If you're curious about it, let's talk.