【AI】用 AI 做自己的个人网站（上）：选模板、写提示词，做出第一版

🫧个人主页：小年糕是糕手

💫个人专栏：《C++》《数据结构》《Blender 修行笔记》《AI》

🎨你不能左右天气，但你可以改变心情；你不能改变过去，但你可以决定未来！

一、先看真实项目：个人网站不必长成一份在线简历

二、新手怎样选择建站路线？直接给出建议

三、不会设计，可以去哪些网站找帮助？

[1. MotionSites：怎样把现成提示词改成自己的需求？](#1. MotionSites：怎样把现成提示词改成自己的需求？)

[2. HTML5 UP：想保留本地文件，可以从这里起步](#2. HTML5 UP：想保留本地文件，可以从这里起步)

[3. Framer、Webflow：适合希望通过可视化编辑完成网站的人](#3. Framer、Webflow：适合希望通过可视化编辑完成网站的人)

[4. 21st.dev：适合改善一个模块](#4. 21st.dev：适合改善一个模块)

[5. Relume、v0：分别帮助整理结构和生成项目](#5. Relume、v0：分别帮助整理结构和生成项目)

四、选模板时，不要只看首页

[五、先整理资料，避免 AI 替你补出不存在的经历](#五、先整理资料，避免 AI 替你补出不存在的经历)

六、怎样把喜欢的风格说清楚？

七、准备项目目录，先认识文件之间的关系

八、第一轮提示词：一次交代清楚目标、内容和验收方式

九、完整练习：先做一个可以运行的小版本

[1. index.html](#1. index.html)

[2. styles.css](#2. styles.css)

[3. app.js](#3. app.js)

十、怎样运行？先确认打开的是哪个目录

打开以后，应该看到什么？

十一、把练习改成自己的站点，先替换这些位置

想加入项目截图，怎样组织文件？

[十二、第一版不满意，怎样让 AI 改得更准确？](#十二、第一版不满意，怎样让 AI 改得更准确？)

[1. 内容问题：别人看不懂你做了什么](#1. 内容问题：别人看不懂你做了什么)

[2. 布局问题：标题和图片的关系不合适](#2. 布局问题：标题和图片的关系不合适)

[3. 功能问题：操作结果与预期不同](#3. 功能问题：操作结果与预期不同)

十三、怎样减少反复解释，也减少无效生成？

十四、上篇结束前，做一次小验收

想做一个个人网站，很多人卡住的地方，并不是代码。

你可能已经有了想展示的东西：几篇博客、一个小程序、一款正在制作的游戏，或者一些摄影、绘画作品。可真正开始做时，问题一下子多了起来：

首页应该放什么？需要几个页面？不会设计怎么办？现成模板能不能用？让 AI 写代码，到底该怎么描述需求？

如果只输入一句"帮我做一个高级的个人网站"，AI 通常也能交出一个页面。但页面里可能有你不需要的模块、无法使用的按钮，以及换了名字却依旧像模板的介绍。

这两篇文章，就拿我的个人网站作为案例，把这件事从头讲清楚。

上篇解决三个问题：

不会设计时，怎样选择模板和参考资源；
怎样把自己的内容整理成 AI 能执行的需求；
怎样得到一个可以打开、修改和继续维护的第一版。

下篇再接着处理手机适配、功能调试、部署上线和后续更新。

文中的完整练习使用原生 HTML、CSS、JavaScript，不需要先学习 React，也不需要配置数据库。你可以先完成一次完整的小实践，再决定要不要学习更复杂的技术。

文中的教学提示词是根据项目内容重新整理的示例，不是历史聊天的逐字记录。资源功能和平台限制按本文整理时的官方资料核对，具体方案以对应网站当前说明为准。

一、先看真实项目：个人网站不必长成一份在线简历

我的网站叫"小年糕是糕手"。

下面的一些图片给大家简单的看一下介绍一下：

它包含个人介绍、游戏项目、角色收藏、音乐和联系方式，后来又加入了创作桌面、收藏便笺和一个网页小游戏。

这些内容放在一起，是因为它们确实与我的兴趣和创作有关。

但如果你第一次做网站，我不建议一开始就把这些功能全部加上。

但是大家也可以很明显的看出来我的这份个人简介网站是没用加入很多炫酷的特效、精美的UI，采用的都是很简洁的画风和UI，因为我觉得这样往往更适合一个刚学的新手，你上来就要做一个特别精美的作品，你去学了别人的提示词，找了模板，但是我觉得就算你做出来了你也学不到什么东西，所有我觉得还是一步步来这样比较适合初学者，加上现在AI的发展，很多代码都不需要我们去写了，所有好的想法、自己的想法往往是更加重要的！

先看它最基本的一层：

访问者想知道什么	页面怎样回答
这个网站是谁的？	昵称、身份和简短介绍
这个人正在做什么？	项目、作品与开发记录
有什么值得继续了解？	项目说明、博客或体验入口
怎样联系作者？	公开邮箱或其他联系入口

这四个问题，已经足够支撑一个有用途的个人网站。

网站的定位也会影响内容顺序。

如果准备求职，项目、经历和联系方式应该更容易找到；如果展示摄影，作品图比长篇自我介绍更重要；如果记录学习过程，文章和开发日志就应该有清楚的入口。

我的站点偏向个人创作展示，所以保留了角色、音乐和一些小互动。你可以根据自己的目的，决定哪些内容值得放进去。

第一版最重要的成果，是别人打开后，能看懂你是谁、做了什么，以及下一步可以点哪里。

二、新手怎样选择建站路线？直接给出建议

先不要急着比较哪个 AI 最强。

你需要先选择一种工作方式。不同路线得到的东西不同，后面修改和发布的方法也会不同。

你的主要需求	推荐起点	需要掌握什么
尽快做一个作品集，不想处理代码	可视化建站平台的完整模板	替换内容、调整布局、发布设置
希望拿到本地文件，以后自己改	静态网页模板，加 AI 修改	文件结构、素材路径、基本样式
想通过做网站学习 AI 开发	让 AI 根据需求生成一个小项目	拆需求、运行、检查、修改
已经在使用 React 等框架	对应技术栈的模板或组件	项目启动、依赖和构建
还没想清楚网站应该有哪些页面	先做内容清单和线框图	页面结构与内容组织

我的建议是：

只是需要一个展示入口，先用模板；希望学习开发，就从一个原生静态网站开始。

这里的"静态网站"，可以先理解为：浏览器拿到 HTML、CSS、JavaScript 和图片以后，就能展示的页面。

静态网站也可以有交互。切换主题、打开图片、运行小游戏，都不一定需要后端。

什么时候才需要进一步考虑后端？

例如：

用户注册和登录；
不同设备之间同步数据；
接收并保存访客提交的内容；
根据权限展示私人资料；
调用需要保密凭证的服务。

如果第一版只展示个人资料与项目，可以先不引入这些部分。

三、不会设计，可以去哪些网站找帮助？

下面这些资源，可以解决不同的问题。使用时，先认清自己拿到的是参考案例、提示词、组件，还是完整网站。

资源	适合解决的问题	使用时重点看什么
MotionSites	喜欢某种网页效果，但不会描述	提示词对应的布局、技术栈和交互
HTML5 UP	想下载一个静态模板，在本地修改	页面结构、素材目录与许可
Framer	希望通过可视化编辑器完成网站	模板内容、手机布局与发布条件
Webflow	希望使用可视化方式设计和维护网站	模板、平台功能及导出条件
21st.dev	导航、首屏、卡片等局部模块不满意	组件依赖与现有项目是否匹配
Relume	页面结构还没想清楚	网站结构、线框图和风格方案
v0	希望通过对话生成、修改网页项目	生成结果的运行方式与代码组织

这些资源不需要全部使用。选一个主要起点，再针对具体困难补充工具，会更容易推进。

1. MotionSites：怎样把现成提示词改成自己的需求？

MotionSites 提供网页提示词、模板和动画相关资源，可以从整页、首屏、页脚等不同范围寻找设计起点。MotionSites 官方说明

打开一个喜欢的示例时，先看这几件事：

它展示的是一个区域，还是完整页面？
主要依靠排版，还是依靠视频和动画？
你有没有能替换进去的图片与文案？
提示词指定了什么技术栈？
生成后，自己准备怎样运行和修改？

接下来，把示例内容转换成自己的内容：

示例中常见的内容	个人网站可以怎样替换
公司名称	昵称或网站名称
产品介绍	个人介绍与项目说明
购买按钮	查看项目、阅读博客、联系作者
客户数量	删除，或者换成有依据的项目信息
用户评价	删除，或者使用获得授权的真实评价
产品视频	项目截图、作品展示或静态图片
大量商业模块	与个人内容有关的必要区域

例如，你找到一个带有产品视频、价格表和客户评价的页面，不能只把公司名称换成自己的名字。

可以先给 AI 这样一轮任务：

复制代码

下面是一份我获得使用授权的网页提示词。

请先分析它包含哪些区域和技术要求，
暂时不要生成代码。

我要把它改成个人作品展示网站：

保留：
- 首屏的左右分栏结构；
- 大标题与简短介绍；
- 清楚的项目入口。

调整：
- 产品介绍改为个人介绍；
- 产品展示改为两个开发项目；
- 购买按钮改为"查看项目"。

删除：
- 价格表；
- 客户数量；
- 用户评价；
- 与我的内容无关的商业模块。

我的项目使用原生 HTML、CSS、JavaScript。
请指出原提示词中哪些实现要求不适合这个技术栈。

最后给出改写后的需求说明，
等我确认结构后再生成页面。

这段示例是教学用的原创提示词，不是 MotionSites 付费内容的转载。

使用资源时，也要区分"用它制作自己的项目"和"重新分发资源"。MotionSites 的条款允许将授权提示词和代码用于自己的项目，同时限制转售、重新分发资源本身，并说明生成结果受到所用 AI 工具的影响。MotionSites 使用条款

2. HTML5 UP：想保留本地文件，可以从这里起步

HTML5 UP 的模板适合拿到本地后修改。

它提供的是网页文件，你可以解压、打开，再把文字、图片和链接替换成自己的内容。

官方许可允许个人和商业使用、修改，同时要求相应署名。下载后，应一起阅读模板中的许可说明。HTML5 UP 许可

选择模板时，建议先做一个简单测试：

把自己的真实文案想象着放进去，它还成立吗？

你只有两个项目，就没必要选必须展示十几个案例才完整的模板。你准备写较多中文介绍，也要留意模板是不是只为很短的英文标题设计。

3. Framer、Webflow：适合希望通过可视化编辑完成网站的人

Framer 模板会复制成自己账户里的项目，再进行内容与样式编辑。Webflow 也提供完整模板和可视化编辑方式。Framer 模板教程、Webflow 模板目录

这条路线可以减少处理文件和代码的工作，但选之前要确认：

模板本身是否收费；
发布需要什么方案；
以后怎样更新；
是否能够导出；
换平台后，哪些功能需要重新做。

导出和托管的具体区别，下篇会继续讲。

4. 21st.dev：适合改善一个模块

如果网站已经基本成形，只是项目卡片、首屏或导航不满意，可以查看组件资源。

21st.dev 的组件主要围绕 React、Tailwind 和 shadcn/ui 等约定组织，也提供面向 AI 工具的提示词。21st.dev

这里要注意技术匹配。

如果现有项目是普通 HTML，拿到一个 .tsx 文件，不代表直接放进去就能运行。可以让 AI 参考视觉与交互，在现有技术栈里重新实现；需要使用组件本身时，再确认框架和依赖。

不要因为喜欢一个按钮，就在没有必要的情况下重建整个网站。

5. Relume、v0：分别帮助整理结构和生成项目

Relume 可以从需求材料生成简报、网站结构、线框图和风格方案，再继续编辑或导出到相应工具。它适合帮助你先想清楚页面内容。Relume 功能说明

v0 则适合通过对话生成、预览和继续修改代码项目，也提供代码导出等工作方式。v0 官方说明

使用这类工具时，要确认生成的是哪种项目。框架项目的启动、构建与发布方式，和普通 HTML 文件不同。

四、选模板时，不要只看首页

一个模板能不能用，最好从下面六个方面检查。

检查项	具体怎样看
内容是否匹配	你的项目数量、图片比例、文字长度能不能放进去
中文是否好读	中文标题替换后，是否拥挤、断行混乱
手机端是否完整	导航、项目、联系入口是否仍然能用
交互是否必要	去掉视频或动画以后，内容是否仍然成立
修改是否方便	能否找到文字、图片、颜色和项目的位置
后续条件是否接受	许可、托管、域名和迁移要求是否明确

尤其要检查手机页面。

有些页面在宽屏上非常漂亮，但缩窄以后，文字会压在图片上，按钮可能需要悬停才出现，导航也不一定适合触屏。

还有一个很实用的方法：

先把模板原样运行一次，再开始修改。

如果模板原样就无法运行，先解决环境问题；原样能运行，替换资料后出问题，排查范围就小得多。

五、先整理资料，避免 AI 替你补出不存在的经历

很多页面看起来没有个人特色，是因为输入材料只有一句"我是一个喜欢技术的人"。

AI 不知道你做过什么，就容易用通用表达填满页面。

开始前，先写好这份资料：

复制代码

【网站目的】
别人看完后，我希望他了解什么、完成什么操作？

【个人信息】
昵称：
身份或学习方向：
一句话介绍：

【项目一】
名称：
解决的问题：
目标用户：
我负责的部分：
目前完成的内容：
可以公开的截图：
项目介绍或体验链接：

【项目二】
按同样结构填写。

【其他内容】
博客、摄影、绘画、学习笔记等。

【联系方式】
准备公开的邮箱或其他入口。

【缺少的资料】
没有截图：
没有体验链接：
尚未完成的功能：

项目介绍也可以使用一个容易照着写的结构：

为谁解决什么问题，我做了哪些工作，目前到了哪一步。

例如，围绕 Offer 体验站，可以这样组织信息：

一个围绕职业选择展开交流的小程序。求职者可以提出选择困惑，其他人提供建议。我负责需求整理，并借助 AI 完成页面、云端功能和上线过程。

它比"独立开发了一个功能完善、体验优秀的产品"提供了更多有效信息。

暂时缺少的材料，要明确保留缺口。

没有体验地址，就写"暂未开放"；没有项目截图，就先用文字说明当前成果。等真实资料准备好，再补上对应入口。

六、怎样把喜欢的风格说清楚？

"高级""有质感""不要太普通"，都可以表达偏好，但不足以直接决定布局。

可以把视觉要求拆成四部分：

部分	可以怎样描述
布局	首屏左边介绍、右边图片；项目区突出主要作品
颜色	深蓝灰背景、浅色正文、一种主要强调色
字体	中文标题清楚，正文适合连续阅读
交互	导航跳转、主题切换、图片查看；装饰效果适量

我的完整站点采用了这样的基础配色：

css 复制代码

:root {
  --bg: #131d26;
  --panel: #1b2834;
  --ink: #f5f0e7;
  --muted: #adb8c6;
  --accent: #f0a8b8;
}

这些颜色分别承担背景、区域层次、正文、次级文字和强调色的作用。

你可以替换颜色，但最好保留明确分工。后续调整主题时，就不用到处寻找散落的颜色值。

参考网页也可以按这种方式记录：

复制代码

参考 A：
采用它的首屏信息顺序。
不使用全屏背景视频。

参考 B：
采用它的项目展示方式。
保留自己的颜色和文字风格。

参考 C：
采用它手机端的导航思路。

参考越具体，AI 越容易知道哪些部分需要保留，哪些部分只是供你观察。

七、准备项目目录，先认识文件之间的关系

如果走本地代码路线，可以先建立这个结构：

复制代码

my-personal-site/
└─ dist/
   ├─ index.html
   ├─ styles.css
   ├─ app.js
   └─ assets/

这里的 assets 用来放后续加入的图片等素材，下面的小练习暂时不依赖图片。

三个主要文件分别负责：

index.html：页面内容与结构；
styles.css：颜色、间距、排版与布局；
app.js：按钮、主题和其他交互。

dist 在这个练习中只是发布目录的名字。

我的真实项目也是原生静态站，直接在 dist 中维护网页文件。它并没有因为目录叫 dist，就必须执行某条构建命令。

如果 AI 生成了 package.json、`src` 和框架配置文件，则需要根据实际项目重新确认运行方式。

八、第一轮提示词：一次交代清楚目标、内容和验收方式

把前面准备的材料交给 AI 后，可以使用下面这份提示词：

复制代码

我要制作一个中文个人网站，
用于展示个人介绍、开发项目和联系方式。

技术要求：
使用原生 HTML、CSS、JavaScript。
第一版不安装前端依赖。
文件放在 dist 目录中：
index.html、styles.css、app.js。

页面内容：
1. 首页：昵称、一句话介绍、查看项目入口；
2. 项目：展示我提供的两个项目；
3. 关于：学习方向与个人介绍；
4. 联系：公开邮箱。

视觉方向：
深蓝灰背景、浅色正文、柔和强调色。
中文标题清楚，正文适合阅读。
项目区有主次，手机端可以正常浏览。

交互：
导航跳到对应区域。
加入一个简单的强调色切换。
刷新后尝试恢复上次配色。
浏览器无法保存偏好时，当前切换仍然有效。

内容要求：
使用我提供的真实资料。
没有截图、链接或经历的地方明确保留缺口。
未开放的体验入口显示为不可用状态。

本轮范围：
先完成上述基础页面。
收藏、音乐、小游戏等功能留到后续。

完成后：
列出生成的文件；
告诉我怎样打开；
说明每个按钮应该产生什么结果；
列出需要人工检查的地方。

请先给出简短实现安排，再生成文件。

这份提示词里，比较容易被忽略的是最后一部分。

只要求"生成网站"，AI 可能交出代码就结束。把预期结果写进去，后面就有了检查依据：

导航是否跳到对应区域？主题是否变化？没有链接的按钮是否仍然误导用户？

九、完整练习：先做一个可以运行的小版本

下面这份代码保留了完整项目中的一些基础思路，但做了简化，方便第一次实践。

它包含个人介绍、双列项目卡片、关于、联系方式和强调色切换。

这是教学用的独立小版本，不是完整站点源码。

1. index.html

在 dist 中创建 index.html：

XML 复制代码

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="我的个人介绍、开发项目与学习记录。">
  <title>我的个人网站｜作品与开发记录</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="./app.js" defer></script>
</head>
<body>
  <header class="wrap topbar">
    <a class="brand" href="#home">我的小站</a>
    <nav aria-label="主导航">
      <a href="#projects">项目</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
    <button id="theme-button" type="button">切换强调色</button>
  </header>

  <main id="home" class="wrap">
    <section class="hero" aria-labelledby="hero-title">
      <p class="eyebrow">个人作品集 · 开发记录</p>
      <h1 id="hero-title">把喜欢，做成能体验的作品。</h1>
      <p class="intro">在这里写你的昵称、学习方向，以及正在做的事情。</p>
      <a class="button" href="#projects">看看我的项目</a>
    </section>

    <section id="projects" aria-labelledby="projects-title">
      <h2 id="projects-title">我在做什么</h2>
      <div class="project-grid">
        <article class="card">
          <p class="eyebrow">项目一</p>
          <h3>我的第一个项目</h3>
          <p>它解决什么问题？你负责什么？目前完成了哪一步？</p>
          <button type="button" disabled>体验入口准备中</button>
        </article>
        <article class="card">
          <p class="eyebrow">项目二</p>
          <h3>我的学习与实验</h3>
          <p>可以展示一个小工具、一个网页，或一次值得记录的尝试。</p>
          <p class="muted">整理好真实资料后，再加入项目链接。</p>
        </article>
      </div>
    </section>

    <section id="about" aria-labelledby="about-title">
      <h2 id="about-title">关于我</h2>
      <p>介绍你关注的方向，以及希望通过这些作品表达什么。</p>
    </section>

    <section id="contact" aria-labelledby="contact-title">
      <h2 id="contact-title">联系我</h2>
      <p>发布前，把演示邮箱替换成自己的公开联系邮箱。</p>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </section>
  </main>
</body>
</html>

这里有几处值得认识：

第一，页面区域有自己的 id。

例如：

XML 复制代码

<a href="#projects">项目</a>

会寻找：

XML 复制代码

<section id="projects">

改了区域的 id，对应链接也要一起更新。

第二，脚本使用了 defer。

浏览器解析完页面结构后再执行脚本，脚本就能找到页面里的主题按钮。

第三，没有体验链接的按钮使用 disabled。

第一版不应该放一个看起来能点、实际没有去向的体验按钮。

2. styles.css

在同一目录创建 styles.css：

css 复制代码

:root {
  --bg: #131d26;
  --panel: #1b2834;
  --ink: #f5f0e7;
  --muted: #adb8c6;
  --accent: #f0a8b8;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.8 system-ui, sans-serif;
}

a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.wrap {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 24px;
}

.brand { font-weight: 700; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 18px; }
.hero { padding-block: 70px; }

h1 {
  max-width: 14ch;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.2;
}

h2 { font-size: 28px; }
h3 { font-size: 22px; }

.intro { max-width: 42rem; color: var(--muted); }
.eyebrow { color: var(--accent); }
.muted { color: var(--muted); }

.button {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 8px;
  text-decoration: none;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.card {
  min-width: 0;
  padding: 24px;
  border: 1px solid #647080;
  border-radius: 16px;
  background: var(--panel);
}

.card a { overflow-wrap: anywhere; }
section { margin-bottom: 64px; }

@media (max-width: 700px) {
  .project-grid { grid-template-columns: 1fr; }
  .hero { padding-block: 36px; }
}

这段样式里，也有几个可以直接复用的思路。

box-sizing: border-box 让元素的宽度计算更容易控制。

.wrap 给页面设置最大宽度，同时在较窄屏幕上保留左右边距。

clamp(36px, 6vw, 72px) 让标题字号随视口变化，同时保留上下限。

项目区采用两列，在较窄屏幕上切换为一列。`minmax(0, 1fr)` 和卡片上的 min-width: 0，有助于避免内容把网格列撑得过宽；长链接还需要单独允许换行。MDN：网格列与 minmax

3. app.js

最后创建 app.js：

javascript 复制代码

const themes = [
  { name: '樱粉', color: '#f0a8b8' },
  { name: '冰蓝', color: '#9fc3dd' },
  { name: '雪白', color: '#e3e9f2' }
];

const storageKey = 'demo-accent';
const themeButton = document.querySelector('#theme-button');
let current = 0;

try {
  const saved = localStorage.getItem(storageKey);
  const found = themes.findIndex((theme) => theme.color === saved);
  if (found >= 0) current = found;
} catch {
  // 读取失败时使用默认配色。
}

function renderTheme() {
  const theme = themes[current];
  document.documentElement.style.setProperty('--accent', theme.color);
  if (themeButton) themeButton.textContent = '强调色：' + theme.name;
}

renderTheme();

themeButton?.addEventListener('click', () => {
  current = (current + 1) % themes.length;
  renderTheme();

  try {
    localStorage.setItem(storageKey, themes[current].color);
  } catch {
    // 偏好未保存，但当前页面仍然可以使用新颜色。
  }
});

运行过程可以理解为：

复制代码

读取之前的配色
    ↓
确认它是不是允许的颜色
    ↓
更新页面中的 CSS 变量
    ↓
点击按钮后切换到下一种颜色
    ↓
尝试保存这次选择

先更新当前页面，再尝试保存偏好，意味着保存失败时，页面仍然能完成颜色切换。

但这不等于数据一定已经保存。下篇会用真实的收藏便笺功能，继续解释这种区别。

十、怎样运行？先确认打开的是哪个目录

保存时，注意实际扩展名。

index.html.txt 不是 HTML 文件。Windows 如果隐藏了已知扩展名，可以先在资源管理器中显示文件扩展名，再检查文件名称。

对于上面的练习，直接打开 dist/index.html，就可以查看主体内容。

为了让预览更接近正式网站，建议使用本地 HTTP 服务。

电脑已安装 Python 时，在项目外层目录打开终端：

XML 复制代码

my-personal-site/

执行：

复制代码

python -m http.server 4173 --bind 127.0.0.1 --directory dist

浏览器访问：

复制代码

http://127.0.0.1:4173

命令中的几个部分分别表示：

内容	含义
`http.server`	启动一个简单的 HTTP 服务
`4173`	使用的端口
`127.0.0.1`	仅在本机监听
`--directory dist`	将 `dist` 作为网页目录

如果终端当前就在 dist 内，命令应改为：

复制代码

python -m http.server 4173 --bind 127.0.0.1

否则就可能错误地寻找 dist 里面的另一个 dist。

结束预览，在对应终端按 Ctrl+C。

另外，直接通过 file: 打开文件时，本地存储等行为不能假定与正式 HTTP 网站完全一致。测试偏好保存时，使用固定的本地 HTTP 地址更清楚。MDN：localStorage

打开以后，应该看到什么？

先检查五件事：

页面是深色背景，标题和项目卡片有样式；
点击顶部"项目"，能跳到项目区域；
点击强调色按钮，按钮、链接等颜色变化；
缩窄浏览器，项目卡片从两列变成一列；
第一张卡片的体验入口处于不可用状态。

如果只看到一页没有样式的文字，优先检查 CSS 文件是否在正确位置。

如果主题按钮没有反应，优先检查 app.js 的路径、按钮 id 和浏览器控制台。

十一、把练习改成自己的站点，先替换这些位置

第一轮修改，先以内容替换为主。

要修改的内容	对应位置
浏览器标签页标题	`<title>`
页面简介	`meta name="description"`
网站名称	`.brand`
主标题	`#hero-title`
一句话介绍	`.intro`
项目内容	`.card`
联系方式	`mailto:` 链接与显示文字
基础颜色	`:root` 中的变量

邮箱需要同时修改两个地方：

XML 复制代码

<a href="mailto:你的邮箱">你的邮箱</a>

只改显示文字，点击后仍然可能打开原来的地址。

准备好真实项目链接后，可以把禁用按钮替换为链接：

XML 复制代码

<a class="button" href="你的真实项目介绍地址">
  查看项目介绍
</a>

这里的地址需要替换为实际可访问的链接。没有地址时，继续保留明确的未开放状态。

想加入项目截图，怎样组织文件？

先把图片放到：

复制代码

dist/assets/project-cover.jpg

再在项目卡片里加入：

XML 复制代码

<img
  src="./assets/project-cover.jpg"
  alt="项目的主要界面截图"
  loading="lazy"
>

并补充基础样式：

css 复制代码

.card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

第一次加入图片，先保持完整展示，确认路径和清晰度正常，再决定是否统一裁切比例。

十二、第一版不满意，怎样让 AI 改得更准确？

"再高级一点"会把许多不同问题混在一起。

可以把修改分成三类。

1. 内容问题：别人看不懂你做了什么

复制代码

请修改项目区文案。

目前的问题：
只写了项目名称，读者不知道项目的用途。

请根据我提供的资料，
为每个项目补充：
- 目标用户；
- 解决的问题；
- 我负责的工作；
- 当前状态。

保持现有布局和配色。
不要添加我没有提供的经历或数据。

2. 布局问题：标题和图片的关系不合适

复制代码

请调整首页首屏。

实际问题：
标题占用空间过大，介绍和主要入口需要向下滚动才能看到。

预期：
保留标题的视觉重点；
让简短介绍和"查看项目"入口更容易被看到；
手机端允许自然换行。

请先说明影响布局的样式，
再做局部修改。

保留项目区、配色和现有交互。

3. 功能问题：操作结果与预期不同

复制代码

问题：
切换强调色后，刷新页面又恢复了默认颜色。

请检查：
是否写入了本地存储；
写入和读取是否使用同一个键；
读取的值是否通过了允许值检查；
我是否始终使用同一个预览地址。

完成后分别说明：
代码检查结果；
已经实际验证的行为；
仍需我在浏览器里检查的部分。

这三类问题，处理顺序和验证方式不同。

先确定自己不满意的究竟是什么，再把修改交给 AI，会减少很多来回试错。

十三、怎样减少反复解释，也减少无效生成？

项目稍微做大以后，可以增加一个简短的说明文件，例如：

复制代码

PROJECT_NOTES.md

里面只放当前需要遵守的事实：

复制代码

项目：中文个人网站

技术：
原生 HTML、CSS、JavaScript。
没有前端构建步骤。

入口：
dist/index.html。

样式：
dist/styles.css。

交互：
dist/app.js。

已确定：
深色背景；
浅色正文；
主要强调色可以切换；
项目内容使用真实资料。

当前任务：
完成个人介绍、两个项目与联系方式。

后续再做：
收藏、音乐、小游戏。

每次修改后：
列出修改文件；
说明检查方法；
区分已验证与未验证。

它的作用，是让下一轮修改仍然围绕同一个项目进行。

另外，每轮尽量交付一个能验收的任务：

复制代码

第一轮：替换个人与项目资料。
第二轮：调整首屏。
第三轮：检查手机布局。
第四轮：处理链接与交互。

在文件工具里开发时，可以让 AI 先阅读说明和相关文件，再定位修改；没有必要每次把整个项目、所有素材和历史对话重新塞进去。

这个练习也不要求你先把各种 Skill、MCP 配齐。先完成一次"需求---实现---检查---修改"的过程，再判断哪里确实需要额外能力。

十四、上篇结束前，做一次小验收

可以按下面这张表逐项操作：

检查项	操作	合格表现
内容	从头读一遍首页	能说明你是谁、正在做什么
项目	阅读每张项目卡片	有用途、工作内容和当前状态
导航	点击所有导航链接	到达正确区域
主题	切换配色，再刷新	正常环境下尝试恢复选择
手机布局	缩窄窗口	标题和卡片可以阅读，无明显横向溢出
联系	点击邮箱	地址与显示文字一致
未开放入口	检查所有按钮	状态明确，不误导访问者

本文练习代码完成了语法、本地引用和主题逻辑检查。真实浏览器中的排版、操作和设备差异，仍需要按照上表实际查看。

第一版完成后，你应该已经能找到并修改自己的网站内容，也知道每个入口的用途。

接下来，再处理那些只有实际使用以后才容易发现的问题：图片比例不合适、手机上文字溢出、复制按钮提示失真，以及网站上线后资源找不到。

这些内容，我们在下篇继续。