在大模型技术快速演进的背景下，软件开发正经历从“代码书写驱动”向“智能语义驱动”的范式转型。AI Coding 作为这一转型的核心形态，依托大语言模型的理解、生成与推理能力，使开发者能够通过自然语言表达需求，由 AI 协同完成代码设计、实现与优化。这种新模式正在显著降低编程门槛、提升开发效率，并推动软件工程进入智能协作时代。

本系列课程《AI Coding入门与实战》由 科大讯飞 与 CSDN 合作推出，并在“AI大学堂”平台面向公众开放。课程以大模型技术和AI Coding为基础，以真实开发案例为载体，系统讲解 AI Coding（iFlyCode） 的理论框架、技术原理与工程实践场景。在此特别感谢科大讯飞在大模型与智能编程工具领域的技术支持，以及 CSDN 在开发者生态建设方面的持续推动，使该课程得以面向更广泛学习者。

我们诚挚建议对人工智能编程、智能开发工具以及未来软件工程形态感兴趣的学习者，前往 AI大学堂平台 系统学习本系列课程。课程涵盖从概念认知、工具使用到项目实践的完整体系，适合高校学生、科研人员及工程开发者持续进阶。 学习者可在 AI大学堂官方网站或课程平台中搜索课程名称：

代码开源地址：

在这里插入图片描述

在生成式人工智能技术逐步进入软件工程主流程的背景下，AI Coding 已从“代码补全工具”演进为“人机协同开发范式”。本课程围绕 iFlyCode 平台，构建了一条完整的教学路径，从网页基础知识到项目级网页系统开发，系统展示了大模型如何参与结构设计、逻辑建模与交互实现，从而实现真实开发任务的自动化与智能化。课程并非单纯教授前端语法，而是强调 “需求表达—提示工程—模型生成—人机协同优化” 的现代软件开发流程，为 AI 时代的编程教学提供了方法论范式。课程目录如下：

在这里插入图片描述

在这里插入图片描述

文章目录

一.课程学习目标

1.课程概况

该课程系统讲解AI Coding入门及实战应用内容，涵盖AI Coding基本概念、主流AI Coding工具及应用。课程以项目驱动为导向，基于科大讯飞iFlyCode工具，从数据分析、网页制作、图像处理、桌面应用编程、网站开发、科学研究编程等经典场景，详细讲解大模型赋能AI Coding的过程及用法，逐步培养初学者掌握AI辅助编程的能力，帮助其实现从基础入门到综合应用的跨越。课程兼顾理论与实践，注重工具操作、案例分析和编程思维的培养，旨在让大家真正能在编程开发、科研与工作中高效使用AI Coding，建立起AI Coding从零到一的过程。

本课程首先从认知层面对 AI Coding 进行界定，强调学习目标不再仅限于掌握 HTML、CSS 与 JavaScript 语法，而是培养学生将自然语言需求转化为结构化提示，并驱动大模型生成可运行系统的能力。这种能力本质上是“需求建模能力”与“提示工程能力”的融合，是未来智能软件开发者的核心素养。

课程通过多个实际案例（简历网页、抽奖系统、MBTI 测试、新闻热搜榜）构建递进式学习路径，使学生理解 AI 在不同复杂度任务中的角色转变：从静态页面结构生成，到动态交互逻辑建模，再到综合性系统开发。这种结构化设计使学习者能够逐步形成系统工程思维，而非停留在工具层面的操作技能。

在这里插入图片描述

二.网页基础知识及HTML编程原理

1.Web开发与B/S架构

课程首先分析 B/S（Browser/Server）架构与 C/S 架构的差异，指出 B/S 模式因其轻量化访问与标准化接口特性，成为生成式编程最适配的应用场景。浏览器作为统一运行环境，使模型生成代码具有高度可预测性和可复用性，这为大模型的代码生成提供了稳定的模式空间。

从 AI 技术角度看，B/S 架构具备高结构化、高语法规则性及高重复模式特征，这些属性与大模型的语言模式学习机制高度匹配。因此，将 Web 开发作为 AI Coding 教学起点，具有明确的技术合理性和教育可迁移性。

在这里插入图片描述

2.网页骨架——HTML

HTML 被定义为网页语义骨架，CSS 作为样式与布局控制层，而 JavaScript 负责行为逻辑与交互实现。在 AI Coding 环境下，大模型根据提示语同时生成三层结构代码，从而构建完整 Web 应用。学生需要理解这三层在语义与逻辑上的分工，以便通过提示语引导模型生成结构清晰、职责分明的代码。

在这里插入图片描述
在这里插入图片描述

3.CSS网页样式与布局控制

CSS 部分强调“选择器—属性—属性值”的样式控制机制，展示了样式控制在视觉设计中的作用。课程指出，大模型生成的页面往往默认结构正确，但若缺乏明确样式约束，页面呈现效果较为基础。因此提示词中应包含 布局方式、字体风格、颜色体系、卡片化设计 等视觉描述，从而引导模型生成具备现代 UI 风格的页面。

在这里插入图片描述

