テーマの抽出方法

Stitch のすべての画面は、Tailwind CSS の設定、Google Fonts のリンク、Material Symbols の参照を埋め込んだ完全な HTML ドキュメントを生成します。これらを取り出すことで、自分のプロジェクトでデザインシステムを再利用できます。

生の 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 が生成した土台から一貫性のあるデザインシステムを構築するための強力なパターンです。