当前位置：首页>java>【AI编程】案例分享——从html源代码开始

【AI编程】案例分享——从html源代码开始

2026-01-12 23:05:49

上一篇（【AI编程】启动篇——从零开始用Qoder完成第一个智能项目）最后的实战项目对于初学者非程序员来说有点困难，涉及到前后端应用程序的安装使用，本地没有环境的话也只能看看页面，没法实际跑起来，那么我们从最简单的开始。

unsetunset基础知识：了解网页开发的结构unsetunset

开始用AI做网页前，了解一些基础知识会让协作顺畅得多。你不需要会写每一行代码，但必须清楚自己想要什么效果以及它应该如何工作。你的角色从“码农”转变为产品经理和架构师，负责下达准确的指令，而AI是高效的执行者。

为了让AI理解你的角色和规则，你可以在Qoder中提前设置好要求。点击右上角头像，进入“设计 -> 规则”，可以添加四种规则：

始终生效：最适合设置全局要求，比如代码风格或安全规范。
手动引入：在需要时由你主动调用。
指定文件生效：比如只为CSS文件设定特定的格式规则。
模型决策：让AI根据情况自行判断是否使用。

对于网页开发，你可以设置一组始终生效的前端规则，来统一项目风格。

网页开发可以看作搭建一个“数字人”，它由四个清晰的核心层次构成：

内容层 (HTML)：是骨架。它用标签（如 <header>、<section>）定义页面的结构和语义，决定了“有什么内容”，并关注可访问性基础。
表现层 (CSS)：是皮肤和衣服。它负责所有视觉效果，包括布局（用Flexbox或Grid）、颜色、字体，以及让页面能自适应不同屏幕的响应式设计。
行为层 (JavaScript)：是肌肉和神经。它让网页“活”起来，处理所有交互：点击按钮、验证表单、加载数据等，实现动态功能。
环境层 (工具链)：是背后的工作坊。包括构建工具、开发服务器等，主要用于提升开发效率和优化性能。在AI辅助的入门阶段，你可以先不用深入这一层，重点关注前三个层的协作即可。

简单来说，你的任务是：用HTML告诉AI“骨架怎么搭”，用CSS描述“想要什么样式”，用JavaScript说明“需要哪些交互”。AI则会帮你生成实现这些想法的代码。

关于前端，可以上菜鸟（https://www.runoob.com/）学习，想当年，我也是靠这个网站自学的（学经济的，毕业后竟然当起了半吊子程序员[捂脸]）。

unsetunset写好“说明书”：什么是结构化提示词unsetunset

直接用大白话向AI提问，常常得到笼统或不准确的回答。结构化提示词就是解决这个问题的办法，它是一份清晰、有条理的“任务说明书”，能极大提升AI的输出质量。

它的核心是下面六个部分，你可以像填表格一样组织你的需求：

定角色：先告诉AI“你是谁”。例如：“你是一位资深前端工程师”，这能让AI立刻进入专业语境。
说任务：清晰说明具体要干什么。例如：“编写一个响应式导航栏。”
给背景：提供关键信息。例如：“这个导航栏用在企业官网，需要在手机上能折叠。”
提要求：明确输出格式和细节。例如：“请提供完整的HTML、CSS、JS代码，并加上注释。”
设限制：划定不能做的事。例如：“不使用任何第三方框架，动画用纯CSS实现。”
举例子（可选）：给出输入输出示例，让AI更明确你的预期。

一个简单例子：

模糊提问：“写个排序函数。”
结构化提问：

角色：你是一位Python开发专家。
任务：编写一个快速排序函数。
要求：函数名为 quick_sort，代码需包含详细注释。
约束：不能使用内置的 sort() 方法。
示例：输入 [5,2,8]，应返回 [2,5,8]。

使用结构化提示词，最大的好处是节省时间。它能让你和AI的沟通从“猜谜”变成“高效协作”，一次获得更符合你期望的结果，减少来回修改。在后续实战中，我们会直接应用这个方法。

unsetunset案例实战unsetunset

今天给大家两个案例，方法都差不多，主要是想法。

案例一：每日金句卡片

在Qoder中打开你创建的工作文件夹，然后按下Ctrl + L召唤AI聊天面板。如果之前做过，可以新开一个会话。

智能体选择轻量，输入以下提示词，你也可以根据你的要求修改。

# 角色  
你是一名资深前端工程师，精通HTML/CSS/JS，能开发完整Web应用。

# 任务  
开发一个名为“每日金句卡片”的单页Web应用，支持随机生成金句、切换背景色和导出图片。

# 背景  
- 用于每日灵感分享，用户可自定义并保存卡片。  
- 需内置三个金句库（名人/影视/书籍），每个库至少预填5条示例。  
- 注重UI美观与交互流畅。

# 输出要求  
1. 一个HTML文件包含所有代码（内联样式与脚本）。  
2. 核心功能：  
   - 页面加载时自动生成含今日日期、随机金句与莫兰迪色背景的卡片。  
   - 按钮功能：  
     - “换颜色”：随机切换卡片背景色（从预定义莫兰迪色中选）。  
     - “换一句”：随机选取任一类别中的金句。  
     - “导出图片”：将卡片区域（不含按钮页脚）导出为PNG。  
3. 页面结构：  
   - 卡片居中，下方排列按钮。  
   - 底部居中添加2行备注（文字是“本工具由蚕宝制作”，“微信公众号：蚕宝笔记”）。  
4. 技术要求：  
   - 纯原生代码，无外部依赖。  
   - 响应式设计（适配电脑与手机）。  
   - 使用Canvas或内联第三方脚本实现导出。  

# 约束条件  
- 所有代码整合在单个HTML文件中。  
- 导出图片仅包含卡片内容。  
- 交付前需自测功能（按钮响应、布局、导出效果）。  
- 最终提供可直接运行的完整代码。

然后等待Qoder执行完毕即可。中间可能需要你来做决定。

这里让我用python启动应用，但我需要的只是html源代码直接双击即可使用的，接下去做纠正，我就取消启动了。直接和它对话，让它纠正。

直接双击生成的“daily_quote_card.html”文件打开即可

测试功能都可以用。

案例二：小学生口算练习器

下午和孩子在图书馆，他在做数学题，我就想到了口算训练，就给他做了个口算练习工具。输入以下提示词，你也可以根据你的要求修改。

请帮我创建一个小学生口算练习器，使用HTML、CSS和JavaScript实现，所有代码都写再一个HTML文件中。要求包含以下功能：
1.有倒计时1分钟，5分钟，也有计时器，以秒为最小单位，单选是倒计时还是计时
2.每次练习出多少道口算题由用户填，默认100道
3.口算题有分类：5以内的加减法，10以内的加减法，20以内的加减法，50以内的加减法，100以内的加减法，还有2个数相加减，3个数相加减，等式左右填空的
4.页面自适应，手机电脑均能使用
5.生成好自己先测试一下，运行有问题最好把有问题的点解决一下

Qoder执行完毕后给我生成了一个“math_practice.html”，我双击打开后界面看着还可以，大致功能也都有，但是点击“开始练习”按钮后，并没有然后改变。