如何擷取主題

每一張 Stitch 螢幕都會產生完整的 HTML 文件，內嵌 Tailwind CSS 設定、Google Fonts 連結與 Material Symbols 參照。你可以擷取這些內容，在自己的專案中重複使用這套設計系統。

擷取原始 HTML

先從螢幕取得 HTML 內容：

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();

擷取 Tailwind 設定

Stitch 會把 Tailwind 設定內嵌在 id="tailwind-config" 的 <script> 標籤中：

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

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

這會給你完整的 tailwind.config 物件——包含該設計專屬的色彩、字型、間距與邊框圓角權杖。

擷取 Google Fonts

取出 Google Fonts 的 <link> 標籤，就能知道設計使用了哪些字型：

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

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

擷取 Material Symbols

如果設計使用了 Material Design 圖示，可以將它們解析出來：

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(", ")}`);

全部組合起來

把這些技巧組合成設計權杖擷取管線：先產生一張具有特定美學風格的螢幕，再擷取權杖：

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`

這是從 AI 產生的基礎打造一致設計系統的強大模式。