According to AlphaMoat, as of 2026-09, Stitch Ui Designer has 2,706 downloads and 3 stars — ranked #3,945 of 5,078 AI skills overall, and #383 of 512 in Design & Media.

Installs

151

Downloads

2.7K

Stars

Overall Rank

#3,945

Top 78% overall · Top 75% in Design & Media

Platform	Installs	Downloads	Stars	Comments
ClawHub ↗	81	2.6K	2	-
SkillHub ↗	151	2.7K	3	—

Platforms count differently and update at different times.

What this skill does

The source workflow checks the Stitch server and Google Cloud authentication, generates a screen from text, immediately retrieves a preview for the user, and iterates based on feedback. HTML/CSS code is fetched only after the user approves the design. Generation uses an external service and Google account permissions, so check prompts for sensitive information before submission; code export or saving also requires user approval. Needs npx/mcporter and a configured Stitch MCP server; review and pin stitch-mcp-auto before setup, and use a dedicated least-privilege Google Cloud project/account. Confirm the project identifier instead of assuming auto-detection succeeded.

Profile published 2026-10-27

What you can do with it

Turn a UI brief into a screen preview
Iterate on layout and visual direction based on user feedback
Fetch HTML/CSS code after the design is approved

When to use it

When reviewing UI previews before deciding whether to adopt a design
When the user explicitly approves the design and Google Cloud authentication and content-sharing scope are confirmed

Example prompts

Generated from the skill’s documentation as examples; not results of actual runs.

Prepare a preview plan and questions for this UI brief. Do not connect to Stitch, call a generation tool, or export code.

Monthly Trend

Downloads2.7K

Stars3

The counting method changed in 2026-09: skills with the same name are now counted separately by author, and the full catalog is covered. Dashed lines show months before the change; they are not compared with later months, and no growth is computed across the change.

Month	Downloads	MoM	Stars
2026-09	2.7K	—	3
2026-08	2.5K	+5.5%	3
2026-07	2.3K	—	3
2026-05	1.9K	—	2
2026-03	1.3K	—	2

SKILL.md (original)

The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.

2.9 KB · ClawHub v1.0.0

---
name: stitch-ui-designer
version: 1.0.0
description: 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.
metadata:
  openclaw:
    emoji: 🎨
    requires:
      bins: ["npx", "mcporter"]
---

Show all (70 lines)


# 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:

1.  **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`).

2.  **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.

3.  **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.

4.  **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.