Stitch Design Agent

Skill for an agent that integrates designs generated by Google Stitch directly into an app under development. Use this skill whenever the agent needs to: aut...

Security Scan

The skill's instructions match a legitimate 'fetch design and write component into a codebase' workflow, but registry metadata omits required credentials and the SKILL.md asks for overly-broad Google OAuth scope and direct writes/commands — these mismatches and privilege details are concerning.

Purpose & Capability

The SKILL.md clearly requires a STITCH_TOKEN (Google OAuth token / service account key) and describes writing code into the active project; however the registry metadata lists no required env vars, no primary credential, and no config paths. That mismatch (declared zero credentials vs. SKILL.md requiring STITCH_TOKEN and optionally service-account keys) is incoherent and should be corrected before trusting the skill.

Instruction Scope

Instructions direct the agent to read process.env.STITCH_TOKEN, call an external API, create files under src/components/*.tsx, scan the repo (grep), inject imports/JSX, and run build/lint commands (npx tsc, npm run lint). Those actions are consistent with the stated integration purpose but they grant the skill broad ability to modify the user's codebase and run tooling — the SKILL.md also implies handling service-account private material. The instructions access secrets and modify source; that is expected but high-impact and not reflected in metadata.

Install Mechanism

No install spec and no code files — instruction-only skill. This minimizes disk-side risk since nothing is downloaded or installed by the skill itself.

Credentials

The SKILL.md requires a STITCH_TOKEN and suggests requesting the OAuth scope https://www.googleapis.com/auth/cloud-platform. cloud-platform is very broad (access across GCP) and likely overprivileged for a single Stitch API; service-account flows imply private keys. These sensitive credentials are not declared in the registry metadata. Requesting wide-scope OAuth tokens without justification is disproportionate.

Persistence & Privilege

The skill is not marked always:true and does not claim to modify other skills or system-wide settings. It will write into the active project and run local build tools, which is expected for its purpose but should be an explicit, user-approved capability.

What to consider before installing

Before installing, confirm the skill's origin (homepage/owner) and ask the publisher to fix the metadata to list STITCH_TOKEN (and any service-account key) as required. Do not grant a token with the cloud-platform scope unless you understand and accept the broad GCP privileges; prefer a least-privilege scope if Stitch exposes one. Expect the agent to write files into your repo and run build/lint commands — run this in a sandbox or on a branch, review generated code before committing, and ensure CI/linters/tests gate commits. If using a service account, store keys securely and restrict them to only the APIs needed. If the publisher cannot justify the scopes/credentials or provide a trustworthy homepage/source, treat the skill with caution and avoid installing it in production environments.

Autonomous agent that requests designs from Google Stitch via its API and integrates them into the active project. The full flow is:

OAuth Token → Design Prompt → Stitch API → Generated Code → Project Integration

---

1. Prerequisites

Resource	Where to get it
Google OAuth 2.0 token with cloud-platform scope	Step 2 below
Active project (React / NestJS / any stack)	Must already be in the workspace
STITCH_TOKEN environment variable	.env file or agent secret

---

2. Obtaining the Google Stitch Token

Option A — User token (interactive flow)

# 1. Redirect the user to the authorization URL
GET https://accounts.google.com/o/oauth2/v2/auth
  ?client_id=<CLIENT_ID>
  &redirect_uri=<REDIRECT_URI>
  &response_type=code
  &scope=https://www.googleapis.com/auth/cloud-platform
  &access_type=offline

# 2. Exchange the authorization code for tokens
POST https://oauth2.googleapis.com/token
  grant_type=authorization_code
  &code=<CODE>
  &client_id=<CLIENT_ID>
  &client_secret=<CLIENT_SECRET>
  &redirect_uri=<REDIRECT_URI>

# Response:
# { "access_token": "ya29.xxx", "refresh_token": "1//xxx", "expires_in": 3599 }

Option B — Service Account (headless / CI flow)

# Generate a signed JWT with the service account key and exchange it:
POST https://oauth2.googleapis.com/token
  grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer
  &assertion=<SIGNED_JWT>

The agent must always read the token from the STITCH_TOKEN environment variable. Never hardcode tokens in source code.

---

3. Calling the Stitch API with a Design Prompt

Main endpoint

POST https://stitch.googleapis.com/v1/designs:generate
Authorization: Bearer {STITCH_TOKEN}
Content-Type: application/json

Request payload

{
  "prompt": "<natural language description of the desired design>",
  "output_format": "react_component",   // "html" | "react_component" | "vue_component"
  "theme": {
    "primary_color": "#3B82F6",
    "font_family": "Inter"
  },
  "context": {
    "framework": "react",
    "styling": "tailwind"              // "css_modules" | "tailwind" | "styled_components"
  }
}

Example of an effective prompt

"Create a financial summary card component with:
- Total balance prominently displayed at the top
- Small bar chart showing the last 7 days
- Two action buttons: Income and Expense
- Minimalist style with a soft shadow
- Dark mode compatible"

Expected response

{
  "design_id": "dsgn_abc123",
  "component_name": "FinancialSummaryCard",
  "code": "import React from 'react';\n\nexport const FinancialSummaryCard = ...",
  "assets": [],
  "metadata": {
    "tokens_used": 840,
    "framework": "react"
  }
}

---

4. Integrating the Design into the Active Project

4.1 — Save the component

// The agent must:
// 1. Extract `response.code` from the Stitch response
// 2. Determine the correct path based on the project structure

const componentName = response.component_name; // e.g. "FinancialSummaryCard"
const targetPath = `src/components/${componentName}.tsx`;

// 3. Write the file
fs.writeFileSync(targetPath, response.code, 'utf-8');

4.2 — Detect where to import it

The agent should scan the project to find the most logical integration point:

# Find files that are likely to use the new component
grep -r "Dashboard\|Overview\|Home\|Layout" src/pages --include="*.tsx" -l

4.3 — Insert the import and usage

// Add to the target file:
import { FinancialSummaryCard } from '../components/FinancialSummaryCard';

// And in the JSX:
<FinancialSummaryCard />

4.4 — Verify it compiles

npx tsc --noEmit        # Check TypeScript types
npm run lint -- --fix   # Auto-fix linting issues

---

5. Full Agent Flow (pseudocode)

async function stitchDesignFlow(userPrompt: string) {
  // Step 1: Read token
  const token = process.env.STITCH_TOKEN;
  if (!token) throw new Error('STITCH_TOKEN is not configured');

  // Step 2: Request design from Stitch
  const stitchResponse = await fetch(
    'https://stitch.googleapis.com/v1/designs:generate',
    {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: userPrompt,
        output_format: 'react_component',
        context: { framework: 'react', styling: 'tailwind' },
      }),
    }
  );

  const design = await stitchResponse.json();

  // Step 3: Save the component
  const filePath = `src/components/${design.component_name}.tsx`;
  fs.writeFileSync(filePath, design.code);

  // Step 4: Find the integration point
  const integrationTarget = await detectIntegrationPoint(design.component_name);

  // Step 5: Inject import and JSX
  await injectComponent(integrationTarget, design.component_name);

  // Step 6: Verify build
  execSync('npx tsc --noEmit');

  return { filePath, integrationTarget };
}

---

6. Error Handling

Error	Likely cause	Agent action
401 Unauthorized	Token expired or invalid	Ask the user for a new token or refresh automatically
400 Bad Request	Prompt too vague or invalid payload	Refine the prompt and retry
429 Too Many Requests	Rate limit reached	Wait 60s and retry
TypeScript errors	Generated component has incorrect types	Fix types manually or request regeneration
Import conflicts	Component name already exists in the project	Rename with a _v2 suffix

---

7. OpenClaw Configuration

# openclaw.config.yml (relevant section)
agents:
  stitch-designer:
    skill: stitch-design-agent
    env:
      STITCH_TOKEN: ${secrets.GOOGLE_STITCH_TOKEN}
    tools:
      - file_write
      - file_read
      - bash
      - web_fetch
    triggers:
      - "design a component"
      - "ask stitch for the design"
      - "integrate UI from stitch"
      - "generate the view for"
      - "create a screen for"

---

8. Important Notes for the Agent

• Always ask the user for a design prompt before calling Stitch if one was not explicitly provided.
• Tokens live for ~1 hour. If the token expires, use the refresh_token to renew it automatically before retrying.
• Check whether the generated component uses libraries not yet installed (e.g. recharts, framer-motion) and run npm install <pkg> before integrating.
• Respect the project architecture: in hexagonal/modular layouts, components belong in src/modules/<domain>/components/, not at the src/components/ root.
• If the project has its own design system, include in the prompt: "follow the app's existing design system and use its CSS tokens".
• If the generated code references hardcoded colors or sizes that conflict with the existing theme, replace them with the project's CSS variables before saving.