网站设计 全流程
Framer 风格 · 动效优先 · 设计导向
Prompt 提示词
复制后直接使用
Build a Framer-style page: Bold black (#000000) and blue (#0055ff). High contrast. Motion-first design. Animation-forward UI. Include motion preview areas. Preview/playground aesthetics. White text on black. Design tool with cinematic qualities. Prototype-friendly layouts.
01-02
调研与架构
🎯
商业目标
明确核心 KPI、用户价值、盈利模式
👥
用户调研
画像分析、需求挖掘、行为数据
📊
竞品分析
功能矩阵、差异化机会
🗺️
信息架构
站点地图、导航设计、内容分类
03-04
设计与原型
✏️
线框图
低保真结构，专注布局与功能
🎮
交互原型
可交互验证，动效细节
🎨
视觉设计
设计系统，品牌语言、组件库
✨
动效设计
微交互、过渡动画
05-06
开发与上线
💻
前端开发
响应式、语义化、性能优先
⚙️
后端开发
API、数据库、安全
🧪
测试
功能、性能、可用性
🚀
部署
CI/CD、监控、迭代