# Bolt.new 發布了開源的「Bolt Slides」，讓任何 Agent 都能將簡報轉化為互動式的響應式網頁應用程式

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：bolt.new (@boltdotnew) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥🔥 · 日期：2026-07-17

> 原始來源：https://x.com/boltdotnew/status/2077770386444341332

## 證據與延伸閱讀

- [github.com/stackblitz](https://github.com/stackblitz)

## 中文摘要

Bolt.new 發布了開源的「Bolt Slides」，讓任何 Agent 都能將簡報轉化為互動式的響應式網頁應用程式。

Bolt 團隊認為目前的 AI 簡報工具產出內容往往過於單調且缺乏新意，因此推出了這套全新的簡報開發框架，要打破傳統靜態簡報的限制。透過這項工具，使用者可以讓 Agent 運用豐富的組件庫，製作出包含 3D 互動模型、即時數據儀表板、協作白板以及功能性原型（如房貸計算器）的動態簡報，讓觀眾不再只是被動閱讀，而是能親自體驗內容。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784273917915-p7uel2eo.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/ba21bcae20e8955a.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這段影片展示了 Bolt.new 如何透過自然語言指令，快速生成房地產展示頁面、行銷腦力激盪白板以及醫療 3D 互動影像。

**核心特色與應用場景**
- **互動體驗**：簡報不再是靜態頁面，而是功能完整的網頁應用。例如房地產簡報可嵌入 3D 虛擬導覽與房貸計算器；財務報告則支援即時篩選、排序與深入挖掘數據細節。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784273934599-6x0yb1gz.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/2481d4129cc64220.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這段影片展示了房地產展示平台與房貸計算工具的互動介面。

- **協作功能**：簡報中可直接嵌入互動白板，讓團隊成員在會議中即時新增便利貼、繪圖或進行投票，將觀眾轉變為協作者。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784273949110-gf2o49ad.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/4a91ae2b19120691.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這是一段展示 Bolt.new 平台互動式簡報功能的影片，演示了如何透過數位白板進行團隊協作與決策。

- **響應式設計**：由於每個簡報本質上都是一個網頁應用，因此能完美適應各種螢幕尺寸，從電腦到手機皆可透過連結輕鬆分享。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784273965659-r9i8bcvu.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/5c6eeeb3bd897eb0.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這段影片展示了 Bolt.new 平台如何透過互動式介面呈現財務報表數據，並支援多裝置響應式佈局。

- **專業呈現**：提供包含圖表、數據統計、程式碼視窗、瀏覽器框架等多種組件，並透過 `src/styles/tokens.css` 輕鬆調整配色、字體與圓角，確保簡報具備專業的視覺質感。

**使用方式與開發指引**
使用者可以透過以下兩種方式開始製作簡報：
1. **直接使用**：前往 [bolt.new](http://bolt.new)，透過單一指令即可快速生成簡報。
2. **自建專案**：從 [GitHub 儲存庫](http://bolt.fyi/agent-slides) 下載原始碼，並搭配您偏好的 Agent（如 Claude Code、Codex、Cursor 等）進行開發。

若選擇自建專案，開發流程如下：
1. 複製專案：`git clone https://github.com/stackblitz/bolt-slides`
2. 安裝依賴：`cd bolt-slides` 後執行 `npm install`
3. 啟動開發伺服器：`npm run dev`
4. 編輯內容：專案中的每一張簡報皆為獨立的 React 組件，開發者可直接在 `src/App.tsx` 中編寫 JSX 或使用內建的組件庫。

**技術架構與擴充**
Bolt Slides 的底層架構類似於 Slidev，採用分頁式設計，並透過 `BroadcastChannel` 同步簡報者模式（Presenter Mode）與觀眾視窗。簡報者模式提供計時器、下一頁預覽及筆記編輯功能，且筆記會在地端同步儲存。此外，該專案內建了 Agent 專用的 `skill`（位於 `.bolt/skills/slides/SKILL.md`），能引導 Agent 處理主題設定、版面編排及 Favicon 等細節，實現「一鍵生成」的完整簡報體驗。

## 媒體內容

**這段影片展示了 Bolt.new 如何透過自然語言指令，快速生成房地產展示頁面、行銷腦力激盪白板以及醫療 3D 互動影像。**

**影片中的 Prompt 與操作**

Prompt（00:00）：

```
製作展示此開放參觀房產的投影片
```

原文：Make slides showcasing this open house property

Prompt（00:11）：

```
製作一張用於腦力激盪第四季行銷活動的投影片
```

原文：Build a slide to brainstorm marketing campaigns for Q4

Prompt（00:27）：

```
為我的病患掃描結果建立一個 3D 互動視圖
```

原文：Create a 3d interactive view of my patient's scans

操作步驟：

1. （00:00）輸入指令並送出
2. （00:02）顯示生成的房地產展示頁面
3. （00:11）輸入指令並送出
4. （00:14）顯示生成的行銷腦力激盪白板
5. （00:27）輸入指令並送出
6. （00:30）顯示生成的 3D 醫療影像互動視圖

**這段影片展示了房地產展示平台與房貸計算工具的互動介面。**

**影片中的 Prompt 與操作**

操作步驟：

1. @00:00 進入 3D 虛擬導覽介面。
2. @00:06 切換至房貸計算器介面。
3. @00:08 點擊切換貸款年限為 15 年。
4. @00:09 拖曳滑桿調整房價。
5. @00:11 拖曳滑桿調整頭期款比例。
6. @00:13 拖曳滑桿調整利率。

**這是一段展示 Bolt.new 平台互動式簡報功能的影片，演示了如何透過數位白板進行團隊協作與決策。**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:03）點擊「Sticky」功能
2. （00:05）在白板上新增便利貼
3. （00:06）輸入文字「Let's ship slides!」
4. （00:10）點擊「Draw」功能
5. （00:11）選擇繪圖顏色
6. （00:12）在白板上進行繪圖標記

**這段影片展示了 Bolt.new 平台如何透過互動式介面呈現財務報表數據，並支援多裝置響應式佈局。**

**影片中的 Prompt 與操作**

Prompt（00:03）：

```
行銷
```

原文：marketing

操作步驟：

1. （00:03）在搜尋框輸入 "marketing"
2. （00:05）點選篩選標籤 "Q4"
3. （00:07）畫面切換至行動裝置版面
4. （00:10）點選 "Net income" 區塊
5. （00:12）點選 "Professional services" 區塊
6. （00:14）點選 "Licensing & other" 區塊

## 標籤

Agent, 開源專案, 新產品, Web, Bolt.new
