{"id":48288141,"url":"https://github.com/tygwan/stitchkit","last_synced_at":"2026-04-04T23:00:26.235Z","repository":{"id":346176239,"uuid":"1188811957","full_name":"tygwan/stitchkit","owner":"tygwan","description":"The ultimate Stitch toolkit for Claude Code — generate, sync, and export UI designs with Figma","archived":false,"fork":false,"pushed_at":"2026-03-22T20:56:53.000Z","size":1007,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-23T07:28:21.031Z","etag":null,"topics":["ai-design","claude-code","design-to-code","figma","google-stitch","mcp","stitch","ui-design"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tygwan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-22T16:08:00.000Z","updated_at":"2026-03-22T20:56:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tygwan/stitchkit","commit_stats":null,"previous_names":["tygwan/stitchkit"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/tygwan/stitchkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tygwan%2Fstitchkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tygwan%2Fstitchkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tygwan%2Fstitchkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tygwan%2Fstitchkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tygwan","download_url":"https://codeload.github.com/tygwan/stitchkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tygwan%2Fstitchkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31418285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-design","claude-code","design-to-code","figma","google-stitch","mcp","stitch","ui-design"],"created_at":"2026-04-04T23:00:14.057Z","updated_at":"2026-04-04T23:00:26.180Z","avatar_url":"https://github.com/tygwan.png","language":null,"funding_links":[],"categories":["stitchkit — Claude Code Plugin"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/icon.png\" alt=\"stitchkit\" width=\"120\" height=\"120\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003estitchkit\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eThe ultimate Stitch toolkit for Claude Code\u003c/strong\u003e\u003cbr\u003e\n  Design skills, prompt templates, and MCP setup for Google Stitch \u0026 Figma.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/tygwan/stitchkit/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/tygwan/stitchkit?style=flat-square\" alt=\"license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/tygwan/stitchkit\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/tygwan/stitchkit?style=social\" alt=\"stars\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/banner.png\" alt=\"stitchkit banner\" width=\"800\"\u003e\n\u003c/p\u003e\n\n---\n\n## What is stitchkit?\n\n**stitchkit** is a [Claude Code plugin](https://docs.anthropic.com/en/docs/claude-code) that supercharges your design workflow. It bundles:\n\n- **MCP Setup** — One-command installation of Google Stitch, Figma, and NanoBanana MCP servers\n- **Design Skills** — Expert prompting skills for generating UI designs with Stitch\n- **Prompt Templates** — Ready-to-use templates for 22+ web page types\n- **Agents** — Autonomous design exploration agent\n\n## Prerequisites\n\nYou will need API keys / tokens for the MCP servers bundled in this plugin:\n\n| MCP Server | Key Required | Where to Get It |\n|---|---|---|\n| **Google Stitch** | Google account (OAuth) or `GOOGLE_API_KEY` | [Google Cloud Console](https://console.cloud.google.com/) \u003e APIs \u0026 Services \u003e Credentials |\n| **Figma** | `FIGMA_ACCESS_TOKEN` | [Figma](https://figma.com) \u003e Settings \u003e Security \u003e Personal access tokens |\n| **NanoBanana** | `GOOGLE_AI_API_KEY` (or `GEMINI_API_KEY`) | [Google AI Studio](https://makersuite.google.com/app/apikey) (free) |\n\n\u003e The plugin auto-registers all three MCP servers when installed. You just need to provide your API keys as environment variables (see [Setup](#setup) below).\n\n## Installation\n\n```bash\nclaude plugin add tygwan/stitchkit\n```\n\nOr clone manually:\n\n```bash\ngit clone https://github.com/tygwan/stitchkit.git ~/.claude/plugins/stitchkit\n```\n\n## Setup\n\nAfter installing the plugin, configure your API keys so the MCP servers can authenticate.\n\n### Step 1: Get API keys\n\n| MCP Server | Key | How to get |\n|---|---|---|\n| **Google Stitch** | `GOOGLE_API_KEY` | [Google Cloud Console](https://console.cloud.google.com/) → APIs \u0026 Services → Credentials → Create API Key |\n| **Figma** | `FIGMA_ACCESS_TOKEN` | [Figma](https://figma.com) → Settings → Security → Personal access tokens → Generate |\n| **NanoBanana** | `GOOGLE_AI_API_KEY` | [Google AI Studio](https://aistudio.google.com/apikey) → Create API Key (free) |\n\n### Step 2: Set environment variables\n\nAdd to your shell profile (`~/.bashrc`, `~/.zshrc`) or project `.env` file:\n\n```bash\nexport GOOGLE_API_KEY=\"your-google-cloud-api-key\"       # Stitch\nexport FIGMA_ACCESS_TOKEN=\"figd_your-figma-token\"        # Figma\nexport GOOGLE_AI_API_KEY=\"your-google-ai-api-key\"        # NanoBanana\n```\n\n\u003e Only set the keys for the services you need. Stitch and NanoBanana share Google credentials but from different consoles.\n\n### Step 3: Verify with `/stitch-setup`\n\nRun the setup skill inside Claude Code to validate your configuration:\n\n```\n/stitch-setup\n```\n\nThis will check each MCP server's connectivity and guide you through any missing credentials.\n\n### Step 4: Start designing\n\n```\nDesign a SaaS analytics dashboard with KPI cards, revenue chart, and user segments donut chart\n```\n\nThe `stitch-design` skill auto-activates and handles the rest.\n\n\u003e **Tip:** If you only need a subset of the servers, you can skip the keys you don't need. Stitch works standalone with OAuth (no API key), and NanoBanana is optional if you don't need Gemini image generation.\n\n## What's Included\n\n### Skills\n\n| Skill | Type | Description |\n|---|---|---|\n| `/stitch-setup` | User-invoked | Set up Stitch, Figma, and NanoBanana MCP servers with guided configuration |\n| `stitch-design` | Auto-triggered | Activates on design requests — generates screens with optimized Stitch prompts |\n\n### Agents\n\n| Agent | Description |\n|---|---|\n| `design-explorer` | Autonomously generates 3-4 design alternatives for a concept, varying style/layout/color |\n\n### MCP Servers (auto-configured)\n\n| Server | Purpose |\n|---|---|\n| Google Stitch | AI-powered UI design generation, editing, variants, and HTML export |\n| Figma | Design file sync, component import, and design token extraction |\n| [Nanobanana](https://github.com/tygwan/nanobanana-mcp) | Gemini-powered image generation, editing, and smart model selection |\n\n### Prompt Templates\n\n22+ page type templates organized by category:\n\n- **Marketing** — Landing Page, Pricing, About/Team, Blog, Portfolio\n- **Product** — Dashboard, Settings, Onboarding, Chat, Feed\n- **Commerce** — Product Listing, Product Detail, Cart/Checkout, Order Tracking\n- **Utility** — Login/Auth, 404/Error, Search, Email/Newsletter\n- **Admin** — CMS, Data Table, Kanban, Calendar\n\n## Quick Start\n\n### 1. Design something\n\n```\nDesign a SaaS analytics dashboard with KPI cards,\nrevenue chart, and user segments donut chart\n```\n\nThe `stitch-design` skill auto-activates, creates a Stitch project, and generates your design.\n\n### 2. Generate images with NanoBanana\n\n```\nGenerate a hero illustration for my landing page — isometric 3D style,\npurple gradient background, floating dashboard elements\n```\n\n### 3. Explore alternatives\n\n```\nUse the design-explorer agent to create 4 variants\nof this landing page in different styles\n```\n\n### 4. Export\n\n```\nDownload the dashboard screenshot and export the HTML\n```\n\n## Plugin Structure\n\n```\nstitchkit/\n├── .claude-plugin/\n│   └── plugin.json              # Plugin metadata\n├── .mcp.json                    # Stitch, Figma \u0026 NanoBanana MCP auto-configuration\n├── skills/\n│   ├── stitch-design/\n│   │   ├── SKILL.md             # Design generation skill (auto-triggered)\n│   │   └── references/\n│   │       └── prompt-templates.md  # 22+ page type templates\n│   └── stitch-setup/\n│       └── SKILL.md             # MCP setup command (/stitch-setup)\n├── agents/\n│   └── design-explorer.md      # Multi-variant design exploration agent\n├── assets/\n│   ├── banner.png\n│   └── icon.png\n├── LICENSE\n└── README.md\n```\n\n## Examples\n\n### Generate a mobile app screen\n\n```\nDesign a fitness tracking app home screen with daily step count ring,\nheart rate monitor, weekly activity chart, and quick-start workout buttons.\nUse a dark theme with vibrant accent colors.\n```\n\n### Generate and compare variants\n\n```\nCreate a landing page for a meditation app, then generate 3 color variants\nexploring different moods: calm blue, warm sunset, forest green.\n```\n\n### Design-to-code workflow\n\n```\n1. Generate a checkout page design with Stitch\n2. Export the HTML/CSS\n3. Integrate into my React project\n```\n\n## Nanobanana — Gemini Image Generation\n\nstitchkit includes [nanobanana-mcp](https://github.com/tygwan/nanobanana-mcp), an MCP server for AI image generation powered by Google's Gemini models. It provides:\n\n- **Multi-model image generation** — Gemini 3.1 Flash (default), Gemini 3 Pro, and Gemini 2.5 Flash\n- **Smart model routing** — Automatically picks the best model based on your prompt\n- **Image editing** — Edit existing images with natural language instructions\n- **Aspect ratio control** — 1:1, 16:9, 9:16, 21:9, and more\n- **Conversation context** — Multi-turn image generation with chat history\n\n### Standalone installation\n\nIf you want nanobanana without the full stitchkit plugin:\n\n```bash\nclaude mcp add -s user nanobanana-mcp -- npx -y @ycse/nanobanana-mcp\n```\n\n\u003e **Requires** a `GOOGLE_AI_API_KEY` (or `GEMINI_API_KEY`) environment variable. Get a free key at [Google AI Studio](https://aistudio.google.com/apikey).\n\n### Acknowledgments\n\n- [zhongweili/nanobanana-mcp-server](https://github.com/zhongweili/nanobanana-mcp-server) — Original upstream project\n\n## Related Projects\n\n- [awesome-stitch-design](https://github.com/tygwan/awesome-stitch-design) — Curated list of 44+ Stitch design prompts with previews\n- [stitch-sdk](https://github.com/google-labs-code/stitch-sdk) — Official Google Stitch SDK\n- [stitch-mcp](https://github.com/davideast/stitch-mcp) — Community Stitch MCP server\n\n## Contributing\n\nContributions welcome! You can add:\n- New prompt templates in `skills/stitch-design/references/`\n- New agents in `agents/`\n- New skills in `skills/`\n\n## License\n\n[MIT](LICENSE) — Made with Stitch by [@tygwan](https://github.com/tygwan)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftygwan%2Fstitchkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftygwan%2Fstitchkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftygwan%2Fstitchkit/lists"}