4.JavaScript基本语法与交互逻辑

JavaScript 被定义为页面“行为层语言”。课程特别强调模型在生成 JS 代码时，需理解 事件驱动机制、DOM 操作逻辑以及用户交互流程。这说明 AI Coding 不仅是静态代码生成，更涉及程序逻辑结构推理能力，是大模型“程序理解能力”的体现。

在这里插入图片描述

在这里插入图片描述

三.基于iFlyCode的个人网页简历制作

1.iFlyCode自动生成网页的基本流程

课程提出标准 AI Coding 工作流：需求理解 → 访问 iFlyCode → 构造提示词 → 代码生成 → 迭代优化 → 运行测试。这一流程实际上构成了 AI 驱动软件开发的基本方法论，与传统“编码—调试”模式形成显著对比，强调“语义表达能力”成为开发效率关键因素。

在这里插入图片描述

2.个人网页简历制作需求分析

该案例聚焦结构化页面生成任务。简历网页通常包含头像区、教育经历、技能表格、项目展示区等模块。课程引导学生将现实需求抽象为页面结构描述，这是大模型生成准确网页的前提条件。此环节培养的是 需求抽象能力 + 结构化表达能力。

在这里插入图片描述

3.基于iFlyCode的个人网页简历制作

具体实现过程如下图所示：

在这里插入图片描述
在这里插入图片描述

四.基于iFlyCode的课堂抽奖网页游戏开发

1.课堂抽奖网页游戏开发基本流程

该案例引入动态逻辑，实现从静态页面到交互系统的转变。课程通过 HTML 表单收集学生名单，利用 JavaScript 将数据存储为数组，并通过 Math.random() 生成随机索引完成抽奖功能。此过程展示了 AI 在算法逻辑生成方面的能力。

在这里插入图片描述

2.AI Coding制作抽奖游戏编程案例

与简历网页不同，本案例要求模型理解行为流程与事件驱动机制。学生在提示设计中需描述逻辑步骤，而模型据此生成完整脚本代码。

在这里插入图片描述

在这里插入图片描述

五.基于iFlyCode的MBTI测试网页开发

1.MBTI性格测试概述

该案例涉及多维数据处理，课程设计题目数组与维度标签，并构建计分逻辑，实现性格类型推断。学生通过提示语描述心理模型的程序化映射，使模型生成复杂逻辑系统。

在这里插入图片描述

2.基于iFlyCode的MBTI测试网页开发

此外，课程指出生成长代码时可能出现中断问题，并建议分文件生成。这一环节让学生认识到 AI Coding 仍需工程调优，人机协同仍然是核心模式。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.MBTI测试网页发布及部署

部署包括本地部署和云端部署。

在这里插入图片描述

在这里插入图片描述

六.基于iFlyCode的新闻热搜网页榜单制作

1.表单与页面交互设计

本节内容的核心并非单纯的前端页面排版，而是引导学习者理解“数据驱动型网页”的交互逻辑结构。新闻热搜榜单页面属于典型的信息聚合型 Web 应用，其本质是以“结构化信息呈现”为中心的 UI—数据双层架构。课程通过 iFlyCode 的提示工程实践，将页面划分为多个功能模块：头部检索区、热榜展示区、侧栏数据辅助区与表单交互区。该结构符合现代 Web 信息系统的分层设计思想，即表现层（HTML/CSS）、交互层（JavaScript）、数据描述层（JSON/结构化数据）。

在这里插入图片描述

2.新闻热搜网页榜单制作案例

本节展示了一个高复杂度提示词案例，其教学价值在于让学生理解复杂前端工程可以通过结构化提示拆解为功能子模块。提示词要求网页具备响应式布局、SEO 元标签、Open Graph、可访问性标签（alt/aria）、卡片式设计、动效控制等功能。iFlyCode 通过企业版星火 X1 模型完成长文本理解与多文件代码生成，体现了大模型在“多约束条件下代码一致性生成”的能力。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.新闻热搜网页发布及部署

本节从软件工程视角将生成的网页系统纳入“部署生命周期”。课程强调本地 Apache 部署与云服务器 Docker 部署两种模式，反映了传统 LAMP/WAMP 模型与现代容器化部署的并行存在。这一部分的教学目标并非服务器运维，而是帮助学习者理解网页应用从代码到可访问服务的技术路径。端口配置、HTTP 服务、权限管理等内容，构成 Web 系统运行的基础设施知识。

在这里插入图片描述

更重要的是，该部分隐含了“AI 生成代码的可运行性验证”这一概念。学生通过部署过程理解到：代码生成只是开发流程的一环，真正的工程能力体现在调试、部署、访问控制与系统适配等环节。课程最后提出“如何实现跨终端自适应页面”的问题，指向响应式设计（Media Query、弹性布局）的前端核心思想，体现课程从工具使用逐步过渡到系统性理解的教学逻辑。

在这里插入图片描述

七.基于Codex的新闻热搜网页制作拓展

1.Codex安装

