A professional Google Stitch SDK wrapper for Openclaw Skills that enables seamless AI-driven UI design generation and iteration.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install stitch-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install stitch-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Stitch Design?
Stitch Design is a powerful integration for Openclaw Skills that bridges the gap between conceptual prompts and high-fidelity UI screens. By leveraging the Google Stitch SDK, this skill allows developers and designers to generate desktop or mobile layouts, apply targeted visual edits, and explore creative variants within a structured, event-logged workflow.
The skill emphasizes design lineage and consistency. Rather than treating UI generation as a series of disconnected events, it uses a hub-and-spoke model where multiple screens can be derived from a central 'hub' design, ensuring that navigation, typography, and color schemes remain cohesive across an entire application concept.
Stitch Design Use Cases
- Rapidly prototyping landing pages and application screens from natural language descriptions.
- Iterating on existing UI designs by applying specific visual or structural edits.
- Generating multiple design variants (Refine, Explore, Reimagine) to present different creative directions.
- Exporting production-ready HTML, CSS, and high-resolution screenshots for developer handoff.
- Maintaining design consistency across multi-screen projects by deriving sub-pages from a primary hub screen.
How Stitch Design Works
- The user provides a design brief or functional requirement to the Openclaw Skills agent.
- The skill enriches the prompt with layout terms and visual tone keywords to maximize Google Stitch output quality.
- The CLI interacts with the Google Stitch API to generate the screen, which typically takes 1-5 minutes.
- Artifacts, including screen.html and screen.png, are automatically downloaded and stored in local immutable run directories.
- The agent displays a high-resolution screenshot to the user via the live API screenshot URL.
- Users can then name the screen with an alias for easy reference in future editing or variant generation sessions.
Stitch Design Setup
To get started with this skill, ensure you have Node.js 18+ installed and a valid API key from Google Stitch.
# Navigate to the scripts directory and install dependencies
cd scripts && npm install
# Set your API key as an environment variable
export STITCH_API_KEY='your_api_key_here'
Stitch Design Data Schema & Taxonomy
The skill manages data across three distinct layers to ensure reliability and traceability within the Openclaw Skills ecosystem:
| Layer | Location | Description |
|---|---|---|
| Artifacts | runs/ |
Immutable receipts of every operation containing HTML, PNG, and metadata. |
| Event Log | state/projects/ |
An append-only events.jsonl file tracking the chronological history of all designs. |
| Alias Pointers | state/projects/ |
A names.json registry mapping human-readable slugs (aliases) to unique Screen IDs. |
Stitch Design Advanced Features
- Design Lineage Tracking: Walk the edit/variant DAG (Directed Acyclic Graph) backwards to see the history of a specific design.
- Alias Registry: Assign persistent, slug-based names to screens to maintain context across different chat sessions.
- Custom Design Systems: Inject local design system markdown files into prompts using the
--design-systemflag for branded outputs. - Smart Recovery: Automatic retry logic and state reconstruction from event logs in case of connection timeouts or local corruption.
- Multi-Model Support: Switch between Gemini 3.1 Pro and Gemini 3.0 Flash to balance design quality and speed.
SKILL.md
Loading
Related Openclaw Skills
Baidu Search Skill
A powerful research skill that enables AI agents to perform Baidu searches and extract full-text content from Chinese web pages.
jpeng-code-executor
A secure, multi-language sandbox for executing code with strict resource limits and network isolation.
jpeng Web Scraper
A versatile web scraping engine supporting static HTML, JavaScript-rendered pages, and AI-driven data extraction.
QR Generator
A professional-grade QR code generation engine that supports custom styling, multiple data formats, and logo embedding.
Debate Learning Workflow
A high-rigor multi-agent framework designed to extract universal lessons through 20-40 rounds of evidence-backed debating and loophole analysis.
Math Expression
A high-performance mathematical engine that translates natural language requests into Wolfram Language expressions for symbolic and numeric solving.
Featured*
