К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot официальный · Google

site-md — скилл для Claude Code: что делает и как установить

Скилл разбирает бриф или описание проекта и формирует файл .stitch/SITE.md для рабочего цикла Stitch Build Loop.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code
Открыть на GitHub

Что делает site-md

Скилл берёт на себя роль ведущего владельца продукта и архитектора. Он читает вводный документ с требованиями и создаёт в корне репозитория файл .stitch/SITE.md. Этот манифест служит долговременной памятью проекта: фиксирует имя продукта и визуальные ориентиры интерфейса.

Внутри формируется карта каталогов. По умолчанию исходники сайта размещаются в site/public/, а сгенерированные блоки сначала попадают в queue/ для проверки. Кроме структуры папок скилл расписывает карту страниц, начиная с index.html, и раскладывает задачи бэклога по приоритетам.

Для запуска нужен готовый файл с описанием проекта или бриф. Без такого исходника собрать структуру разделов не выйдет. Скилл использует инструменты Read, Write и web_fetch, а при отсутствии каталога .stitch/ создаёт его сам.

Какие задачи решает

  • составить архитектурный манифест проекта для цикла Stitch Build Loop
  • сформировать карту каталогов и структуру перемещения файлов из queue/ в site/public/
  • разложить требования брифа на бэклог задач по приоритетам
  • зафиксировать визуальный стиль и тональность интерфейса в .stitch/SITE.md

Примеры запросов агенту

  • Прочитай `requirements.md` и составь манифест `.stitch/SITE.md`
  • Изучи бриф в `brief.txt` и настрой структуру каталогов для Stitch
  • Сформируй `.stitch/SITE.md` на основе описания проекта

Как установить site-md

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/site-md/

Из того же набора15

Весь набор →
design-md официальный google-labs-code Скилл выгружает экраны из Google Stitch через MCP-сервер и собирает файл DESIGN.md с описанием дизайн-системы, цветов и компонентов. Claude Code CX Codex Cursor +1 64 700установок enhance-prompt официальный google-labs-code Превращает неточные идеи интерфейса в детальные промпты для Google Stitch. Скилл подтягивает дизайн-систему из DESIGN.md и расписывает структуру экрана. Claude Code CX Codex Cursor +1 58 300установок stitch-loop официальный google-labs-code Организует автономную сборку страниц через Stitch MCP. Агент берёт задачу из файла-эстафеты, создаёт экран, переносит код в проект и сразу пишет задание для следующей итерации. Claude Code CX Codex Cursor +1 56 300установок shadcn-ui официальный google-labs-code Помогает находить, добавлять и настраивать компоненты shadcn/ui в React-проектах. Пригодится для сборки интерфейсов с Tailwind CSS. Claude Code CX Codex Cursor +1 53 400установок stitch::react-components официальный google-labs-code Превращает дизайны Stitch в компоненты React с Vite. Также синхронизирует существующие компоненты с обновлёнными макетами. Claude Code CX Codex Cursor +1 50 400установок remotion официальный google-labs-code Собирает экраны проекта Stitch в ролик на Remotion с переходами, приближением и текстовыми подписями. Пригодится для демонстрации интерфейса по шагам. Claude Code CX Codex Cursor +1 41 300установок taste-design официальный google-labs-code Скилл формирует файл DESIGN.md для Google Stitch, задавая строгие дизайн-правила против шаблонных интерфейсов. Помогает настроить типографику, палитру и микроанимации для генерации экранов. Claude Code CX Codex Cursor +1 20 100установок stitch::generate-design официальный google-labs-code Скилл превращает текстовое описание или картинку в готовый экран интерфейса через Stitch MCP, а потом правит его точечными промптами. Claude Code CX Codex Cursor +1 10 700установок

Похожие

ralph-plan mastra-ai Интерактивный помощник для Claude Code и других агентов. Помогает по шагам составить чёткую команду для цикла ralph-loop через диалог и анализ кодовой базы. Claude Code CX Codex Cursor +1 2 600установок sprint-planning официальный anthropics Скилл собирает план спринта из целей, доступности команды и бэклога. Пригодится для оценки загрузки, переноса незавершённых задач и расстановки приоритетов. Claude Code CX Codex Cursor +1 3 100установок data-context-extractor официальный anthropics Скилл для извлечения знаний аналитиков о корпоративном хранилище данных и автоматического создания справочников. Работает в двух режимах: начальное заполнение схемы и добавление новых доменов. Claude Code CX Codex Cursor +1 3 100установок reference-core angular Объясняет архитектуру рантайма Angular в packages/core. Скилл нужен при работе с кодом движка Ivy, инжекторами и реактивностью. Claude Code CX Codex Cursor +1 986установок repomix-explorer yamadashy Исследует локальные и удалённые репозитории через Repomix, чтобы быстро разобраться в структуре, содержимом и повторяющихся паттернах кода. Claude Code CX Codex Cursor +1 1 900установок deck-refresh официальный anthropics Обновляет числа в готовой презентации без пересборки слайдов. Пригодится, когда нужно вкатить квартальные данные, новые earnings или пересчитанные метрики. Claude Code CX Codex Cursor +1 1 700установок setup-matt-pocock-skills Matt Pocock Скилл настраивает репозиторий для инженерных скиллов Matt Pocock: задаёт трекер задач, метки триажа и расположение доменной документации. Запустите его перед первым использованием остальных скиллов. Claude Code 1 052 851установок to-tickets Matt Pocock Разбивает план, спецификацию или переписку на небольшие сквозные задачи и отмечает, какие из них блокируют остальные. Пригодится, когда нужно согласовать порядок работы до публикации задач в трекере. Claude Code 711 230установок

Вопросы о site-md

Как установить site-md в Claude Code?

Выполните команду npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code.

Что делает скилл site-md?

Он анализирует текстовые требования и генерирует файл .stitch/SITE.md, который определяет цели, карту страниц и правила вёрстки для агентов кодинга.

Что требуется подготовить до вызова скилла?

Нужен доступ к документу с описанием проекта или брифу требований. Также можно передать идентификатор Stitch Project ID, если проект уже создан в сервисе Google Stitch.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой