stitch-ui-design
使用 Google Stitch 建立 UI 設計
此技能協助使用者為 Google Stitch AI UI 設計工具撰寫有效的提示詞。它提供最佳實踐、範例提示詞和高階技巧，以生成專業的網頁和行動介面。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「stitch-ui-design」。 如何使用 Stitch 建立儀表板？
預期結果:
要使用 Google Stitch 建立儀表板，請遵循以下原則：
1. 具體明確：不要只說「建立儀表板」，而是使用「會員儀表板，包含課程模組網格、進度追蹤列和社群動態側邊欄，使用紫色主題和卡片式版面配置」
2. 定義視覺風格：包含配色方案、設計美學
3. 列出元件：指定每個需要的 UI 元素
範例提示詞：「分析儀表板，包含 KPI 卡片、趨勢折線圖、日期範圍選擇器和匯出按鈕。使用現代深色主題，資料視覺化使用強調色。」
正在使用「stitch-ui-design」。 行動應用程式提示詞應該包含什麼？
預期結果:
對於行動應用程式，請指定：
- 平台：iOS、Android 或跨平台
- 螢幕尺寸和響應式行為
- 導覽模式（標籤列、抽屜式、堆疊式）
- 平台原生元件
- 適合觸控的尺寸和間距
範例：「行動應用程式登入螢幕（iOS 風格），包含電子郵件/密碼欄位、社群登入按鈕（Google、Apple）和忘記密碼連結。使用 iOS 人機介面指南和 SF Pro 字體。」
安全審計
安全This is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
高風險問題 (3)
品質評分
你能建構什麼
學習 Stitch 提示詞基礎
新使用者想了解如何撰寫有效的提示詞給 Google Stitch，以生成他們的第一个 UI 設計
提升設計輸出品質
已嘗試過 Stitch 但得到通用結果的使用者，想學習特定技巧以獲得更好、更客製化的設計
建立多螢幕應用程式流程
建立完整應用程式的使用者，需要指導如何為多個連接螢幕和響應式版面撰寫提示詞
試試這些提示
建立一個 [元件類型]，包含 [特定功能]，使用 [配色方案] 主題和 [版面風格] 設計。
設計一個電子商務產品頁面，包含主圖圖庫、加入購物車按鈕、評論區和相關產品輪播。使用簡潔的極簡設計，搭配 [強調色] 和充足的留白。
為 [應用程式類型] 行動應用程式設計 [螢幕名稱] 螢幕。包含 [功能和元件清單]。使用 [設計風格] 搭配 [調色盤]。加入 [互動狀態] 和 [導覽元件]。
建立一個 [應用程式類型] 應用程式，包含： - [螢幕 1] 具有 [功能] - [螢幕 2] 具有 [功能] - [螢幕 3] 具有 [功能] 使用 [設計系統] 風格，並確保在行動裝置和桌面裝置上的響應式行為。
最佳實務
- 務必指定視覺細節：顏色、字體、間距和設計風格，以避免通用的 AI 輸出
- 對於多螢幕應用程式，明確列出每個螢幕 - Stitch 會在生成多個設計前確認
- 包含功能需求：按鈕動作、表單驗證、導覽模式和使用者流程
避免
- 使用模糊的提示詞如「建立一個不錯的登入頁面」- 會導致通用、無法使用的設計
- 忘記指定平台（行動裝置或桌面裝置），導致版面配置預期錯誤
- 未定義視覺風格，導致 AI 輸出隨機或不一致的美學效果