Fixes #319: [Fleet Execution] Implement BasicDesign Script Example

packages/sdk/README.md

@@ -18,6 +18,10 @@ const imageUrl = await screen.getImage();
 
 `html` is a download URL for the screen's HTML. `imageUrl` is a download URL for the screenshot.
 
+## Examples
+
+- [Basic Design Generation](examples/basic-design) - Create a project and generate a design
+
 ## Install
 
 ```bash

packages/sdk/examples/basic-design/README.md

@@ -0,0 +1,22 @@
+# Basic Design Generation
+
+A simple, deterministic script demonstrating the most common workflow in the Stitch SDK: creating a project, generating a screen from a prompt, and retrieving the resulting HTML and image URLs.
+
+This is a Tier 1 (Script) example. It does not require an agent or LLM — it just makes API calls.
+
+## Prerequisites
+
+- Set your `STITCH_API_KEY` environment variable.
+
+## Run the Example
+
+```bash
+bun index.ts
+```
+
+## What it does
+
+1. Calls `create_project` to get a new project ID.
+2. Instantiates a domain class: `stitch.project(id)`.
+3. Calls `project.generate(prompt)` to create a UI.
+4. Calls `screen.getHtml()` and `screen.getImage()` to retrieve download URLs for the artifacts.

packages/sdk/examples/basic-design/index.ts

@@ -0,0 +1,32 @@
+import "../_require-key.js";
+import { stitch } from "@google/stitch-sdk";
+
+async function main() {
+  console.log("🚀 Basic Design Generation Example");
+
+  // 1. Create a project
+  console.log("📁 Creating a new project...");
+  const rawProject = await stitch.callTool<any>("create_project", { title: "Basic Design Example" });
+  const project = stitch.project(rawProject.name);
+  console.log(`✅ Project created: ${project.id}`);
+
+  // 2. Generate a screen
+  console.log("🎨 Generating a screen from a text prompt...");
+  const screen = await project.generate("A landing page for a modern coffee shop with a hero image, features section, and email signup form.");
+  console.log(`✅ Screen generated: ${screen.id}`);
+
+  // 3. Get outputs
+  const htmlUrl = await screen.getHtml();
+  const imageUrl = await screen.getImage();
+
+  console.log("\n✨ Results:");
+  console.log(`📄 HTML URL:  ${htmlUrl}`);
+  console.log(`🖼️  Image URL: ${imageUrl}`);
+
+  console.log("\nNext steps:");
+  console.log("- Download the HTML from the URL");
+  console.log("- Extract the Tailwind configuration block");
+  console.log("- Integrate the assets into your application");
+}
+
+main().catch(console.error);