OpenAI

難度:
知名公司
OpenAI 效果預覽

效果預覽

設計規範

由官方品牌資料與該風格提示詞推導出的關鍵 token,可複製或搭配下方 DESIGN.md 使用。

顏色

  • primary提示詞

    主要操作與強調

  • on-primary推導

    主色上的文字

  • secondary提示詞

    標籤、徽章與次要強調

  • on-secondary推導

    輔色上的文字

  • neutral提示詞

    頁面底色

  • on-neutral推導

    底色上的文字

  • surface推導

    卡片、面板與浮層

  • on-surface推導

    表面上的文字

  • border推導

    邊框與分隔線

圓角與形狀

提示詞
sm · 6px
md · 12px
lg · 18px
full

互動元件使用全圓角膠囊形狀。

間距

推導
  • sm8px
  • md12px
  • lg24px

陰影與層級

推導

層級以細邊框與色調分層表達。

字型

提示詞
  • Ag

    標題 32px · 粗體

    Inter

  • Ag

    內文 16px · 一般

    Inter

  • Ag

    標籤 13px · 中等

    Inter

OpenAI 是致力於通用人工智慧研究與部署的公司,其使命是讓 AGI 造福全人類。介面風格與這份克制相稱:純白畫布配深青黑文字(#0d0d0d),Söhne/Inter 只用 400-600 的溫和字重,Signifier 襯線承擔編輯式大標題,圓角柔和(8-12px、膠囊 9999px),髮絲描邊(#e5e5e5)點到為止,大量留白就是最好的分隔線。適合 AI 產品與編輯感內容介面。

OpenAIAI 與大型模型

提示詞範本

基礎範本
Design a OpenAI-inspired interface. - True white canvas (#ffffff) with deep teal-black ink (#0d0d0d); - Söhne / Inter at modest weights (400, 500, 600) — restraint over assertion; - Signifier serif for editorial display headlines; - Soft 8–12px radii everywhere; 9999px pills for chips; - Hairline borders (#e5e5e5) used sparingly; whitespace as primary divider. Colors: #ffffff, #0d0d0d, #1a1a1a, #fafafa with #10a37f accent. Typography: - Background:.

變體提示詞

📱 行動裝置
Design a mobile app with OpenAI aesthetics. Use OpenAI color identity with #10a37f accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with OpenAI style. Use OpenAI color identity with #10a37f accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with OpenAI design language. Use OpenAI color identity with #10a37f accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with OpenAI visual identity. Use OpenAI color identity with #10a37f accents. Compelling, conversion-focused.

使用範例

OpenAI 應用程式

Web 端
Build a web app with OpenAI design language and #10a37f color system.

OpenAI 儀表板

儀表板
Create a dashboard using OpenAI style with data visualization and - Background: typography.

✅ 適用情境

  • AI
  • AI 產品的官網與研究頁
  • 需要克制高階感的介面

❌ 不適用情境

  • 高飽和多色的創意工具
  • 資訊層級複雜的營運後台

DESIGN.md 檔案

符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。

下載