Investigate Google Stitch MCP integration

[nille]

Overview

Investigate whether Google Stitch MCP should be integrated into shipkit.

What it is: "Stitch generates UIs for mobile and web applications, making design ideation fast and easy." - Google AI Labs product with MCP server support.

Context

Google Stitch appears to be:

• Official Google product (AI Labs)
• UI/UX generation tool
• Has MCP server integration
• Targets mobile and web app design

Questions to Answer

1. Capabilities

• What can Stitch MCP do?
• Generate UI mockups from descriptions?
• Export to code/Figma/designs?
• How does it compare to existing design tools?

2. Setup Requirements

• API Key: Google Cloud? Free tier?
• Prerequisites: Node.js, Google Cloud account?
• Cost: Free or paid? Usage limits?
• Setup complexity: Easy or involved?

3. Use Cases

• Who benefits?

  • Frontend developers building UIs
  • Product designers prototyping
  • Full-stack devs needing quick mockups

• When is it useful?

  • Starting new projects (wireframes, mockups)
  • Iterating on designs
  • Generating UI variations quickly

• How often would typical user need this?

  • Daily (frontend-focused)?
  • Weekly (occasional UI work)?
  • Rarely (backend/infrastructure devs)?

4. Quality Assessment

• Official Google product: ✅ High credibility
• Maintained: Active or abandoned?
• Production-ready: Beta or stable?
• Community: Usage, feedback, docs quality?

5. Integration Strategy

Where does it belong?

Option A: Core
✅ Official Google product (credibility)
❌ Niche (only frontend/design work)
❌ Requires API key + setup
❌ Not everyone does UI development

Option B: Experimental
✅ New/cutting-edge (Google AI Labs)
✅ Users can try it out
❓ Might be too mature for experimental

Option C: Advanced
✅ Specialized for UI/UX developers
✅ Opt-in for those who need it
✅ Matches browser-test pattern (domain-specific)
✅ Likely best fit

Option D: Creative/Design Layer (new layer?)
❓ Could we add a "Creative" layer alongside Core/Experimental/Advanced?

• UI/UX tools (Stitch, design systems)
• Image generation (Nano-Banana)
• Asset creation tools

Option E: Offered During Install

Would you like to install any MCP servers?

Essential:
  [ ] Brave Search
  [ ] GitHub

Creative/Design:
  [ ] Google Stitch - AI UI generation
      Requires: Google Cloud API key
      Use case: Generate UI mockups, prototypes

6. Integration Tasks

If we include it:

• Test Stitch MCP with Claude Code
• Document setup process (API key, prerequisites)
• Add to docs/mcp-servers.md
• Add to seed/mcp.sample.json
• Create wrapper skill? (e.g., /design-ui)
• Decide on layer placement
• Update /install skill to offer it

Comparison to Similar MCPs

MCP	Layer	Rationale
Playwright	Advanced (opt-in)	Browser automation, niche, complex setup
Nano-Banana	TBD (#48)	Image generation, niche, requires API key
Stitch	?	UI generation, niche, Google product, API key

Pattern: Domain-specific MCPs → Advanced layer + offered during install

Recommendation Needed

After investigation:

Placement: [Core / Experimental / Advanced / Creative (new) / Skip]

Rationale:
- [Use case analysis]
- [Setup friction assessment]
- [User benefit vs complexity]

Implementation:
- [Add to which layer]
- [Offer during install? Y/N]
- [Create wrapper skill? Y/N]
- [MCP config example]

Related Issues

• Investigate UI-UX-PRO-MAX skill for installation flow #47 - UI-UX-PRO-MAX skill (UI/UX reference database)
• Investigate Nano-Banana MCP for AI image generation #48 - Nano-Banana MCP (image generation)

Potential: Bundle all creative/design tools into unified offering?

Next Steps

1. Test Stitch MCP setup and usage
2. Assess API key procurement and cost
3. Evaluate real-world usefulness
4. Decide on layer placement
5. Write integration plan