Only AI Flow Can Do！

0 纲要

• 作为骨灰级程序员，咋用 AI flow 进步编码功率
• 零代码根底，怎么运用 AI 辅佐编程东西完结自己的主意
• 盘点常用的 AI 辅佐编程东西和运用场景
• 怎么挑选合适自己的 AI 辅佐编程东西

现在的 AI flow 系列软件包括：Cursor、Bolt、Windsurf、v0、通义灵码......

1 编码咋提效？

AI flow已和我日常作业学习和创造无缝交融，运用 AI flow 写代码，体会十分流通，编程功率大大提高。

1.1 代码补全

Tab一下，代码主动补全，各厂家有练习自己的智能补全模型，在项目工程感知上下文，给出智能代码补全主张。苦了那些只能在云桌面开发的同学，究竟私有布置太贵重！

曾经能够叫我 cv 侠，现在请叫我 Tab侠。

1.2 Debug && Fixbug

AI flow 作为各行业都有资深经历的编程大师，助你 Debug 和 Fix 代码过错。遇到报错了：

• 曾经：仿制过错信息，翻开浏览器被逼定向到 CSDN 或许 stackoverflow，大海捞针找解决计划，并反反复复杂乱无章地改代码

• 现在，在提示过错的方位，点击 Debug 或 Fix 按钮，就会结合项目上下文，给犯错因和可行解决计划。乃至给你写出修正后代码，依照 AI flow 的主张修正，或许在给出的修正代码上点击 Apply，就能够快速找到和修正问题

有了 AI flow，相当于有了24h技能顾问，随时帮你主动查问题、剖析问题、写代码修正问题。让你更专心架构规划。再也不必忧虑呈现偶发的 bug 啦！

1.3 实时对话 && 联网查找

对我国宝宝更友爱的的ChatGPT才能和AI search运用。

随时在 AI flow 编辑器右侧翻开对话框，热情四射聊任何论题！

在输入框输入 @web 即可联网检索，具有 AI 查找产品规范的 RAG 才能：

再也不必订阅ChatGPT！

1.4 写提示词

想写提示词操控 AI 生成内容，而又不太拿手提示词工程，就能让 AI flow 帮你写提示词。

1.5 写页面

做 Web 项目开发，我们常常需求写前端页面。我最近一年习惯用 NextJS 结构做全栈开发，页面组件用 React 写，运用 TailwindCSS 写款式，UI 组件库用的是 Shadcn/UI。

运用 AI flow 前的登录页面：

• 在 UI 组件库找到能够引进的组件
• 或自己写 HTML + TailwindCSS 完结需求的组件。款式要调的漂亮，耗时好久。

而用 AI flow，一句话描绘我的需求快速得到满足需求的登录组件。

1.6 截图生成组件

看到某网站的某组件不错，想将其款式和逻辑仿制到个人项目。只需截图要抄的组件，让它模仿写出。

这比曾经Copy他人网站的款式，经过查看元素查看 HTML、CSS源码，功率高太多。

1.7 写常用的代码逻辑 / 函数

曾经从0开端誊写一个个功用函数，运用 AI flow 只需一句话描绘功用需求 / 入参和出参就能快速生成所需函数。还有人会去刷leetcode吗天天？？

1.8 代码重构

技能架构更新时，常常要重构代码。

比方曾经将老体系从 php 迁移到 java，自己重构一个项目的一切数据库操作代码，需求许多人天资源。

而用 AI flow，一句话描绘需求，让它用新的数据库客户端去重构一切的数据库操作逻辑即可，等它重构完，我需求查看一遍是否有重构不妥的代码，让 AI flow 按我的风格持续改写。

只需人工确认过一次重构，剩下的数据读写代码，都会参阅第一次重构的风格，快速完结。

唉！也难怪即便有许多需求保护的老体系，现在企业仍是不招人了！

1.9 国际化

做出海运用，就得支撑多言语。

如NextJS结构多言语计划用 next-intl，只需在项目的 messages 目录下放置言语的 json 文件。

曾经，要先写好 en.json 内容，再仿制到 ChatGPT，让它翻译成其他言语 json 文件，如 zh.json / ja.json 等，再把翻译好的 json 文件都放置到 messages 目录。

每次新增 / 修正 / 删去要支撑多言语的内容，要先更新 en.json 的内容，再按上面流程更新其他言语文件的内容。之前组内担任国际化的搭档每天痛不欲生，我试用期还没完毕，他就离任了！

