我用AI做了第一个产品，聊聊全过程和踩过的坑

从AI使用者到产品创造者的蜕变，一次完整的AI视频生成网站开发之旅。作者不仅成功对接Seedance系列API，实现文本/图片生视频的核心功能，更通过Cursor+Claude Code的AI组合拳完成全流程开发。本文将揭秘从开源模板改造到支付闭环搭建的全过程，分享如何用AI工具突破个人开发者的技术边界。

———— / BEGIN / ————

这段时间，我用AI编程工具，开发了一款视频生成网站，域名也申请了，并且可以进行访问了。

因为支付环节还没打通，无法进行闭环体验，所以就先不放链接了，等接通支付后再发出来。

今天主要分享一下网站主要功能，开发的完整过程，以及一些体会、踩过的坑。

为什么要开发网站

AI工具的能力越来越强大，但是对于大多数人来讲，还只是用在日常的AI聊天、AI搜索、AI写PPT阶段，并没有用AI真正做出属于自己的产品。

对于我来讲，未来计划用AI开发几十款产品，并且能对外访问。

而AI生成视频网站，就是我第一个真正意义上落地的AI产品，目前我的第二款AI产品——小程序也正在开发阶段，后续同样会对外发布。

想要真正掌握AI工具，最有效的办法从来不是谈理论、做简单的demo演示，而是多使用、多体验，多用AI去解决实际问题，落地完整的产品项目。

只有亲手开发一款可访问、可使用的闭环产品，才能沉下心吃透AI工具的亮点、长处与短板，真正实现能力的提升。

我深耕自媒体领域已有一年时间，研究过大量自媒体账号，发现很多创作者都停留在理论层面，没有打造过自己的产品。

基于个人成长、实操验证、职业体验等多方面考虑，我决定自主开发AI视频生成网站，具体原因分为四点。

第一，市场验证需求。自主开发产品可以将作品放到真实市场中检验，从而判断用户需求是否真实存在，让产品落地更有价值。

第二，深耕AI实操能力。单纯的碎片化使用AI工具很难形成体系化能力，通过完整的产品开发流程，能够更好地掌握AI工具的落地应用技巧，解决开发、适配、运行中的各类问题。

第三，突破职业工作模式局限。我是产品经理，以往优化产品、迭代功能，需要对接研发、测试等多个岗位，协调多方人员、联动多个系统。

而这次独立开发产品，相当于一人扛起整个团队的工作，能够亲身验证单人独立开发AI产品的可行性，同时积累全过程的踩坑经验，打破传统协作模式的思维局限。

第四，Seedance 2.0API接口已经对外开放，官方生成视频成本并不低。

上图是Seedance 2.0 API收费方式。根据实测，生成一条15秒的视频大约消耗30.89万Tokens。按纯文生视频模式估算，单条成本约15元，即每秒约1元。

即梦免费版调用Seedance 2.0需要排队等待6小时，就算等6个小时，大概率也会提示失败。

而开通69元基础会员后，生成2.0视频数量也有限制，每月仅能制作3条左右15秒普通视频，或1条15秒高清视频。

高昂的成本、繁琐的排队流程等，让我萌生了自主开发视频生成网站的想法。

自主搭建平台，不仅能解决部分使用痛点，还能直观感受自研产品与市面主流产品的差异，积累产品开发与运营经验。

总而言之，想要真正用好AI编程工具，关键是找到小众、精准的需求，亲手落地实现，对接真实目标用户，不断验证、迭代、完善产品。

不一定要开发一个视频生成的网站，可以从小需求切入，体验完整落地闭环，也是掌握AI能力的不错路径。

核心功能

本次开发的AI视频生成网站，主要支持视频和图片生成视频的功能。

Seedance 2.0 API接口，从2026年4月14日开始，正式对外开放，采用Tokens用量计费模式，支持个人开发者与企业接入使用。

目前我的网站，已支持对接Seedance 1.5 Pro、Seedance 2.0 fast、Seedance 2.0。

其中，Seedance 1.5 Pro视频质量比2.0要差一个等级。

Seedance 2.0 fast主打极速生成，支持生成高质量画面，同时较2.0版缩短生成时长，适配快速迭代创作需求；视频质量比2.0稍微差一点。

Seedance 2.0主打高清影视级画质，画面细节、镜头运镜、光影质感更出色，可制作高品质创意视频。

此外，网站支持用户通过Google账号一键登录。

网站还支持会员订阅、余额充值等操作，包含基础版、专业版、团队版等。

