![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)
兄弟们，有没有纯 ai 开发前端的？我最近感觉自己参透了 AI 提效前端开发的核心逻辑。
先丢个核心思路，看看大家感不感兴趣。
我现在的判断是：
复杂前端开发，AI 提效的关键不是一上来让它写代码，而是先对齐组件边界。
因为前端逻辑不是线性的。
很多时候是状态、交互、校验、联动、提交几条线交织在一起。
用纯文字和 AI 沟通，很容易说不清。
但用 Mermaid 图先把组件边界画出来，AI 的理解效率会高很多。
第二个点是：
人写前端，重点是逻辑解耦。
AI 写前端，重点是上下文解耦。
也就是让每个组件的职责更清楚，状态和行为尽量内聚，不要让一个父组件知道所有细节。
我现在比较倾向的模式是：
上下文注入式组件自治。
父组件更像是页面上下文的创建者和动作触发者。
子组件自己负责自己的状态、校验、回填、清空和提交值。
组件之间联动，也不是简单搞发布订阅，而是尽量做：
点对点事实通知。
A 告诉 B “发生了什么”，但不命令 B “该怎么做”。
核心就是一句话：
让 AI 每次只理解一个清晰边界内的上下文，而不是把整个页面所有逻辑一次性塞给它。
如果大家感兴趣，我回头整理一个完整版本，把这套前端 AI 协作方法讲细一点。
先丢个核心思路，看看大家感不感兴趣。
我现在的判断是：
复杂前端开发，AI 提效的关键不是一上来让它写代码，而是先对齐组件边界。
因为前端逻辑不是线性的。
很多时候是状态、交互、校验、联动、提交几条线交织在一起。
用纯文字和 AI 沟通，很容易说不清。
但用 Mermaid 图先把组件边界画出来，AI 的理解效率会高很多。
第二个点是：
人写前端，重点是逻辑解耦。
AI 写前端，重点是上下文解耦。
也就是让每个组件的职责更清楚，状态和行为尽量内聚，不要让一个父组件知道所有细节。
我现在比较倾向的模式是：
上下文注入式组件自治。
父组件更像是页面上下文的创建者和动作触发者。
子组件自己负责自己的状态、校验、回填、清空和提交值。
组件之间联动，也不是简单搞发布订阅，而是尽量做：
点对点事实通知。
A 告诉 B “发生了什么”，但不命令 B “该怎么做”。
核心就是一句话：
让 AI 每次只理解一个清晰边界内的上下文，而不是把整个页面所有逻辑一次性塞给它。
如果大家感兴趣，我回头整理一个完整版本，把这套前端 AI 协作方法讲细一点。
展开
6
3
![[吃瓜群众]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_10.42a731c.png)