{
  "markdown": "# StitchFlow\n\n[![Node.js](https://img.shields.io/badge/node-%3E%3D22-339933?logo=node.js&logoColor=white)](https://nodejs.org/)\n[![Agent Skills](https://img.shields.io/badge/format-Agent%20Skills-7B61FF)](https://agentskills.io)\n[![Codex](https://img.shields.io/badge/OpenAI-Codex-10A37F)](https://developers.openai.com/codex/skills)\n[![Claude Code](https://img.shields.io/badge/Anthropic-Claude%20Code-D97706)](https://code.claude.com/docs/en/slash-commands)\n[![OpenClaw](https://img.shields.io/badge/OpenClaw-ClawHub-2563EB)](https://docs.openclaw.ai/tools/clawhub)\n[![GitHub Copilot](https://img.shields.io/badge/GitHub%20Copilot-plugin-000000?logo=github)](https://github.com/github/awesome-copilot)\n[![Gemini CLI](https://img.shields.io/badge/Gemini%20CLI-extension-4285F4)](https://google-gemini.github.io/gemini-cli/docs/extensions/)\n[![License](https://img.shields.io/badge/license-Apache%202.0-blue)](./LICENSE)\n\nTurn product briefs into Google Stitch projects, UI directions, design systems,\nHTML handoff artifacts, screenshots, and regression evidence from one portable\nagent workflow.\n\nStitchFlow is for teams that want Stitch to stay the design source of truth\nwhile agents handle the repeatable work around it: prompt shaping, variants,\n`DESIGN.md`, design-system application, local exports, audits, and release\nchecks.\n\n![StitchFlow live workflow demo](./assets/demo/stitchflow-true-live-demo.gif)\n\n## Why Use It\n\n- **One workflow across agent clients**: Codex, Claude Code, OpenClaw, GitHub\n  Copilot, Gemini CLI, and clients that understand `SKILL.md` / `AGENTS.md`.\n- **Native MCP first, local CLI fallback**: use live Stitch MCP tools when your\n  client exposes them; otherwise use the bundled `stitch-starter` toolkit.\n- **Local evidence by default**: save HTML, screenshots, `result.json`,\n  `variants.json`, export manifests, and audit reports under `runs/`.\n- **Design-system coverage**: upload `DESIGN.md`, create/list/update/apply\n  Stitch design systems, and regression-test the full design-system path.\n- **Handoff checks**: audit required text, unsupported claims, artifact quality,\n  responsive overflow, browser errors, and serious accessibility issues.\n- **Safe project downloads**: use the SDK downloader when possible and fall back\n  to short local paths when long Stitch screen titles hit filesystem limits.\n\n## Requirements\n\n- Node.js `>=22`\n- A Google Stitch API key in `STITCH_API_KEY`\n- At least one supported agent client or direct CLI usage\n\nSecrets stay local. The installer preserves an existing toolkit `.env`, and the\ntoolkit `.gitignore` excludes `.env`, `runs/`, and `node_modules/`.\n\n## Install\n\n```bash\ngit clone https://github.com/yshishenya/stitchflow.git\ncd stitchflow\nbash install.sh --target all\n```\n\nAdd your API key:\n\n```text\n${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/.env\n```\n\nThen restart your agent client.\n\nCanonical install paths:\n\n| Item | Path |\n| --- | --- |\n| Skill | `${AGENT_SKILLS_HOME:-$HOME/.agents}/skills/stitchflow` |\n| Toolkit | `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}` |\n| Legacy alias | `stitch-design-local` |\n\n## Quick Start\n\nIn Codex:\n\n```text\nUse $stitchflow to generate a premium desktop analytics dashboard for a product team, with a left sidebar, KPI cards, trend charts, and clean Tailwind-ready HTML.\n```\n\nIn Claude Code:\n\n```text\n/stitchflow landing page for a design tool aimed at enterprise product teams\n```\n\nIn OpenClaw:\n\n```text\nUse the stitchflow skill to explore three mobile-first UI directions for a checkout experience.\n```\n\nDirect CLI:\n\n```bash\ncd \"${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}\"\nnpm run generate -- --prompt \"A modern SaaS dashboard with sidebar and stat cards\"\nnpm run variants -- --prompt \"Explore three different visual directions\" --variant-count 3\nnpm run edit -- --prompt \"Make spacing calmer and strengthen the primary CTA\"\n```\n\nOutputs are written to:\n\n```text\n${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}/runs/<timestamp>-<operation>-<slug>/\n```\n\n## Native Stitch MCP\n\nWhen available, StitchFlow prefers native Stitch MCP tools such as\n`create_project`, `generate_screen_from_text`, `edit_screens`,\n`generate_variants`, `upload_design_md`, `create_design_system_from_design_md`,\n`apply_design_system`, and `get_screen`.\n\nCodex MCP example:\n\n```toml\n[mcp_servers.stitch]\nurl = \"https://stitch.googleapis.com/mcp\"\nenabled = true\n\n[mcp_servers.stitch.http_headers]\n\"X-Goog-Api-Key\" = \"<your Stitch API key>\"\n```\n\nRestart the client after changing MCP config.\n\n## CLI Toolkit\n\nRun these from `${STITCH_STARTER_ROOT:-$HOME/.agents/stitch-starter}`:\n\n| Command | Purpose |\n| --- | --- |\n| `npm run tools` | Inspect live Stitch MCP capabilities. |\n| `npm run list` | List projects and screens. |\n| `npm run generate` | Generate a new screen from text. |\n| `npm run edit` | Edit the latest or targeted screen. |\n| `npm run variants` | Generate screen variants. |\n| `npm run design-md` | Upload `DESIGN.md` and create a design system. |\n| `npm run design-system` | List/create/update/apply design systems. |\n| `npm run export-screen` | Export one screen as local evidence. |\n| `npm run export-screens` | Export an approved set of screen ids. |\n| `npm run export-project` | Export every project-listed screen. |\n| `npm run download-project` | Download `code.html` and referenced assets. |\n| `npm run site-design-audit` | Audit a completed website design handoff. |\n| `npm run regression:e2e` | Run the live StitchFlow regression. |\n| `npm run site-design:e2e` | Run the full live website design workflow. |\n\nUseful examples:\n\n```bash\nnpm run generate -- --prompt \"A cinematic product homepage\" --model-id GEMINI_3_1_PRO --timeout-ms 900000\nnpm run design-system -- --action apply --project-id 123 --asset-id 456 --screen-ids abc,def\nnpm run download-project -- --project-id 123\nnpm run download-project -- --project-id 123 --safe-download\nnpm run site-design-audit -- --file ./site-design-audit.json\nnpm run regression:e2e -- --timeout-ms 900000 --model-id GEMINI_3_FLASH\n```\n\nSee [Local CLI Usage](./skills/stitchflow/references/cli-usage.md) for every\nflag and workflow boundary.\n\n## Website Design Workflow\n\nFor full site work, StitchFlow does not jump from one generated homepage to\nimplementation. The workflow is:\n\n1. Capture product context and screen inventory.\n2. Generate or record logo directions when brand identity is open.\n3. Create at least five homepage candidates.\n4. Record the selected homepage screen id and rationale.\n5. Generate the remaining screens from the selected visual direction.\n6. Export approved screens and run `download-project`.\n7. Audit handoff coverage, artifacts, content truth, responsive behavior, and\n   accessibility.\n\nStart with [Site Design Delivery](./skills/stitchflow/workflows/site-design-delivery.md).\n\n## Validation\n\nLocal static checks:\n\n```bash\ncd stitch-starter\nnpm ci\nfor script in scripts/*.mjs; do node --check \"$script\"; done\nnpm run site-design-audit -- --file /path/to/site-design-audit.json --check-project false\n```\n\nInstaller check:\n\n```bash\nbash install.sh --target all --skip-smoke --skip-npm\n```\n\nLive release regression:\n\n```bash\ncd stitch-starter\nnpm run regression:e2e -- --timeout-ms 900000 --retries 1 --retry-delay-ms 3000 --model-id GEMINI_3_FLASH\n```\n\nThe full site-design E2E is intentionally heavier. It uses a parent/worker\nwrapper so `--total-timeout-ms` can kill a stuck live worker process:\n\n```bash\nnpm run site-design:e2e -- --brand \"Turnirka\" --timeout-ms 900000 --operation-timeout-ms 900000 --total-timeout-ms 3600000\n```\n\n## Documentation\n\n- [Skill instructions](./skills/stitchflow/SKILL.md)\n- [CLI reference](./skills/stitchflow/references/cli-usage.md)\n- [Prompt keywords](./skills/stitchflow/references/prompt-keywords.md)\n- [Text to design](./skills/stitchflow/workflows/text-to-design.md)\n- [Edit design](./skills/stitchflow/workflows/edit-design.md)\n- [Variants](./skills/stitchflow/workflows/variants.md)\n- [Project prototype export](./skills/stitchflow/workflows/project-prototype-export.md)\n- [Site design delivery](./skills/stitchflow/workflows/site-design-delivery.md)\n- [Toolkit README](./stitch-starter/README.md)\n- [Changelog](./CHANGELOG.md)\n\n## Distribution\n\n- Agent skill: `skills/stitchflow/SKILL.md`\n- Legacy alias: `skills/stitch-design-local/SKILL.md`\n- Codex/OpenClaw/Claude-compatible install: `install.sh`\n- GitHub Copilot plugin manifest: `.github/plugin/plugin.json`\n- Gemini CLI extension manifest: `gemini-extension.json`\n- Catalog checklist: [docs/catalog-submissions.md](./docs/catalog-submissions.md)\n\n## Release Policy\n\nStitchFlow uses semantic versioning. Backward-compatible feature additions are\nminor releases; backward-compatible fixes are patch releases; breaking workflow\nor CLI contract changes require a major release.\n\nEvery release should include:\n\n- updated manifests and skill metadata\n- a focused changelog entry\n- local static validation\n- live `regression:e2e` evidence\n- a GitHub release generated from the tag and checked against the changelog\n\n## Contributing\n\nRead [CONTRIBUTING.md](./CONTRIBUTING.md), open a focused pull request, and\ninclude validation evidence. Do not commit `STITCH_API_KEY`, `.env`, generated\n`runs/`, or `node_modules/`.\n\n## License\n\nApache-2.0. See [LICENSE](./LICENSE).\n",
  "bytes": 9285,
  "sha": "444765f2d984e9e8de72983b8e24c08ce02a9174dcca592f9d628e74a78d174d",
  "repo_slug": "yshishenya/stitchflow",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_yshishenya_stitchflow_0097ab33/readme"
}