SaaS Dashboard
This tutorial walks you through designing a web-based SaaS dashboard with charts, data tables, and sidebar navigation. You will use a combination of text prompts and variants to create a professional data-heavy interface.
Step 1: Define the Dashboard Structure
Start with a detailed prompt: "A web SaaS analytics dashboard with a dark sidebar navigation on the left (logo, menu items for Dashboard, Analytics, Users, Settings), a top header bar with search and user avatar, and a main content area with KPI cards at the top and a large line chart below. Professional dark theme with blue accents."
Step 2: Generate the Main View
Press Enter and let Stitch generate the dashboard. The AI will create a structured layout with the sidebar, header, KPI cards, and chart area. Review the proportions — the sidebar should be roughly 240px wide, the KPI cards should be in a row, and the chart should fill the remaining space.
Step 3: Add a Data Table Section
Select the generated screen and prompt: "Add a data table below the chart showing recent transactions with columns for Date, Customer, Amount, Status, and Action. Include pagination controls." Stitch will extend the design with the table component.
Step 4: Create the Analytics Sub-Page
Generate a variant with: "Show the Analytics page of this dashboard with multiple charts — a bar chart for monthly revenue, a pie chart for traffic sources, and a line chart for user growth. Keep the same sidebar and header." This gives you a second page in the same design system.
Step 5: Try Experimental Mode
Switch to Experimental Mode (Gemini 2.5 Pro) and regenerate your best dashboard screen. Compare the quality — Pro mode often produces more refined typography, better spacing, and more realistic chart visualizations. Use this for the final version.
Step 6: Export and Develop
Export the HTML/CSS for both pages. Export DESIGN.md to capture your dark theme tokens (background colors, text colors, accent blue). Use these as the foundation for building the dashboard in your preferred framework.
What You Built
You have a professional SaaS dashboard with two pages (overview and analytics), featuring KPI cards, charts, data tables, and consistent dark-themed navigation.