雛型程式開發AI工具介紹

v0 by Vercel

v0 by Vercel 是由 Vercel 推出的一個開發工具，旨在幫助開發者快速構建和部署各種網頁應用和元件。該工具的核心功能是提供一個開放的社群平台，開發者可以從中獲取靈感、分享項目，並基於現有的範例進行快速開發。

這個平台提供了大量由社群貢獻的範例項目，這些項目涵蓋了多種應用場景，例如： AI SDK 聊天機器人、加密貨幣儀表板、3D 登陸頁面、動態背景生成、卡片生成器、音樂播放器等。每個範例都可以被 Fork（複製）並用於自己的項目，大大降低了開發的門檻。可以快速將範例或自定義項目部署到線上，並即時查看效果。

特別適合需要靈感或快速原型開發的開發者。其社群驅動的範例庫和快速部署功能是其主要亮點。然而，對於需要更高自定義或複雜功能的項目，可能需要搭配其他工具使用。

bolt

官方網站：https://bolt.new/

bolt.new 是一個專注於快速構建、運行、編輯和部署全棧網頁應用的平台。該網站的核心功能是提供一個簡化的開發環境，讓用戶能夠快速實現從構想到部署的完整流程。其目標用戶可能包括開發者、設計師以及需要快速原型開發的團隊。這是一款創新的 AI 驅動全端開發工具，特別適合需要快速構建原型或 MVP 的開發者和團隊。其零配置、即時預覽和一鍵部署功能大幅簡化了開發流程。然而，對於需要更高穩定性和複雜功能的專案，Bolt.new 可能仍需進一步完善。

網站首頁的標語為「Prompt, run, edit, and deploy full-stack web apps」，這表明該平台的主要特點是：

Prompt：快速啟動項目。
Run：運行應用程式。
Edit：即時編輯代碼。
Deploy：快速部署應用。

這樣的功能設計適合需要快速迭代和測試的開發場景。

Replit

使用心得的文章：https://blog.creatorhome.tw/ai-hackathon/

文章中介紹了他利用 AI 的協助，實現了兩大主要功能：一個是透過問卷內容和 AI API 推薦禮物的功能，另一個是客製化祝福卡片並提供可下載的信件圖片和語音轉換功能的功能。

官方網站：https://replit.com

Replit是一款具有多人協作和開發者社群功能的寫程式工具，且用戶不必在電腦設定複雜的環境安裝或程式下載，直接在瀏覽器中打開網站，就能開始寫程式、發作品。從2016年上線至今，用戶累積突破1,000萬人。這是一個線上集成開發環境（Integrated Development Environment，IDE），支援Python、Java、C++等50多種程式語言，並可將寫好的程式碼即時更新在GitHub儲存庫中，讓開發應用程式從無到有的過程，都能直接在Replit一站完成。

Replit還能像Google Docs一樣邀請多位用戶協作，學程式的過程可以不再孤單。Replit 更適合用來打造小型應用程式，使用體驗上可能不如本地開發環境順暢，且運行速度較慢。

主要功能：

多語言支援： Replit 支援多種程式語言，讓開發者能夠在同一平台上進行不同語言的開發。
即時協作： 多位使用者可以同時編輯同一專案，類似於 Google 文件的協作方式，方便團隊合作。
一鍵部署： 使用者可以快速將應用程式部署並獲取公開連結，方便分享和展示專案。
AI 助手： 透過 Replit Agent，使用者只需描述需求，AI 即可自動生成程式碼並完成部署，適合沒有程式設計經驗的初學者。

21st.dev

官方網址:https://21st.dev/

21st.dev 是一個專為設計工程師打造的開源 React UI 元件平台，靈感來自 shadcn/ui。 21ST.DEV 該平台提供多樣化的預建元件和頁面模板，協助開發者快速構建高品質的使用者介面。 HUNTSCREENS.COM 使用者只需透過一條命令即可安裝所需元件，顯著提升開發效率。

主要功能：

專業元件（Pro Components）： 提供專業級的 React 與 Tailwind CSS 元件，協助開發者快速構建精緻的使用者介面。 21st.dev
登陸頁面（Landing Pages）： 包含多種頁面模板，如公告、背景、邊框、行動呼籲、客戶展示、比較、功能介紹、頁尾、英雄圖、圖片、地圖、導航選單、定價、捲動區域、推薦詞、文字、影片等，方便快速搭建網站。
UI 元素（UI Elements）： 提供豐富的 UI 元素，如手風琴、AI 聊天、警示、頭像、徽章、按鈕、日曆、卡片、輪播、核取方塊、日期選擇器、對話框、下拉選單、空狀態、檔案樹、檔案上傳、表單、圖示、輸入框、連結、選單、通知、數字、分頁、彈出視窗、單選群組、選擇器、側邊欄、登入、註冊、滑桿、載入器、表格、標籤頁、標籤、文字區域、提示、切換、工具提示等，滿足不同的設計需求。
Hooks： 提供 React Hooks，簡化狀態管理和副作用處理。

shadcn/ui

官方網站：https://ui.shadcn.com/

shadcn/ui 是一個開源的 React 元件集合，專為開發者提供設計精美且可高度客製化的 UI 元件。與傳統的元件庫不同，shadcn/ui 採用「複製貼上」的方式，開發者可以直接將所需的元件程式碼複製到自己的專案中，進行深度客製化。

主要功能：

多樣化的元件： 提供多種常見的 UI 元件，如按鈕、表單、對話框等，滿足不同的開發需求。
基於 Tailwind CSS： 所有元件均使用 Tailwind CSS 構建，方便開發者進行樣式調整和主題設定。
無障礙設計： 元件設計時考慮了無障礙性，確保應用程式對所有使用者友善。

許多開發者讚賞 shadcn/ui 的客製化能力，認為它提供了更大的靈活性，特別適合需要精細控制元件行為和樣式的專案。然而，也有使用者指出，對於僅需基本功能的專案，傳統的元件庫可能更為方便，因為它們提供了開箱即用的解決方案。

Lovable

官方網站：https://lovable.dev/

Lovable 是一款由人工智慧（AI）驅動的全端應用程式構建工具，旨在透過自然語言處理技術，讓使用者能夠以對話的方式快速建立網站和 Web 應用程式。使用者只需描述想要的功能，Lovable 即可自動生成對應的程式碼，簡化了軟體開發流程，讓非技術人員也能輕鬆構建高品質的軟體。Lovable 的主要功能特點包括後端功能實現、精確編輯和支持大型代碼庫，這些特點使得 Lovable 在 AI 全栈應用程序構建器中具有獨特的優勢。

主要功能：

自然語言生成程式碼： 使用者以自然語言描述所需功能，Lovable 會將其轉換為實際的程式碼。
構建和部署網站/應用程式： 透過對話，使用者可以構建並部署完整的網站和 Web 應用程式。
與 Supabase 整合： 支援與 Supabase 整合，方便使用者連接 Postgres 資料庫，處理資料儲存和使用者身份驗證。
GitHub 同步： 使用者可以將生成的程式碼同步至 GitHub，進行版本控制和程式碼管理。
處理大型程式碼庫： Lovable 能夠處理包含超過 100,000 行程式碼的大型專案。

Claire's Blog