博客 / 詳情

返回

從想法到上線：AI 輔助的個人 Demo 全流程

前言

曾幾何時，為了答疑解惑，或驗證一個突如其來的想法，我嘗試過各種前端工具：
從 JSFiddle、CodePen 這樣的在線代碼編輯器，到 StackBlitz 這種項目級在線 IDE，再到 GitHub Pages、Netlify 等靜態站點託管平台。

這些工具各自解決了某一階段的問題，卻始終存在一道隱形門檻——環境、配置、部署。
很多時候，真正應該消耗精力的是“實現想法”，但現實中，“把它跑起來”本身就已經讓人精疲力盡。

進入 AI 時代，這條路徑被重新定義了。
Copilot、Cursor 讓寫代碼這件事本身變得更快，而我最近接觸到的 Bolt.new，第一次讓我清晰地感受到：
AI 正在把「從一個念頭到一個可訪問的 Demo」壓縮到極限。

本文並不是一份工具羅列清單，而是一條完整而清晰的演進主線：
前端開發工具如何一步步縮短「想法 → 代碼 → 上線」的距離，以及今天的個人開發者，如何真正把想法快速落地。

工具的歷史演進

前端開發工具的四次躍遷

  1. 代碼片段時代（JSFiddle / CodePen）
  2. 項目在線化（StackBlitz / CodeSandbox）
  3. 部署民主化（GitHub Pages / Netlify / Vercel）
  4. AI 生成時代（Copilot / Cursor / Bolt.new）

在線代碼編輯器的興起（2010-2015）

JSFiddle、CodePen、https://jsrun.net/、RunJS 等代碼片段編輯器

  • 特點：即時反饋、便捷分享
  • 侷限：僅支持代碼片段，無法構建完整項目

其中 https://jsrun.net/ 是我自己常用的一個工具。
功能並不複雜，但因為節點在國內，不需要額外考慮網絡問題，在「隨手驗證一個想法」這件事上，反而非常順手。

項目級在線 IDE 的突破（2017-2020）

StackBlitz（2017） - WebContainers 技術里程碑

  • 在瀏覽器中運行完整 Node.js 環境
  • 支持完整項目結構

CodeSandbox、Replit 等類似工具

個人站

靜態站點託管服務

GitHub Pages、Netlify、Vercel

自建服務器部署

購買 VPS/雲服務器，手動配置 Nginx、Apache，域名解析與 SSL 證書

  • Hexo、Hugo、Jekyll
  • 自建雲 IDE - code-server
    將 VS Code 運行在服務器上，通過瀏覽器訪問完整的 VS Code 功能

AI 驅動的開發時代（2020-至今）

AI 出現之後，傳統在線編輯器的存在感開始明顯下降。問答社區的流量下滑，其實也是同一個信號：開發者獲取答案和解決問題的路徑正在改變。

相比搜索、提問，我們越來越傾向於直接使用 DeepSeek、ChatGPT；
在研發側，則是 GitHub Copilot、Cursor、v0.dev 這類垂直 AI 工具。

直到前兩天，一個朋友和我聊起“雲 IDE”的想法，我才重新去看 StackBlitz 的現狀，也正是在這個過程中，發現了 Bolt.new。

如果説 Copilot 是“更聰明的編輯器”，Cursor 是“會對話的 IDE”，
那麼 Bolt.new 更像是：一個可以直接交付結果的 AI 工程師。

技術演進的關鍵節點對比

研發（AI 生成）

  1. 我們通過人力，需要記住每一個方法的名稱，每一個括號的補全
    這一時期在線編輯器和本地編輯器基本無差別
  2. 我們通過 sublime、VS Code 等工具的插件來提升開發速度
    這一步因為 monaco、code-server 在線編輯器還不至於落後很多
  3. 我們通過 Copilot 來預測，提示
    這一時期，在線編輯器全面落後，研發速度拉開差距
  4. 我們通過對話式 AI 直接生成代碼
    生成的速度差距更大了，直到我發現了 Bolt.new

