Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot official · Google

site-md — Claude Code skill: what it does, how to install

Generates a .stitch/SITE.md constitution file from requirements or project briefs for the Stitch Build Loop.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code
Open on GitHub

What site-md does

The skill acts as a product owner and architect. It reads your project description and creates a dedicated .stitch/SITE.md file at the repository root. This document serves as long-term memory for coding agents, keeping project scope and visual direction aligned across build runs.

The generated constitution establishes directory layout. By default, it maps assets to site/public/ while new output sits in queue/ pending review. It also builds an initial sitemap starting with index.html and organizes backlog items into priorities.

You need a written brief before running it. Without input requirements, the agent cannot extract architecture rules or user flows. If the .stitch/ directory is missing, the skill creates it automatically.

What it helps with

  • synthesize a project constitution for the Stitch Build Loop
  • map out directory layout and file asset flow between queue/ and site/public/
  • parse requirements into a prioritized development backlog
  • establish core identity and visual direction inside .stitch/SITE.md

Example prompts for the agent

  • Read `requirements.md` and generate `.stitch/SITE.md`
  • Analyze `brief.txt` and create the project constitution for Stitch
  • Set up the `.stitch/SITE.md` architecture file from our project brief

How to install site-md

1Skills CLI (Vercel)

npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code

2Manually: put the files in place

~/.claude/skills/site-md/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/site-md/

From the same set15

The whole set →
design-md official google-labs-code Extracts screens and styles from Google Stitch via MCP to synthesize a semantic design system into a DESIGN.md file. Claude Code CX Codex Cursor +1 64,700installs enhance-prompt official google-labs-code Turns rough UI concepts into detailed, structured prompts for Google Stitch. Pulls tokens from DESIGN.md and formats colors, sections, and component keywords. Claude Code CX Codex Cursor +1 58,300installs stitch-loop official google-labs-code Guides agents through iterative website creation with Stitch MCP. The agent reads the baton file, generates UI, integrates the page, and prepares tasks for the next run. Claude Code CX Codex Cursor +1 56,300installs shadcn-ui official google-labs-code Helps discover, add, and customize shadcn/ui components in React projects. Useful when building interfaces with Tailwind CSS. Claude Code CX Codex Cursor +1 53,400installs stitch::react-components official google-labs-code Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs. Claude Code CX Codex Cursor +1 50,400installs remotion official google-labs-code Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen. Claude Code CX Codex Cursor +1 41,300installs taste-design official google-labs-code Generates agent-ready DESIGN.md files for Google Stitch screens. It sets strict rules for typography, palettes, and spring motion to avoid generic UI tropes. Claude Code CX Codex Cursor +1 20,100installs stitch::generate-design official google-labs-code Turns a text prompt or an image into a finished UI screen through Stitch MCP, then edits it with targeted prompts. Claude Code CX Codex Cursor +1 10,700installs

Similar

ralph-plan mastra-ai An interactive planning skill for Claude Code and coding agents. It helps build structured ralph-loop commands through guided dialog and codebase exploration. Claude Code CX Codex Cursor +1 2,600installs sprint-planning official anthropics This skill turns team availability, backlog priorities, and carryover into a sprint plan. Use it when setting goals, sizing work, or checking capacity. Claude Code CX Codex Cursor +1 3,100installs data-context-extractor official anthropics Extracts tribal knowledge from data analysts about your warehouse and auto-generates reference files. Runs in bootstrap mode for initial setup and iteration mode to add new domains. Claude Code CX Codex Cursor +1 3,100installs reference-core angular Explains the runtime architecture of Angular's packages/core. Use it when modifying Ivy instructions, dependency injection, or signals. Claude Code CX Codex Cursor +1 986installs repomix-explorer yamadashy Explores local and remote repositories through Repomix, helping you map an unfamiliar codebase, inspect patterns, and check project metrics. Claude Code CX Codex Cursor +1 1,900installs deck-refresh official anthropics Swaps figures across an existing presentation without rebuilding slides. For quarterly refreshes, earnings updates, comp rolls and rebased market data. Claude Code CX Codex Cursor +1 1,700installs setup-matt-pocock-skills Matt Pocock This skill configures a repository for Matt Pocock's engineering skills by setting its issue tracker, triage labels, and domain docs layout. Run it before using the other skills. Claude Code 1,052,851installs to-tickets Matt Pocock Turns a plan, spec, or conversation into small end-to-end tickets with explicit blockers. Use it to agree on the work breakdown before tickets go to a tracker. Claude Code 711,230installs

