- 博客(181)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 AI-Native 前端工程化：我让 AI 跑完了一个需求的全流程
在讨论具体方案之前，有必要先厘清两个概念。AI-Augmented（AI 增强）：人是流程的主人，AI 是辅助工具。你在思考、做决策、执行动作，AI 偶尔被调用——比如问 ChatGPT 一个问题，或者用 Copilot 补全一行代码。AI-Native（AI 原生）：AI 是流程的执行引擎，人是决策者和审核者。AI 主动推进流程，在关键节点停下等人确认，人的角色是"拍板"而不是"动手"。区别不是程度，而是设计起点维度AI-NativeAI 的角色辅助工具，被动响应执行引擎，主动推进流程设计。
2026-05-21 14:36:25
571
1
原创 我把项目里 30 个“复制粘贴“的表格页提取成了一个生成器，AI 照着模板 2 分钟出一个新页面
后台系统的表格页长得都差不多：顶部搜索栏 + 表格 + 分页 + 新增/编辑弹窗。但我们项目里 30 个表格页，每个都是从别的页面复制过来改的，代码结构五花八门。。从此新表格页 2 分钟生成，代码风格完全一致。
2026-10-22 14:04:51
68
原创 用 AI 做性能分析：一行命令找出拖慢页面的 5 个组件，优化后首屏快了 40%
后台系统用久了越来越卡，尤其是"数据看板"页面，首屏加载 4s+。产品催了三次"能不能快点"。我用 AI 帮我分析了 bundle 和 render 性能，定位到 5 个问题组件，逐个优化。首屏从 4.2s 降到 2.5s。
2026-10-13 10:50:43
111
原创 给 AI 写了一份“项目急救手册“，新人 debug 时间从 2 小时缩到 20 分钟
新人入职第一周最痛苦的事：遇到问题不知道找谁问、不知道去哪看日志、不知道常见报错是什么原因。我把团队常见的 debug 场景整理成一份"急救手册"，放在 steering 里。新人遇到问题时 AI 能直接给出排查路径，不用等老员工有空回复。
2026-10-08 10:25:30
165
原创 我让 AI 分析了项目的 50 个 Ant Design 表单，总结出 6 种模式后，新表单 5 分钟写完
不总结模式：├── 每次都要描述"我要一个弹窗表单"├── 每次都要说"支持新增和编辑"├── 每次都要提"编辑时回填数据"├── AI 输出质量不稳定（有时忘了 destroyOnClose）└── 效率：一般总结模式后：├── "用模式 1" — AI 知道所有细节├── 不需要重复描述通用逻辑├── 输出稳定（因为模式是固定的）├── 只需要描述"不同的部分"（字段列表）└── 效率：5 分钟写完一个完整表单AI 的记忆力有限，但"模式"可以无限复用。
2026-09-20 10:07:28
91
原创 AI 帮我设计了一套“错误边界“体系，从此页面崩溃不再白屏
线上偶尔有页面白屏的反馈，看日志是某个组件 render 阶段抛了异常，整个页面挂了。React 默认行为：一个组件出错，整棵组件树崩溃。我让 AI 帮我设计了一个分层的 ErrorBoundary 体系。
2026-09-18 14:28:27
148
原创 用 AI 把后端 Swagger 文档自动转成 TypeScript 类型 + 请求函数，手写接口层的时代结束了
每次后端给新接口，前端要做三件事：定义 TS 类型、写请求函数、写 mock 数据。一个接口 15 分钟，10 个接口就是半天。我搭了一个工作流：后端 Swagger JSON → AI 转换 → 直接生成可用的 service 文件。
2026-09-14 09:50:32
154
原创 我把 20 个页面的权限控制从“硬编码“改成“配置驱动“，AI 帮我生成了 80% 的迁移代码
项目里 20+ 个页面有按钮级权限控制，每个都是硬编码在 JSX 里。新增一个按钮要改代码，调整权限要发版。我让 AI 帮我设计了一个配置驱动的权限方案，把权限逻辑从组件中抽离。然后让 AI 批量生成迁移代码——20 个页面，半天搞定。
2026-09-08 10:20:14
93
原创 让 AI 帮你写 Git Commit Message：从“fix bug“到语义化提交只需一个 Hook
fix bugupdate修改了一些东西111。看 git log 跟没看一样，cherry-pick 时根本不知道哪个 commit 是想要的。我用一个 agentStop Hook + 一个 Prompt 模板，让 AI 在每次完成任务后自动生成规范的 commit message。
2026-09-07 11:13:11
220
原创 前端接口超时从 15s 改到动态值后，用户投诉降了 60%——AI 帮我分析出的方案
用户反馈"页面一直转圈"。排查发现：导出报表接口响应 20s，但前端统一超时 15s，直接断了。加大超时？简单但粗暴——所有接口都变成 30s 超时，普通查询也要等 30s 才报错，体验更差。我让 AI 帮我设计了一个，根据接口类型自动适配。
2026-09-02 10:37:37
232
原创 用 AI 做技术方案评审：输入 3 个方案，输出对比矩阵 + 推荐理由
技术选型纠结症？给 AI 列出候选方案，它给你一个结构化的对比矩阵。不是让它帮你做决定，而是。上周团队讨论"拖拽排序用哪个库"，4 个人争了 30 分钟没结果。我花 2 分钟让 AI 列了个对比表，当场拍板。
2026-09-01 13:39:38
224
原创 一个 Hook 让 AI 每次写文件前自动检查编码规范，违规代码再也提交不进来
AI 生成代码有个问题：它。尤其是对话轮数多了之后，之前 steering 里的约束可能被"稀释"。我写了一个 preToolUse Hook，每次 AI 要写文件时自动检查。相当于给 AI 装了个"写之前先 lint"的闸门。
2026-08-31 13:58:14
221
原创 PageProxy：页面维度接口地图 + 一键场景切换
PageProxy 不是又一个 Mock 工具，而是一个前端团队的接口认知基础设施对前端：从"翻代码才知道接口"到"打开地图一目了然"对测试：从"等后端配合"到"自己掌控所有场景"对团队：从"接口是黑盒"到"接口关系透明可视"对个人：一个真正的全栈练兵场如果你也有类似的痛点，或者对这个方向有想法，欢迎交流讨论。
2026-08-25 13:28:03
217
原创 我用 AI 写了一个“需求翻译器“，产品的 PRD 直接变成开发任务清单
每次拿到 PRD，第一步都是"翻译"——把产品语言翻译成技术语言，把模糊描述变成具体改动点。这个过程以前靠脑子，容易遗漏。我给 AI 写了一个 Prompt 模板，输入 PRD 文本，输出结构化的开发任务清单。
2026-08-20 17:01:53
204
原创 前端团队 3 个月 AI 实践复盘：哪些场景 ROI 最高，哪些是伪需求
第一周：配好 steering（30min/人）→ 所有人立刻受益第二周：沉淀 3-5 个页面范例→ 新页面开发提速 60%第三周：配置 AI CR + 提测文档模板→ CR 效率提升、文档自动化之后： 按需优化，不要过度投入→ 接受 AI 有边界，用在 ROI 高的地方。
2026-08-17 15:32:06
190
原创 我用 AI 重写了项目的请求层，从 800 行“面条代码“变成 3 层洋葱模型
接手一个 3 年老项目，打开看到 800 行代码——拦截器里塞了鉴权、品牌切换、错误提示、日志、重试……每次改一个逻辑都怕影响别的。我把这个文件丢给 AI，让它帮我重新设计架构。，每个关注点一个中间件，互不干扰。
2026-08-14 16:33:54
154
原创 我让 AI 封装了一个 ImageUpload 组件，它设计的 5 层校验链路比我想的周全
需求是"各种场景都要上传图片，但每次限制都不一样——有的要精确尺寸、有的要最小尺寸、有的要比例、有的要限格式限大小"。我让 AI 设计这个组件的整体架构，它给出的"5 层校验管道"比我最初的方案好很多。我原本只想到 3 层。
2026-08-12 11:45:06
162
原创 50 行代码写一个 ESLint 插件，让 AI 和人都别再用 moment 了
团队禁用 moment 改用 dayjs 这事，口头说了半年没人改。ESLint 内置规则管不了"用了哪个 npm 包"这种语义级别的检查。我花了 20 分钟写了一个自定义 ESLint 插件，50 行代码，从此 AI 生成代码时自动触发报错，人手写时编辑器也直接标红。
2026-08-10 15:31:22
174
原创 从 Webpack 迁移到 Rsbuild：3 年老项目编译速度从 48s 降到 12s
我们的 B 端管理后台跑了 3 年，src 目录 1500+ 文件。Webpack 编译一次 48 秒，HMR 热更新 3-5 秒。开发体验已经到了"改一行代码等半天"的地步。迁移到 Rsbuild 之后，冷启动 12 秒，HMR 几乎无感。这篇记录完整的迁移过程和踩过的坑。
2026-08-05 16:02:18
234
原创 一个月前我以为自己会用 AI 写代码，一个月后才发现那叫“高级搜索”
这个系列到这里就结束了。后续我会继续分享更深入的实践——单元测试自动生成、接口 Mock 自动化、技术债务追踪等。💬 这一个月的内容对你有帮助吗？最大的收获是什么？还想看什么主题？评论区告诉我。
2026-07-15 10:46:43
240
原创 Cursor、Kiro、Windsurf 怎么选？3个月实测，我画了一张「场景→工具」决策表
💬 你在用哪个 AI IDE？体验怎么样？有没有踩过什么坑？
2026-07-06 13:21:13
234
原创 需求来了 AI 自己开工？我花一天写的 SOP，现在天天给我省时间
输入：PRD 文档输出：├── 技术要点清单（功能点 + 技术方案 + 复杂度）├── 待确认问题（PRD 不清晰的点）├── 影响范围（新增/修改的文件）└── 工时评估质量标准：所有功能点都有明确方案，待确认问题 < 5 个。
2026-07-01 10:44:16
279
原创 前端 leader 的 AI 转型手册：4 个必须调整的管理动作（附落地方法）
💬 如果你是 leader，你觉得最大的管理挑战是什么？是推动团队用起来，还是控制质量风险？
2026-06-24 10:31:37
242
原创 5 人前端团队接入 AI 工作流后，人均产出提升了 40%（附落地步骤）
💬 你们团队有没有统一的 AI 使用方式？还是各玩各的？落地最大的阻力是什么？
2026-06-16 14:45:16
214
原创 3天工作量，AI 4小时干完：一个差点被领导当成摸鱼的实操复盘
周一早上接到需求：新增一个营销活动配置页面。三步表单、20+ 字段、3 个接口、列表+详情+编辑。以前这种需求我排 3 天。这次我决定用 AI 全流程辅助，看看能压缩到多少。
2026-06-05 16:21:16
247
原创 90% 的人用 AI IDE 第一步就错了：上下文喂不对，代码全是废
💬 你用 AI IDE 时，最常遇到的"生成不对"的情况是什么？评论区说说，我帮你分析是不是上下文的问题。
2026-06-04 13:22:40
200
原创 AI Code Review 上岗后，前端团队的代码规范问题少了70%——但这不是最吓人的
💬 你们团队的 CR 是认真做的还是走形式的？有没有试过自动化 CR？
2026-06-03 09:21:18
252
原创 前端用AI的3个段位：90%的人还在青铜局，不知道上面还有两层
上周团队分享会，我问了一圈"你们怎么用 AI 写代码的"，答案出奇一致：这就是第一层。不是说不对，而是天花板太低了。三层架构效率提升 30%效率提升 50-60%效率提升 70-80%第一层对话式生成90%的人第二层规则化约束8%的人第三层流程自动化2%的人天花板第一层：对话式生成（90% 的人在这里）日常操作：特点：天花板：效率提升约 30%。 省下的只是"敲键盘"的时间。日常操作：特点：天花板：效率提升约 50-60%。 但还是"人驱动 AI"。日常操作：特点：天花板：效率提升约 70-80%
2026-06-02 09:34:37
213
原创 用了3个月AI写代码，我每天在重复同一个错误（90%的人都在犯）
💬 你每天跟 AI 重复最多的一句话是什么？评论区说说，看看大家的"重复劳动"有多像。
2026-06-01 11:02:56
210
原创 一个真实案例——AI 帮我把 3 天的需求压缩到 4 小时
只不过基本功的用法变了：从"手写"变成"审核+纠正"。从 3 天到 4 小时，不是因为 AI 写的代码有多完美——中间我改了不少东西。从 3 天到 4 小时，不是因为 AI 写的代码有多完美——中间我改了不少东西。你得知道什么是对的，才能判断 AI 写的对不对。💬 你们有没有类似的"AI 加速开发"的真实案例？我做的事：review 每个文件，调整了一些业务逻辑细节。接口对接时有几个字段名对不上，AI 帮我快速定位和修改。AI 根据代码改动自动生成，我补了几个注意事项。我只需要审一遍，改了两个地方。
2026-05-29 13:27:54
333
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人