DESIGN.md 與 SKILL.md：視覺上下文和工作流程
視覺上下文檔案描述專案外觀，Skill 描述可重複使用的操作流程，需求描述目前改動。這樣可以跨頁面保持一致方向，同時保留不同頁面需要的版面。
2026年10月8日核對。具體工具行為請以所用版本的官方文件為準。
從可用的頁面開始
先預覽可用的 HTML 頁面，再讓程式代理結合原始碼與配套 Prompt，練習這些方法。
Skills 維持免登入免費閱讀與複製。範本可公開預覽；原始碼下載與配套 Prompt 需要帳戶及相應購買權益或方案。 查看原始碼權限與價格
DESIGN.md 該寫什麼？
Google 的 DESIGN.md 描述視覺識別，規範目前為 alpha。自己的上下文應說明顏色角色、字體、間距、控制項與響應式行為，並解釋選擇與受眾的關係。下方範例是一般 Markdown，不是通過 Google token 規範驗證的檔案。
SKILL.md 該寫什麼？
Skill 放可重複執行的流程：何時審查、查看什麼、保留哪些行為、如何報告失敗。專案事實和本次需求放在流程之外。下方純操作說明展示這種分工，不是已打包的第三方 Skill。
和具體網站需求一起使用
寫明頁面、訪客、主要操作、真實內容與受保護行為。明確要求 Agent 閱讀視覺上下文和所選流程，修改前重述適用限制。檔名相同不代表各工具都會自動載入或強制執行。
網站變化時維護有效上下文
接受改動後更新受影響的設計說明，並記錄實際檢查。共享控制項保留穩定規則，各區域可以採用不同版面。行為和無障礙要求還要在原始碼與瀏覽器中驗證，僅有文字不能強制落實。
可自行改寫的原創練習
以下 Neruve 原創範例保留英文，是建議輸入，不是工具實測輸出或付費範本 Prompt。使用前請替換虛構事實。
視覺識別說明
# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.
This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.僅含操作說明的審查 Skill
---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---
1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.
This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.真實練習：用 Codex 生成 Fieldnote
Fieldnote 保留原創輸入、未經改寫的 Codex HTML，以及桌面和手機檢查紀錄。該次執行沒有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 實測。
真實練習：用 Codex 生成 Fieldnote常見問題
Claude Code、Codex 和 Stitch 都能使用嗎？
依各工具文件選擇格式和載入方式。一般上下文可作為文字提供；格式轉換、自動探索與擴充欄位要分別檢查。本指南不承諾 Neruve 的 DESIGN.md 匯出或自動整合。
瀏覽設計與配套 Prompt
Neruve 的公開目錄提供網站設計、可用的配套提示詞及 Skills 目錄。互動預覽無需登入；配套提示詞依項目與方案權益取得。本工作流程使用你自己的程式開發工具，無需公開的 Neruve 網站產生器。
官方參考資料
第三方工具和 Skill 屬於各自作者。連結用於參考，不表示合作關係或已包含相關使用權益。