本课程对比了 iFlyCode（星火模型体系）与 Codex（OpenAI 代码模型），说明不同模型在生态环境、插件体系和集成方式上的差异。通过 GitHub 认证与 VS Code 插件两种方式接入 Codex。

在这里插入图片描述

在这里插入图片描述

2.Codex网页开发配置

本节展示了 Codex 在 GitHub 仓库环境下的开发流程，强调“仓库选择—提示词输入—代码生成—Pull Request”的完整闭环。与 iFlyCode 本地生成不同，Codex 更强调云端代码协同与版本控制机制，这使得 AI Coding 与现代 DevOps 工作流发生融合。课程借此引入“模型作为协作成员”的概念，即 AI 不仅是工具，更是参与代码提交的协作者。

在这里插入图片描述

3.基于Codex的新闻热搜网页榜单制作

该部分通过复现“新闻热搜榜单”案例，实现 iFlyCode 与 Codex 在同一任务上的能力对比。教学重点在于让学生观察不同模型在代码结构组织、样式一致性、交互完整性方面的差异，从而建立“模型评估意识”。课程通过效果预览说明，AI Coding 的质量不仅取决于提示词，还与模型的训练目标、推理策略和上下文处理能力密切相关。

在这里插入图片描述

在这里插入图片描述

八.课程总结与课后实践作业

本课程系统展示了 AI Coding 从基础网页结构生成到综合 Web 系统开发的完整路径，构建了“提示工程—代码生成—工程部署”的现代软件开发教学模式，为 AI 时代编程教育提供了实践范式。课程总结如下：

  • 网页开发基本概念及内容回顾
  • HTML、CSS、JavaScript基础语法
  • 基于iFlyCode的个人网页简历制作
  • 基于iFlyCode的课堂抽奖网页游戏开发
  • 基于iFlyCode的MBTI测试网页开发
  • 基于iFlyCode的新闻热搜网页榜单制作

科大讯飞的AI大学堂开源视频地址，强烈推荐大家去学习。

本课程的开源实践（GitHub: AI-Coding-iFlyCode）为后续教学与研究提供了宝贵的资产。

本次课程的作业如下：

  • 课程作业1：请了解网页开发基本概念及HTML编程的基本用法。
  • 课程作业2：请结合自身教育专业技能情况，利用iFlyCode生成个人的网页简历。
  • 课程作业3：请利用iFlyCode开发MBTI测试网页，并对自己的性格进行简单测试。
  • 课程作业4：请利用iFlyCode实现爆火种草小红书的文案网页自动生成，并部署到云服务上。

在这里插入图片描述

在这里插入图片描述

Eastmount已正式开启《AI Coding》专栏，将持续发布关于大模型辅助编程、国产AI IDE工具评测、AI自动化开发实战等系列内容，欢迎关注专栏，一起探索智能开发的前沿趋势，不断学习与精进。基础性文章，希望对您有所帮助，写得不好的地方还请海涵！

2024年4月28日是Eastmount的安全星球——『网络攻防和AI安全之家』正式创建和运营的日子，该星球目前主营业务为 安全零基础答疑、安全技术分享、AI安全技术分享、AI安全论文交流、威胁情报每日推送、网络攻防技术总结、系统安全技术实战、面试求职、安全考研考博、简历修改及润色、学术交流及答疑、人脉触达、认知提升等。下面是星球的新人券，欢迎新老博友和朋友加入，一起分享更多安全知识，比较良心的星球，非常适合初学者和换安全专业的读者学习。

目前收到了很多博友、朋友和老师的支持和点赞，尤其是一些看了我文章多年的老粉，购买来感谢，真的很感动，类目。未来，我将分享更多高质量文章，更多安全干货，真心帮助到大家。虽然起步晚，但贵在坚持，像十多年如一日的博客分享那样，脚踏实地，只争朝夕。继续加油，再次感谢！

(By:Eastmount 2026-02-09 周一写于贵阳 http://blog.csdn.net/eastmount/ )

# 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

C++23 全语法（1）：程序基本构成与预处理语法

本文系统介绍C++23标准下程序基础构成与预处理语法。主要内容包括：1) 程序入口main函数的两种标准写法及其语法规则；2) 单行与多行注释语法；3) C++23模块化编程的导出与导入机制。预处理部分详细讲解#include头文件包含、#define宏定义、条件编译等指令，并补充#pragma、#line等特殊指令的用法。全文通过最小可运行代码示例，完整呈现C++程序基础结构与预处理核心语法，为

avatar 2048 AI社区

软件开发生命周期已死

每个阶段都有自己的工具、仪式和产业链：Jira 管需求，Figma 管设计，VS Code 管编码，Jest 管测试，GitHub 管审查，AWS 管部署，Datadog 管监控。你给出方向，智能体先做一个版本，你看一眼，调整，再试另一种方案。当受众不再是需要跨流水线协调的人类，而是直接消费上下文的智能体时，Jira 就从项目管理工具变成了上下文仓库——而且是个很糟糕的仓库。未来的可观测性不是仪表

avatar 2048 AI社区
cover

[拆解LangChain执行引擎]支持自然语言查询的长期存储

avatar 2048 AI社区