第二次博客设计：AI帮我写代码的反思
距离第一次画博客设计稿快一年了。这次我把第一版的HTML/CSS丢给AI，说自己想把网页做得更完善一些。结果AI几乎重写了整个页面，变成了一个“北极光观测主题”的博客风格。
设计稿长什么样
和第一版相比，这次丰富了很多：
- 轮播图（展示北极光、摄影技巧、生态保护三张大图，带切换按钮和指示器）
- 倒计时（显示距离“下个极光高峰”还有多少天，随便填了一个未来日期）
- 博客文章卡片（三篇：摄影技巧、旅行攻略、环境保护，带标签、日期、评论数）
- 登录/注册模态框（弹窗形式，支持表单切换）
- 鼠标跟随特效（一个小圆点跟着鼠标移动）
- 返回顶部按钮
- 页脚依然保留着“特别鸣谢”“旗下产品”那些虚构内容（毕竟是期末作业改过来的）
技术方面：用了Google Fonts、Font Awesome、纯CSS布局，还有一点原生JavaScript实现轮播、倒计时、模态框、鼠标跟随。没有后端，所有链接都是#占位符。
AI参与的程度
坦白说，这次大部分代码是AI生成的。我把第一版的需求和样式描述给它，它直接给出了这个完整页面。轮播图逻辑、倒计时更新、模态框切换、鼠标跟随——这些基本上是一次成型，我只需要小修小补调整间距和颜色。
有bug吗？有一些。比如轮播图自动播放和手动切换的冲突，倒计时初始值显示NaN，但都是小问题，改几行就解决了。
反思：AI帮我搭了台，但戏还是没法唱
这套页面看起来比第一版“现代”很多，甚至有点专业博客的味道。但它依然只是一个静态展示：
- 登录/注册只有前端表单，没有后端验证，点“登录”什么也不会发生。
- 文章列表是写死的，没有管理后台，不能新增或编辑。
- 评论数、作者数据全是假的。
- 倒计时的时间是随便填的（未来会成负数的），没有任何实际意义。
换句话说，AI帮我快速搭建了一个“看起来能用”的壳，但核心业务逻辑（用户、文章、评论）依然是零。
工作流的改变
这次经历让我开始反思自己和AI的协作方式。如果只是一味让AI生成代码，会得到很多看起来漂亮但无法落地的界面。真正需要的是：让AI辅助解决具体问题，而不是替我设计整个系统。
比如，与其让AI生成一个完整的博客前端，不如让它帮我写一个文章列表组件的样式，或者一个倒计时的工具函数。这样我还能理解每一块代码，后续也容易修修补补。
后来（指后续项目）我开始尝试调整工作流，比如现在正在和AI对话生成这篇博客文章。但那是后话了，至少在这次设计稿里，我尝到了AI的效率，也看清了它的边界。
最终状态
和第一版一样，这套页面没有部署到服务器，只在本地打开过。可能是因为老毛病——只有期末作业才能逼自己一把。但至少，这次不是从零手写HTML了。
运行截图
部分代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北极光博客 | NORTHERN LIGHTS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- 鼠标跟随效果 -->
<div class="cursor-follower"></div>
<!-- 头部导航 -->
<header>
<div class="container">
<div class="logo">
<a href="#" class="logo-link">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj48cGF0aCBmaWxsPSIjMDBiN2MzIiBkPSJNMTI1IDMwTDE4Ny4xMjYgNjguNzQ5TDE1MC4xOTggMTI1TDE4Ny4xMjYgMTgxLjI1MUwxMjUgMjIwbC02Mi4xMjYtMzguNzQ5TDk5LjgwMiAxMjVMNjIuODc0IDY4Ljc0OUwxMjUgMzB6Ii8+PHBhdGggZmlsbD0iIzAwNmE3MSIgZD0iTTEyNSAzMEwxODcuMTI2IDY4Ljc0OUwxNTAuMTk4IDEyNUwxODcuMTI2IDE4MS4yNTFMMTI1IDIyMGwtNjIuMTI2LTM4Ljc0OUw5OS44MDIgMTI1TDYyLjg3NCA2OC43NDlMMTI1IDMwTTEyNSAwTDAgNjIuNWw0Ni41IDc5LjE4OUwwIDE4Ny41TDEyNSAyNTBsMTI1LTYyLjUtNDYuNS03OS4xODFMMjUwIDYyLjVMMTI1IDB6Ii8+PC9zdmc+" alt="北极光">
</a>
<span class="logo-text">北极光</span>
</div>
<nav>
<a href="#" class="nav-link-now"><i class="fa-solid fa-house"></i> 主页</a>
<a href="#" class="nav-link"><i class="fa-solid fa-newspaper"></i> 文章</a>
<a href="#" class="nav-link"><i class="fa-solid fa-paper-plane"></i> 推荐</a>
<a href="#" id="loginRegisterLink"><i class="fa-solid fa-right-to-bracket"></i> 登录 / 注册</a>
</nav>
</div>
</header>
<!-- 主要内容区 -->
<main>
<!-- 轮播图 -->
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1470&auto=format&fit=crop')">
<div class="carousel-caption">
<h3>探索北极光的奥秘</h3>
<p>北极光，又称欧若拉，是自然界最令人惊叹的光影秀之一。了解它的形成原理和最佳观赏地点。</p>
<a href="#" class="btn">阅读更多</a>
</div>
</div>
<div class="carousel-item" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?q=80&w=1493&auto=format&fit=crop')">
<div class="carousel-caption">
<h3>极地摄影技巧大全</h3>
<p>掌握在极寒环境下拍摄壮丽极光的专业技巧，从设备选择到参数设置一应俱全。</p>
<a href="#" class="btn">阅读更多</a>
</div>
</div>
<div class="carousel-item" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1469122312224-c5846569feb1?q=80&w=1458&auto=format&fit=crop')">
<div class="carousel-caption">
<h3>极地生态保护行动</h3>
<p>了解气候变化对极地生态系统的影响，以及我们如何参与保护这片脆弱的自然环境。</p>
<a href="#" class="btn">阅读更多</a>
</div>
</div>
</div>
<button class="carousel-control prev"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-control next"><i class="fas fa-chevron-right"></i></button>
<div class="carousel-indicators">
<div class="indicator active"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
</div>
<!-- 倒计时 -->
<div class="countdown-container">
<h2 class="countdown-title">下个极光高峰倒计时</h2>
<div class="countdown">
<div class="countdown-item">
<div class="countdown-value" id="days">00</div>
<div class="countdown-label">天</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="hours">00</div>
<div class="countdown-label">时</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="minutes">00</div>
<div class="countdown-label">分</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="seconds">00</div>
<div class="countdown-label">秒</div>
</div>
</div>
</div>
<!-- 博客文章 -->
<h2 class="section-title">最新文章</h2>
<div class="blog-posts">
<div class="post">
<div class="post-img">
<img src="https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?q=80&w=1470&auto=format&fit=crop" alt="极光摄影">
</div>
<span class="post-tag">摄影技巧</span>
<div class="post-content">
<div class="post-date"><i class="far fa-calendar"></i> 2023年12月15日</div>
<h3 class="post-title"><a href="#">极地摄影：捕捉完美极光的10个秘诀</a></h3>
<p class="post-excerpt">在极地拍摄极光需要特殊技巧和准备。本文将分享专业摄影师在严寒环境下捕捉完美极光的实用技巧...</p>
<div class="post-meta">
<span><i class="far fa-user"></i> 张三</span>
<span><i class="far fa-comments"></i> 24条评论</span>
</div>
</div>
</div>
<div class="post">
<div class="post-img">
<img src="https://images.unsplash.com/photo-1512273222628-4daea6e55abb?q=80&w=1470&auto=format&fit=crop" alt="极地旅行">
</div>
<span class="post-tag">旅行攻略</span>
<div class="post-content">
<div class="post-date"><i class="far fa-calendar"></i> 2023年12月10日</div>
<h3 class="post-title"><a href="#">北极圈旅行全攻略：从装备到行程安排</a></h3>
<p class="post-excerpt">计划一次难忘的北极之旅？本指南将提供从必备装备、行程规划到安全注意事项的全面建议，助你开启极地探险...</p>
<div class="post-meta">
<span><i class="far fa-user"></i> 李雪</span>
<span><i class="far fa-comments"></i> 18条评论</span>
</div>
</div>
</div>
<div class="post">
<div class="post-img">
<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop" alt="气候变化">
</div>
<span class="post-tag">环境保护</span>
<div class="post-content">
<div class="post-date"><i class="far fa-calendar"></i> 2023年12月5日</div>
<h3 class="post-title"><a href="#">气候变化对北极生态系统的影响</a></h3>
<p class="post-excerpt">全球变暖正在迅速改变北极环境。了解气候变化如何影响极地生态系统以及我们可以采取的保护措施...</p>
<div class="post-meta">
<span><i class="far fa-user"></i> 王海洋</span>
<span><i class="far fa-comments"></i> 32条评论</span>
</div>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer>
<div id='ftcon'>
<div class='wrap'>
<ul>
<li>
<h3>关于我们 <i class="fa-solid fa-tag"></i></h3>
<i>About Us</i>
<span>NORTHERN LIGHTS是个在线博客分享平台.<br>
平台鼓励思想交流,创意展示与知识传播. <i class="fa-solid fa-thumbs-up"></i><br>
用户能在这里发表见解、探索兴趣、相互启发.<br>
如同自然界的北极光,汇聚独特光彩,启迪人心. </span>
</li>
<li>
<h3>特别鸣谢 <i class="fa-solid fa-hand-holding-heart"></i></h3>
<i>Thank List</i>
<h5><i class="fa-solid fa-burger"></i> 泡菜肥牛汉堡</h5>
<h5><i class="fa-solid fa-ice-cream"></i> 冰激凌水果巴菲</h5>
<h5><i class="fa-solid fa-jar"></i> 丰蹄能量饮料</h5>
<h5><i class="fa-solid fa-pizza-slice"></i> 汐斯塔水果披萨</h5>
</li>
<li>
<h3>旗下产品 <i class="fa-solid fa-robot"></i></h3>
<i>Products Us</i>
<h5>沃森AI认知计算 - Watson</h5>
<h5>深海探索者号 - Abyss Explorer</h5>
<h5>星辉智链 - Starlight Intelligent Chain</h5>
<h5>神经织网系统 - Neural Weave System</h5>
</li>
<li>
<h3>联系我们 <i class="fa-solid fa-handshake"></i></h3>
<i>Contact Us</i>
<h5><i class="fa-solid fa-map-location-dot"></i> 地址: Earth's North Pole</h5>
<h5><i class="fa-solid fa-phone"></i> 座机: 114 514 000</h5>
<h5><i class="fa-solid fa-fax"></i> 传真: 735 560 800</h5>
<h5><i class="fa-solid fa-envelope"></i> 邮箱: Error@SystemDeBug.com</h5>
<h5><i class="fa-solid fa-clock"></i> 工作时间: 9:00-12:00,14:00-18:00(周末及法定假日除外)</h5>
</li>
</ul>
</div>
</div>
<div id='copyright'>
<div class='wrap'>
<p>xxxxxxx © xxx</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="back-to-top"><i class="fas fa-arrow-up"></i></button>
<!-- 登录模态框 -->
<div class="modal" id="loginModal">
<div class="modal-content">
<div class="modal-header">
<h2>用户登录</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="loginForm">
<div class="form-group">
<label for="username"><i class="fa-solid fa-user"></i> 用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password"><i class="fa-solid fa-lock"></i> 密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-actions">
<button type="submit" class="btn">登录</button>
<div class="form-switch">
还没有账号？<a href="#" id="switchToRegister">注册新账号</a>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 注册模态框 -->
<div class="modal" id="registerModal">
<div class="modal-content">
<div class="modal-header">
<h2>用户注册</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="registerForm">
<div class="form-group">
<label for="reg-username"><i class="fa-solid fa-user"></i> 用户名</label>
<input type="text" id="reg-username" name="username" required>
</div>
<div class="form-group">
<label for="reg-email"><i class="fa-solid fa-envelope"></i> 电子邮箱</label>
<input type="email" id="reg-email" name="email" required>
</div>
<div class="form-group">
<label for="reg-password"><i class="fa-solid fa-lock"></i> 密码</label>
<input type="password" id="reg-password" name="password" required>
</div>
<div class="form-group">
<label for="reg-confirm-password"><i class="fa-solid fa-lock"></i> 确认密码</label>
<input type="password" id="reg-confirm-password" name="confirm-password" required>
</div>
<div class="form-actions">
<button type="submit" class="btn">注册</button>
<div class="form-switch">
已有账号？<a href="#" id="switchToLogin">立即登录</a>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="./scripts.js"></script>
</body>
</html>