Framer 是把 AI 設計智慧代理與建站能力合一的平台：在畫布上從想法直達上線，託管、CMS、分析與 SEO 內建。其風格以純黑虛空（#000000）為底，GT Walsheim 展示字在 110px 時負字距達 -5.5px，電光藍（#0099ff）是唯一強調色，互動元素一律膠囊（40-100px），產品截圖本身就是主視覺。適合建站工具與動效優先的產品頁。
Framer設計與創意
提示詞範本
基礎範本
Design a Framer-inspired interface. - Pure black (#000000) void canvas — absolute dark, not warm or gray-tinted; - GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px); - Framer Blue (#0099ff) as the sole accent color — cold, electric, precise; - Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements; - Product screenshots as hero art — the tool IS the marketing. Colors: #000000, #ffffff, #0099ff, #a6a6a6 with #0099ff accent. Typography: Azeret Mono.
變體提示詞
📱 行動裝置
Design a mobile app with Framer aesthetics. Use Framer color identity with #0099ff accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Framer style. Use Framer color identity with #0099ff accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Framer design language. Use Framer color identity with #0099ff accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Framer visual identity. Use Framer color identity with #0099ff accents. Compelling, conversion-focused.
使用範例
Framer 應用程式
Web 端Build a web app with Framer design language and #0099ff color system.
Framer 儀表板
儀表板Create a dashboard using Framer style with data visualization and Azeret Mono typography.
✅ 適用情境
- 設計協作
- 設計師建站與作品集
- 強調動效的行銷頁
❌ 不適用情境
- 密集型資料後台
- 懷舊紙質風格網站
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。