如何提取主题

每个 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 生成的基础上构建一致的设计系统。