Framer 是把 AI 设计智能体与建站能力合一的平台：在画布上从想法直达上线，托管、CMS、分析与 SEO 内置。其风格以纯黑虚空（#000000）为底，GT Walsheim 展示字在 110px 时负字距达 -5.5px，电光蓝（#0099ff）是唯一强调色，交互元素一律胶囊（40-100px），产品截图本身就是主视觉。适合建站工具与动效优先的产品页。
开发者工具大胆表现
提示词模板
基础模板
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 编程工具使用。