先定义要交付什么

模板、可视化建站工具和生成式 AI 都能缩短第一版出现的时间。过去需要从空白画布开始，现在可以在几分钟内得到完整页面、品牌图片和一组组件。

速度提升以后，交付的难点会转移。团队需要决定哪一版适合产品，确认它能在真实内容、设备和状态下工作，查清素材与字体的使用权，并把页面、账号、代码、域名和维护责任交给最终所有者。

一个可以预览的页面只是中间产物。真实交付还包括可验证的任务、结构规则、完整状态、发布环境、权利边界和接管路径。

开始选模板或写 Prompt 前，先写一页交付定义：

• 页面面向哪类用户；
• 要帮助用户完成哪项行动；
• 必须包含哪些内容和证据；
• 使用什么语言、设备和内容系统；
• 是否需要表单、支付、登录、CMS 或第三方集成；
• 谁负责文案、图片、数据和翻译；
• 页面部署在哪里；
• 最终谁拥有项目、域名、账号和源文件；
• 上线后由谁修改、监控和处理故障；
• 怎样判断交付合格。

同样一张营销页，可以有三种完全不同的交付：一份用于内部评审的可点击原型、一个由 Framer 持续托管的网站，以及一个进入现有代码仓库并由工程团队维护的页面。三者的设计外观可能接近，所有权、测试、集成和接管要求差别很大。

交付类型不清楚时，模板容易决定产品结构，工具也容易决定技术路线。先确定产物，再选择工具。

给模板、Framer 和 AI 分配不同角色

这三类工具可以共同进入流程，但适合承担的任务不同。

把模板当参考，团队可以理解一个成熟页面怎样处理 Hero、证明、价格和 CTA；把 Framer 当实现环境，可以快速调整 Stack、尺寸模式和断点；把 AI 当候选生成器，可以在明确方向后探索有限方案。^[1]

若三者都被当成「自动完成设计」的方法，团队会在最后阶段同时发现内容不准、页面不稳、素材无权使用、平台不能迁移和客户无法接管。

选模板时先看任务匹配

模板选择常被缩减为「哪张截图更好看」。更有效的评估从结构开始：

• 它解决的任务是否与当前页面接近；
• Hero、内容、证据和行动的顺序是否适用；
• 组件是否覆盖实际需要的状态；
• 内容密度能否容纳真实文案；
• 是否支持需要的语言和阅读方向；
• 响应式规则能否继续修改；
• 表单、CMS、动画和第三方能力是否真的存在；
• 模板许可是否覆盖商业使用、客户交付和修改。

一个面向消费产品的短页面，不一定适合高价企业服务。企业买家可能需要安全、部署、采购和案例内容；消费产品更可能强调直接试用和价格。若结构不同，替换文字会不断与模板打架。

模板中的演示 Logo、评价、产品截图和客户名称只能作为占位。它们不能随模板一起变成项目证据。每项内容都要替换为经过授权的真实材料。

像读源码一样拆模板

选定模板后，可以先复制一份只用于研究，不急着换颜色和文字。拆解按五层进行。

第一层：信息结构

标出 Navigation、Hero、问题、方案、证明、价格、FAQ、CTA 和 Footer。为每个区块写一句：它回答用户的哪个问题。

模板区块无法连接到用户决策时，可以删除。缺少安全、交付或案例等关键问题时，需要补充。模板提供的是常见答案顺序，不掌握当前产品事实。^[1]

第二层：布局结构

打开图层，识别页面、Section、Container、Stack、Grid 和自由定位元素。记录：

• 内容最大宽度；
• Section 上下间距；
• 容器 Padding；
• 组内 Gap；
• 列数与比例；
• 固定、填充和内容自适应尺寸；
• 哪些元素脱离正常文档流；
• 哪个宽度会改变布局。

Framer 中的 Fixed、Fill、Fit Content、Viewport、Relative 和 Absolute 等模式，可以帮助理解父子容器如何分配空间。^[1] 复制数值的价值有限，真正需要带走的是内容增长时仍然成立的规则。

第三层：字体和视觉角色

记录标题、正文、辅助文字、按钮和数据的字号、字重、字距、行高与颜色角色，再观察这些角色怎样建立层级。

圆角、边框和阴影也要按职责记录。某种卡片是否表示可点击、推荐、分组或纯装饰？如果所有表面都保留，项目会继承模板的视觉噪声。

