手搓0基础学习AI网站（请进！）

        主包最近在AI领域大学特学，感觉有很多AI概念知识和实操案例想收藏学习，于是突发奇想做个可以反复学习的AI学习网站，相当于把自己觉得有用的知识存进去，用的还是华为云CodeArts。老规矩，先上最终效果！

        点击链接可访问：https://amazing-selkie-348367.netlify.app/（网站效果参考下图）。

        用到的工具：什么是华为云码道（CodeArts）代码智能体_产品介绍_华为云码道（CodeArts）代码智能体-华为云

       这个网站咋做出来的？请看VCR！

        太长不看版：

        提示词一键复制版（请复刻靴靴！）

1.  从零开始创建一个现代化AI学习网站，可以用一些设计skills帮助美化，比如frontend-design，采用深色科技风格设计，包含固定导航栏、Hero区域、5个AI基础知识卡片（Tokens、Prompt、MCP、Skills、Harness）、4个实操案例卡片（会议纪要总结、播客制作、生成个人简历网站、Skills使用教程）、3位AI博主推荐（张咋啦、数字生命卡兹克、秋芝）以及页脚信息。设计特色包括紫蓝渐变强调色、玻璃态效果、旋转虚线边框动画、滚动淡入效果和响应式布局。【下面三大块的链接内容可以自定义替换，比如放上自己的作品等等】
   1. AI基础知识：
      1. prompt：https://bbs.huaweicloud.com/blogs/464325
      2. MCP：https://articles.e-works.net.cn/ai/article156027.htm
      3. skills：https://juejin.cn/post/7584094504631320585
      4. Harness：https://www.xiaohongshu.com/explore/69df159b000000001e00c1a4?xsec_token=ABqozZPbRfoo0nnwhXd96emhGaJSHRxlmgJNOdJ8Qj4os=&xsec_source=pc_search&source=web_search_result_notes
   2. AI实操案例：
      1. 会议纪要总结：https://bbs.huaweicloud.com/blogs/475586
      2. 播客制作：https://bbs.huaweicloud.com/forum/thread-0212721059682330501-1-1.html
      3. 生成简历网站：https://bbs.huaweicloud.com/blogs/475859
      4. Skills使用教程：https://bbs.huaweicloud.com/blogs/474894
      5. 更多案例参考：https://codearts.huaweicloud.com/case.html
   3. AI博主推荐：
      1. 张咋啦：https://www.xiaohongshu.com/user/profile/59757acd50c4b45e6e9a90df?xsec_token=ABj4NLEKvvFnobE5P3RrN6UpnjYJgjU0yL5RDuuWHH3K4%3D&xsec_source=pc_search
      2. 秋芝：https://www.xiaohongshu.com/user/profile/63b622ab00000000260066bd?xsec_token=ABn5k0xJN5ywDDGOY4VMCw7DZpfXH9jfNBSVbkWws5qBU%3D&xsec_source=pc_search
      3. 数字生命卡兹克：https://www.xiaohongshu.com/user/profile/62c98736000000001501e075?xsec_token=ABQs105xpvOL5TtkQiXIOIh13xOYGgtWy3SU67byAYjbM%3D&xsec_source=pc_search
2. 其他要求：
   1. 页面主标题为"技术小白从0开始学AI"，关于我们描述为"爱探索学习AI的一枚文科生"，联系方式为greennnn@163.com。
   2. 内容上突出"我的作品"星标标识，每个案例标注价值标签（效率提升、创意创作、技能提升）和产品标签（#OpenClaw、#CodeArts）；
   3. "查看更多案例"按钮采用高亮发光效果。
   4. 所有模块间距设为40px，容器边距32px，移除了统计区块、学习社区模块和案例筛选功能，保持紧凑实用的布局风格。

        思路拆解版：

        网页关键内容分成三层：

        1、AI基础知识：一些热门AI领域基础概念汇总，先让大模型给我找了几个链接填进去，

        2、AI实操导航：这块贴了几个我看过的实操帖子，也把我自己的vibe coding作品放进去并且星标了，

        3、AI博主推荐：这块补充了几个我关注的AI领域博主，直接放了小红书导航链接，帮我导航到博主首页查看他们最新发的内容。

        除此之外，网页头尾也需要完善下，比如首屏要放个banner：大概介绍这个网页是个啥，结尾放个联系方式之类的（不过邮箱是虚拟的，可忽略）。

       所以我的实际调试过程be like：

         “我想参考华为云官网，设计一个AI学习资料网站，请你跟我进行深度问答，来帮我了解我需要怎么设计网页信息架构，存放内容，设计风格等。”

         “ok，我先给你找了一些素材，你根据上面的网页信息架构 和我提供的内容，搭建一下html，要求设计具有科技未来感，可以使用设计skills美化。XXXX链接”

        “使用fronted design这个skills帮我把这个网页美化下，要专业，高级。”

        ”AI基础知识里，对应的知识卡片要求能跳转到对应页面：Prompt：https://bbs.huaweicloud.com/blogs/464325 MCP：https://articles.e-works.net.cn/ai/article156027.htm Skills：https://juejin.cn/post/7584094504631320585 Harness：https://bbs.huaweicloud.com/blogs/476342“

        ......中间省略一堆调教过程，反正就是你觉得它哪些表现不好，就说出来让他修改。

        最后要把Html转化成朋友可访问的链接，就登录netlify这个产品官网，登陆后，选择左侧“programs”，然后把刚才生成的html上传进去，5秒就生成了最终效果，转化完就可以发给朋友测试点开！

        netlify官网示意图：