更換元件樣式怕壞互動？先列狀態對照
在 Devin 提供元件副本、既有樣式與畫面，依下方測試流程製作樣式轉換與互動驗收表，再由人核對；需另備相符工具與權限。
執行環境與使用方式
AI／軟體
Devin
在哪裡操作
Devin 網頁工作區；先選測試專案，在 Ask 規劃，需改檔才轉 Agent。
如何開始
- 登入 Devin 網頁工作區，選擇測試專案；先用 Ask 討論計畫，只有獲准執行時才轉到 Agent。
- 只提供元件副本、既有樣式與畫面與下方提示詞；先確認範圍，再允許必要操作。
- 核對實際產出的樣式轉換與互動驗收表；記下未執行或無法驗證的部分。
準備與方案條件
需要 Devin 使用權、獲准的測試資料及相符執行環境；寫檔與終端命令須在允許範圍內。具體準備：提供授權元件副本、目標樣式系統、設計規範和基準畫面。
提示詞移植限制
文字要求可改給其他程式助理；但檔案權限、執行環境、測試工具及整合須另外設定，不能只換工具名稱就視為相容。
使用限制
本步先讀資料並提出建議，不授權代理自動改檔或執行命令；若後續要測試，另核准命令與執行環境。
環境資料來源
- https://docs.devin.ai/get-started/first-run · 2026-10-19
適用情境 / When to use
在 Devin 提供元件副本、既有樣式與畫面，依下方測試流程製作樣式轉換與互動驗收表，再由人核對；需另備相符工具與權限。 原文將測試能力與專案慣例視為重要條件。
步驟 / Steps
- 提供授權元件副本、目標樣式系統、設計規範和基準畫面。
- 提出逐元件轉換計畫，沿用既有色彩與樣式，不重新設計。
- 核對各狀態、鍵盤操作、語意、焦點與響應式行為。
提示詞 / Prompt
把[元件副本]由[現有樣式系統]轉到[目標系統]前，先列樣式、狀態及互動對照。沿用[既有設計規範／色彩／字體]，不要自選主題。經核准才在分支實作，以[現有測試與人工驗收]核對外觀、鍵盤操作和焦點行為。列出不支援及未測項目，不自動合併或部署。
留意事項 / Cautions
- 不要僅以截圖判定功能一致。
- 不要為了過測試刪除互動或可及性要求。
來源限制 / Evidence limits
團隊經驗不代表任意元件可無損轉換，外觀相似也不能證明可及性。
流程說明 / Workflow note
以下步驟與提示詞為本站原創、未實測的練習設計，並非原作者逐字流程；來源結果不代表練習保證成功。
原始工具組合 / Original tool stack
Devin； React MUI； Tailwind； 既有樣式； 單元測試
來源發表日期：2024-12-10
來源查核日期：2026-10-19