2. V2EX
  3. 前端界面比想象中复杂好多

前端界面比想象中复杂好多

weiyunjun 2026-06-19 19:18 1

刚接触 Vibe Coding 时就感觉前端比后端复杂好多，后端只需要不停按照需求优化性能就好了，有客观的测试数据，如果优化效果不符合预期就检查架构是否有改进的空间。总而言之就是流程可控。


前端界面一开始完全不会，找类似软件学习，然后和 Codex 描述需求，各种细节瑕疵，花费很大精力改得差不多，身心俱疲，然后下一次改动又重复一遍这个流程。


痛定思痛，反思流程问题，于是整理出前端文档，找 ChatGPT 网页端生成组件和布局的示意图，包含各种状态。再让 Codex 根据示意图和文档绘制界面，再修改文档修复 bug ，改完以后找 ChatGPT 重新生成最新版本的示意图。


这个过程真的很漫长，因为端到端测试都要自己来，而且还不放心，还要再开一个窗口让 Codex review 代码。


其实我之前尝试过 Claude Design 和 Claude Code 协作写前端，但细节有很多问题，Claude Code 也处理不好。我想请教一下大家，是前端本来就如此复杂，还是我的流程有问题导致如此繁琐？

最新回复 (25)
  • Solix 06-19 19:20
    1楼
    直接这样 vibe 不太行，前端这个确实难搞，不过使用 Figma make 那个 gemini pro ，一次就能出个差不多，很惊艳，你可以试试
  • cairnechen 06-19 19:21
    2楼
    claude design 用 design system 了吗？
  • MuyuQ 06-19 19:24
    3楼
    前端很多都是直接套用别人的轮子。
    你这是自己在手搓轮子。
    你当然会觉得复杂。
  • heywitt 06-19 19:24
    4楼
    如果你对风格没有自己很严格的要求，可以试试 unUI ，用 codex 设计但准确性非常高，因为设计方向被固定在 saas 类上约束了范围。
    这里是免费试用： https://unui.cc/zh/campaigns/ETV0LGM1mUTQ8ap5Runh
  • dode 06-19 19:29
    5楼
    先简单学习前端 css 理论体系
  • MuyuQ 06-19 19:29
    6楼
    https://21st.dev/community/components
    https://uiverse.io/
    然后还有这个
    https://impeccable.style/
    超级好用。
    安装以后，agent 的审美提升一个档次。
  • C64NRD 06-19 20:35
    7楼
    每个模型都有自己的前端风格，选好模型很重要，另外就各种 skill：
    - https://www.skills.sh/?q=ui
    - https://getdesign.md/
    - https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
  • night98 06-19 20:39
    8楼
    你要是想搞很复杂的动效和整体设计那是很麻烦，但多数时候前端都是直接用各种框架封装好的现成组件直接用就行了。
  • guanzhangzhang 06-19 20:47
    9楼
    纯手搓会很难，如果业务样式在满足基础要求下，很多框架样式这块都有组件化编程引用，从而快速实现需求
  • penzi 06-19 20:48
    10楼
    前端出了 bug ，修一下，刷新一下

    后端出了 bug ，脏数据，数据泄露，服务器被攻击
  • evan9527 06-19 20:53
    11楼
    我是设计师，意识到了想要像素级实现一个设计稿，vibe coding 目前还实现不了。
    第一版出来就是最好的，之后只会越改越乱。
  • laminux29 06-19 20:57
    12楼
    你觉得后端简单，是因为你目前接触到的后端层次太浅了而已。IBM 的 CPU 连单核都能做到热屏蔽，你用后端对 Intel CPU Vibe 一下试试？
  • nc 06-19 21:02
    13楼
    你需要一个设计系统和组件库，你可以在 Figma 里设计出一个设计系统，然后让 AI 做成组件库。或者使用现成的 Material Design 组件库，经典永不过时。

    有了 AI 之后真的减少了前端很多的复杂度，以前 rails 那群人搞的 nobuild 、htmx 、turbo 这些都被 AI 杀死了。
  • weiyunjun 楼主 06-19 21:04
    14楼
    @MuyuQ
    @C64NRD
    非常感谢，这几个网站都很棒，泪目了。
  • weiyunjun 楼主 06-19 21:07
    15楼
    @night98 macOS 原生开发，没办法直接用现成的前端框架，很僵硬，只好自己去提高审美
    @guanzhangzhang 理解，不过目前项目没办法，以后再这么做吧。
  • weiyunjun 楼主 06-19 21:13
    16楼
    @Solix 试了一下，感觉和 Claude Design 差不多，我真正怀疑的是这么做的可维护性，因为细节问题才是比较麻烦的。
    @cairnechen 忘记了，大概率没有。
  • weiyunjun 楼主 06-19 21:16
    17楼
    @evan9527 第一版图出来以后，我大部分时间就在对齐文档和代码了，图片一般改动的频率比较低，因为出图慢且不一定保证符合预期。
  • 10bravoman24 06-19 22:52
    18楼
    在提效这一块没得说，后端 >>> 前端，AI 天然更擅长处理分层化、结构化的东西。
    前端要实现 UE 的高度还原，目前还几乎做不到一键还原，并且确实会越描越乱。好的模型很重要，使用方法也很重要

    总的来说 AI 对后端的辅助一定大于前端，前端做了一堆最后换来一句：你为啥延期？做那么多效果还一般？
    大部分公司依然是更看重后端，这没办法，这是天然差距
  • kkwa56188 06-20 00:53
    19楼
    后端是有成熟的理论基础托底的, 例如关系数据库的数学基础是集合论,
    前端嘛... "我想对齐这张图片和文字 怎么弄?"
  • ZztGqk 06-20 01:02
    20楼
    如果你只满足业务需求，那应该考虑组件库，比如 mui 、baseui 这种。如果想要完全掌控，那确实就如上述所说，你需要不断的调整尝试，借助各种 design 工具来获得更好的原型，因为 ai 在感知动态上不如人类，所以这套反馈不是很好实现。
  • Retas 06-20 02:17
    21楼
    听 OP 描述，可能对前端模块化了解不是很多。大多数界面都是可以通过模块化把组件规范制定好之后，界面设计就不需要关心了。目前主流实现是上 UI 库，然后根据项目定制主题，制定好 Rule 后让 AI 猛猛干
  • drymonfidelia 06-20 02:39
    22楼
    后端能用就是能用，不能用就是不能用，AI 有明确的判断标准
    前端按钮白底白字显示在半透明图片下面，AI 也觉得能用
  • seWindows 06-20 09:42
    23楼
    前端后端皆为盲盒抽奖，只不过前端容易感觉出来。

    后端能用，但是你不知道也没有逻辑绕过 bug ，ai 大量加非必要互斥锁之类。

    差不多是测试能用不代表生产线也能稳定之类
  • JasonYip 06-20 14:02
    24楼
    后端有明确的验收标准 所以对 ai 来说问题容易回归。前端很多东西不容易用自然语言描述，设计出来的样式也有比较高的主观性，所以 ai 不容易做出来。但说实话后端也不简单啊 ai 可以帮你设计方案，但是最后做决策的还是人，各种中间件和屎山耦合在一起牵一发而动全身，还要考虑一大堆兜底和取舍问题
  • weiyunjun 楼主 06-20 15:53
    25楼
    @JasonYip 从第一个项目开始架构就是自己决策的，哪怕当时只懂基本的语法，全靠架构直觉推导出一个貌似可行的架构然后不断迭代。但前端这么干真的行不通，所以客观上确实遇到困难了。
* 帖子来源V2EX
附近帖子
返回
飞读
随机推荐