第四层：组件和状态

找到按钮、导航、表单、卡片、标签、弹窗和内容区块的主组件。检查 Default、Hover、Focus、Active、Disabled、Loading、Error 和 Success 状态。

设计工具中的 Variant 适合展示状态关系，却不代表行为已经实现。触摸设备没有 Hover，键盘需要可见焦点，加载和错误还要接到真实数据。^[1][2]

第五层：响应式和内容压力

观察 Desktop、Tablet 和 Phone 的变化：列何时折叠，文字是否换行，图片怎样裁切，导航怎样收起，固定元素会不会遮挡。

随后换入最长标题、最长按钮、多语言文案、空状态、错误消息和真实图片。模板只在演示内容中正常，仍然只是演示。

从拆解结果建立项目规则

模板拆完以后，不应得到一张参数抄写表，而应得到一套属于项目的规则。

可以先确定：

• 页面内容和主要行动；
• 字体角色和最大层级；
• 颜色的品牌、文字、表面和状态用途；
• 间距刻度和容器宽度；
• 按钮、输入框、卡片和导航的组件规范；
• 图片比例和裁切原则；
• 动效目的、时长和减少动态效果；
• 响应式折叠条件；
• 可访问性和本地化基线。

HAS 与 CCC 可以作为最低走查：Hierarchy、Alignment、Spacing、Color、Contrast、Consistency。^[2] 它们帮助团队把「像模板但不够好」改写成明确问题，例如层级不符合主要任务、两列没有共同对齐线、组内与组间距离相近、错误状态只靠颜色。

规则一旦写清，模板就成为参考来源，不再控制整个项目。

生成前先写判断标准

AI 可以快速生成很多候选。若开始前只有「现代、简洁、科技感」，每轮结果都可能符合形容词，却无法支持决定。

生成说明至少可以包含：

• 用户和主要任务；
• 页面或素材的使用位置；
• 品牌特征与禁用方向；
• 必须保留的内容；
• 信息层级和构图要求；
• 目标设备、比例和安全区域；
• 需要真实展示的产品细节；
• 不能生成或不能推断的事实；
• 验收维度；
• 输出数量和停止条件。

例如，电商主图的说明不只写「高级产品摄影」，还要包含产品形状、佩戴方式、接触关系、材质、光源、背景、使用场景、输出尺寸和不可改变的品牌特征。

界面生成同样需要任务约束。注册页面要说明字段、验证、错误、隐私、成功结果和移动端键盘，而不只描述颜色和圆角。

用四层方法判断视觉候选

当候选出来以后，可以从四层判断：色调与情绪、构图与视觉流、光影与材质、细节与真实感。^[3]

色调与情绪

检查主色、辅色、饱和度和对比是否符合品牌、受众与场景。颜色漂亮但与产品定位相反，仍然不合格。

构图与视觉流

确认用户先看哪里、再看哪里，标题和产品有没有各自空间，主体是否被裁切，留白能否容纳真实文案。

光影与材质

检查光源方向、阴影、反光、透光、表面纹理和物体之间的接触。一个物体放到人物或场景中后，必须像处在同一个物理环境。

细节与真实感

放大检查手指、文字、Logo、接口、边缘、重复纹理和局部形变。电商素材还要确认颜色、结构和功能没有偏离真实产品。

这套方法让「看起来不错」变成可以记录的判断。团队也能说明为什么保留某个候选，以及接下来要修什么。

物理一致性决定素材能否使用

一组口罩电商素材曾出现明显问题：模特和场景处理细致，口罩却像贴在脸上。它没有沿面部形成合理曲面，也缺少接触阴影、材质反光和与环境一致的光线。^[3]

这类错误在缩略图中可能不明显，进入商品详情、广告或大幅海报后会破坏信任。物理一致性可以按下面顺序检查：

1. 产品几何形状是否准确；
2. 产品与人、桌面或环境怎样接触；
3. 重力、挤压、褶皱和透视是否合理；
4. 主光、环境光和阴影方向是否一致；
5. 金属、布料、塑料、玻璃等材质是否正确；
6. 产品颜色、Logo、按钮和接口是否与实物一致；
7. 是否产生产品没有的能力或使用方式。

高风险商品还需要实物拍摄、三维资产或人工精修。生成图可以用于探索和部分营销素材，不能改变消费者需要知道的真实产品信息。