我用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產品劉剛 作者：劉剛