精選 · 開放 · 免費

Create

AI 原生平台，將文字轉化為功能完整的應用程式、網站與工具。

aidev

Create 網站截圖

↓ 下載設計系統包 (34 MB)在 OpenDesign 中開啟

原站: https://www.create.xyz

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 原生應用程式建構工具創意毫不費力

一個趣味且專業的工作坊，讓任何人都能運用 AI 建構數位產品。

02

色彩

#000000Ink

#18191BInk soft

#F9F9F9BG

#FFFFFFBG soft

#F2F2F2BG quiet

#6A6A6CMuted

rgba(187, 187, 187, 1)Line

採用乾淨的淺色中性色調，搭配攝影主視覺與黑色對比色用於主要操作。

03

字型

transitional-serif · humanist-sans · monospace

display42px · 400
heading24px · 400
body16px · 400
body-large18px · 400

04

間距

4px

8px

12px

16px

20px

24px

30px

40px

以 4px 為基準單位，各區塊保留充足內邊距。

05

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

sm · 8px

md · 12px

lg · 20px

pill · 9999px

1px solid #BBBBBB

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

置中單欄式主視覺區域，後接採用卡片式設計的各區塊。

07

動效與互動

150msmicro

300mssmall

700msmedium

cubic-bezier(0.23, 1, 0.32, 1)easing

懸停/點擊時的流暢過渡效果 · 透明度變化時的淡入動畫

懸停時，色彩與背景過渡時間為 0.15 秒。 · 點擊時透過過渡動畫提供即時視覺回饋。

08

組件

button 主要按鈕採用膠囊造型並具高對比度，次要按鈕尺寸較小。
card 大型圓角卡片，上方為顯眼圖像，下方放置說明文字。
chip 視覺上不明顯，可能為簡潔的圓角元素。
input 主視覺區域中的大型圓角白色輸入欄位，供使用者輸入提示詞。
hero 全版出血攝影背景，置中配置文字與輸入欄位。

09

文案語氣與禁用清單

語氣親切、賦權，並帶有些許趣味。
標題風格 採用簡潔直接的陳述句，混合使用襯線與無襯線字體。
按鈕文案 明確且具行動導向（例如「立即開始」）。

不要使用純白背景——截圖顯示為淺灰色（#F9F9F9）背景。
不要使用純粹的無襯線標誌——截圖顯示品牌名稱中的「Any」採用襯線字體。
不要使用高飽和度的明亮色彩作為主要背景——截圖採用全版出血攝影圖像。
不要在主要元件上使用銳利的方角——截圖顯示卡片與輸入欄位的圓角半徑為 20px。
不要使用厚重深色的陰影——截圖顯示極為細微、低透明度的陰影。
不要讓排版單調且缺乏對比——截圖顯示展示用襯線字體與內文無襯線字體之間的對比。
避免: 未經解釋的專業術語
避免: 過於複雜的版面配置
避免: 枯燥、企業化的語言

10

包內真實截圖

Create — 桌面首屏（hero） — 桌面首屏（hero）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Create — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

一個友善的 AI 原生 SaaS 平台，專為透過文字建構應用程式而設計。背景採用淺灰色（#F9F9F9）或白色（#FFFFFF），主要文字與 CTA 使用黑色（#000000），次要文字使用細微灰色（#6A6A6A、#ACADAE）。排版混合使用過渡襯線字體（用於展示標題）與人文無襯線字體（用於內文）。版面配置置中、簡潔且寬敞。關鍵避免事項：不要使用銳角（最小圓角半徑 8px）。不要使用厚重陰影。不要使用複雜網格佈局使介面變得雜亂。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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