精選 · 開放 · 免費

Builder.io

專為您的實際程式碼庫與設計系統打造的 AI 產品開發平台。

01

設計氣質 DNA

一個數位指揮中心，讓設計師、專案經理與工程師在同一個以程式碼驅動的環境中共存。

02

色彩

高對比度深色模式，搭配單一高飽和度的青綠色，用於主要操作與強調。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 600
• heading48px · 600
• subheading24px · 500
• body18px · 400
• small14px · 400

使用幾何無襯線字體作為展示文字，以符合 Poppins 風格的美學。 · 使用人文無襯線字體作為內文，以確保可讀性。 · 使用等寬字體顯示程式碼片段與終端機命令。 · 大型展示文字採用緊湊的字間距。

04

間距

以 4px 為基礎單位，搭配標準比例系統。

05

表面 (圓角 / 陰影 / 邊線)

1px solid rgba(255,255,255,0.1)

0px 1px 4px 0px rgba(0,0,0,0.08) · 0px 0px 30px 0px rgba(0,0,0,0.2)

06

版面

標準 12 欄網格，搭配固定最大寬度容器。

07

動效與互動

區塊進入時採用淡入與向上滑動效果。 · hover 狀態時進行平滑的透明度過渡。

細微的亮度提升或邊框顏色變化。 · 立即的視覺回饋。

08

組件

• button 高對比度的青綠色主要按鈕（圓角），以及次要按鈕（外框/幽靈按鈕）。
• card 深色表面卡片，配有細微邊框與充足內邊距。
• chip 用於分類的小型圓角標籤。
• input 標準表單輸入欄位，採用深色背景。
• hero 全寬區塊，搭配大型排版與概念性插圖。

09

文案語氣與禁用清單

• 語氣 自信、專業且技術嫻熟。
• 標題風格 直接且以行動為導向，通常強調「協作」或「生產就緒」。
• 按鈕文案 簡潔明確，例如「開始建置」或「立即註冊」。

• 不要使用淺色背景——截圖顯示背景為純黑 (#000000)。
• 不要使用次要強調色——截圖顯示僅使用單一主導的青綠色 (#18B6F6)。
• 不要為每張卡片都使用高對比度邊框——截圖顯示許多元素採用細微或無邊框設計。
• 不要為展示文字使用襯線字體——截圖顯示使用幾何無襯線字體。
• 不要將內文置中對齊——截圖顯示段落為左對齊。
• 不要使用過多裝飾性圖示——截圖使用簡潔的線條圖示。
• 不要使用狹窄擁擠的版面——截圖顯示充足的留白與內邊距。
• 避免: 過於隨意或對話式的語氣
• 避免: 模糊的行銷術語
• 避免: 被動語態
• 避免: 模糊價值主張的複雜句型

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko