未来感网页设计是做什么的？

一种为单页营销网站打造明确“导演感”而非“生成感”的工作方法：一份清晰的简报、一个一致的设计系统、逐个构建并独立验证的区块、视觉上保持统一拍摄风格，以及对电影化动效的审慎投入。

为什么网站会千篇一律

每一个未被明确指定的细节都会被按统计上最可能的选项填充。因此，一行简单的需求描述只会产生一个“平均化”的网站：居中标题、柔和渐变、一排相同的圆角卡片。真正的工作大部分在写代码之前就已经开始了。必须明确所有悬而未决的问题（受众、期望用户执行的一个关键动作、情感氛围、字体、配色），然后以足够小的增量进行构建，以便肉眼检查。

保持角色清晰。用户负责决定构建什么。你负责决定如何构建。没有一项工作是完成的，直到有人在手机宽度的浏览器里看过它。

从何处开始

情况	操作
新建网站，空或几乎空的文件夹	从阶段1开始，然后按顺序继续
现有网站，添加或重建一个区块	先阅读项目规则，然后查看阶段5中的区块构建流程
“让它有电影感/3D/滚动驱动”	查看阶段7和 `references/cinematic-moves.md`
需要图片、英雄视频或相关提示词	查看 `references/assets.md`
网站看起来千篇一律或像是AI生成的	对照 `references/design-system.md` 中的“通用网站特征”进行审查，然后进入阶段3
手机端修复、打磨、表单、部署、域名、SEO	查看 `references/ship.md`

在到达相应阶段时才打开参考文件，不要提前打开。每个文件都是独立的。

工作阶段

1. 简报

在写任何代码之前，先写一个段落，涵盖三个要点：目标受众、希望访客做的一件事，以及预期的情感氛围（三个形容词加一个比喻，例如，“安静、精准、慷慨，就像一个在工作日清晨运转良好的工作室”）。

当用户没有提供这些信息时，通过一条消息来请求。如果用户说直接开始，你自己起草简报，在一条信息中将其作为假设陈述出来，然后继续。后续所有的选择（主导按钮、页面的区块组成、哪些动效值得其计算开销）都将通过重读这个段落来决策。这就是为什么它不能跳过。

2. 规划

从头到尾列出页面区块清单。每个条目都需用一句话说明该区块的目的，并指出其依赖的素材。不要急于构建。在一切都不存在之前，改变方向是零成本的。因此，对于需要跨越多个文件的工作，先展示规划并等待同意。如果代理支持，使用规划模式。

典型的页面顺序是：导航、英雄区、信任标识、产品/服务介绍、故事或流程、客户评价、定价（如适用）、常见问题、最终的行动号召、页脚。删掉那些你无法说明目的的区块。对于真实的业务，绝不要编造客户、评论或统计数据；要么省略该区块，要么请求真实素材。

3. 设计系统

一次性为整个网站确定视觉风格并进行记录。在一个基础预览页面上展示三个候选方向，让用户通过视觉做出选择。每个方向组合一个标题字体和一个正文字体，为五种角色（页面背景、文字、主色、强调色、辅助色）分配十六进制颜色，并在一句话中总结其情绪。将选中的方案编码到项目的主题令牌中，然后删除预览页面。探索性质的页面是脚手架：如果它们留在项目中，就会随着网站一起发布。

references/design-system.md 包含了细节、术语和模板。

4. 项目规则

将永久性的规则写入当前代理启动时加载的规则文件中（CLAUDE.md、AGENTS.md、GEMINI.md）。复用已有的文件；否则为这个代理创建正确的文件。由于它会在每次会话中加载，请保持简洁：网站是什么、技术栈、设计系统、几条固定的规则。

项目尚无意见时的合理默认值：

技术栈：Next.js 和 Tailwind CSS。对于交互式组件（手风琴、对话框、菜单、输入），安装一个无障碍组件库，如 shadcn/ui；不要自己从头实现。
每个组件放在 components/ 下的独立文件中。
移动端优先。390px 是一个不能出现任何问题的宽度。
只使用真实文案。不要使用 Lorem Ipsum 或“功能一”。
添加包之前需要获得批准，并解释其用途。
prefers-reduced-motion 意味着所有动效：包括平滑滚动、悬停和图标过渡，而不仅仅是那些炫酷的核心特效。

永久性的规则属于这个文件。当前的任务不属于这里。

5. 逐区块构建

一次要求生成整个页面，通常会得到一个所有区块都平庸的页面，而且没有明确的修理起点。构建一个区块，验证它，然后继续。一旦模式建立起来，较简单的结尾区块（评价、问答、最终行动号召、页脚）可以打包处理。任何视觉上重要的区块都要单独构建。

区块构建流程，针对每个新增或重建的区块：

首先阅读设计规则和令牌。
确认内容。如果涉及事实（价格、声明、引用），请询问用户。其他地方，编写真实文案，并标记出哪些是你编造的。
为这个区块创建一个独立的组件文件。
在三种宽度下渲染：手机（390px）、平板（768px）、笔记本（1440px）。修复溢出、丑陋的换行和糟糕的裁剪。
比较该区块与相邻区块之间的上下间距。
以一个简短的报告结束：区块名、文件路径，以及任何需要用户确认的问题。

