react:components

react:components 技能總覽

react:components 的用途

react:components 技能會把 Stitch 設計轉成適用於以 Vite 為基礎的前端之模組化 React 程式碼。它是為了需要從截圖或 Stitch 中繼資料，走向可維護元件系統的代理而設計，不只是一次性的 JSX 輸出。

適合哪些人使用

如果你正在從 Stitch 建立或更新前端，並且在乎結構、token 一致性與驗證，就適合使用這個 react:components 技能。它特別適合前端工程師、設計轉程式碼流程，以及需要用可重複方式把視覺畫面對應成元件的代理。

為什麼它不一樣

和一般提示詞相比，react:components 內建了檢索步驟、在地檔案檢查、設計擷取備援，以及基於 AST 的驗證。這很重要，因為主要風險往往不只是「模型能不能寫 JSX」，而是「輸出能不能對齊設計、既有檔案與專案限制」。

如何使用 react:components 技能

安裝並啟用 react:components

先用這個目錄的標準技能指令安裝 react:components 技能，然後把它用在一個以 Stitch 為基礎的設計任務上。實務上，react:components 的安裝步驟只是入口，真正有價值的是你要提供畫面名稱、專案脈絡，以及像「React component system」或「Vite component set」這類輸出目標。

提供正確的輸入給技能

最好的提示會清楚寫出畫面名稱、Stitch 專案，以及你要的實作形狀。例如：「把我的 Podcast Stitch 專案中的 Landing Page 畫面轉成可模組化的 React 元件，供 Vite 使用，並保留版面與設計 token。」這比「幫我做成 React」更符合 react:components 的使用方式，因為它把頁面邊界、來源系統與輸出期待都說清楚了。

先讀這些檔案

先看 SKILL.md 了解流程，接著在產生程式碼前檢查 resources/stitch-api-reference.md、resources/architecture-checklist.md 和 resources/style-guide.json。用 examples/gold-standard-card.tsx 觀察預期的元件風格，並透過 scripts/validate.js 了解這個技能會拒絕什麼。如果你需要手動抓設計素材，scripts/fetch-stitch.sh 會示範支援的下載路徑。

能提升輸出的工作流程

這個技能預期的流程是：先做設計擷取，再檢查本機是否已有 .stitch/designs/{page}.html 和 .stitch/designs/{page}.png，接著才是程式碼生成與驗證。如果本機設計檔已存在，要先判斷是沿用還是從 Stitch 重新整理後再重新產生。這個選擇會影響 react:components 指南是沿用快取的設計狀態，還是採用最新的 MCP 來源。

react:components 技能 FAQ

react:components 只適用於 Stitch 專案嗎？

是，這是最合適的使用情境。react:components 技能是為 Stitch MCP 輸入最佳化，而不是給任意截圖或自由形式 mockup 使用。如果你只有模糊的產品想法，一般 React 提示詞可能就夠；如果你有 Stitch 中繼資料，並且想要穩定對應，這個技能會更合適。

仍然需要寫很詳細的提示嗎？

需要。這個技能可以減少設定工作，但還是要清楚寫出畫面名稱、專案名稱，以及希望的元件範圍。輸入越明確，react:components 技能就越不需要猜是要輸出單一元件、元件樹，還是可重用的模組集合。

這適合初學者嗎？

初學者也能用，但它預設你能辨識 props、版面配置和 design tokens 這些基本前端概念。如果你是新手，這個技能仍然有幫助，因為它把流程包進去了；只是當你能清楚描述目標 UI，並接受模組化 React 輸出時，效果會更好。

什麼情況下不該使用？

如果你的任務主要是內容撰寫、後端工作，或不是 Stitch 的 React 功能，就不適合用 react:components。當你只想要快速的視覺原型，且不需要遵守設計中繼資料、驗證或 token 對應時，它也不是好選擇。

如何改善 react:components 技能

提供設計脈絡，不只是名稱

品質提升最大的關鍵，是說清楚要轉換哪個畫面、哪些部分要保持不變、哪些部分可以做成可重用元件。例如：「保留桌面版 Stitch 畫面的間距與字體設定，但把重複的卡片拆成可重用元件」，這會比模糊的轉換需求更能讓 react:components 技能看出結構。

先講明會影響程式碼形狀的限制

一開始就要提到框架邊界、路由假設、素材處理方式，以及任何專案慣例。如果你需要 TypeScript、Tailwind，或與 Vite 相容的輸出，要直接說明。如果背景圖應該以資料形式處理，而不是硬寫進 CSS，也要把這個限制寫進提示，讓技能能沿用相同的 react:components 安裝假設與驗證路徑。

注意常見失敗模式

最常見的問題，是只要求 UI 程式碼，卻沒有提供足以精準對應的原始設計細節。另一個常見錯誤，是要求單一超大檔案，但這個技能其實是為模組化輸出設計的。第三個問題是忽略驗證規則，這會導致硬編碼顏色、缺少介面型別，或出現模板占位符，最後無法通過 architecture checklist。

用更精準的第二輪修正

如果第一次結果已經接近，但還不到可上線的程度，就直接指出具體問題來改：「把 header 和 card 拆成不同元件」、「把靜態文字改成 mock data」，或「把顏色對齊 style-guide.json」。這種 react:components 的回饋方式，比單純說「程式碼再好一點」更有效，因為它直接針對技能已經知道怎麼優化的結構下手。