How to extract themes

Every Stitch screen generates a complete HTML document with an embedded Tailwind CSS configuration, Google Fonts links, and Material Symbols references. You can extract these to reuse the design system in your own project.

Fetch the raw HTML

Start by getting the HTML content from a screen:

import { stitch } from "@google/stitch-sdk";

const project = (await stitch.projects()).at(0);
const screen = (await project.screens()).at(0);

const htmlUrl = await screen.getHtml();
const response = await fetch(htmlUrl);
const html = await response.text();

Extract the Tailwind config

Stitch embeds the Tailwind configuration in a <script> tag with id="tailwind-config":

const configMatch = html.match(/<script id="tailwind-config">([\s\S]*?)<\/script>/);

if (configMatch) {
  console.log("Tailwind config:");
  console.log(configMatch[1].trim());
}

This gives you the full tailwind.config object-colors, fonts, spacing, and border radius tokens specific to that design.

Extract Google Fonts

Pull out the Google Fonts <link> tags to know which fonts the design uses:

const fontLinks = html.match(/<link[^>]*fonts\.googleapis\.com[^>]*>/g) || [];

for (const link of fontLinks) {
  console.log(link);
}

Extract Material Symbols

If the design uses Material Design icons, parse them out:

const matches = Array.from(
  html.matchAll(/<span[^>]*class="[^"]*material-symbols-[^"]*"[^>]*>([^<]+)<\/span>/g)
);

const icons = new Set(matches.map(m => m.at(1).trim()));
console.log(`Icons used: ${[...icons].join(", ")}`);

Putting it all together

Combine these techniques into a design-token extraction pipeline. Generate a screen with a specific aesthetic, then extract the tokens:

const screen = await project.generate("A modern SaaS pricing page with a blue theme");
const url = await screen.getHtml();
const html = await (await fetch(url)).text();

// Now extract tailwind config, fonts, and icons from `html`

This is a powerful pattern for building a consistent design system from AI-generated foundations.