# Wonder 推出 Wonder Desktop 告別瀏覽器分頁

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

> 原作者：Wonder (@usewonder) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-07-28

> 原始來源：https://x.com/usewonder/status/2081771600924287251

## 證據與延伸閱讀

- [Wonder 推出 Wonder Desktop](https://x.com/usewonder/status/2081771600924287251)
- [桌面應用程式已開放下載](https://wonder.design/downloads)

## 中文摘要

Wonder 推出 Wonder Desktop 告別瀏覽器分頁。

**核心功能與方案**
- 桌面端整合：在桌面 App 裡直接做設計、排版、調樣式，也能設定 Shader 背景，並直接產出可交付的真實程式碼。
- 畫布上的設計稿：示範途中編輯的是一張定價頁**設計稿**（畫面可見選取框與尺寸標示、內文仍是 `feature 3`／`feature 4` 佔位字），並不是 Wonder 實際的方案內容。
- 實作展示：示範內容包含星際旅行概念 App 的介面設計（涵蓋路線、航班、座位、登機證與倒數計時）以及 3D 浮雕文字與動態著色特效調整。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1785202510899-7k12d3p9.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/2d0525ee8ac104d3.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Wonder Desktop 的編輯畫面與內嵌 Agent 操作示範。

**下載與取得**
- 該桌面應用程式目前已開放使用者下載，可至 [Wonder 下載頁面](https://wonder.design/downloads) 取得安裝檔。

## 媒體內容

**Wonder Desktop 的編輯畫面與內嵌 Agent 操作示範。**

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

操作步驟：

1. （00:00）將該工具圖示拖曳至 Applications 資料夾
2. （00:14）在畫面上檢視購物車與商品細節排版
3. （00:26）在屬性面板調整 background fill 顏色
4. （00:31）點選 Agent 模型下拉選單切換模型
5. （00:36）開啟 Agent 詳細設定與管理介面
6. （00:45）調整陰影屬性（Box 數值與色彩）
7. （00:50）選取定價方案排版並修改文字內容
8. （01:43）調整版面配置屬性
9. （01:54）調整 Box Shadow 數值與陰影效果
10. （01:57）在 Shader 設定面板中挑選與調整背景特效參數
11. （02:01）設定 Glow 背景與漸層顏色
12. 在 Shader 設定面板中套用不同的著色器效果

## 標籤

新產品, 功能更新, Wonder