更换组件样式怕破坏交互？先列状态对照
在 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