我用AI做了第一個(gè)產(chǎn)品，聊聊全過程和踩過的坑

從AI使用者到產(chǎn)品創(chuàng)造者的蛻變，一次完整的AI視頻生成網(wǎng)站開發(fā)之旅。作者不僅成功對(duì)接Seedance系列API，實(shí)現(xiàn)文本/圖片生視頻的核心功能，更通過Cursor+Claude Code的AI組合拳完成全流程開發(fā)。本文將揭秘從開源模板改造到支付閉環(huán)搭建的全過程，分享如何用AI工具突破個(gè)人開發(fā)者的技術(shù)邊界。

———— / BEGIN / ————

這段時(shí)間，我用AI編程工具，開發(fā)了一款視頻生成網(wǎng)站，域名也申請(qǐng)了，并且可以進(jìn)行訪問了。

因?yàn)橹Ц董h(huán)節(jié)還沒打通，無法進(jìn)行閉環(huán)體驗(yàn)，所以就先不放鏈接了，等接通支付后再發(fā)出來。

今天主要分享一下網(wǎng)站主要功能，開發(fā)的完整過程，以及一些體會(huì)、踩過的坑。

為什么要開發(fā)網(wǎng)站

AI工具的能力越來越強(qiáng)大，但是對(duì)于大多數(shù)人來講，還只是用在日常的AI聊天、AI搜索、AI寫PPT階段，并沒有用AI真正做出屬于自己的產(chǎn)品。

對(duì)于我來講，未來計(jì)劃用AI開發(fā)幾十款產(chǎn)品，并且能對(duì)外訪問。

而AI生成視頻網(wǎng)站，就是我第一個(gè)真正意義上落地的AI產(chǎn)品，目前我的第二款A(yù)I產(chǎn)品——小程序也正在開發(fā)階段，后續(xù)同樣會(huì)對(duì)外發(fā)布。

想要真正掌握AI工具，最有效的辦法從來不是談理論、做簡單的demo演示，而是多使用、多體驗(yàn)，多用AI去解決實(shí)際問題，落地完整的產(chǎn)品項(xiàng)目。

只有親手開發(fā)一款可訪問、可使用的閉環(huán)產(chǎn)品，才能沉下心吃透AI工具的亮點(diǎn)、長處與短板，真正實(shí)現(xiàn)能力的提升。

我深耕自媒體領(lǐng)域已有一年時(shí)間，研究過大量自媒體賬號(hào)，發(fā)現(xiàn)很多創(chuàng)作者都停留在理論層面，沒有打造過自己的產(chǎn)品。

基于個(gè)人成長、實(shí)操驗(yàn)證、職業(yè)體驗(yàn)等多方面考慮，我決定自主開發(fā)AI視頻生成網(wǎng)站，具體原因分為四點(diǎn)。

第一，市場驗(yàn)證需求。自主開發(fā)產(chǎn)品可以將作品放到真實(shí)市場中檢驗(yàn)，從而判斷用戶需求是否真實(shí)存在，讓產(chǎn)品落地更有價(jià)值。

第二，深耕AI實(shí)操能力。單純的碎片化使用AI工具很難形成體系化能力，通過完整的產(chǎn)品開發(fā)流程，能夠更好地掌握AI工具的落地應(yīng)用技巧，解決開發(fā)、適配、運(yùn)行中的各類問題。

第三，突破職業(yè)工作模式局限。我是產(chǎn)品經(jīng)理，以往優(yōu)化產(chǎn)品、迭代功能，需要對(duì)接研發(fā)、測試等多個(gè)崗位，協(xié)調(diào)多方人員、聯(lián)動(dòng)多個(gè)系統(tǒng)。

而這次獨(dú)立開發(fā)產(chǎn)品，相當(dāng)于一人扛起整個(gè)團(tuán)隊(duì)的工作，能夠親身驗(yàn)證單人獨(dú)立開發(fā)AI產(chǎn)品的可行性，同時(shí)積累全過程的踩坑經(jīng)驗(yàn)，打破傳統(tǒng)協(xié)作模式的思維局限。

第四，Seedance 2.0API接口已經(jīng)對(duì)外開放，官方生成視頻成本并不低。

