哈喽大家好～ 这里是实操不停、踩坑不停的项目小白！

上一篇我已经用墨刀完成了多模态新生儿疼痛评估系统的多端产品原型设计，相当于已经拿到了“系统前端的设计图纸”。

这一篇，就进入最关键的实操环节——将墨刀原型图转换成可运行的HTML代码！

作为编程小白，手动写HTML、CSS代码不仅耗时费力，还容易出错，尤其是要还原墨刀原型的布局、颜色、间距，很容易出现“原型好看，代码实现翻车”的情况。思来想去，我决定借助AI工具省力高效完成这一步——用DeepSeek将墨刀原型图直接生成HTML代码，全程小白友好，不用手动写大量代码，今天就把完整操作过程、踩坑细节全部分享给大家，和我一样的小白可以直接照搬！

（大家也可以采用市面上其他AI产品作为选择，我是比较习惯这个）

温馨提示：本项目是完整的多模态新生儿疼痛评估系统，后续会逐步推进后端开发，现阶段重点聚焦前端HTML代码实现，一步一步把前端基础打牢，不贪快、不跳步～

一、 前期准备：做好3件事，避免生成代码翻车

在打开DeepSeek生成代码前，一定要做好前期准备，不然很容易出现“生成的代码和原型图不一致”“代码无法运行”的问题，小白必看！这3件事都是上一篇墨刀设计的延伸，不用额外花费太多时间：

1. 整理墨刀原型图及标注文件

首先，把上一篇设计好的墨刀多端原型图（电脑端、手机端）导出为图片格式（PNG即可），每个页面单独导出（登录页、首页、评估入口页、数据查询页等），避免多个页面混在一起，导致DeepSeek识别混乱。

同时，确定好之前标注（包含颜色色值、尺寸、间距），后续生成代码后，可对照标注修改细节，确保代码还原度更高。

2. 明确DeepSeek的提示词逻辑（关键！）

AI生成代码的效果，完全取决于提示词的详细程度。作为小白，不用写复杂的提示词，但一定要把“核心需求”说清楚，避免DeepSeek生成不符合预期的代码。我整理了自己用到的提示词模板，小白可直接复制修改，重点包含4个核心要素：

① 明确需求：“将墨刀原型图转换成HTML响应式网页代码，适配电脑端（1920px）、手机端（402px），还原原型图的布局、颜色、按钮样式、文字大小”；

② 技术要求：“使用HTML5+CSS3编写，采用flex/grid布局，实现响应式适配，无需复杂JS交互，仅实现静态页面，代码结构清晰，添加详细注释，小白可看懂、可修改”；

③ 细节要求：“严格对照原型图的颜色色值、尺寸、间距，按钮、输入框、导航栏的样式完全还原，文字居中对齐，界面简洁，无冗余元素”；

④ 补充说明：“这是新生儿疼痛评估系统的前端页面，风格简洁、专业，适配医护人员和家长使用，避免花哨设计”。

3. 准备好IDEA （这是我用的版本号2024.2.4）

虽然用DeepSeek生成代码，但后续需要用IDEA 2024.2.4打开代码、调试样式、查看运行效果，所以提前打开IDEA，新建好HTML项目（和上一篇预告的一致，项目名：newborn-pain-web，建好css、js、images文件夹），做好准备，生成代码后可直接复制粘贴进去调试。

在你新建的项目src下面新建

二、 实操全过程：用DeepSeek生成HTML代码（小白一步不差）

做好前期准备后，就正式开始用DeepSeek生成代码了，全程分为4步，操作非常简单，不用懂复杂的编程知识，跟着点就行，我用的是DeepSeek网页版，无需下载安装，浏览器登录即可使用。

第一步：打开DeepSeek

1. 打开DeepSeek网页版（直接搜索“DeepSeek”即可），登录自己的账号（个人版免费，完全满足需求）；

2. 进入对话界面

3. 可以新建对话，准备上传原型图、输入提示词。

第二步：上传墨刀原型图，输入提示词

1. 点击对话框下方的“上传文件”按钮，选择提前导出的墨刀原型图（一次上传一个页面，我先从首页开始，避免多个页面识别混乱）；

2. 上传完成后，粘贴提前准备好的提示词，然后补充一句：“请根据我上传的原型图，生成对应的HTML+CSS代码，CSS单独写在style标签内，或者单独生成css文件，代码可直接复制到IDEA中运行”；

这里注意要跟AI沟通好尺寸规格等，我前期已经写过了，图片上就省略了。

3. 点击“发送”，等待

DeepSeek生成代码，一般一个页面的代码，1-2分钟就能生成完成，速度很快。

第三步：复制生成的代码，粘贴到IDEA中

1. DeepSeek生成代码后，会自动分成HTML代码和CSS代码（部分会生成单独的css文件），先复制HTML代码，打开IDEA新建的index.html文件，粘贴进去，覆盖默认代码；

