Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

高效协作流程模板

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

你的提问:
“你好,我希望你帮我创建一个网页。这是 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。

评论