AI 编程实战：从入门到做出能上线产品的 8 个技巧
这场分享来自 COZE 官方 AI 产品经理 Sida（斯达），他过去两年沉迷 AI 编程，并把这门技能用在产品立项前的 Demo 验证上。直播中他拆解了 8 个实战技巧，覆盖前端样式美化、后端接口获取、需求描述、网站部署和移动端 APP 开发，并解读了近期与 COZE 平台联动的 AI 编程挑战赛。无论你是零基础小白，还是有一定编程背景的开发者，都能从中找到让 AI 编程产出质变的方法。
入门：先发出第一个需求
Sida 强调，AI 编程（Vibe Coding）本身非常简单，核心就是「通过自然语言清晰描述需求」。最基础的用法是打开任意一个 Web coding 产品（如 COZE 空间），输入类似「做一个图片颜色提取器」或「给公司做一个 landing page」这样的需求，就能很快看到反馈。
很多人觉得门槛高，是因为看到编辑器或代码界面就恐慌。Sida 的建议很直接：「第一件事情，就是你一定要去实际地把这个编辑器下载下来，然后尝试去把你的第一个需求完完整整地描述出来，发出去，几分钟之后你其实就很快能看到这个效果。只要能做到这个事情，基本上 Web coding 就入门了。」
但入门后产出的效果往往比较简陋，与网上大神分享的差距很大。要进一步提升，就需要掌握下面这些实战技巧。
前端美化：三个让界面脱胎换骨的方法
前端样式美化是成就感来得最快的部分，Sida 分享了三种递进式的技巧。
精准样式关键词法：与其写复杂的风格描述，不如找一个精准的单个样式关键词提供给新模型（如 Claude、豆包 1.6）。Sida 推荐了一个小众网站 WebAtlas.design，上面收录了大量精准的样式关键词，比如 brutlist design（野蛮主义风格）、Apple 官网风格、Vogue 杂志风格、90 年代复古风格等。「有的关键词你提供给它，甚至会比你去大量地去描述你想要的这个风格出来的效果还要好。」因为这些关键词在代码社区里非常常见，模型对它们的理解比门外汉的描述更准确。
Sida 现场演示了一个「拍照识别植物」的 H5 应用：直接发需求，豆包 1.6 会生成常见的蓝紫色渐变、基础 Tailwind CSS 样式，「太大陆了，太常见了，一点个性都没有」。但只要加上一句「用 brutlist design 风格开发」，效果立刻不同。他做的手办生成器也是用类似方法——给 Gemini 2.5 Pro 一个「手办风格」的 prompt，就生成了极具个性的应用界面。
设计图提取设计系统法：从 Dribbble、Behance 找一张效果好的设计图，先不直接给编程 agent，而是先给任意一个三方聊天 APP，让它「帮我从这个图里面提取一个设计系统」。Agent 对设计系统的理解非常精准，会提取出颜色、边框、阴影、圆角、字体等完整细节，比肉眼看到的更全面。然后把这套设计系统粘贴给 Cursor，让它参照美化，不提供原图，生成效果会更好。Sida 展示了一个名为「one thousand and one cost」的网站，就是从追波（zebra.com）找图、用 Gemini Flash 提取设计系统、再给 Cursor 生成，按钮、渐变炫光等细节非常丰富，「远远超过可能我们直接去描述这个风格，或者甚至是采用一些组件库的效果」。
利用 Figma 设计稿法：有设计师背景的用户，可以直接用 COZE 空间这类天然支持 Figma 理解的产品，粘贴 Figma 画板链接即可还原设计。如果用 Cursor 这类没有 Figma 理解能力的产品，可以安装一个 Figma MCP（GitHub 上有很多，随便选一个），也能让 Cursor 理解设计稿。
进阶开发：现代框架与付费模板
如果想让网页再上一个台阶，就需要用上程序员的方式——现代前端开发环境。
准备现代前端环境：直接让 Cursor 开发应用，它可能会写一个 HTML 网页，或者尝试写 React、Next.js 代码，但你的电脑没有运行环境，跑不起来，一堆报错。Sida 指出：「其实他代码写的是对的，但你没有这个环境。」正确做法是：先安装 Node.js，然后告诉 Cursor「我已经安装好了 Node.js，现在帮我创建 Next.js 项目，使用 TypeScript 和 Tailwind CSS 来进行编写」。只有用上现代框架，才能利用前端社区的最新生态资源，比如 Hero UI、Astonishing UI 这类专业设计师设计的组件库。Sida 举例说，要做官网华丽的 map 效果，不可能让程序员从头开发，「再有钱的团队接下字节也不可能去精雕细琢」，专业程序员也是大量利用组件库。
套模板提升品质：如果要把 Web coding 当严肃的事，甚至开发网站收甲方几万块钱，前面所有技巧可能还不够。Sida 的「狠活」是套模板。React 和 Next.js 社区有很多精品付费模板，比如 ThemeForest 网站，价格约 20 美元一个，买下后获得商用授权 license（具体使用范围需读每个模板的 license）。以开发 agent 应用市场为例，Sida 下载模板解压后，让 Cursor「先尝试了解一下这个项目的结构，基于这个项目将它作为模板，只修改它的内容，不修改它的样式」，就能完美套壳。成品效果「远远超出一般 Web coding 的品质」，需求方非常满意。
后端接口：三种途径获取数据能力
前端美化之外，开发带实际功能的全栈应用需要后端接口。Sida 以自己开发的「大模型日报」网站为例——自动收集 GitHub 开源项目、Arxiv 论文、Google News 资讯、Product Hunt 产品发布等信息——这类网站涉及大量后端数据，个人开发者不可能全部自己实现。
资讯类数据：推荐 RapidAPI.com，一个国外 API 市场，汇聚了大量开放 API。花小钱就能买到后端基础服务，作为原型阶段的后端。复制 API 的 HTTP 请求方式，粘贴给 Cursor 说「这个就是我的后端接口，你要把这个作为后端接口」，不懂代码也没关系，「不用管这个代码内容到底是什么意思，直接贴进来，AI agent 他们懂就行了」。
AI 模型接口：开发 AI 应用，可以去火山方舟申请账号获取模型接口，但界面太面向开发者，很多人找不到 API key。更简单的方式是用 COZE 平台——上面有市面上所有主流模型接口。在资源库创建应用或工作流，把节点替换成想要的模型，然后在 API 管理里获取工作流的调用方式，复制 HTTP 请求粘贴给 Cursor 即可。
带数据库的应用：开发带增删改查、带数据库的真权管理应用，推荐用 Supabase，它给模型提供了一套非常简单的 API。
高效提需求：用画板代替大段描述
很多用户困惑「为什么别人开发效果那么好，我没发挥出产品能力」。Sida 总结了一个特别高效的提需求方式：用飞书画板画出原型，截图给 agent。
以复杂的 PPT 应用为例——左边是缩略图列表，中间是大纲列表，右侧是预览列表，顶部有模型切换、自定义 system prompt 设置等。在 Cursor 里大段描述页面结构和功能，效率很低。但在飞书画板上快速画出布局，截图发给 agent 说「我想要的这个东西就是这样一个形态」，效果立竿见影。「经常遇到这种情况，我想要的 APP 怎么描述都跟我想的完全不一样，画个图给到他，立马就开发好了，精准地实现自己的需求。」
部署与移动端：从网站到 APP
网站部署：传统方式需要买服务器、域名、配置环境、装 Git/Docker、维护监控，「没有编程背景的用户可能一周都搞不定」。Sida 推荐 Vercel：把应用提交到 GitHub，在 VSCode 用 GitHub 账号登录，添加项目一键部署。部署时填上后端接口的 key 等环境变量，等一两分钟网站就上线了。上线后可以添加自定义域名，按提示配置双向互指即可。Sida 特别提到，用 Vercel 部署的网站绑定自己的国内域名后，不需要梯子就能在国内访问——因为国内互联网监管是黑名单政策，只要不是严重违法网站，国外服务器也能正常访问，且国外服务器绑域名甚至不用备案。
移动端 APP 开发：安装 Node.js 后，跟 Cursor 说「Create expo stack funding in on that」，这句话背后是：用 React Native 开发移动端，用 Expo 解决周边服务（导航栏等），用 NativeWind 在移动端使用 Tailwind CSS。创建项目时无脑选 yes，再用 Cursor 打开开发。Sida 分享：「今年大概年初的时候，过年期间可能就两天时间，用这个技术栈就开发了一个应用，就上线应用商店了。」Expo 开发的应用是跨端的，一次开发可以同时打包成 iOS 和安卓应用发布。
现场问答
手办生成页面能用电脑摄像机作为照片输入吗？ 可以。现在的浏览器都能调用手机端接口，手机打开网页也能获取相册图片。
用 Expo 开发的应用能发布到应用商店吗？ 可以。Expo 开发的应用是跨端的，既能打包成 iOS 应用，也能打包成安卓应用，一次开发两边都能发布。
Cursor 和 Kiro 功能差别大吗？ 体感差别不大。Sida 个人不太喜欢 Kiro 的开发范式（写 spec 的范式），更习惯自己把需求描述清楚。Claude 模型做基础 Web coding 可以，但进阶应用（移动端、现代组件库）需要用编辑器类产品如 Cursor。
COZE 空间和 Cursor 的功能差异？ COZE 空间是第一个版本（0.02 版本），限制较多：不能指定技术栈、不能安装额外包（如画板组件）、不能指定组件库、不能基于模板开发。更进阶的需求还是依托编辑器类产品。后续会有非常大的升级。
零基础小白如何快速入门？ 两件事：第一，先想好一个 idea，编辑好需求，找到产品发出 query。过程中遇到问题，agent 会告诉你现在遇到什么问题、尝试怎么解决，你只需要看懂回复、指引方向。第二，把 agent 当学习工具，不懂的技术问题直接问模型，边做边学。Sida 自己是文科生、学经济学出身，「一点编程基础都没有」，前端水平到 2023 年还是刚入门，全靠跟 agent 对话学习。
每天大概学多久？ 因人而异。Sida 工作很忙，每周末花一两个小时，「可以把它理解成一个玩的过程，玩着玩着就是越来越懂」。
开发好的网站如何转成 APP 或小程序？ 网站转小程序没有特别好的办法。建议把项目打开，让 Cursor「维持这个应用的功能、交互设计、样式的设计，帮我重新用微信小程序的框架重新写一遍」。微信小程序有很多框架，具体用什么可以咨询 Cursor。
有推荐的教程资源吗？ B 站 up 主「after ship」的视频是优质的 Web coding 教程资源。Sida 自己的完整教程也已录完，正在剪辑中。
要点回顾
- 入门：下载编辑器，完整描述第一个需求发出去，几分钟看到效果即入门。
- 前端美化三法：精准样式关键词（参考 WebAtlas.design）、设计图提取设计系统、Figma 设计稿（COZE 空间原生支持或安装 Figma MCP）。
- 进阶开发：先装 Node.js，让 Cursor 创建 Next.js + TypeScript + Tailwind CSS 项目，才能用上现代组件库；追求专业品质可购买 ThemeForest 付费模板套壳。
- 后端接口：资讯类数据用 RapidAPI，AI 模型接口用火山方舟或 COZE 工作流 API，带数据库应用用 Supabase。
- 高效提需求：用飞书画板画原型截图给 agent，比大段文字描述更精准。
- 部署：用 Vercel 一键部署，绑定国内域名后无需梯子即可访问。
- 移动端 APP：用「Create expo stack funding in on that」创建 Expo + NativeWind 项目，跨端发布 iOS 和安卓。
直播回放约 98 分钟
播放器来自飞书妙记 · 在新窗口打开