精選 · 開放 · 免費

Cognition

擴展人類能力的自主軟體工程師。

01

設計氣質 DNA

軟體開發未來的建築藍圖。

02

色彩

高對比度的單色調，搭配單一、大膽的電光藍色作為主要互動的點綴。

03

字型

transitional-serif · geometric-sans · monospace

• display56px · 400
• heading20px · 400
• body16px · 400
• caption12px · 400

大型、高衝擊力的標題使用過渡襯線體。 · 內文與介面元素使用幾何無襯線體。 · 所有元素保持一致的 400 字重。

04

間距

寬裕的留白，主要容器採用 64px 的水平內邊距。

05

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

使用 rgba(0,0,0,0.1) 的細微 1px 邊框

06

版面

簡潔的 12 欄網格，桌面版配有持續性左側導航欄。

07

動效與互動

元素出現時使用平滑的透明度過渡。 · 互動元素使用細微的懸停狀態。

細微的色彩變化或透明度改變。 · 立即反饋，延遲極小。

08

組件

• button 主要操作使用黑色填充白色文字，次要操作使用外框或純文字按鈕。
• card 文章的簡潔佈局，通常包含標題與日期。
• chip 小型等寬字體的簡單標籤或中繼資料標示。
• input 簡潔、無邊框的文字輸入欄位，適用於簡單表單。
• hero 一個大型、置中的文字區塊，配有寬闊的邊距與一個次要的背景區塊。

09

文案語氣與禁用清單

• 語氣 權威但協作，聚焦於工程的未來。
• 標題風格 大膽、直接的陳述，闡述產品的核心能力。
• 按鈕文案 清晰、以行動為導向的用語，例如「探索角色」。

• 不要使用多種高飽和度顏色——截圖顯示以黑白為主、搭配一個藍色點綴的調色盤。
• 不要在主要元素上使用圓角——截圖顯示按鈕與卡片為銳利的方形邊緣。
• 不要使用厚重的陰影——截圖顯示簡潔的平面設計，深度極小。
• 不要使用複雜的背景——截圖顯示純色、淺色中性背景 (#F7F6F5)。
• 不要使用粗體字重——截圖顯示所有文字均使用一致的 400 字重。
• 不要使用無襯線體作為標題——截圖顯示主要首頁文字使用過渡襯線體。
• 避免: 過度的技術術語
• 避免: 誇張的行銷用語
• 避免: 侵入式彈出視窗

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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