Questions about site-md

How do I install site-md in Claude Code?

Run npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code.

What does the site-md skill do?

It reads project briefs and synthesizes a .stitch/SITE.md file to guide coding agents on scope, structure, and backlog tasks.

What prerequisites are required before using site-md?

You need access to a project description or brief document. If you already created a project in Google Stitch, you can also provide your Stitch Project ID.

Source text

SKILL.md · Apache-2.0
---
name: site-md
description: Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
allowed-tools:
  - "Read"
  - "Write"
  - "web_fetch"
---

# Stitch SITE.md Skill

You are a Lead Product Owner and Architect. Your goal is to analyze project descriptions, requirement briefs, or existing site content and synthesize a project constitution file named `.stitch/SITE.md`.

## Overview

This skill helps you initialize and structure `.stitch/SITE.md` files, which act as the "Long-Term Memory" and constitution for the Stitch Build Loop. A properly structured `SITE.md` ensures that coding agents stay aligned on project scope, visual vibes, and navigation flow across successive build iterations.

## Prerequisites

- Access to a project requirements brief or description document.
- Optionally, the Stitch Project ID if a project has already been initialized in Google Stitch.

## The Goal

Generate a `.stitch/SITE.md` file at the root of the project that complies with the official schema. It must cover:
1. Core Identity (Name, Mission, Voice).
2. Visual Language Vibe.
3. Architecture & File Structure.
4. Sitemap (Current and target pages).
5. Roadmap Backlog (High, Medium, Low priority tasks).
6. Creative Freedom Guidelines.

## Guidelines and Structure

Analyze the input brief and translate it into the following sections:

### 1. Core Identity
- **Project Name**: Extracted from requirements.
- **Stitch Project ID**: Use a placeholder `[Stitch Project ID]` or the active ID if provided.
- **Mission**: A 1-2 sentence description of what the application/site does.
- **Target Audience**: Who the main users are.
- **Voice**: Tone adjectives (e.g. professional, playful, clean).

### 2. Visual Language
- **Vibe (Adjectives)**: Define a primary, secondary, and tertiary aesthetic keyword matching the project's visual direction.

### 3. Architecture & File Structure
- Map out the directory structure. Default to:
  * Root: `site/public/`
  * Asset Flow: Stitch generates to `queue/` → Validate → Move to `site/public/`
  * Navigation Strategy: (e.g., standard header links, shared navigation bar).

### 4. Live Sitemap
- Map out the files requested in the brief. Mark completed files as `[x]` and pending/target files as `[ ]`. At initialization, at least `index.html` should be listed.

### 5. The Roadmap (Backlog)
- Parse the requirements into concrete development tasks, grouped by priority:
  - **High Priority**: Core pages, basic layouts, primary user flows.
  - **Medium Priority**: Interactive features, forms, secondary pages.
  - **Low Priority**: Enhancements, visual assets, optional states.

---

## Action Plan

1. **Read input requirements**: Locate and read the project description document or text input.
2. **Draft the structure**: Map the project details directly into the `SITE.md` format.
3. **Write the file**: Write the output to `.stitch/SITE.md`. If the `.stitch/` directory does not exist, create it first.
4. **Validate**: Verify that all seven sections of the `SITE.md` template are present and properly formatted.

© google-labs-code · Apache-2.0 · google-labs-code/stitch-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor