我用AI还原静态页面
2025年8月15日
圣诞节前夕，盛行了
第一回合：提交提示词/设计图，别让AI猜
为了防止AI放飞自我，采用了上传设计图+提示词的方式。
提示词：请执行以下网页制作任务： 图片内容分析: 首先，请仔细分析提供的图片，识别其视觉元素、布局结构、色彩方案、排版风格及核心内容。 技术方案选择: 基于图片分析结果，推荐适合实现该网页的技术栈（如HTML/CSS/JavaScript框架）及响应式设计策略。 页面结构规划: 设计清晰的页面结构，包括导航栏、主要内容区、侧边栏（如有）、页脚等关键模块的布局方案。 交互功能设计: 识别并规划图片中可能包含的交互元素（如按钮、表单、轮播等）的实现方式和用户体验流程。 代码实现与交付: 最后，提供完整的网页代码实现，并确保其与图片设计高度一致，同时附带必要的部署说明。
要求它必须以“资深前端”的身份，严格遵循 Pixel-Perfect（一比一还原），并和设计稿原图，反复对比，
我当时觉得，这把稳了。
结果代码跑出来的瞬间，我沉默了。
怎么说呢。 整体骨架还是对的，但是细节丢失了太多
第二回合：寻找病灶-走查页面
给到ai的是设计图，不是设计文件，所以导致获取不到图片，间距及色值。
1.从“大到小”排查，先看整体布局：设计图是左对齐还是居中？模块间距是宽还是窄？Coze生成的布局有没有偏移？（这是最容易出现的“大病灶”，先搞定它，后续省一半事）；
2.再抠细节：字体是黑体还是宋体？字号是14px还是16px？标题的颜色和设计图有没有色差？按钮的圆角大小、边框粗细，是不是和设计图一模一样？
3.最后死磕“魔鬼细节”：图标位置、文字行高、甚至是阴影的深浅，都要逐一核对，把所有“不匹配”的地方，一一记下来（可以截图标注，后续喂给Coze，它能更精准修改，不用再猜）。
第三回合：拆箱与喂饭
AI 不是许愿池里的王八。 它听不懂你的“随便”，也看不懂你的“大概”。
我们也不搞一键生成，而是分步投喂：别指望 AI 能一口气吃成个胖子。 我们把页面拆解成了 Header、Card、List 等多个独立的小件。我们每次选中一个进行还原调试，这样 AI 就能每次只关注于一个模块进行还原。
1.修改banner部分，上传图片和修改背景色
线上已实现效果
添加手势交互dome
2.修改“克隆音色体验”及“库选音色”模块的背景及卡片的展示细节
背景有很多的样式，描述起来很复杂，所以打开了figma的开发者模式，直接复制css样式代码，AI很容易就识别到了，调整的效果也很还原。为背景增加了渐变色，投影，内阴影的等效果。
我用AI还原静态页面
2025年8月15日
圣诞节前夕，盛行了
第一回合：提交提示词/设计图，别让AI猜
为了防止AI放飞自我，采用了上传设计图+提示词的方式。
提示词：请执行以下网页制作任务： 图片内容分析: 首先，请仔细分析提供的图片，识别其视觉元素、布局结构、色彩方案、排版风格及核心内容。 技术方案选择: 基于图片分析结果，推荐适合实现该网页的技术栈（如HTML/CSS/JavaScript框架）及响应式设计策略。 页面结构规划: 设计清晰的页面结构，包括导航栏、主要内容区、侧边栏（如有）、页脚等关键模块的布局方案。 交互功能设计: 识别并规划图片中可能包含的交互元素（如按钮、表单、轮播等）的实现方式和用户体验流程。 代码实现与交付: 最后，提供完整的网页代码实现，并确保其与图片设计高度一致，同时附带必要的部署说明。
要求它必须以“资深前端”的身份，严格遵循 Pixel-Perfect（一比一还原），并和设计稿原图，反复对比，
我当时觉得，这把稳了。
结果代码跑出来的瞬间，我沉默了。
怎么说呢。 整体骨架还是对的，但是细节丢失了太多
第二回合：寻找病灶-走查页面
给到ai的是设计图，不是设计文件，所以导致获取不到图片，间距及色值。
1.从“大到小”排查，先看整体布局：设计图是左对齐还是居中？模块间距是宽还是窄？Coze生成的布局有没有偏移？（这是最容易出现的“大病灶”，先搞定它，后续省一半事）；
2.再抠细节：字体是黑体还是宋体？字号是14px还是16px？标题的颜色和设计图有没有色差？按钮的圆角大小、边框粗细，是不是和设计图一模一样？
3.最后死磕“魔鬼细节”：图标位置、文字行高、甚至是阴影的深浅，都要逐一核对，把所有“不匹配”的地方，一一记下来（可以截图标注，后续喂给Coze，它能更精准修改，不用再猜）。
第三回合：拆箱与喂饭
AI 不是许愿池里的王八。 它听不懂你的“随便”，也看不懂你的“大概”。
我们也不搞一键生成，而是分步投喂：别指望 AI 能一口气吃成个胖子。 我们把页面拆解成了 Header、Card、List 等多个独立的小件。我们每次选中一个进行还原调试，这样 AI 就能每次只关注于一个模块进行还原。
1.修改banner部分，上传图片和修改背景色
线上已实现效果
添加手势交互dome
2.修改“克隆音色体验”及“库选音色”模块的背景及卡片的展示细节
背景有很多的样式，描述起来很复杂，所以打开了figma的开发者模式，直接复制css样式代码，AI很容易就识别到了，调整的效果也很还原。为背景增加了渐变色，投影，内阴影的等效果。
我用AI还原静态页面
2025年8月15日
圣诞节前夕，盛行了
第一回合：提交提示词/设计图，别让AI猜
为了防止AI放飞自我，采用了上传设计图+提示词的方式。
提示词：请执行以下网页制作任务： 图片内容分析: 首先，请仔细分析提供的图片，识别其视觉元素、布局结构、色彩方案、排版风格及核心内容。 技术方案选择: 基于图片分析结果，推荐适合实现该网页的技术栈（如HTML/CSS/JavaScript框架）及响应式设计策略。 页面结构规划: 设计清晰的页面结构，包括导航栏、主要内容区、侧边栏（如有）、页脚等关键模块的布局方案。 交互功能设计: 识别并规划图片中可能包含的交互元素（如按钮、表单、轮播等）的实现方式和用户体验流程。 代码实现与交付: 最后，提供完整的网页代码实现，并确保其与图片设计高度一致，同时附带必要的部署说明。
要求它必须以“资深前端”的身份，严格遵循 Pixel-Perfect（一比一还原），并和设计稿原图，反复对比，
我当时觉得，这把稳了。
结果代码跑出来的瞬间，我沉默了。
怎么说呢。 整体骨架还是对的，但是细节丢失了太多
第二回合：寻找病灶-走查页面
给到ai的是设计图，不是设计文件，所以导致获取不到图片，间距及色值。
1.从“大到小”排查，先看整体布局：设计图是左对齐还是居中？模块间距是宽还是窄？Coze生成的布局有没有偏移？（这是最容易出现的“大病灶”，先搞定它，后续省一半事）；
2.再抠细节：字体是黑体还是宋体？字号是14px还是16px？标题的颜色和设计图有没有色差？按钮的圆角大小、边框粗细，是不是和设计图一模一样？
3.最后死磕“魔鬼细节”：图标位置、文字行高、甚至是阴影的深浅，都要逐一核对，把所有“不匹配”的地方，一一记下来（可以截图标注，后续喂给Coze，它能更精准修改，不用再猜）。
第三回合：拆箱与喂饭
AI 不是许愿池里的王八。 它听不懂你的“随便”，也看不懂你的“大概”。
我们也不搞一键生成，而是分步投喂：别指望 AI 能一口气吃成个胖子。 我们把页面拆解成了 Header、Card、List 等多个独立的小件。我们每次选中一个进行还原调试，这样 AI 就能每次只关注于一个模块进行还原。
1.修改banner部分，上传图片和修改背景色
线上已实现效果
添加手势交互dome
2.修改“克隆音色体验”及“库选音色”模块的背景及卡片的展示细节
背景有很多的样式，描述起来很复杂，所以打开了figma的开发者模式，直接复制css样式代码，AI很容易就识别到了，调整的效果也很还原。为背景增加了渐变色，投影，内阴影的等效果。