高效协作流程模板

第一步：项目初始化与详细需求声明

你的提问：
“你好，我希望你帮我创建一个网页。这是 Figma 设计图的链接：Figma链接。我主要想实现 node-id=404-3824 这个页面。
我希望项目文件结构如下：index.html 作为主页面，css/style.css 存放所有样式，所有图片资源都放在 image/ 目录下。我已经手动创建了 css/ 和 image/ 目录。
以下是我的图片资源列表，我已经把它们放在 image/ 目录下了，请你按照以下说明使用它们：
image1.png: 用于页面顶部深绿色区域的丝带背景。
image3.png: 用于成功提示图标（那个绿色的对勾）。
image4.png: 用于收据区域（receipt-section）的背景。
image5.png: 用于状态栏的移动信号图标。
image6.png: 用于状态栏的 Wi-Fi 图标。
image7.png: 用于状态栏的电池图标。
image9.png: 用于收据区域内部的分割线。
image10.png: 用于 Wally Virtual Card 左侧的 Logo。
请你先帮我创建一个 README.md 文件，概述项目目标、页面用途、基本布局结构和样式说明。”

我的响应：我将创建 README.md，确认文件结构，并准备开始构建 HTML 和 CSS。

第二步：页面核心结构与初步样式构建

你的提问：
“好的，我确认了 README.md 和文件结构。现在请你根据 Figma 设计和我们之前定义的图片用途，构建 index.html 的整体结构和 css/style.css 的基础样式。请确保所有文本内容、主要容器和图片都按照 Figma 的布局和颜色进行初步还原。”

我的响应：我将生成 HTML 和 CSS 代码，实现页面的初步布局和样式，并通知你完成。

第三步：细节调整与精确反馈

你的提问（例如，当你发现某个细节不对时）：
“我查看了页面，大部分都不错，但有几个地方需要调整：
文本排版：Top Up Success 这段文字现在是两行，我希望它只显示在一行，并且文本颜色是 #2F2D2D，字体加粗。
顶部间距：.top-up-receipt-header 和 .receipt-section 之间，我希望它们的垂直间距调整为 20px。
分割线：.divider 现在显示的是虚线（或者其他效果），但我希望它仅仅使用 image9.png 作为背景图片，宽度 295px，高度 2px，并水平平铺。请确保它居中显示。
Wi-Fi 图标：状态栏的 Wi-Fi 图标 (image11.png) 没有正常显示，它显示为一个文件图标。请检查原因并修复。
(如果你有截图，请附上): “这是我期望的 Wi-Fi 图标的正确显示效果 [附上 Wi-Fi 图标的正确截图]。”

我的响应：我将根据你具体的反馈，精确地修改对应的 HTML 或 CSS 代码，并解释我的修改。

第四步：最终确认与优化

你的提问：
“现在页面效果已经非常接近 Figma 了，辛苦了！请你再帮我检查一下响应式布局，确保在不同屏幕尺寸下都能良好显示。如果可以，请对 CSS 进行一下压缩和优化。”

我的响应：我将进行最终检查和优化工作，并更新 README.md。