- [ ] 了解主流 AI 编程助手（GitHub Copilot、Cursor、Claude Code）在 CSS 开发中的能力边界- [ ] 掌握向 AI 描述样式需求的有效沟通方式- [ ] 学会让 AI 解释复杂 CSS 规则、排查样式冲突- [ ] 建立"AI生成 + 人工审核"的协作开发流程

- [ ] 掌握电商产品详情页的典型模块划分和布局策略- [ ] 实现图片画廊（主图 + 缩略图切换）的纯 CSS/JS 方案- [ ] 学会选项卡（Tabs）组件的样式实现- [ ] 理解价格展示、购物车按钮等电商专属样式的处理- [ ] 掌握复杂页面的响应式适配策略

好的提示词是高效使用 AI 的钥匙——收藏这份模板集，让 AI 成为你写 HTML 的得力助手。

AI 能帮你写代码，但无法替你承担责任——学会审核和修正 AI 输出，是每位现代前端开发者的必修课。

表单和表格是HTML中最繁琐、最容易出错的结构——让AI帮你生成骨架，你专注于审查和优化，是最高效的开发方式。

AI能生成HTML代码，但默认输出往往是"div soup"——学会用正确的提示词引导AI写出语义化、可访问性良好的HTML，是AI时代前端开发者的核心技能。

同样的 AI，不同的提示词，输出的代码质量可能天差地别。提示词工程就是教会你如何"说人话"让 AI"写神码"。

AI 不是来取代前端开发者的，而是来让每个人都能更快、更好地写出干净代码的。

博客是展示 HTML5 语义化标签的最佳场景。本篇将综合运用 header、nav、main、article、aside、footer 等标签，搭建一个完整的博客文章页面。

工欲善其事，必先利其器。选对 AI 工具、写好 Prompt，能让你的学习效率提升数倍。本文对比主流 AI 编程助手，并提供即拿即用的 Prompt 模板。