# 策展 · X (Twitter) 🔥🔥 > 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt) > 作者：Genspark (@genspark_ai) · 平台：X (Twitter) · 日期：2026-06-25 > 原始來源：https://x.com/genspark_ai/status/2069755099413664005 ## 中文摘要 Genspark 推出 Genspark Design 整合 Claude Opus 4.7 模型，讓使用者無需設計背景即可從構想直接產出可上線的成品。 **核心功能與整合** Genspark Design 將原有的 Genspark Build Preview 與 Genspark AI Designer 進行整合，並宣布將停用 Photo Genius 功能，旨在提供一個全方位的設計平台。其核心特色包括： - **一站式設計**：支援 UI 原型、影片、HTML 動畫及海報製作，所有產出皆為可直接使用的成品。 - **品牌一致性**：使用者可上傳 Figma 檔案或儲存設計，建立專屬的設計系統，並在不同專案中重複使用或與團隊共享。 - **直接產出程式碼**：透過 Genspark Code 技術，使用者僅需一鍵即可將應用程式或網站設計轉化為可運作的程式碼。 **自動化設計流程** 根據平台展示，Genspark Design 的操作流程高度依賴自然語言指令，具體步驟如下： > 這段影片展示了名為 Genspark Design 的 AI 設計工具，如何透過自然語言指令快速生成應用程式 UI、設計系統、登陸頁面及產品演示影片。 1. 輸入指令（例如「Design a note taking APP UI」），系統自動生成包含登入、首頁與待辦事項等完整介面的應用程式（如「Pollenote」）。 2. 透過後續指令進行風格調整，例如要求更改配色或調整為「playful illustrated look」，系統會即時更新 UI。 3. 使用「Edit」功能針對字體、顏色與間距進行細節微調。 4. 利用「Draw」功能在介面上手繪標記，並透過指令新增功能模組（如「Add a formatting editor here」或「Add a dark mode toggle」）。 5. 系統會根據生成的 UI 自動建立包含 Logo、顏色、字體與按鈕樣式的設計系統。 6. 根據設計系統自動產出登陸頁面（Landing page）與產品演示影片。 7. 點擊「Build it」功能，系統將自動生成對應的程式碼（如 JavaScript 的 `IntersectionObserver` 邏輯），並整合應用程式、網站與演示影片。 **上市優惠方案** 為慶祝 Genspark Design 上線，官方自 2026 年 6 月 24 日下午 5:00（PDT）起推出特別優惠，針對不同使用者提供 credit 減免： - **個人使用者**：享有兩週半價優惠。 - **團隊方案使用者**：享有四週半價優惠。 - **企業方案使用者**：享有四週零 credit 成本優惠。 使用者可透過 [Genspark 官方網站](https://www.genspark.ai/agents?type=design) 開始體驗。 ## 媒體內容 **這段影片展示了名為 Genspark Design 的 AI 設計工具，如何透過自然語言指令快速生成應用程式 UI、設計系統、登陸頁面及產品演示影片。** **影片中的 Prompt 與操作** Prompt（00:00）： ``` 設計一個筆記 APP 的使用者介面 ``` 原文：Design a note taking APP UI Prompt（00:06）： ``` 不太喜歡綠色……幫它加點顏色 ``` 原文：Don't really like the green... Add more colors to it Prompt（00:12）： ``` 給它一種俏皮的插畫風格 ``` 原文：Give it a playful illustrated look Prompt（00:27）： ``` 在這裡加一個格式編輯器 ``` 原文：Add a formatting editor here Prompt（00:33）： ``` 加入一個深色模式切換開關 ``` 原文：Add a dark mode toggle Prompt（00:43）： ``` 根據這個 UI 建立我的設計系統 ``` 原文：Create my design system based on the UI Prompt（00:51）： ``` 為這個 APP 建立一個發布用的登陸頁面 ``` 原文：Create a launch landing page for the APP Prompt（01:42）： ``` 建立一個產品演示影片 ``` 原文：Create a product demo video 操作步驟： 1. （00:00）輸入指令並送出 2. （00:06）輸入指令並送出 3. （00:12）輸入指令並送出 4. （00:18）使用 Edit 功能調整文字樣式 5. （00:27）輸入指令並送出 6. （00:33）輸入指令並送出 7. （00:43）輸入指令並送出 8. （00:51）輸入指令並送出 9. （01:42）輸入指令並送出 10. （01:52）點擊 Build it 按鈕 ## 標籤 AIGC, 新產品, 功能更新, Figma, Genspark, Anthropic, Claude