上圖是Seedance 2.0 API收費(fèi)方式。根據(jù)實(shí)測，生成一條15秒的視頻大約消耗30.89萬Tokens。按純文生視頻模式估算，單條成本約15元，即每秒約1元。

即夢(mèng)免費(fèi)版調(diào)用Seedance 2.0需要排隊(duì)等待6小時(shí)，就算等6個(gè)小時(shí)，大概率也會(huì)提示失敗。

而開通69元基礎(chǔ)會(huì)員后，生成2.0視頻數(shù)量也有限制，每月僅能制作3條左右15秒普通視頻，或1條15秒高清視頻。

高昂的成本、繁瑣的排隊(duì)流程等，讓我萌生了自主開發(fā)視頻生成網(wǎng)站的想法。

自主搭建平臺(tái)，不僅能解決部分使用痛點(diǎn)，還能直觀感受自研產(chǎn)品與市面主流產(chǎn)品的差異，積累產(chǎn)品開發(fā)與運(yùn)營經(jīng)驗(yàn)。

總而言之，想要真正用好AI編程工具，關(guān)鍵是找到小眾、精準(zhǔn)的需求，親手落地實(shí)現(xiàn)，對(duì)接真實(shí)目標(biāo)用戶，不斷驗(yàn)證、迭代、完善產(chǎn)品。

不一定要開發(fā)一個(gè)視頻生成的網(wǎng)站，可以從小需求切入，體驗(yàn)完整落地閉環(huán)，也是掌握AI能力的不錯(cuò)路徑。

核心功能

本次開發(fā)的AI視頻生成網(wǎng)站，主要支持視頻和圖片生成視頻的功能。

Seedance 2.0 API接口，從2026年4月14日開始，正式對(duì)外開放，采用Tokens用量計(jì)費(fèi)模式，支持個(gè)人開發(fā)者與企業(yè)接入使用。

目前我的網(wǎng)站，已支持對(duì)接Seedance 1.5 Pro、Seedance 2.0 fast、Seedance 2.0。

其中，Seedance 1.5 Pro視頻質(zhì)量比2.0要差一個(gè)等級(jí)。

Seedance 2.0 fast主打極速生成，支持生成高質(zhì)量畫面，同時(shí)較2.0版縮短生成時(shí)長，適配快速迭代創(chuàng)作需求；視頻質(zhì)量比2.0稍微差一點(diǎn)。

Seedance 2.0主打高清影視級(jí)畫質(zhì)，畫面細(xì)節(jié)、鏡頭運(yùn)鏡、光影質(zhì)感更出色，可制作高品質(zhì)創(chuàng)意視頻。

此外，網(wǎng)站支持用戶通過Google賬號(hào)一鍵登錄。

網(wǎng)站還支持會(huì)員訂閱、余額充值等操作，包含基礎(chǔ)版、專業(yè)版、團(tuán)隊(duì)版等。

目前因支付接口尚未對(duì)接完成，暫未對(duì)外開放使用，后續(xù)打通支付閉環(huán)后即可完整落地，對(duì)外發(fā)布。

開發(fā)工具

網(wǎng)站的核心開發(fā)工具是Cursor + Claude Code。

全程借助Cursor編輯器搭配Claude Code大模型輔助開發(fā)，無論是網(wǎng)站前端頁面搭建、功能邏輯編寫，還是Seedance 2.0系列API接口對(duì)接、登錄與付費(fèi)框架代碼開發(fā)，均由AI完成。

同時(shí)借助AI能力排查代碼漏洞、優(yōu)化程序邏輯、修復(fù)運(yùn)行bug，極大降低了單人開發(fā)的技術(shù)門檻，大幅提升開發(fā)效率，讓非專業(yè)研發(fā)也能獨(dú)立完成完整網(wǎng)站項(xiàng)目開發(fā)。

代碼托管與版本管理依托GitHub完成。項(xiàng)目代碼同步至GitHub倉庫，全程做好版本迭代記錄，每一次功能更新、代碼修改、bug修復(fù)都有留存。

網(wǎng)站線上部署則使用Vercel平臺(tái)，完成代碼編寫與上傳后，可一鍵自動(dòng)部署，讓網(wǎng)站順利實(shí)現(xiàn)外網(wǎng)可訪問。

