一、项目目标与约束统一（双方先对齐）

1. 明确网站定位与核心目标
   • 官网 / 电商 / 平台 / 营销页？
   • 核心转化点：留资、下单、注册、咨询？
   • 设计风格、品牌调性、色彩规范提前定死。
2. 技术约束前置输出（技术先给）
   • 兼容范围：PC / 移动端、浏览器版本、iOS/Android 低版本
   • 性能红线：首屏加载时间、图片体积上限
   • 技术栈：前端框架、是否 SSR、是否支持复杂动效
   • 禁止项：不支持的布局、特效、字体、第三方依赖
3. 工期与资源确认
   • 设计周期、开发周期、测试周期
   • 对接人固定：产品 / 设计 / 前端各 1 名负责人

二、设计规范体系搭建（必须在出稿前完成）

1. 建立全局设计规范
   • 主色、辅助色、中性色（HEX/RGB）
   • 字体、字号、行高、字重
   • 间距栅格（8px/10px 体系）、圆角、阴影
2. 组件库基础规范
   按钮、输入框、表单、导航、卡片、弹窗、标签、加载态等
3. 响应式规则确定
   • 断点：PC / 平板 / 手机
   • 布局变化规则、隐藏区域、自适应规则
4. 交互规范统一
   • hover/active/focus/ 禁用 / 加载 / 错误状态
   • 动效原则：克制、统一、不卡顿

三、技术方案前置准备（设计开始前必须完成）

1. 技术架构确认
   • 前端技术栈、是否使用 UI 组件库
   • 图片策略：WebP/AVIF、懒加载、CDN
   • 字体方案：线上字体 / 系统回退
2. 可行性评估
   • 复杂交互、动效、视觉效果提前评估
   • 高成本效果给出优雅降级方案
3. 开发规则约定
   • 类名规范、样式隔离、模块化
   • 切图命名规则、目录结构
4. 风险点提前暴露
   • 兼容问题、性能问题、第三方依赖限制
   • 形成不可实现清单，设计提前规避

四、交付标准与对接流程约定

1. 设计交付物标准
   • Figma/Sketch 源文件、标注、切图、交互说明
   • 动效参数、状态说明、响应式说明
2. 对接流程固定
   • 原型→技术评审→视觉稿→技术评审→开发→走查→验收
3. 沟通规则
   • 禁止口头传需求，全部在工具留痕（Figma 评论 / 项目管理）
   • 设计变更必须走确认流程，不随意改

五、原型与需求确认（设计正式开始前）

1. 产品需求文档（PRD）确认
   • 页面结构、功能逻辑、跳转关系
2. 高保真原型确认
   • 交互流程、模块布局、操作路径
3. 原型阶段技术介入评审
   • 避免后期出现 “做不了”“成本太高”

六、前期准备完成的标志（可开始设计）

• 技术约束文档已输出
• 全局设计规范已确定
• 组件规范已统一
• 响应式规则已明确
• 原型 + 需求已确认
• 技术可行性已评估
• 对接人与流程已固定