据 AlphaMoat 统计,截至 2026-09,Stitch Ui Designer 累计下载 2,706 次、获 3 个星标,在全部 5,078 个 AI 技能中排名第 3,945 位,在「设计创意」分类(512 个)中排名第 383 位。

累计安装

151

累计下载

2,706

星标

全站排名

#3,945

全站前 78% · 「设计创意」前 75%

平台	累计安装	累计下载	星标	评论
ClawHub ↗	81	2,591	2	-
SkillHub ↗	151	2,706	3	—

各平台的计数口径不同,统计时间不一致。

这个技能是做什么的

主文描述先检查 Stitch 服务与 Google Cloud 身份验证，提交文字说明生成 screen，立即获取预览供用户查看；根据反馈迭代，只有用户批准设计后才读取 HTML/CSS 代码。生成过程会调用外部服务并使用 Google 账户权限，提交前应检查 prompt 是否含敏感信息；代码导出或保存需要用户批准。需 npx/mcporter 和已配置 Stitch MCP；设置前审阅固定 stitch-mcp-auto，使用专用最低权限 Google Cloud 项目/账户，明确项目标识而非假定自动检测成功。

资料发布于 2026-10-27

可以用来做什么

将界面需求转成屏幕设计预览
根据用户反馈迭代布局和视觉方案
在设计获批后获取 HTML/CSS 代码

什么时候用

需要先比较界面预览再决定是否采用设计时
用户明确批准设计，并已确认 Google Cloud 身份验证与内容共享范围时

示例提示词

以下是根据技能文档生成的示例,不代表实际运行结果。

先为这个界面需求生成预览计划和待确认问题；不要连接 Stitch、调用生成工具或导出代码。

月度数据趋势

累计下载2,706

星标3

2026-09 起统计方法调整:同名技能按作者分别统计,并覆盖全部技能。图中虚线为调整前的月份,与之后的数据不直接比较,也不计算跨越调整的增长。

月份	累计下载	环比	星标
2026-09	2,706	—	3
2026-08	2,478	+5.5%	3
2026-07	2,349	—	3
2026-05	1,934	—	2
2026-03	1,309	—	2

SKILL.md 原文

以下是作者发布的原始文件,按纯文本显示,本站未做修改或审核;其中的链接不可点击,命令请核实后再运行。抓取于 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"]
---

展开全部(共 70 行)


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