Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Stitch Ui Designer
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
skill openclawclawhub Free
Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- a2mus
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Stitch UI Designer
This skill allows you to design high-quality user interfaces using Google Stitch.
Workflow
Follow this process to help the user design a UI: Setup (First Time Only) Check if the stitch server is configured in mcporter. If not, configure it: mcporter config add stitch --command "npx" --args "-y stitch-mcp-auto" Ensure the user is authenticated with Google Cloud (the tool may prompt for gcloud auth). Generate & Preview Ask for a description of the interface (e.g., "Login screen for a crypto app"). Use stitch.generate_screen_from_text with the prompt. Important: This returns a screenId. Immediately fetch the preview image using stitch.fetch_screen_image(screenId). Show the image to the user. Do not fetch the code yet. Iterate & Customize Ask the user for feedback on the preview. If changes are needed, use stitch.generate_screen_from_text again (potentially using stitch.extract_design_context from the previous screen to maintain style) or just refine the prompt. Show the new preview. Export Code Once the user approves the design ("This looks great"), fetch the code. Use stitch.fetch_screen_code(screenId). Present the HTML/CSS code or save it to a file as requested.
Tools (via mcporter)
Call these using mcporter call stitch.<tool_name> <args>: generate_screen_from_text Args: prompt (string), projectId (optional, usually auto-detected by stitch-mcp-auto) Returns: screenId, name, url Use this to start a design. fetch_screen_image Args: screenId (string) Returns: Image data (display this to the user). Use this to show the preview. fetch_screen_code Args: screenId (string) Returns: html (string), css (string), etc. Use this ONLY after user approval. create_project Args: name (string) Use if no project exists.
Tips
Project Context: stitch-mcp-auto tries to manage the project ID automatically. If you get errors about missing project IDs, ask the user to create or select a Google Cloud project first using create_project or by setting the GOOGLE_CLOUD_PROJECT env var. Preview First: Always prioritize the visual preview. Generating code for a bad design wastes tokens and time. Stitch MCP Auto: We use stitch-mcp-auto because it handles the complex Google auth setup more gracefully than the standard package.
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md