我用华为云 CodeArts 写前端：一次 AI 辅助开发的真实体验

缘起

作为一个经常和前端打交道的开发者，我对"AI 编程助手"一度是半信半疑的——演示视频里行云流水，真到自己的项目里，往往生成的代码要么跑不起来，要么风格完全不对路。直到我把一个小型 Vite 演示项目（我把它叫做 WebTest）整个搬到华为云 CodeArts IDE 里，配合码道代码智能体，才真正体会到"人机协作"是种什么感觉。

环境准备出乎意料地简单

项目本身很轻：Node v22 + npm，Vite 6 做构建，Vitest + happy-dom 做单元测试，外加一个纯前端的暗色玻璃拟态页面。打开 CodeArts IDE、进入智能体模式，几乎没费什么力气就把 dev server 跑了起来。比较意外的是它的内置浏览器——不是弹出一个外部 Chrome，而是直接在 IDE 内以 [在浏览器中预览] 的方式呈现页面，省去了来回切窗口的麻烦。对于我这种习惯"改一行、看一眼"的人来说，这个细节非常加分。

让 AI 真正"上手"项目

真正让我改观的是让它处理具体任务。我让它给页面写单元测试，它没有笼统地塞一堆断言，而是先读了现有代码结构，知道测试栈是 Vitest，随后针对计数器按钮、文本渲染等写出了 5 条能跑通的用例。跑一遍 npm test，5/5 全绿；再 npm run build，构建通过。“生成—验证—回归” 这个闭环，它做得比我想象中扎实。

更有意思的是 UI 优化。我调用 frontend-design 技能，让它按 Linear Aesthetic 风格打磨页面元素。它不是一次性推翻重来，而是多轮小步迭代：先把卡片容器做出渐变光边和顶部光晕，再逐轮细化数据面板、功能列表、交互演示区的输入框……每一轮都以"测试通过 + 构建成功"收尾。久而久之，页面从"能看"变成了"有点高级感"，而元素的选择器、点击逻辑这些和测试强相关的部分始终没被破坏。

几个让我印象深刻的细节

• 上下文感知：它知道哪些元素是测试锁定的、哪些是可以自由发挥的视觉层，不会为了一次美化就把测试搞挂。
• 懂克制的审美：当我反复要求优化同一个元素时，它会提醒"这里已经到克制美学上限了，不如换个元素"，这种"劝退"反而让人放心。
• 工程化意识：动画会自动配套 prefers-reduced-motion，无障碍一致性考虑得比较周全。

踩到的坑也值得说

有一次"云端索引"任务一直挂起，排查后才发现：单次索引有约 1000 个文件的上限，而项目里有个生成物目录塞了上千个文件，把索引包撑爆了。解决办法不是手动删文件，而是在 .codeartsdoer/.codebaseignore 里把生成物目录排除掉。这个经历提醒我，用 AI 工具也要理解它的运行边界，遇到问题先看日志和状态文件，而不是盲目重试。

总结

如果用一个词形容这段体验，我会选"顺"。不是因为它无所不能，而是因为它在懂代码、懂工程、懂节奏这三件事上都没有掉链子。它不会替你做所有决定，但会把那些重复的、琐碎的、需要来回验证的活接过去，让你专注在真正需要判断力的地方。

对还在观望的开发者，我的建议是：别拿一个玩具 demo 去评判它，找一个你真正熟悉的小项目，完整地走一遍从编码、测试到构建的流程。你会更清楚它哪里强、哪里还差点火候——而这份判断，本身就是 AI 时代最值钱的能力。