KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

google-stitch-skill

★ 1 Open GitHub ↗

OpenClaw agent skill for Google Stitch UI design automation

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Google Stitch Agent Skill

> ⚠️ **This skill requires [OpenClaw](https://openclaw.ai).** It will not work with other AI assistants or agent frameworks.

Automate Google Stitch UI design via OpenClaw — generate, edit, and export AI-designed UIs using natural language.

## What It Does

- **Text → UI**: Describe any interface in natural language → get production-ready design
- **Image → UI**: Upload a sketch or screenshot → convert to polished UI
- **Vibe Design**: Design by mood, not wireframes
- **Export**: React app, Figma, .zip, AI Studio, Jules, MCP — all supported
- **Automates the full workflow**: prompt → generate → iterate → export → deploy

## Requirements

> **OpenClaw-only skill** — uses OpenClaw's `browser` tool, `exec` tool, and skill auto-discovery system. Not compatible with Claude Desktop, ChatGPT, or other platforms.

- [OpenClaw](https://openclaw.ai) installed and running
- Google account with access to [stitch.withgoogle.com](https://stitch.withgoogle.com)
- OpenClaw browser (`profile="openclaw"`) — no Chrome extension needed

## Installation

```bash
# Option 1: Clone into your skills directory
git clone https://github.com/VoidLight00/google-stitch-skill ~/.agents/skills/google-stitch

# Option 2: Manual
cp -r google-stitch-skill ~/.agents/skills/google-stitch
```

OpenClaw auto-discovers skills in `~/.agents/skills/`. No restart needed.

## Trigger Phrases

```
"스티치로 UI 만들어줘"
"랜딩 페이지 디자인해줘"
"앱 화면 Stitch로 생성해줘"
"스케치 사진 보내줄게, UI로 변환해줘"
"UI 디자인 내보내기 해줘"
```

## Recommended Export Pipeline

```
Stitch → "Stitch React 앱" export → .zip → npm install → vercel --prod
```
No external coding agent needed — Stitch generates React+Tailwind directly.

## Prompt Formula (Best Results)

```
Idea:    What to build (e.g., AI lecture platform landing page)
Theme:   Visual style (e.g., dark modern, purple-blue gradient)
Content: Sections needed (e.g., hero, 3 course cards, testimonials)
Image:   (Optional) reference screenshot or sketch
```

## Export Formats

| Format | Use Case |
|--------|----------|
| **Stitch React 앱** | 🏆 Deploy-ready React+Tailwind app |
| **.zip** | Full assets + HTML package |
| **인스턴트 프로토타입** | Shareable preview link |
| **클립보드에 코드 복사** | Quick HTML grab |
| **AI Studio** | Continue in Gemini AI Studio |
| **Jules** | Google coding agent handoff |
| **Figma** | Design file (Standard mode only) |
| **MCP** | MCP server integration |
| **프로젝트 요약** | Spec document extraction |

## Model Selection

| Model | Quota | Best For |
|-------|-------|----------|
| Gemini 3.0 Flash | ~350/month | Fast drafts, MVP |
| Gemini 3.1 Pro | ~200/month | High quality, image input |

## Files

```
google-stitch/
├── SKILL.md              # Core skill instructions (loaded by OpenClaw)
└── references/
    └── use-cases.md      # 12 use case examples with prompts
```

## License

MIT

---

Built for [OpenClaw](https://openclaw.ai) · By [@voidlight00](https://x.com/voidlight00)

google-stitch-skill

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README