手搓一个非遗文创网站：我用 AI 写代码的完整实录

#电子科技大学成都学院开放原子开源社团叶露熹

前言

我本人一直喜欢自己动手做项目。这次我想做一个带有中国味道的文创网站。我的目标很明确：网站要以传统非遗为主题，加上动画和视频，整体风格是国风古典，页面是单页滚动，并且要适配手机。不过我不想从零开始一行行写代码。我想看看现在的AI能帮我做到什么程度。所以我写下了这篇文章。这篇文章记录了我用OpenClaw这个AI编程助手做项目的全部过程。

一、需求梳理：先把目标说清楚

我一开始跟AI说的话很简单。我说：“帮我做一个介绍文创的前端网站。网站要有动画，要有视频，内容要和文创相关。”然后AI开始主动问我一些细节。这件事让我明白了一个道理：你给AI的指令越具体，它做出来的东西就越符合你的想法。所以我们一起确认了下面几个要点：

• 主题：传统非遗。我选择了缂丝、蜡染、漆器、榫卯、蜀绣、青瓷这六项。
• 风格：国风古典。颜色用朱红、墨黑和烫金色，背景加上宣纸的纹理。
• 结构：单页滚动，也就是一个页面从上往下翻。
• 适配：响应式设计。网站要在手机、平板和电脑上都显示正常。
• 素材：图片从Unsplash上获取，视频需要放在本地文件夹里。

二、AI的工作流程：我怎样使用Claw

第一步：检查运行环境

Claw先检查了我电脑的系统环境。它确认了我的电脑里有Node.js，版本是22.16.0。然后它才开始正式的开发工作。

第二步：读取内置规则

这里有一个小细节需要注意。Claw会自动读取系统里的一些Skill文件。比如一个叫qclaw-rules/SKILL.md的文件，里面是系统的基础规则。还有一个叫qclaw-text-file/SKILL.md的文件，负责处理文件的编码问题。这些规则保证了代码在不同系统上都能正常使用。比如说，Windows系统下的UTF-8 BOM标记问题，它就自动处理好了。

第三步：生成代码

Claw没有使用任何框架。它直接用原生的HTML、CSS和JavaScript写出了一整个单页应用。代码的文件夹结构是这样的：

text

wenchuang/
├── index.html          ← 主页面，大小22KB，全部手工生成
└── videos/             ← 本地视频文件夹
    ├── sintel-trailer.mp4
    ├── big-buck-bunny.mp4
    └── sample-720p.mp4

三、技术上的几个特点

1. Hero区域的视频背景

代码里是这样写的：

html

<video class="hero-video-bg" src="videos/sintel-trailer.mp4" 
       autoplay muted loop playsinline
       poster="https://images.unsplash.com/...">
</video>

这里面有几个关键点。第一个关键点是autoplay muted这个设置。因为浏览器的安全策略，如果你想自动播放视频，就必须把视频静音。第二个关键点是playsinline。这个设置可以让视频在苹果手机上不全屏播放，而是停留在页面内。第三个关键点是poster。这个属性可以在视频还没加载出来的时候，先显示一张封面图片。

2. 国风配色方案

我用了下面的颜色代码：

:root {
  --red: #8B2323;        /* 朱红色 */
  --gold: #C5973A;       /* 烫金色 */
  --ink: #1A1208;        /* 墨黑色 */
  --paper: #F5EFE0;      /* 宣纸色 */
  --paper-dark: #EAD9B5; /* 旧宣纸色 */
}

3. 滚动动画

我用原生的Intersection Observer API实现了滚动动画。不需要jQuery。当页面上的元素进入屏幕之后，它会慢慢显示出来。代码如下：

javascript

const observer = new IntersectionObserver((entries) => {
  entries.forEach((e, i) => {
    if (e.isIntersecting) {
      setTimeout(() => e.target.classList.add('visible'), i * 100);
      observer.unobserve(e.target);
    }
  });
}, { threshold: .15 });

