# GPT Image Hub prompt

## 設計工具與終端機同步UI模型
- URL: https://www.gptimagehub.com/zh-TW/library/design-tool-and-terminal-sync-ui-mockup
- Generator URL: https://www.gptimagehub.com/zh-TW/generate?promptId=oss-ym-g2-26157
- Markdown URL: https://www.gptimagehub.com/api/agent/markdown?path=%2Fzh-TW%2Flibrary%2Fdesign-tool-and-terminal-sync-ui-mockup
- Category: UI / UX 設計
- Model: gpt-image-2
- Aspect ratio: 16:9
- Style: graphic-design
- Tags: ui模型, saas介面, 設計編輯器, 終端機cli, 產品發佈, 網頁畫布
- Updated: 2026-10-27T00:52:13.098Z
- Created: 2026-10-27T00:52:13.098Z

生成包含網頁編輯器與終端機程式碼同步的精緻SaaS展示模型。可自訂標題、專案名稱與終端機指令以展示自家產品。

### Full prompt
```text
一款精緻的16:9 SaaS產品釋出UI樣機，展示設計工具與CLI終端的實時同步。全幅採用溫暖的珊瑚橙色背景，居中放置帶有柔和陰影的米白設計畫布，上方區域性疊加數個介面面板。

佈局與元素：
1. 左側編輯器面板：米白圓角側邊欄，標題為“Playground Crowdfunding Page”，最左側為圓形應用圖示，最右側為鈴鐺圖示。頂部操作欄包含“Edit”、“Discard”和珊瑚色“Save”按鈕。三個標籤頁：“Simple”（啟用狀態）、“Pro”、“Code”。緊湊的9圖示工具欄：選中指標、游標、矩形、網格/十字、圓形、文字T、鉛筆、撤銷、重做。帶標籤的檢查器面板：Text、Typography（字型“Poppins”、字號“36 px”、顏色“#1A1714”、字重“Bold”、斜體、下劃線、刪除線、對齊、行高“1.35”、大小寫“none”、字距）、Appearance（背景“None”、圓角“0px”、溢位“visible”、不透明度“1”、z軸“auto”）以及Border。

2. 中央網頁畫布：頂部為3個彩色圓點（綠、黃、紅）構成的標誌，後接“[Maple Grove Park]”。下方為淺綠色膠囊標籤，帶綠色小圓點，文字為“[A neighborhood project on Elm Street]”。醒目的深墨綠色大標題被細藍框與4個方形角控制手柄選中：“[Let's build a playground our kids will never forget.]”（分為四行）。標題下方為較小的灰色正文，開頭為“Maple Grove's old play structure came down last spring. Together, we can replace it with something”。

3. 右側捐款卡片：白色圓角卡片，右邊緣微裁切，包含藍色虛線選中的金額框“[$61,240]”、綠至青檸漸變進度條、狀態列“72% funded”與“312 neighbors”，以及大型圓角綠色按鈕“Chip in today”。

4. 懸浮終端視窗：右上角黑色macOS風格終端，圓角帶陰影，左上角紅黃綠三色圓點。標題欄顯示“temp — claude — 64x22”。左側顯示橙色畫素藝術吉祥物圖示。等寬終端文字包含“Claude Code v2.1.176”、“claude-opus-4-8”、“~/temp”、“? for shortcuts”，以及末尾帶游標的命令列“/design-sync Push my design components to Claude Design”。

風格：現代SaaS向量UI展示，清晰的Figma與macOS美學，極度銳利的排版，柔和微妙陰影，無人物，無水印。
```