域名解析與文件存儲(chǔ)用的是Cloudflare。

一方面通過Cloudflare完成DNS解析配置，實(shí)現(xiàn)域名與網(wǎng)站服務(wù)的綁定；

另一方面使用Cloudflare R2存儲(chǔ)服務(wù)，用來存放網(wǎng)站生成的視頻文件、用戶上傳的參考圖片等各類資源。

項(xiàng)目數(shù)據(jù)庫選用Neon云數(shù)據(jù)庫，主要用于存儲(chǔ)網(wǎng)站核心數(shù)據(jù)，包括用戶登錄信息、會(huì)員權(quán)限數(shù)據(jù)、充值記錄、視頻生成記錄、用戶創(chuàng)作素材數(shù)據(jù)等。

整套工具鏈都適合個(gè)人開發(fā)者，兼顧低成本、高效率、易運(yùn)維的優(yōu)勢，無需昂貴的服務(wù)器和復(fù)雜的開發(fā)設(shè)備，僅靠線上工具組合就完成了從代碼編寫、版本管理、線上部署、域名解析、資源存儲(chǔ)到數(shù)據(jù)存儲(chǔ)的全流程開發(fā)，非常適合普通人用AI獨(dú)立開發(fā)產(chǎn)品、落地個(gè)人項(xiàng)目。

開發(fā)過程

本次AI視頻生成網(wǎng)站全程基于開源SaaS模板Videofly，結(jié)合自身使用需求完成定制化改造、模型接入、頁面優(yōu)化、參數(shù)調(diào)試與線上部署。

具體開發(fā)全過程分為模板搭建、本地開發(fā)、定制化改版、模型接口適配、參數(shù)規(guī)則優(yōu)化、部署驗(yàn)收六大階段。

1. 開源模板搭建

項(xiàng)目核心依托成熟開源模板快速落地，基礎(chǔ)框架選用 videofly-template（基于Saasfly改造的生產(chǎn)級(jí)AI視頻SaaS模板），自帶完整的用戶認(rèn)證、積分體系、付費(fèi)框架、視頻生成基礎(chǔ)邏輯與UI界面，適配Next.js 15、React 19技術(shù)架構(gòu)，可快速實(shí)現(xiàn)產(chǎn)品化落地。

首先進(jìn)入模板開源地址：

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

點(diǎn)擊頁面右上角「使用模板」功能，基于原版模板創(chuàng)建專屬代碼倉庫，將基礎(chǔ)模板完整同步至個(gè)人GitHub倉庫，完成項(xiàng)目源碼初始化留存，為后續(xù)二次開發(fā)、版本迭代、代碼備份打下基礎(chǔ)。

2. 本地環(huán)境搭建與模板初始化

倉庫創(chuàng)建完成后，開始搭建本地開發(fā)環(huán)境。

首先在電腦終端進(jìn)入指定本地文件夾，執(zhí)行克隆命令:

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

將云端模板代碼完整下載至本地。

代碼克隆完成后，通過Cursor編輯器打開整個(gè)項(xiàng)目文件夾，依托Cursor+Claude Code實(shí)現(xiàn)AI輔助開發(fā)。

借助項(xiàng)目自帶的Skills能力，直接輸入「初始化模板」指令，依次填寫品牌名、官方域名、參考站點(diǎn)等核心配置；一鍵完成模板環(huán)境初始化，自動(dòng)適配項(xiàng)目基礎(chǔ)配置、路由結(jié)構(gòu)與基礎(chǔ)功能框架，大幅節(jié)省基礎(chǔ)環(huán)境搭建時(shí)間。

3. 全站視覺改造

模板初始化完成后，核心開展全站界面、品牌標(biāo)識(shí)、配色體系、文案內(nèi)容的精細(xì)化改版，統(tǒng)一全站視覺規(guī)范，同時(shí)修復(fù)改版bug，反復(fù)調(diào)試達(dá)到最優(yōu)展示效果。

1、品牌LOGO迭代優(yōu)化。完成多輪LOGO配色與樣式調(diào)整，同步修改瀏覽器標(biāo)簽ICON、首頁左上角LOGO、二級(jí)功能頁LOGO，統(tǒng)一全站品牌視覺，消除重復(fù)冗余標(biāo)識(shí)。