目前因支付接口尚未对接完成，暂未对外开放使用，后续打通支付闭环后即可完整落地，对外发布。

开发工具

网站的核心开发工具是Cursor + Claude Code。

全程借助Cursor编辑器搭配Claude Code大模型辅助开发，无论是网站前端页面搭建、功能逻辑编写，还是Seedance 2.0系列API接口对接、登录与付费框架代码开发，均由AI完成。

同时借助AI能力排查代码漏洞、优化程序逻辑、修复运行bug，极大降低了单人开发的技术门槛，大幅提升开发效率，让非专业研发也能独立完成完整网站项目开发。

代码托管与版本管理依托GitHub完成。项目代码同步至GitHub仓库，全程做好版本迭代记录，每一次功能更新、代码修改、bug修复都有留存。

网站线上部署则使用Vercel平台，完成代码编写与上传后，可一键自动部署，让网站顺利实现外网可访问。

域名解析与文件存储用的是Cloudflare。

一方面通过Cloudflare完成DNS解析配置，实现域名与网站服务的绑定；

另一方面使用Cloudflare R2存储服务，用来存放网站生成的视频文件、用户上传的参考图片等各类资源。

项目数据库选用Neon云数据库，主要用于存储网站核心数据，包括用户登录信息、会员权限数据、充值记录、视频生成记录、用户创作素材数据等。

整套工具链都适合个人开发者，兼顾低成本、高效率、易运维的优势，无需昂贵的服务器和复杂的开发设备，仅靠线上工具组合就完成了从代码编写、版本管理、线上部署、域名解析、资源存储到数据存储的全流程开发，非常适合普通人用AI独立开发产品、落地个人项目。

开发过程

本次AI视频生成网站全程基于开源SaaS模板Videofly，结合自身使用需求完成定制化改造、模型接入、页面优化、参数调试与线上部署。

具体开发全过程分为模板搭建、本地开发、定制化改版、模型接口适配、参数规则优化、部署验收六大阶段。

1. 开源模板搭建

项目核心依托成熟开源模板快速落地，基础框架选用 videofly-template（基于Saasfly改造的生产级AI视频SaaS模板），自带完整的用户认证、积分体系、付费框架、视频生成基础逻辑与UI界面，适配Next.js 15、React 19技术架构，可快速实现产品化落地。

首先进入模板开源地址：

https://github.com/zifeixu85/videofly-template

点击页面右上角「使用模板」功能，基于原版模板创建专属代码仓库，将基础模板完整同步至个人GitHub仓库，完成项目源码初始化留存，为后续二次开发、版本迭代、代码备份打下基础。

2. 本地环境搭建与模板初始化

仓库创建完成后，开始搭建本地开发环境。

首先在电脑终端进入指定本地文件夹，执行克隆命令:

git clone https://github.com/taradl7347c/artf

将云端模板代码完整下载至本地。

代码克隆完成后，通过Cursor编辑器打开整个项目文件夹，依托Cursor+Claude Code实现AI辅助开发。

借助项目自带的Skills能力，直接输入「初始化模板」指令，依次填写品牌名、官方域名、参考站点等核心配置；一键完成模板环境初始化，自动适配项目基础配置、路由结构与基础功能框架，大幅节省基础环境搭建时间。

3. 全站视觉改造

模板初始化完成后，核心开展全站界面、品牌标识、配色体系、文案内容的精细化改版，统一全站视觉规范，同时修复改版bug，反复调试达到最优展示效果。

1、品牌LOGO迭代优化。完成多轮LOGO配色与样式调整，同步修改浏览器标签ICON、首页左上角LOGO、二级功能页LOGO，统一全站品牌视觉，消除重复冗余标识。

2、全站配色体系重构。对页面标签、按钮、边框、渐变、背景色进行全面改版，将原有红色主题色系统一替换为蓝色主题，包含图标、文字、Badge背景、边框渐变等元素。

同时将Text to Video、Image to Video、My Creations等五大二级功能页，从原有白底黑字改为黑底白字风格，搭配蓝色主调控件，整体风格更沉稳高级，贴合产品调性。

3、页面模块隐藏与功能屏蔽。根据产品精简需求，针对性隐藏冗余模块进行隐藏，精简产品核心功能，减少用户干扰。

4、全站文案与字号适配。完成中英文双语言文案全面更新，替换原有官方介绍文案，统一为「一句话，生成你的AI视频」核心定位。

英文主标题更新为「One sentence, infinite AI videos」，副标题更新为「Transform text or images into high-quality AI videos, instantly」，同步适配中文对应文案。

