Stitch 網站設計 Prompt：SaaS 與作品集需求
Stitch 是 Google 的 AI 設計工具。先明確網站概念，再區分視覺設計和實際業務行為。下方虛構頁面是建議輸入，不是 Neruve 整合結果或 Stitch 實測輸出。
2026年10月8日核對。具體工具行為請以所用版本的官方文件為準。
從可用的頁面開始
先預覽可用的 HTML 頁面，再讓程式代理結合原始碼與配套 Prompt，練習這些方法。
Skills 維持免登入免費閱讀與複製。範本可公開預覽；原始碼下載與配套 Prompt 需要帳戶及相應購買權益或方案。 查看原始碼權限與價格
給 Stitch 一個具體網站任務
先寫受眾、頁面目標、區域順序與主要操作，再考慮裝飾。提供真實文案和有權使用的素材，缺少素材時標為佔位。明確要做登陸頁、作品集還是配套頁面，避免一個請求混入多個無關流程。
用 SaaS 登陸頁 Prompt 講清產品
說明問題、具體產品範例和使用步驟，僅採用核實過的功能與商業事實。Fieldnote 練習用虛構研究筆記和工作流程連結，不虛構客戶評價、使用者數量或可用註冊表單。
用專案證據寫作品集 Prompt
每個專案寫角色、限制和示意結果，手機上讓說明靠近對應圖片。缺少素材時保留佔位標示。Mira 是虛構的網站作品集，不是履歷、Notion 範本或真實設計師的推薦。
先改手機版面，再檢查實作
指定一個區域修改，其他部分保留既定方向。檢查窄螢幕閱讀順序、換行和操作名稱。概念進入網站專案後，再驗導覽、表單、響應式版面和內容；視覺概念本身不能證明正式環境行為。
可自行改寫的原創練習
以下 Neruve 原創範例保留英文，是建議輸入，不是工具實測輸出或付費範本 Prompt。使用前請替換虛構事實。
SaaS 網站概念
Design a website concept for Fieldnote, a fictional research-notes workspace.
Audience: small product teams. The page explains collect → compare → decide.
Create a warm-paper and ink direction with one realistic, clearly fictional note.
Sections: compact introduction, note specimen, three-step workflow and a final
link to the workflow. The primary action reads “Explore the workflow”.
Keep typography and button treatments consistent across the screens.
Create desktop and narrow-screen variants with readable copy and no horizontal
overflow. Do not add signup forms, prices, logos, testimonials or user counts.
This is a visual concept. Identify which interactions need implementation later.作品集網站概念
Create a website concept for Mira Chen, a fictional product designer.
Show three explicitly fictional projects. Each explains role, constraint and
illustrative outcome without fabricated business metrics or employer logos.
Use a restrained warm-neutral direction, clear project hierarchy and readable
image captions. The primary action is “View selected work”.
Show desktop and narrow-screen layouts; on mobile, keep project details near
their corresponding image. Use placeholder media labelled as placeholder.
Do not invent real contact details, awards or working application forms.限定範圍的手機版面調整
Refine only the mobile project section in this concept.
Keep the selected palette, typography, project order and desktop direction.
At 390 px, stack each project image, title and supporting text in reading order.
Keep controls easy to distinguish from captions. Do not shorten the project facts
or add new sections. Show the changed section and list what still needs to be
implemented and checked in the exported website.真實練習：用 Codex 生成 Fieldnote
Fieldnote 保留原創輸入、未經改寫的 Codex HTML，以及桌面和手機檢查紀錄。該次執行沒有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 實測。
真實練習：用 Codex 生成 Fieldnote常見問題
Neruve Prompt 會自動接入 Stitch 嗎？
本指南不聲稱自動整合。原創練習可自行改寫並輸入自己的工具。付費配套 Prompt 仍依資源與方案權限提供，相容性和最終網站要分別驗證。
瀏覽設計與配套 Prompt
Neruve 的公開目錄提供網站設計、可用的配套提示詞及 Skills 目錄。互動預覽無需登入；配套提示詞依項目與方案權益取得。本工作流程使用你自己的程式開發工具，無需公開的 Neruve 網站產生器。
官方參考資料
第三方工具和 Skill 屬於各自作者。連結用於參考，不表示合作關係或已包含相關使用權益。