構建

  1. 無構建時代，jQuery、bootstrap
    這一階段以 HTML 為主是多頁應用，本地和在線兩種差距不大
  2. Vue、React、Ng 開啓的構建時代
    這一階段以 SPA 為主，工程大小開始爆炸，在線形式雖然也有辦法可以開發，但是因為基礎設施更不上已經落後了
  3. SSR
    在線的大多數都是純靜態部署，服務端這種就需要額外自己花錢搞服務器了

StackBlitz 是重要里程碑，StackBlitz 的 WebContainers 技術突破，為後續工具的發展奠定了基礎：

  1. 技術突破：首次在瀏覽器中運行完整 Node.js 環境
  2. 體驗提升：接近本地開發體驗，零延遲
  3. 為 AI 工具鋪路：Bolt.new 基於 StackBlitz 技術，使 AI 生成的應用可以直接運行

部署

  1. 本地構建（FTP 傳代碼）
  2. 雲端構建（Gitlab hooks CICD）

這裏還有一個問題是獨立域名、安全控制，大多數在線編輯完之後雖然也能預覽，但是會有很多限制。

工具比對

為了更清晰地瞭解各階段工具的能力差異，我們製作了以下對比表：

能力維度 代碼片段編輯器<br/>(CodePen) 項目級 IDE<br/>(StackBlitz) 自建雲 IDE<br/>(code-server) 靜態託管<br/>(GitHub Pages) AI 生成<br/>(Bolt.new)
代碼片段 ✅ ✅ ❌ ❌ ✅
完整項目 ❌ ✅ ✅ ✅ ✅
實時預覽 ✅ ✅ ✅ ❌ ✅
依賴管理 ❌ ✅ ✅ ✅ ✅
構建工具 ❌ ✅ ✅ ✅ ✅
版本控制 ✅ ✅ ✅ ✅ ✅
部署能力 預覽 預覽 ✅ ✅ ✅
AI 生成 ❌ ❌ ✅ ✅ ✅
離線工作 ❌ ✅ ❌ ❌ ✅
數據控制 雲端 雲端 自主 雲端 雲端
成本 免費 免費 服務器成本 免費 免費/付費

Bolt.new 使用體驗

我大概用了四次

智能AI語音聊天應用，調用語音識別，集成了DeepSeek AI對話能力

朋友提供給我了一個「智能AI語音聊天應用，調用語音識別，集成了DeepSeek AI對話能力」的頁面，但是功能不好用，讓我幫忙看看。
然後我就使用 Bolt.new 優化併發布

一個智能AI語音聊天應用，集成了DeepSeek AI對話能力。主要功能包括：支持文字輸入和語音識別（點擊錄音/按住説話兩種模式）、實時AI對話、語音播放回復、聊天記錄持久化存儲（使用Bolt Database數據庫）、Markdown格式渲染（支持代碼、表格、列表等富文本）、會話管理、音頻錄製和回放。界面採用深色主題，支持中文語音識別，所有內容禁止選中。

加了很多功能，全程沒有任何代碼的修改，只是和 AI 進行了幾次對話

image.png
image.png
image.png

Electron 客户端開發

這一個開發其實失敗了，Bolt.new 還沒辦法直接運行渲染。 希望後面可以有云測，或者能模擬更多的操作系統吧。
image.png

製作一個前端工程師的個人介紹站

https://frontend-developer-p-1q9i.bolt.host

從專業的角度來看，徒有其表，需要的很多東西都需要額外迭代，多次開發的。

這是一個專業的前端工程師個人作品集網站，採用React + TypeScript + Tailwind CSS技術棧構建。網站包含個人介紹、技能展示、項目作品、工作經歷和聯繫方式等完整模塊。設計採用現代簡約風格，運用藍色漸變配色和流暢的動畫效果，具備完全響應式佈局，支持多端訪問。整體注重用户體驗和視覺呈現，適合前端開發者展示個人能力和項目經驗。

image.pngimage.png

製作一個寺廟的宣傳頁

首先，我不信這些，也沒有太多的瞭解，至少 AI 做出的內容是能蒙哄到我
他生成了好多的內容，包括一些相關歷史，活動，以及核心思想，當前還有一些公益活動，以及常見問題的整理