2、全站配色體系重構(gòu)。對(duì)頁面標(biāo)簽、按鈕、邊框、漸變、背景色進(jìn)行全面改版，將原有紅色主題色系統(tǒng)一替換為藍(lán)色主題，包含圖標(biāo)、文字、Badge背景、邊框漸變等元素。

同時(shí)將Text to Video、Image to Video、My Creations等五大二級(jí)功能頁，從原有白底黑字改為黑底白字風(fēng)格，搭配藍(lán)色主調(diào)控件，整體風(fēng)格更沉穩(wěn)高級(jí)，貼合產(chǎn)品調(diào)性。

3、頁面模塊隱藏與功能屏蔽。根據(jù)產(chǎn)品精簡需求，針對(duì)性隱藏冗余模塊進(jìn)行隱藏，精簡產(chǎn)品核心功能，減少用戶干擾。

4、全站文案與字號(hào)適配。完成中英文雙語言文案全面更新，替換原有官方介紹文案，統(tǒng)一為「一句話，生成你的AI視頻」核心定位。

英文主標(biāo)題更新為「One sentence, infinite AI videos」，副標(biāo)題更新為「Transform text or images into high-quality AI videos, instantly」，同步適配中文對(duì)應(yīng)文案。

同時(shí)精細(xì)化調(diào)整主標(biāo)題字號(hào)，適配移動(dòng)端、平板、桌面端不同尺寸屏幕，優(yōu)化頁面層級(jí)與視覺觀感。

4. 視頻生成參數(shù)優(yōu)化

為貼合短視頻創(chuàng)作場景，簡化用戶操作門檻，對(duì)視頻生成核心參數(shù)進(jìn)行調(diào)整，刪除冗余選項(xiàng)，統(tǒng)一全站生成規(guī)則。

1、寬高比：保留16:9、9:16、1:1、4:3、3:4主流比例，刪除21:9小眾比例；

2、視頻時(shí)長：僅保留4s、8s、12s三個(gè)核心檔位，刪除5s、6s、7s、9s、10s、11s全部冗余時(shí)長；

3、分辨率：保留480P、720P高清適配檔位，刪除1080P高消耗分辨率。

該套參數(shù)同步覆蓋首頁、二級(jí)創(chuàng)作頁全部生成入口，統(tǒng)一全站配置，降低用戶選擇成本，同時(shí)適配Seedance模型的生成規(guī)格，平衡視頻質(zhì)量與生成成本。

5. Seedance全系模型接口適配開發(fā)

本階段是項(xiàng)目核心開發(fā)環(huán)節(jié)，基于大模型接口，接入Seedance 2.0視頻模型。

1、新增Seedance 2.0 Fast模型。依據(jù)官方接口文檔，接入Seedance 2.0 Fast專屬API接口，適配對(duì)應(yīng)調(diào)用參數(shù)、生成規(guī)則與回調(diào)地址，支持用戶極速高清生成視頻。

2、刪除老舊低效的Seedance 1.0 Fast、Seedance 1.0 Quality兩個(gè)模型，最終全站僅保留三款優(yōu)質(zhì)模型：Seedance 2.0、Seedance 2.0 Fast、Seedance 1.5 Pro，聚焦核心優(yōu)質(zhì)生成能力。

3、完成模型接入后，使用實(shí)景提示詞進(jìn)行功能實(shí)測，輸入提示詞后，成功調(diào)用模型生成視頻，驗(yàn)證接口調(diào)用、畫面生成、運(yùn)鏡光影效果均正常可用。

6. 付費(fèi)定價(jià)配置、網(wǎng)頁優(yōu)化與項(xiàng)目部署

1、付費(fèi)體系核算與配置。搭建一次性購買、月付、年付三套梯度付費(fèi)體系，配置基礎(chǔ)版、專業(yè)版、團(tuán)隊(duì)版套餐對(duì)應(yīng)的積分額度與售價(jià)。

2、網(wǎng)頁標(biāo)題精細(xì)化修改。優(yōu)化站點(diǎn)SEO展示效果，去除重復(fù)字段，貼合產(chǎn)品核心定位。