同时精细化调整主标题字号，适配移动端、平板、桌面端不同尺寸屏幕，优化页面层级与视觉观感。

4. 视频生成参数优化

为贴合短视频创作场景，简化用户操作门槛，对视频生成核心参数进行调整，删除冗余选项，统一全站生成规则。

1、宽高比：保留16:9、9:16、1:1、4:3、3:4主流比例，删除21:9小众比例；

2、视频时长：仅保留4s、8s、12s三个核心档位，删除5s、6s、7s、9s、10s、11s全部冗余时长；

3、分辨率：保留480P、720P高清适配档位，删除1080P高消耗分辨率。

该套参数同步覆盖首页、二级创作页全部生成入口，统一全站配置，降低用户选择成本，同时适配Seedance模型的生成规格，平衡视频质量与生成成本。

5. Seedance全系模型接口适配开发

本阶段是项目核心开发环节，基于大模型接口，接入Seedance 2.0视频模型。

1、新增Seedance 2.0 Fast模型。依据官方接口文档，接入Seedance 2.0 Fast专属API接口，适配对应调用参数、生成规则与回调地址，支持用户极速高清生成视频。

2、删除老旧低效的Seedance 1.0 Fast、Seedance 1.0 Quality两个模型，最终全站仅保留三款优质模型：Seedance 2.0、Seedance 2.0 Fast、Seedance 1.5 Pro，聚焦核心优质生成能力。

3、完成模型接入后，使用实景提示词进行功能实测，输入提示词后，成功调用模型生成视频，验证接口调用、画面生成、运镜光影效果均正常可用。

6. 付费定价配置、网页优化与项目部署

1、付费体系核算与配置。搭建一次性购买、月付、年付三套梯度付费体系，配置基础版、专业版、团队版套餐对应的积分额度与售价。

2、网页标题精细化修改。优化站点SEO展示效果，去除重复字段，贴合产品核心定位。

3、线上部署与问题排查。完成全部功能开发与页面调试后，通过Vercel进行线上部署，搭配Cloudflare完成DNS解析与资源存储配置、Neon数据库数据对接。

部署过程中排查多项配置错误，修正部署勾选异常、参数配置偏差等问题，最终实现网站外网正常访问、功能正常运行，完成产品落地。

截至目前，网站已完整实现文本生视频、图片生视频、多模型切换、Google账号登录、积分付费框架搭建等核心能力，仅支付接口未完成最终对接。

心得体会

这次从0到1落地AI视频产品，让我从“用AI的人”真正转变为“用AI做产品的人”，并总结出一些心得体会：

1、需求先于一切：真实痛点决定产品价值，所有开发工作的前提，是明确真实需求。没有真实需求，开发只是无效迭代。

2、迭代要可控：拒绝批量修改，逐步推进一次性堆叠需求只会带来混乱。正确方式是：拆解任务 → 单点修改 → 单点验证 → 稳定推进，用节奏换稳定。

3、善用AI：先出方案，再执行复杂修改先让AI输出完整方案（改什么、怎么改、风险点），确认无误再落地。看似变慢，实则减少返工，是典型的“慢即是快”。

4、Debug能力才是核心竞争力开发过程中，报错与卡壳是常态。真正拉开差距的，不是写功能，而是定位问题、拆解问题、解决问题的能力。

5、模型策略：先基础，后高阶优先跑通基础能力，再逐步升级模型。过早接入顶级模型，只会增加成本与复杂度，不适合个人开发阶段。

6、壁垒来自“解决问题”而非“套模板”模板人人会用，但能解决复杂问题、做定制化优化、完成全流程落地，才是真正的核心竞争力。

本质总结：需求驱动方向，节奏保证稳定，AI提升效率，Debug构建壁垒。

这次项目不仅是一次产品落地，更是一次从“AI使用者”到“产品创造者”的转变。

核心收获：

1、验证了：个人 + AI = 可完成团队级产品开发；

2、构建了完整能力链路，即需求拆解、开发协同、问题排查、迭代管理

3、打破了“只会用AI，不会做产品”的瓶颈

核心认知：

AI不是自动完成工具，而是能力放大器。它能提升效率，但无法替代产品思考与决策能力。

人负责方向与判断，AI负责执行与加速，才是正确范式。

给大家5条核心建议：

1、别只用AI，要用AI做产品

2、一定解决真实问题，拒绝自嗨开发

3、小步迭代，稳比快更重要

4、重视Debug能力，这是核心壁垒

5、从简单开始，逐步升级，不要一上来追求最强

本文来自公众号：AI产品刘刚 作者：刘刚