這是一個名為"慈光禪寺"的佛教寺院官方網站項目。網站採用React + TypeScript + Tailwind CSS技術棧構建，設計精美，功能完善。
網站包含14個主要板塊：寺院簡介、歷代高僧、千年歷史、法脈傳承、寺院風采、法會活動、智慧法語、三大法門（禪宗、淨土、密宗）、公益慈善、寺院新聞、朝山指南、常見問題和聯繫方式。
核心亮點是"三大法門"板塊，詳細介紹了禪宗法門（參禪悟道、坐禪修持）、淨土法門（持名唸佛、觀想念佛、觀像唸佛）和密宗法門（三密修持、本尊瑜伽、大圓滿法），並配有相應的修行方法和祖師法語。
網站界面採用温暖的金色和橙色漸變設計，營造出莊嚴祥和的佛教氛圍，支持響應式佈局和流暢的頁面導航體驗。

image.pngimage.pngimage.pngimage.png

這幾次嘗試讓我最震撼的，並不是“生成得有多好”，而是：
在整個過程中，我幾乎沒有再被「環境、配置、部署」打斷過一次。

結語

從 CodePen 的代碼片段，到 StackBlitz 的項目級在線 IDE，再到 Bolt.new 的 AI 對話式應用生成，前端開發工具的演進，本質上只做了一件事：
不斷縮短「一個人腦中的想法」到「一個可以被訪問、被驗證的作品」之間的距離

今天，我們已經站在一個新的起點上：
不再需要完整的環境、不再需要複雜的配置，甚至不再需要從零開始敲代碼

對個人開發者而言，這意味着：

  • 想法更值得被嘗試
  • Demo 更容易被做出來
  • 個人站不再是“以後再説”的事情

工具會繼續變化，但有一件事不會變：
能最快把想法落地的人，永遠擁有最大的主動權

對我來説，Bolt.new 並不是“取代開發”，
而是讓我重新意識到：個人開發者最寶貴的資源，從來都不是代碼，而是行動速度。、

希望這篇文章，能成為你下一次“想法出現時”，敢於立刻動手的理由

附錄：工具功能描述彙總

代碼片段編輯器類

JSFiddle

  • 功能描述：在線代碼編輯器，支持 HTML、CSS、JavaScript 的實時編輯和預覽
  • 核心特性：代碼片段分享、實時預覽、多框架支持
  • 適用場景：快速測試代碼片段、代碼演示、學習交流
  • 官網：https://jsfiddle.net/

CodePen

  • 功能描述：功能強大的在線代碼編輯器，擁有龐大的社區和豐富的代碼示例
  • 核心特性：實時預覽、代碼收藏、Fork 功能、社區作品展示、前端挑戰賽
  • 適用場景：前端作品展示、學習前端技術、代碼片段分享、作品集展示
  • 官網：https://codepen.io/

JSRUN / RunJS

  • 功能描述：國內在線代碼編輯器，提供中文界面和本土化服務
  • 核心特性：中文支持、快速運行、代碼分享、多語言支持
  • 適用場景：國內開發者快速測試、代碼演示、學習交流
  • 官網：https://jsrun.net/、https://runjs.app/

項目級在線 IDE 類

StackBlitz

  • 功能描述：基於 WebContainers 技術的在線 IDE，在瀏覽器中運行完整的 Node.js 環境

  • 核心特性：

    • WebContainers 技術：毫秒級啓動，零網絡延遲
    • 支持完整項目結構（package.json、node_modules、構建工具）
    • 支持 React、Vue、Angular 等框架的完整開發環境
    • 支持 TypeScript、Webpack、Vite 等構建工具
    • 可離線工作，瀏覽器沙箱隔離
  • 適用場景：快速創建項目 Demo、在線開發調試、技術分享、學習新技術棧
  • 官網：https://stackblitz.com/

CodeSandbox

  • 功能描述：功能完整的在線 IDE，支持多種框架模板和協作開發
  • 核心特性：多框架模板、實時協作、Git 集成、部署功能、團隊協作
  • 適用場景：項目原型開發、團隊協作、代碼審查、快速 Demo
  • 官網：https://codesandbox.io/

