據 AlphaMoat 統計,截至 2026-09,Stitch Ui Designer 累計下載 2,706 次、獲 3 個星標,在全部 5,078 個 AI 技能中排名第 3,945 位,在「設計創意」分類(512 個)中排名第 383 位。

累計安裝

151

累計下載

2706

星標

全站排名

#3,945

全站前 78% · 「設計創意」前 75%

平台	累計安裝	累計下載	星標	評論
ClawHub ↗	81	2591	2	-
SkillHub ↗	151	2706	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、呼叫產生工具或匯出程式碼。

月度資料趨勢

累計下載2706

星標3

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份	累計下載	環比	星標
2026-09	2706	—	3
2026-08	2478	+5.5%	3
2026-07	2349	—	3
2026-05	1934	—	2
2026-03	1309	—	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.