分享下小公司普通前端日常使用 AI 的工作流，也希望各位前辈能指点一二。

前言

经常在本站看到大家讨论工作中 AI 相关的事情，那些高大上的名词感觉离我的工作好远，好多人说自己完全不写不看代码，只给 AI 下令，我不知道他们是怎么做到的。

因此，在这里分享下我日常的工作流，也希望能得到大家的指点，让我更有效的使用 AI 。

环境简介

• 项目类型：ToC 电商后台


• 编程工具：Claude Code CLI & Claude Pro ($20/Month)


• 安装的 MCP：Apifox 、MasterGo 、Chrome Devtools

工作流程

我的日常工作主要包含修复 BUG 、开发新业务。

修 BUG

修复 BUG 大致可以分为两个方面，简单的样式问题和逻辑问题。逻辑问题还好说，告诉它开发服务器地址，然后怎么复现这个问题，并附上自己的推测，它自己点点浏览器大概率就能复现并修复问题，这方面没什么可说的。

样式方面则是烂的一塌糊涂，很简单的问题它都修复不了，总是牛头不对马嘴。例如让它去除两个相连卡片之间的背景色，明显删除一行 CSS 就能解决的事情，它非要改一堆代码还没有实现对应功能。

因此，现在所有的样式问题我都是自己修，不借助 AI ，免得浪费时间、Token ，最后还没有完成工作。

关于 UI

开发新业务是我比较喜欢的场景，因为电商后台新业务不会很复杂，之前的样式可以通用，或者给 AI 参考。

但很多时候还是需要手动写页面，即使使用 mastergo MCP 或者其他的各种工具，实现的页面还原度总是很差劲，还是需要手动调整。

因此我一般不让 AI 帮我写页面，有的同事貌似很喜欢用 AI 写并手动调整，但他们总被 UI 吐槽还原度差。

新业务开发流程

一般开发时，我会先手动写一个模块的页面，抽离公共组件，然后让 AI 帮我对接接口并测试基本流程。此时其他的模块可以让 AI 来实现，提示词如下（ Chrome Devtools 、ApiFox MCP 调用的相关信息已在 CLAUDE.md 中注明）：

开发服务器地址： http://localhost:12345

原型图地址： http://example.com

Apifox 接口路径：  xx/xx/xx



请你根据原型图，参考 src\pages\xxx\xxx 这个模块中的代码，实现 XX 模块。 如果 XXX 接口字段存在缺失，暂时以 ZZZ 为准。 此外，注意复用 src\composables 中的 hooks 。

在开发新功能时，AI 能帮我完成 90% 的工作量，我再微调下字段名称、细微样式，然后大致过一遍代码，手动测试几轮，然后就可以收工了。

最后

我的 Claude Pro 是自费的，除了工作中使用，也用来日常和 Claude 对话。 公司虽提供了某国产模型，同事们也在用，但我感觉这些模型代码能力太过羸弱，使用这种能力不足的模型是浪费自己的时间。

此外，虽然同事们都在使用 AI 工具编程，但目前公司对项目的工期要求和之前相比，变化不是很大，让我偷偷松了口气。

我非常害怕所谓的 “AI 提效”，因为即便是现在，我每次在那里等待 AI 工作完成时，都已经有些焦虑了，如果公司再来个 “AI 提效”，我不知道我的精神状态是否还能继续正常下去。