4. 响应式设计

我用CSS的媒体查询来做不同屏幕尺寸的适配。

css

@media(max-width: 768px) { /* 平板和手机 */
  .nav-links { display: none; }  /* 把导航链接换成汉堡菜单 */
  .about-grid { grid-template-columns: 1fr; }
}

@media(max-width: 480px) { /* 小屏手机 */
  .crafts-grid { grid-template-columns: 1fr; }
}

四、视频素材的获取过程

这是整个项目里最花时间的一步。原因有两个。第一个原因，像Pexels、Coverr这样的免费素材网站都有反爬虫机制。如果你直接用程序去下载，网站会返回403错误，不允许你下载。第二个原因，我所在的网络环境有一些限制，部分CDN地址访问不了。

我最后用了下面几个视频：

Claw用Node.js写了一个下载脚本。这个脚本可以自动检测哪些链接能用，然后把视频下载到本地的videos/文件夹里。

五、和AI一起工作时的几点体会

1. 需求要分开来说

你不要想着一次就把所有要求说完。你可以先给出一个大的框架，之后再慢慢补充细节。

2. 让AI主动问你

一个好的AI会主动追问你细节。比如它会问你“具体想要哪一种文创？”或者“你手头有视频素材吗？”碰到这种情况，你最好耐心地回答。这样最后得到的结果会更准确。

3. 接受代码不完美

AI写出来的第一版代码可能不是最优的。但是没关系，因为它能用。你可以在后面逐步把它改好。

4. 注意文件编码

Claw会自动处理跨平台的文件编码问题。比如Windows系统里的BOM标记和换行符。这些问题如果你自己手写代码，是很容易忽略的。

六、最后做出来的效果

页面的结构是这样的：

1. Hero区：这个区域有全屏的视频背景，还有一个带有中国风的标题动画。
2. 关于我们：左边和右边分别放图文内容，页面上还展示了一些数据统计。
3. 经典技艺：这里放了六张非遗卡片。你把鼠标放在卡片上，卡片会放大。
4. 影像区：这里有一个主视频和两个副视频。
5. 产品画廊：这个区域用了瀑布流的网格布局。
6. 联系我们：这里有一个表单，还有页面底部的一些信息。

动画效果包括：

• 当你滚动页面的时候，页面上的元素会慢慢显示出来。
• Hero区的背景视频会缓慢地放大或缩小。
• 卡片在鼠标悬停时会放大，同时出现一个渐变颜色的遮罩。
• 页面滚动之后，导航栏会变成模糊的背景效果。

七、怎么拿到完整的代码

我把完整的代码整理在下面的文件夹里：

text

wenchuang/
├── index.html
└── videos/
    ├── sintel-trailer.mp4
    ├── big-buck-bunny.mp4

想运行这个页面，有两种方法。第一种方法是直接双击index.html文件。不过有些浏览器会限制视频的播放。第二种方法是启动一个本地服务器。你可以在命令行里输入npx serve .，然后打开浏览器访问。

八、我对这次项目的一些总结

这次做项目让我对AI编程有了三个新的认识。

第一，AI不是来替代程序员的。它更像一个放大器。AI能很快写出能用的代码，但是整个项目的架构设计、需求的整理，还有细节的调整，这些仍然需要人来把握。

第二，原生的网页技术还是很重要的。就算不用任何框架，只用纯的HTML、CSS和JavaScript，也能做出漂亮的页面。

第三，中国风的设计有一些固定的方法。颜色上要用朱红色和墨金色。字体上要用衬线体。背景上可以加上宣纸的纹理。这三个点是关键。

如果你也想试试用AI来做项目，我建议你从一个很小、很具体的需求开始做起，然后一点点去改进。

附录：我们用了哪些技术

下面这个表格列了用到的技术。

这篇文章记录了我用AI做项目的一次真实经历。我希望它能给那些同样喜欢自己动手做项目的朋友带来一些启发。