这门课程带你从零开始制作一个完整的产品官网，逐步确定目标用户、页面结构、视觉规则、内容布局、表单校验、手机适配以及验收步骤。
在制作产品官网之前，我们需要先确定官网主要面向什么用户。只有清楚地知道用户为什么打开官网，我们才能决定首页应该说明什么，以及按钮应该引导用户执行什么操作。
在上一章，我们明确了目标用户林夏面临的痛点和官网要传达的价值。在这一章，我们会搭建页面的骨架，确定页面中应该包含哪些区块，以及这些区块按照什么顺序排列。我们不需要自己动手绘制线框图，学会把这些结构清晰地表达给 AI Agent 即可。
当页面的排列顺序确定下来之后，我们会在这一章固定文字层级、颜色、间距以及表面规则，这样不仅能让所有的区块看起来属于同一个官网，也能让重要的内容更容易被用户发现。
页面的结构和视觉规则目前已经确定。在这一章，我们会为首屏写清产品的核心价值，让用户能从标题中快速认出自己遇到的问题，并只保留一个主要操作按钮，引导用户查看完整示例。
首屏已经说明了工具的用途与主要入口。在这一章，我们会安排页面的中段内容：把产品功能按照用户的具体任务分组，并展示一个完整的项目示例与补充信息，让访客能够顺畅读完整个页面。
虽然首屏和页面中段的内容位置已经确定，但是正式的素材、价格以及用户反馈往往需要时间逐步积累。在这一章，我们会为页面上的每一项说法核对真实来源，理清可信证据、价格方案与常见问题（FAQ）的展示边界。
在上一章，我们已经核对过了每一项说法的来源，页面的内容也因此确定了下来。在这一章，我们会处理那些看得见却不容易准确描述的细节问题，比如文字贴边、卡片拥挤或者菜单被其他元素遮挡。我们不需要自己动手写代码，只需要把看到的视觉问题转化为 AI Agent 能立刻执行的明确指令。
虽然页面的布局、间距与遮挡关系已经统一，但在鼠标移入、键盘聚焦以及按下按钮的时候，页面依然需要清晰的操作反馈。在这一章，我们会为页面上的按钮、链接与菜单补齐这些交互状态，让每一次操作都有明确回应。
页面的主要入口和次级行动的位置目前已经确定。在这一章，我们会把次级行动设计成一个「加入候补名单」的最小表单：表单只收集用户的邮箱地址与可选的说明信息，并在提交前校验输入，最后把处理结果展示在表单附近。
虽然桌面端页面上的布局、反馈与表单都已经就绪，但在窄屏设备上我们不能只是简单地把所有内容等比例缩小。在这一章，我们会重新安排手机端页面上的导航菜单、页面区块、图片以及固定定位按钮，让移动端浏览体验自然顺畅。
即使桌面端和手机端的页面都能够正常打开，也并不意味着官网就已经达到了可以交付的标准。在这一章，我们会把前文确定的所有页面要求整理成可以重复执行的检查步骤，并分别记录通过、失败以及仍待确认的项目。
在前面的 11 章中，我们已经确定了官网面向的用户、页面的排列顺序、手机端的显示方式、表单的提交结果以及验收页面的方法。在最后一章，我们会把这些已经确认的信息整理成一份可以直接发送给 AI Agent 的需求说明，在此过程中并不会新增任何产品能力。