Setup & Installation
openclaw skills install @a2mus/stitch-ui-designer
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install stitch-ui-designer
What This Skill Does
Generates UI screens using Google Stitch via MCP, shows image previews before exporting code, and supports iterative refinement. The workflow separates design approval from code generation. Outputs HTML and CSS once the user accepts a design.
Showing image previews before generating code avoids exporting designs the user will reject, cutting wasted tokens and iteration cycles.
When to use it
- Generating a login screen mockup before writing any code
- Iterating on dashboard layouts without touching CSS
- Exporting an HTML/CSS starting point for a new app feature
- Exploring layout and color options for a mobile UI screen
- Prototyping a landing page design interactively
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: Design a login screen for a fintech app
AGENT
- 1Check if stitch server is configured in mcporter, configure it if missing
- 2Call stitch.generate_screen_from_text with the prompt, receive screenId
- 3Call stitch.fetch_screen_image with the screenId and display the preview to the user
- 4Ask for feedback, re-generate with a refined prompt if changes are needed
- 5Call stitch.fetch_screen_code once the user approves, return HTML and CSS
OUTPUT
HTML and CSS files for the approved login screen design
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.
npx (Node.js)mcporter CLIGoogle Cloud account with gcloud authentication