AI 應用建構工具提示詞

AI 應用建構工具的 HTML、CSS 和 JavaScript 提示詞。

Bolt、Lovable、v0 和 Cursor 等 AI 應用建構工具可以將一段提示詞轉換為可運行的 HTML 頁面。以下提示詞專為靜態 HTML、CSS 和 JavaScript 輸出而設計，每個結果都是可以立即預覽和分享的頁面。

npx @htmlshare/cli install --agent all

一條指令即可把本機 Skill 安裝到 Codex、Claude 和 Cursor。安裝後，在任一工具中使用 /htmlshare 發布目前 HTML 專案。

即用提示詞

複製提示詞，貼到你的 AI 建構工具中。

包含 hero 區域、功能網格和價格表的完整頁面佈局。

建構一個 SaaS 落地頁，包含醒目的 hero 標題和 CTA 按鈕、帶圖示的三欄功能網格、免費和付費兩檔價格表，以及 FAQ 手風琴。使用 HTML、透過 CDN 引入的 Tailwind CSS 和原生 JavaScript 實現手風琴效果。所有內容放在一個檔案中。

建立一個簡潔的產品發布頁面，包含全屏 hero 區域、電子郵件收集表單和五項功能列表。無外部依賴，所有樣式內嵌。

導覽列、卡片、彈窗和頁籤等可重複使用的 UI 元件。

建構一個響應式導覽列，左側為 logo，中間有 4 個導覽連結，右側有「開始使用」按鈕。為行動裝置新增漢堡選單。僅使用 HTML 和 CSS，無需 JavaScript 程式庫。

建立三種卡片變體：帶圖示和說明的功能卡片、帶功能列表和 CTA 的定價卡片、帶頭像和引用文字的評價卡片。使用 HTML 和 CSS 自訂屬性。

管理後台、數據統計卡片和資料展示佈局。

建立一個管理儀表板，包含固定的左側圖示導覽、帶搜尋框和使用者頭像下拉選單的頂部列，以及顯示 4 張統計卡片和佔位資料表格的主內容區。使用 HTML 和 CSS Grid。

建構一個響應式資料分析頁面，包含日期範圍選擇器、頂部 3 張 KPI 摘要卡片，以及僅用 CSS 和 HTML 實現的長條圖（不使用 canvas 或 SVG 程式庫）。下方新增資料表格。

多步驟表單、手風琴、頁籤和對話框。

建構一個三步驟表單：個人資訊、帳戶偏好和確認摘要。頂部顯示步驟進度列。使用 HTML、CSS 和原生 JavaScript，無需任何程式庫或框架。

建立一個帶有 4 個頁籤和平滑內容切換效果的頁籤元件。每個面板包含標題和段落。使用 HTML、CSS 過渡動畫和原生 JavaScript。

更多提示詞來源

除了上面的範本，這些是查找經過驗證的 AI HTML 和 CSS 建構工具提示詞的最佳去處。

在 GitHub 搜尋 'bolt-prompts'、'v0-prompts' 或 'ai-html-prompts'，可以找到社群維護的提示詞庫和入門範本合集。

r/ChatGPT、r/ClaudeAI 和 r/webdev 經常分享提示詞範本，討論哪些方法能產生更乾淨的 HTML 和 CSS 程式碼。

Bolt.new、Lovable、v0 by Vercel 和 Cursor 各自在官方文件和社群 Discord 中發布了範例提示詞和最佳實踐。

瀏覽 Bolt Gallery 和 v0 社群中已發布的範例，從你想複現的效果出發，反向推導出有效的提示詞寫法。

可以從標有 'ai-prompts' 或 'bolt-prompts' 的 GitHub 儲存庫、你的 AI 建構工具官方文件（Bolt、v0、Lovable、Cursor），以及 Reddit 社群（r/ChatGPT、r/ClaudeAI）開始。本頁面的提示詞可以直接複製貼上使用。

要具體說明佈局方式（CSS Grid、Flexbox），列出所需的每個區塊（hero、特性、定價、FAQ），指定樣式方案（Tailwind CDN、內嵌 CSS 或獨立 style 區塊），最後加上「將所有內容放在一個 HTML 檔案中」。越詳細的提示詞產生的結果越穩定。

將產生的 HTML 檔案貼上或上傳到 HTMLShare，即可立即產生可分享的瀏覽器預覽連結——不需要 Git 儲存庫、不需要託管設定、不需要本機伺服器。用它來查看結果並與隊友或客戶分享。