有了AI flow，仍是先更新 en.json 内容，然后到其他言语文件中，一个Tab，快速补全，主动填充翻译好的内容。

2 快捷键

2.1 Tab

晋级pro版，解锁无限制 Tab 智能补全。

2.2 Command + L

代码看到一半，想快速翻开对话框咨询各种问题。

2.3 Command + K

在文件中引发 Ctrl + K 的方位原地写代码，假如点 Apply 就会掩盖当时方位的代码。

一般会在创立一个新的函数，或许重构某段逻辑的时分运用，原地修正代码，diff 作用更显着。

2.4 Command + I

引发 AI flow Composer 窗口，输入需求，一次性创立 / 修正 / 删去多个文件件 / 文件。

Composer 是划年代功用，实在敞开“一句话让 AI 创立一个项目“的年代。零编码根底的人，也能够运用 AI flow Composer 快速创立项目结构，完结根本的代码逻辑，关于做一些 demo 类运用开发，十分有用。

另一场景，如多言语适配，只需修正 en.json 一个文件的内容，经过 AI flow Composer 一次性修正一切言语的 json 文件！

但触及多个文件代码生成时，质量必定比单文件生成要差，需人工提质。

3 0根底，学IT，用AI完结每一个idea

我们后端，都不明白前端，咋做一个完好导航出海站呢？

3.1 Composer

新建一个文件夹，作为 AI flow 工程目录。

翻开Composer窗口，描绘需求：

请你生成一个独立IP展现网站，包括两个页面，主页显现我一切的自媒体交际渠道，about 页面显现我的个人布景介绍。网站主题色运用羊皮纸黄色，要求兼容手机端拜访。

一个回车下去！AI flow Composer 会依据你的需求生成一个项目结构，并生成根本的代码逻辑。等代码生成完，你只需求点 Accept all，生成的代码都运用到工程目录：

由于用的人实在太多，常常会不可用，重试即可让它持续完结任务！

浏览器翻开项目的进口文件：index.html预览：

Composer 对话框持续细化需求，如 “一栏显现五个著作，配图运用实在的图片“，点 Submit 提交，AI flow Composer 会依据你的需求修正代码。

repeat这进程：enter你的需求 -> Accept all 运用修正 -> 预览。直到网站让你顺眼了。

只能慨叹，怪不得前端赋闲了，怪不得招一个 java 就能全栈了，事实如此！

Only AI Flow Can Do！

由于运用 AI flow Composer 只是在PC完结一个项目，还要通晓全球分布式布置：如把生成的代码打包上传服务器布置或用 Vercel / Cloudflare 云布置渠道。

3.2 运用 Bolt.new 构建产品

彻底不明白开发的也别急，还有Bolt.new，网页版的 AI 辅佐编程东西：

输入框描绘需求，如：

创立一个课程主页，介绍课程交给的主页内容，列出课程材料，课程材料是一个图文列表，也放一些学员点评，让课程主页愈加吸引人

看我一个回车！开端生成代码，在右侧把整个项目的代码结构都展现出来。

左边对话框持续细化需求，让它优化代码，一起在右侧 Preview 面板预览。

一向优化到你满足，点击Deploy或Open in StackBlitz，代码即可布置上线，得到可揭露拜访的链接：

翻开它，就能看到你的项目：

合适编程彻底 0 根底选手，从0创立项目，几乎无门槛，还支撑云端布置功用，让你的产品直接被全球观众鉴赏！

本文已收录在Github，重视我，紧跟本系列专栏文章，我们下篇再续！

作者简介：魔都架构师，多家大厂后端一线研制经历，在分布式体系规划、数据渠道架构和AI运用开发等范畴都有丰厚实践经历。

各大技能社区头部专家博主。具有丰厚的引领团队经历，深沉事务架构和解决计划的堆集。

担任：

• 中心/分销预定体系功能优化
• 活动&券等营销中台建造
• 交易渠道及数据中台等架构和开发规划
• 车联网中心渠道-物联网衔接渠道、大数据渠道架构规划及优化
• LLM Agent运用开发
• 区块链运用开发
• 大数据开发发掘经历
• 引荐体系项目

现在主攻市级软件项目规划、构建服务全社会的运用体系。

参阅：

• 编程严选网

本文由博客一文多发渠道 OpenWrite 发布！