技能 stitch-ui-design

📦

stitch-ui-design

Name: stitch-ui-design
Author: sickn33

內容修訂 r1 安全 ⚙️ 外部命令

建立更好的 Google Stitch UI 提示詞

當提示詞缺乏細節時，Google Stitch 可能會產生泛用型設計。此技能提供針對畫面、流程、視覺風格、無障礙與交付的結構化提示詞指引。

支援: Claude Codex Code(CC)

🥉 79 銅級

Maintain this Skill? Claim it 🥉 79 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "stitch-ui-design" from https://skillstore.io/skills/sickn33-stitch-ui-design.md and its manifest at https://skillstore.io/api/skills/sickn33-stitch-ui-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/sickn33-stitch-ui-design.md 已簽名 manifest GET /api/skills/sickn33-stitch-ui-design/manifest 已簽名 lockfile GET /api/skills/sickn33-stitch-ui-design/lockfile

測試它

正在使用「stitch-ui-design」。我需要一個行動版外送美食首頁畫面。

預期結果:

一份結構化 Stitch 提示詞，包含搜尋、分類、餐廳卡片、底部導覽、視覺風格與行動版尺寸需求。

正在使用「stitch-ui-design」。讓我的 SaaS 儀表板提示詞更具體。

預期結果:

一份精修後的提示詞，列明指標、圖表類型、導覽、空狀態、載入狀態、響應式版面與無障礙檢查。

正在使用「stitch-ui-design」。在 Stitch 匯出後準備交付設計。

預期結果:

一份審查大綱，涵蓋語意結構、元件名稱、顏色 tokens、資產、響應式斷點與無障礙備註。

安全審計

安全

v4 • 2026/7/7 開啟版本化報告

Review found the static alerts are false positives from Markdown prompt examples and UI design terminology. The skill contains natural-language guidance for Google Stitch, with no executable commands, credential access, network calls, data exfiltration, or prompt injection attempt.

已掃描檔案

1,689

分析行數

複核項目

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/sickn33-stitch-ui-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-stitch-ui-design/security.svg)](https://skillstore.io/skills/sickn33-stitch-ui-design?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/sickn33-stitch-ui-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-stitch-ui-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/sickn33-stitch-ui-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

sickn33. (2026). stitch-ui-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-stitch-ui-design/audits/4

BibTeX 引用

@techreport{sickn33-sickn33-stitch-ui-design-2026,
  author = {sickn33},
  title = {stitch-ui-design security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-stitch-ui-design/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "stitch-ui-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-stitch-ui-design/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-stitch-ui-design:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

製作產品介面原型

在設計審查前，為登陸頁、儀表板或應用程式流程建立詳細的 Stitch 提示詞。

建立一致的 UI 畫面

定義顏色、字體排印、間距、元件、狀態與響應式規則，以取得一致的 Stitch 輸出。

準備設計交付

透過無障礙、語意結構、資產備註與開發者可用的規格，精修 Stitch 匯出目標。

試試這些提示

基本畫面提示詞

協助我為 [target user] 的 [screen type] 撰寫 Google Stitch 提示詞。包含區段、風格與平台。

多畫面應用程式流程

為具備 onboarding、home、detail 和 settings 畫面的 [product type] 建立 Stitch 提示詞。包含導覽與狀態。

設計系統提示詞

草擬一份 Stitch 提示詞，為 [brand] 定義 tokens、components、responsive rules、accessibility targets 和 interaction states。

正式交付審查

為 [project] 建立以交付為重點的 Stitch 提示詞，包含 semantic structure、assets、breakpoints、states 和 developer notes。

最佳實務

在每個提示詞中包含使用者情境、畫面目的、平台、版面、元件與視覺風格。
在匯出前要求載入、空白、錯誤、選取、停用與成功狀態。
透過註解以小步驟精修設計，而不是替換整個提示詞。

避免

避免省略受眾、內容、版面與視覺方向的模糊請求。
當設計必須支援多種裝置尺寸時，不要省略響應式行為。
不要在未經無障礙與程式碼審查的情況下，將匯出的 HTML 或 CSS 視為正式環境可用。

常見問題

此技能會直接使用 Google Stitch 嗎？

不會。它協助為 Google Stitch 撰寫更好的提示詞，但不會呼叫 Stitch 服務。

它能協助行動版與網頁 UI 嗎？

可以。它包含適用於行動應用程式、響應式網頁、儀表板、表單與 SaaS 介面的提示詞模式。

我可以搭配 Claude、Codex 或 Claude Code 使用嗎？

可以。此技能支援 Claude、Codex 和 Claude Code，用於提示詞草擬與審查。

它涵蓋無障礙嗎？

有。它會建議對比、觸控目標、鍵盤導覽、標籤與螢幕閱讀器支援的提示詞細節。

它會產生正式環境可用的程式碼嗎？

不會。它可以引導匯出後的清理，但開發者應審查產生的 HTML、CSS 與資產。

我應該提供哪些資訊？

請提供產品目標、目標使用者、畫面清單、品牌風格、平台、元件與必要的互動狀態。

開發者詳細資訊

作者

sickn33

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/stitch-ui-design

引用

9f814fc6a43fd99946f2da5e0df231c65a38bc76

維護新鮮度

2026/7/18

使用量

16 次下載 · 207 次瀏覽

檔案結構

📁 references/

📄 advanced-techniques.md

📄 prompt-examples.md

📄 README.md

📄 SKILL.md

stitch-ui-design

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

製作產品介面原型

建立一致的 UI 畫面

準備設計交付

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