2. 再复制CSS代码，要么粘贴到HTML文件的style标签内，要么新建style.css文件，粘贴进去，然后在HTML文件中引入css文件（确保路径正确，避免样式不生效）；

（我一般是直接合在一起，比较方便但是代码多）

3. 重复以上步骤，依次生成登录页、评估入口页、数据查询页的代码，分别新建对应的HTML文件（login.html、assessment.html、data.html），确保每个页面都能独立运行。

第四步：对照原型图，简单调试代码

这一步非常关键！DeepSeek生成的代码虽然能还原大部分原型，但难免会有细节偏差（比如颜色色值不准、间距不一致、响应式适配有问题），小白只需做简单调试，不用修改复杂代码：

1. 在IDEA中，右键点击HTML文件，选择“Open in Browser”，打开浏览器预览页面；

点击选择常用浏览器，即可在浏览器中查看页面

2. 对照墨刀原型图和标注文件，检查细节：比如按钮颜色是否一致、文字大小是否匹配、间距是否合理、响应式切换设备时界面是否错乱；

3. 遇到偏差，直接修改CSS代码（比如颜色色值不对，就对照标注文件修改对应的color、background-color值；间距不对，修改margin、padding值），小白也能轻松操作，修改后刷新浏览器就能看到效果。

三、 小白必看：DeepSeek生成代码的踩坑复盘

这次用DeepSeek生成HTML代码，我踩了3个小坑，浪费了一些时间，整理出来分享给大家，小白可以直接避开，提高效率：

坑1：原型图上传模糊，导致代码还原度低

一开始我导出的原型图是普通清晰度，上传后DeepSeek识别不清按钮的圆角、文字的大小，生成的代码和原型图偏差很大。解决方案：导出墨刀原型图时，选择“高清导出”，确保图片清晰，同时避免上传多个页面混在一起，一次只传一个页面。

坑2：提示词不详细，生成的代码有冗余

第一次输入提示词时，只说了“生成HTML代码，还原原型图”，没有说明“无需复杂JS交互”，导致DeepSeek生成了很多多余的JS代码，不仅没用，还影响页面运行。解决方案：提示词一定要明确“仅生成静态HTML+CSS，无需JS交互”，同时说明响应式适配要求，避免冗余。

坑3：CSS路径错误，导致样式不生效

将生成的CSS代码单独放在style.css文件后，没有正确引入HTML文件，导致打开页面时只有文字，没有样式。解决方案：在HTML文件的head标签内，添加link标签引入css文件，确保路径正确（比如css文件在css文件夹内，路径就是“css/style.css”）。

补充技巧：如何提高代码还原度？

给小白分享一个小技巧：如果生成的代码还原度不高，可以将墨刀的标注文件（截图）也上传给DeepSeek，同时补充提示词：“对照我上传的原型图和标注文件，调整颜色、尺寸、间距，确保完全还原”，这样DeepSeek生成的代码会更精准，后续调试的工作量会大幅减少。

四、 本次实操总结：AI辅助小白的高效之道

本次用DeepSeek将墨刀原型图生成HTML代码，总共花了2个多小时（包含调试时间），如果手动写代码，以我小白的水平，估计要花一整天，不得不说，AI工具真的能帮小白节省大量时间，让我们能专注于“还原原型、优化细节”，而不是纠结于代码编写。

总结一下核心收获：① 明确了提示词的重要性，详细的提示词能大幅提升AI生成代码的精度；② 掌握了“原型图→AI生成代码→IDEA调试”的完整流程，小白也能快速上手；③ 学会了简单的CSS调试技巧，能解决基础的样式偏差问题。

另外，虽然用AI生成代码，但也要养成“查看代码、理解代码”的习惯，比如看看DeepSeek是如何编写响应式布局的、如何设置样式的，慢慢积累经验，为后续修改代码、优化页面打下基础，毕竟AI只是辅助，掌握基础的代码知识才是关键。

五、 写在最后：下一步计划

目前，我已经用DeepSeek生成了所有核心页面的HTML代码，并且在IDEA中完成了初步调试，页面能正常显示，也实现了多端响应式适配，但随之也出现了一系列页面细节问题，下一步就专门针对这些问题进行调整优化！

下一篇，我会专门分享：在IDEA 2024.2.4中调整页面细节、解决页面跳转问题的全过程，具体包括：统一所有页面的导航栏样式（解决部分页面导航栏无颜色的问题）、借助AI学习并实现页面跳转功能、排查并解决跳转时出现的无法跳转、404报错等一系列问题，全程小白视角，把踩过的坑和解决方案全部分享，小白可直接跟着实操！

如果你也在学习用AI生成HTML代码、用IDEA调试网页，或者对多模态新生儿疼痛评估系统开发感兴趣，欢迎持续关注～ 有任何建议或踩坑经验，欢迎评论区留言，一起交流、一起进步！

小白继续冲呀～ 🚀