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

查看 104|回复 17
作者:0x114514   
前言
经常在本站看到大家讨论工作中 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 提效”,我不知道我的精神状态是否还能继续正常下去。

    前端, 工作流, AI

  • Rooger   
    Github Copliot 2023-3 ~ 2025-1(83.29 + 100)=183.29
    Claude 20*6=120 (2024-9 ~ 2025-4)
    GTP 19.9*14=278.6 (2023-5 ~ 2024-8)
    Cursor 20*6=120 (2024-10 ~ 2025-4) 179.96 年付 按量付费 $1 总计 309.96
    OpenCode Go=$5
    >>> (19.9*14+120+309.96+100+83.29+5)*6.9
    6188.264999999999
    2023-3 ~ 2026-4 共 ¥ 6200 左右
    我之前很入一段都是自费来使用 AI ,从 Copliot 、ChatGPT 、Cluade 以及 Cursor ,直到最近两个月,技术总监给个一个有 ChatGPT plus 账号,才算不再自费使用 AI 。
    关于国产模型你的看法我深有同感,尝试了好多次,几乎每次都会因为各种各样的小问题放弃了。昨天用 MiniMax M3 ,一个简单的问题,连续两次,他都理解不了。但是在之前使用 Codex 以及 Cursor 中 Claude 的过程中,从来没有遇到过。
    不过小厂的话,同事都在使用国产模型,你都使用 Claude Code ,而且还没有被封号,说明你已经属于少数人啦。真没有必要焦虑。
    lyxxxh2   
    1. 基本不用看代码。
    出 bug 了,还是要自己看下代码逻辑了。
    2. 修 bug
    我自己定义一个 code-qa 的 skill(禁止写入 如何查看数据库等)。
    基本他都找到。
    3. ui
    直接让 claude pro 写不行。
    https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
    装这个。
    最强还是 gemini3,可以让 gemini3 再次优化下页面 ui 。
    https://www./t/1175005
    新业务:
    我全栈开发,我这样的:(简单需求一把梭直接过)
    claude 进入前端的项目。
    我前端的 CLAUDE.md (告诉他如何操控后端项目)
    ```
    ## 后端
    后端: 项目在"C:\Users\Administrator\code\api-market",通过 mutagen 将开发服务器后端代码挂载的。
    当需要执行服务器命令,可以用 ssh-exec 这个 skill 。
    服务器后端路径:/media/duyu/code/api-market
    数据库:`dev-db` 这个 skill 可以直接连接开发服务器数据库。
    ...
    ```
    给 claude 的提示词:
    ```
    /superpowers:brainstorming
    ## 背景
    我需要完成 xxx 。
    业务流程:xxx -> xxx -> xxx
    ...
    ## 前端
    需要创建 xxx 文件,注意是动态路由,和后端权限一致。
    点击新增按钮,需要出现弹窗。
    xx 弹窗:
    xx
    测试的话...
    ## 后端
    你要创建某个表,需要有个字段..
    ## 需求
    完成前后端功能。
    ```
    0x114514
    OP
      
    @Rooger  Minimax 确实差远了,而且我前天也尝试过在 Claude Code 里接入官方 API 使用 DeepSeek V4 Pro ,花了 9 毛钱写出来的东西让人哭笑不得,不知道是和 Claude Code 适配的问题还是模型能力确实不行。
    GLM 5.2 听说很强,有机会我尝试下 GLM 5.2
    caisanli   
    我这两天在 codex 用了 figam 的插件, 还原度能到 95%了, 吓我一跳.
    0x114514
    OP
      
    @lyxxxh2  我试下你提到的这个 Skill ,Claude 根据设计图直接写的 UI 确实太差劲了。
    0x114514
    OP
      
    @caisanli  Figma 听说 MCP 很强,但是我们公司没有用这个。 而且听说这个和设计的水平也有问题,如果想让 AI 和 MCP 较好的还原页面,需要在设计页面时就注意层级什么的东西。
    lyxxxh2   
    @0x114514
    用 skill 也达不到 gemini3 强度,你可以自己简单测试下。
    cryptovae   
    前端描述不清的时候,可以直接说`class="contents" 里背景色删除`
    fsship   
    同感,我们也用 Codex+Figma MCP ,UI 上经常有丢三落四和错位的情况。
    我看我们的设计稿上一堆的 Group123 ,Frame123 ,Vector123 (直觉告诉我这种命名不好),这些东西互相覆盖,卡片的圆角矩形和卡片内容在同一层上,难不成真的是设计稿水平不行?不过我也没接触过好的设计稿,也不知道是不是设计稿的问题。
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部