自建雲 IDE 類

code-server

  • 功能描述：將 VS Code 運行在服務器上，通過瀏覽器訪問完整的 VS Code 功能

  • 核心特性：

    • 完整的 VS Code 功能（擴展、調試、終端、Git 等）
    • 跨平台訪問（任何設備通過瀏覽器訪問）
    • 資源共享（多人協作）
    • 環境一致性（服務器統一配置）
    • 資源集中（低性能設備也能開發）
    • 完全自主控制（數據存儲在自有服務器）
  • 部署方式：Docker 容器部署、直接安裝、Nginx 反向代理
  • 適用場景：個人開發者遠程開發、團隊協作開發、資源受限設備開發、統一開發環境
  • 官網：https://coder.com/code-server

靜態站點託管類

GitHub Pages

  • 功能描述：GitHub 提供的免費靜態網站託管服務，基於 Git 倉庫自動部署

  • 核心特性：

    • 免費託管靜態網站
    • 與 Git 集成，自動部署
    • 支持自定義域名
    • 支持 HTTPS
    • 支持 Jekyll 靜態站點生成器
  • 適用場景：個人博客、項目文檔、作品集、技術文檔
  • 官網：https://pages.github.com/

Netlify

  • 功能描述：現代化的靜態網站託管平台，支持自動構建和部署

  • 核心特性：

    • 自動構建和部署（CI/CD）
    • 表單處理功能
    • Serverless Functions
    • 預覽部署（PR 預覽）
    • 邊緣網絡 CDN
    • 自動 HTTPS
  • 適用場景：JAMstack 應用、靜態網站、前端應用、API 服務
  • 官網：https://www.netlify.com/

Vercel

  • 功能描述：專為前端框架優化的部署平台，特別支持 Next.js

  • 核心特性：

    • Next.js 深度優化
    • 邊緣網絡（Edge Network）
    • 自動 HTTPS
    • 預覽部署
    • 分析功能
    • Serverless Functions
  • 適用場景：Next.js 應用、React 應用、前端框架項目
  • 官網：https://vercel.com/

AI 驅動開發工具類

GitHub Copilot（2021）

  • 功能描述：AI 代碼補全工具，基於 OpenAI 的 Codex 模型

  • 核心特性：

    • 智能代碼補全
    • 基於上下文的代碼建議
    • 多語言支持
    • 註釋生成代碼
    • 集成到 VS Code、JetBrains 等 IDE
  • 適用場景：日常編碼、代碼補全、學習新技術、提高編碼效率
  • 官網：https://github.com/features/copilot

Cursor（2023）

  • 功能描述：AI 驅動的代碼編輯器，基於 VS Code，專注於 AI 輔助開發

  • 核心特性：

    • 對話式代碼生成
    • AI 代碼編輯
    • 代碼重構建議
    • 錯誤修復建議
    • 多文件上下文理解
  • 適用場景：AI 輔助開發、代碼重構、快速原型開發、學習編程
  • 官網：https://cursor.sh/

v0.dev（2023）

  • 功能描述：AI 驅動的 UI 組件生成工具，專注於 React 組件

  • 核心特性：

    • 自然語言描述生成 UI 組件
    • React 組件庫支持
    • 代碼導出
    • 組件定製
  • 適用場景：快速生成 UI 組件、原型設計、學習 React 組件
  • 官網：https://v0.dev/

Bolt.new（2024）

  • 功能描述：基於 StackBlitz WebContainers 的 AI 對話式應用生成平台

  • 核心特性：

    • 對話式應用生成（自然語言描述需求）
    • 自動生成前後端代碼
    • 實時預覽與迭代
    • 一鍵部署
    • 全棧應用支持
    • 基於 WebContainers 技術（瀏覽器中運行）
  • 適用場景：快速原型驗證、個人項目 Demo、學習新技術棧、MVP 開發
  • 官網：https://bolt.new/
react , vue.js , typescript , 前端 , Javascript
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.