3、線上部署與問題排查。完成全部功能開發(fā)與頁面調(diào)試后，通過Vercel進(jìn)行線上部署，搭配Cloudflare完成DNS解析與資源存儲(chǔ)配置、Neon數(shù)據(jù)庫數(shù)據(jù)對(duì)接。

部署過程中排查多項(xiàng)配置錯(cuò)誤，修正部署勾選異常、參數(shù)配置偏差等問題，最終實(shí)現(xiàn)網(wǎng)站外網(wǎng)正常訪問、功能正常運(yùn)行，完成產(chǎn)品落地。

截至目前，網(wǎng)站已完整實(shí)現(xiàn)文本生視頻、圖片生視頻、多模型切換、Google賬號(hào)登錄、積分付費(fèi)框架搭建等核心能力，僅支付接口未完成最終對(duì)接。

心得體會(huì)

這次從0到1落地AI視頻產(chǎn)品，讓我從“用AI的人”真正轉(zhuǎn)變?yōu)椤坝肁I做產(chǎn)品的人”，并總結(jié)出一些心得體會(huì)：

1、需求先于一切：真實(shí)痛點(diǎn)決定產(chǎn)品價(jià)值，所有開發(fā)工作的前提，是明確真實(shí)需求。沒有真實(shí)需求，開發(fā)只是無效迭代。

2、迭代要可控：拒絕批量修改，逐步推進(jìn)一次性堆疊需求只會(huì)帶來混亂。正確方式是：拆解任務(wù) → 單點(diǎn)修改 → 單點(diǎn)驗(yàn)證 → 穩(wěn)定推進(jìn)，用節(jié)奏換穩(wěn)定。

3、善用AI：先出方案，再執(zhí)行復(fù)雜修改先讓AI輸出完整方案（改什么、怎么改、風(fēng)險(xiǎn)點(diǎn)），確認(rèn)無誤再落地。看似變慢，實(shí)則減少返工，是典型的“慢即是快”。

4、Debug能力才是核心競爭力開發(fā)過程中，報(bào)錯(cuò)與卡殼是常態(tài)。真正拉開差距的，不是寫功能，而是定位問題、拆解問題、解決問題的能力。

5、模型策略：先基礎(chǔ)，后高階優(yōu)先跑通基礎(chǔ)能力，再逐步升級(jí)模型。過早接入頂級(jí)模型，只會(huì)增加成本與復(fù)雜度，不適合個(gè)人開發(fā)階段。

6、壁壘來自“解決問題”而非“套模板”模板人人會(huì)用，但能解決復(fù)雜問題、做定制化優(yōu)化、完成全流程落地，才是真正的核心競爭力。

本質(zhì)總結(jié)：需求驅(qū)動(dòng)方向，節(jié)奏保證穩(wěn)定，AI提升效率，Debug構(gòu)建壁壘。

這次項(xiàng)目不僅是一次產(chǎn)品落地，更是一次從“AI使用者”到“產(chǎn)品創(chuàng)造者”的轉(zhuǎn)變。

核心收獲：

1、驗(yàn)證了：個(gè)人 + AI = 可完成團(tuán)隊(duì)級(jí)產(chǎn)品開發(fā)；

2、構(gòu)建了完整能力鏈路，即需求拆解、開發(fā)協(xié)同、問題排查、迭代管理

3、打破了“只會(huì)用AI，不會(huì)做產(chǎn)品”的瓶頸

核心認(rèn)知：

AI不是自動(dòng)完成工具，而是能力放大器。它能提升效率，但無法替代產(chǎn)品思考與決策能力。

人負(fù)責(zé)方向與判斷，AI負(fù)責(zé)執(zhí)行與加速，才是正確范式。

給大家5條核心建議：

1、別只用AI，要用AI做產(chǎn)品

2、一定解決真實(shí)問題，拒絕自嗨開發(fā)

3、小步迭代，穩(wěn)比快更重要

4、重視Debug能力，這是核心壁壘

5、從簡單開始，逐步升級(jí)，不要一上來追求最強(qiáng)

本文來自公眾號(hào)：AI產(chǎn)品劉剛 作者：劉剛