在英雄区投入最大努力，因为它决定了访客是否会继续滚动。指定每一个重要的细节：

一个大约八个词以内的标题，陈述所提供的内容；一句辅助说明；以及一个包含品牌标识、几个链接和一个按钮的导航栏。
一个清晰的主导按钮：填充的、强调色的、与简报中的行动关联。次要行动变成一个低调的文字链接。权重相等的双按钮表明没有做出决策。
文案要避开视觉焦点主体，并且桌面和手机版要独立决策。
对于覆盖在视频或摄影图片之上的文案，要在文字下方使用渐变遮罩来解决可读性问题。不要调暗整个视觉区域。
通过手机和桌面宽度的截图来判断第一屏效果。如果出现大片空白、类似剪贴画的孤立元素、或视觉区域过于暗淡，意味着英雄区尚未完成。即使真实素材仍为占位符：占位符在那之前也必须能承载构图。

每个按钮都必须有实际去向。 每个行动号召都需要一个真实的目标：商店或结账链接、预约页面、表单、邮箱地址。当目标未知时，使用最接近的诚实目标（例如产品区、mailto链接），并在你的报告中列出所有未连接的按钮。一个默默滚动到同页顶部的按钮看起来是完成了，其实并没有。

当页面组装完成后，从头到尾滚动浏览一遍，找出最薄弱的区块（总会有一个），并在预览路由上为该区块提出两个替代方案。一旦选中一个，删除其他变体及其路由。

6. 视觉效果

强大的布局无法挽救薄弱的图像。从一个大约七个素材的简短拍摄清单开始，并在所有素材中保持统一的风格线（光线、镜头、配色）。提示词配方、英雄视频指南和网络准备工作都在 references/assets.md 中。

如果没有连接的图像或视频生成器，就向用户提供提示词，并继续使用清晰标记的占位符。未经批准，绝不使用生成点数。

7. 电影化动效

共有五种技术可供选择：英雄区的慢速背景视频、与滚动位置绑定的动效、区块固定而内容变化的章节、视差深度，以及实时渲染的3D对象。要审慎使用：英雄视频加上不超过两个其他技术，每个技术都应放置在能阐明内容或创造特定感觉的位置。同时使用所有技术看起来像个演示卷轴，会让访客感到疲劳，并削弱每个效果的影响力。

每种技术都需要优雅的降级方案：在prefers-reduced-motion下使用普通布局、在小屏手机上使用静态图片、以及在动效加载失败时页面依然可用。完成后，衡量其性能成本。配方和安全措施在 references/cinematic-moves.md 中；在编写滚动或3D代码前先阅读它。

8. 手机、打磨、表单、上线

手机端占大多数访问。在390px宽度下进行专门检查、一次一致性检查、以及一次速度检查；然后连接表单、部署，并逐项完成上线清单。详见 references/ship.md。

工作习惯

这些习惯贯穿始终。

每次只做一次更改。 当被要求修复时，只修改那一个地方。一个比请求范围更广的diff会掩盖哪个编辑是有效的，而且“整理”用户已经满意的东西是一种退化。
检查后再报告。 在声称完成前，加载页面并在几个宽度下检查。布局可以满足所有规则但仍然看起来不对劲。
将模糊的反馈转化为具体问题。 “感觉好重”是可操作的：判断是间距、字重还是对比度的问题，说明原因，并单独调整它。如果用户无法表达偏好，在预览路由上放两到三个变体，并附上一行描述。人们更擅长选择而非说明。
追溯意外到未指定的地方。 当输出不是用户期望的结果时，找到背后那个未明确的问题，并在规则文件中将其确定下来，这样就不必再次手动修补。
从根本上修复错误，并用一行话说明原因。
保存工作状态。 在一个用户希望有提交的git项目中，在每个工作步骤后提交，提交信息要确保在几周后依然能看懂。
保护密钥和数据。 机密属于 .env.local，并远离源文件和git历史。当表单拒绝保存时，修复访问规则。绝不要为了让它工作而禁用安全措施。
诚实报告。 说明哪些已被验证，哪些无法验证（实体iPhone、生产域名），以及哪些文案是编造的。屏幕上的确认证据不足；数据库里存储的行才是。
检查版本。 对于 GSAP、Three.js、React Three Fiber、Motion 和 Lenis，查询当前文档来获取兼容版本，不要依赖记忆，并标记不确定之处。

参考文件

文件	何时阅读
`references/design-system.md`	选择字体、颜色和间距；将模糊的风格词汇转化为具体的；审查看起来千篇一律的页面
`references/assets.md`	编写图像或视频提示词、保持视觉一致性、为网络压缩媒体
`references/cinematic-moves.md`	添加视频英雄、固定滚动故事、视差、3D点缀、滚动驱动视频或完整的实时3D滚动故事
`references/ship.md`	放置媒体、手机端检查、打磨、速度优化、联系表单、部署、域名、SEO 和上线清单

未来感网页设计