精選 · 開放 · 免費
Tiptap
一個頂級的開發者平台，用於建構與自訂富文字編輯器。
deveditor
01
設計氣質 DNA
開發者編輯器AI 原生生產就緒元件
一套時尚、專業的工具組，用於建構現代文字編輯器。
02
色彩
#0d0d0dInk
rgba(13,13,13,0.6)Ink soft
#ffffffBG
#f5f5f4BG soft
rgba(13,13,13,0.4)Muted
rgba(0,0,0,0.1)Line
高對比度的單色調，搭配鮮明的漸層點綴以突顯重點。
03
字型
geometric-sans · humanist-sans · monospace
- display
96px · 700 - h1
56px · 700 - body
22px · 400 - small
16px · 400 - caption
12px · 400
為大型、具衝擊力的標題使用幾何無襯線字體。 · 為可讀性高的內文與導覽使用人文無襯線字體。 · 將內文字重保持在 400，以獲得最佳可讀性。
04
間距
4px
8px
16px
24px
32px
40px
48px
64px
96px
以 8px 為基礎網格，搭配 4px 的細微調整次網格。
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 12px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.1) 或 solid 1px border-color: rgb(13, 13, 13)
0 4px 10px 0 rgba(0,0,0,0.04) · 0 1px 4px 0 rgba(0,0,0,0.03) · 0 1px 2px 0 rgba(0,0,0,0.02)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
12 欄網格，搭配最大寬度容器、寬大邊距，以及手機版堆疊區塊。
07
動效與互動
250msmicro
300mssmall
400msmedium
cubic-bezier(0.65, 0, 0.35, 1)easing
為顏色、變形與邊框圓角提供流暢的過渡效果。 · 為互動元件提供縮放動畫。 · 所有互動狀態皆使用一致的緩動效果。
在 hover 時提供細微的背景顏色變化或變形效果。 · 在點擊時縮放或改變透明度。
08
組件
- button 高對比度實心按鈕，採用藥丸形圓角，用於主要操作。
- card 簡潔的卡片，帶有細微陰影與圓角，用於展示範本。
- chip 小型標籤，採用藥丸形圓角，用於分類（例如：「付費」、「免費」）。
- input 簡潔、帶有邊框的輸入欄位，採用圓角設計。
- hero 大型、粗體的排版標題，背景為鮮明的漸層，並內嵌編輯器使用者介面。
09
文案語氣與禁用清單
- 語氣 專業、自信，並以開發者為中心。
- 標題風格 直接、以行動為導向，且粗體醒目。
- 按鈕文案 清晰簡潔，強調速度與生產就緒。
- 不要使用深色模式 — 截圖顯示以淺色為主的背景。
- 不要使用襯線字體 — 截圖顯示所有文字均採用無襯線字體。
- 不要使用低對比度的文字 — 截圖顯示在淺色背景上使用深色文字，以確保高可讀性。
- 不要使用複雜、擁擠的版面 — 截圖顯示簡潔、置中且間距良好的區塊。
- 不要使用單一實色背景 — 截圖顯示鮮明的漸層背景。
- 不要使用銳利的方形圓角 — 截圖顯示所有表面均採用圓角（8-16px）。
- 避免: 過於隨意或 playful 的語言。
- 避免: 非開發者社群標準的行話。
- 避免: 模糊的價值主張。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Tiptap 是一個頂級的開發者平台，用於建構 AI 原生的文字編輯器。設計簡潔且專業，採用高對比度的單色調色板（墨色 #0d0d0d、背景 #ffffff），並搭配鮮明的漸層作為強調。排版混合使用幾何與人文無襯線字體，並以粗體、大型的標題來創造衝擊力。關鍵元素包括簡潔的導覽、整合了編輯器預覽的首頁區塊，以及元件範本網格。重要禁忌：絕不使用深色主題、避免使用襯線字體，且絕不使用低對比度的文字。整體感覺是現代、值得信賴且生產就緒的。
en · zh-CN · zh-TW · ja · ko