超推指令
React 元件架構設計指令
一句話結論依需求快速產出可重用、符合 React 最佳實踐的元件骨架。
指令介紹
前端開發中，元件設計不良往往是日後難以維護的根源。這組指令能依你的功能需求、props 規格與樣式框架，產出符合 React 最佳實踐的元件骨架，包含型別定義、狀態管理建議與可重用性考量，讓你少走彎路、打好架構基礎。適合 React 初學者到中階開發者，也適合快速 prototyping。
適用情境
新元件快速開發重構既有元件前端 code review教學示範架構
懶人貼上・複製就能用
已填好範例複製就能直接用
▸ 想換成你自己的內容？點開填一填選填
AI 指令庫編輯的話
編輯實測指令要求「骨架加型別加狀態建議加效能提示加問題預警」，一次完成架構思考。 這組「React 元件架構設計指令」是 Prompts 編輯團隊實測整理的程式 AI 指令（Prompt），適合用 Claude、ChatGPT 執行。複製上方指令範本即可使用，免費、免註冊。
模型實測對照
提供完整 TypeScript 元件骨架，含 interface Props 定義、useMemo 優化排序邏輯、分頁狀態 useState 管理，以及 useCallback 包裝 onSort 避免不必要重渲染。附加提示：大量資料考慮虛擬捲動（react-virtual）。
實測（Claude）：型別安全加效能優化加重構建議，架構最紮實。
產出 React 元件骨架含 props 介面、state 設計與 Tailwind 樣式結構。
實測（ChatGPT）：快速可用，適合快速 prototyping。
為這個指令評分
常見問題
Vue 或 Svelte 也適用嗎？
可以，在樣式欄填入對應框架，指令邏輯通用。
沒有 TypeScript 也能用嗎？
可在 props 欄說明不用 TS，改輸出 PropTypes 或純 JS。
相關指令
猜你喜歡
每週 5 組最新台灣 AI 指令，寄到你信箱
免費訂閱電子報，第一時間收到新指令與實測心得；現在訂閱立即領取「50 組必備 AI 指令懶人包」。
訂閱成功！懶人包連結已寄到你的信箱，請收信。
不寄垃圾信，隨時可取消訂閱。