OpenClaw

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.

a2mus0 来源安装数☆ 0 仓库 Starsv1.0.0

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install a2mus/stitch-ui-designer

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

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 approva...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/a2mus/stitch-ui-designer
Version: 1.0.0
Commit: ba506e23cb3b2d3ee15096fbfeb0ba792b52b281
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# 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 approva...

搜索