成果物のダウンロード方法

Stitch のすべての画面は、2 つのダウンロード可能な成果物を生成します。HTML ファイル（インラインの Tailwind CSS を含む完全なドキュメント）と、スクリーンショット画像です。SDK がダウンロード URL を提供してくれるので、あとは取得して保存するだけです。

ダウンロード URL を取得する

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

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

const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

HTML をディスクに保存する

import fs from "fs/promises";

const response = await fetch(htmlUrl);
const html = await response.text();
await fs.writeFile(`${screen.id}.html`, html);

ファイルをブラウザで開いてみてください。Tailwind クラスが適用された、完全にレンダリングされたデザインが表示されます。

スクリーンショット画像を保存する

画像はバイナリデータとして返ってきます。text() の代わりに arrayBuffer() を使います：

const imgResponse = await fetch(imageUrl);
const buffer = await imgResponse.arrayBuffer();
await fs.writeFile(`${screen.id}.jpeg`, Buffer.from(buffer));

プロジェクト内のすべての画面を一括ダウンロードする

import fs from "fs/promises";
import path from "path";

const outDir = "./designs";
await fs.mkdir(outDir, { recursive: true });

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

for (const screen of screens) {
  const htmlUrl = await screen.getHtml();
  if (htmlUrl) {
    const res = await fetch(htmlUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.html`), await res.text());
  }

  const imgUrl = await screen.getImage();
  if (imgUrl) {
    const res = await fetch(imgUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.jpeg`), Buffer.from(await res.arrayBuffer()));
  }
}

console.log(`Downloaded ${screens.length} screens to ${outDir}`);