使用 AI 创建网站：开发者提示工程实用指南

# 周末用 AI 助手打造单页作品集网站：开发者指南

借助 Claude Code 等 AI 助手开发单页作品集网站，带来全新的网页开发体验。这种方法让你在短时间内构建完整功能项目，无需外包专家——只需基础 HTML/CSS 知识和提示工程技巧。

准备阶段：内容与结构规划

在动笔写代码前，先收集内容并规划项目架构。提供足够上下文（如聊天记录、演讲材料、项目描述），AI 就能生成文本内容。为个人简介准备三个版本——简短、中等、详细版，能大大加速进程。

首次提示前就敲定页面结构。以下是演讲者作品集网站的推荐布局：

• 固定 300px 侧边栏
• 主内容区分模块
• 英雄区（含照片和关键信息）
• 个人简介模块
• 演讲主题卡片
• 成就统计区
• 照片与视频画廊
• 联系方式

提示工程：从骨架到精修

AI 助手的黄金法则：描述最终效果，而非具体步骤。首个提示应生成具备正确结构和语义的基本框架。

有效首轮提示示例：

为一位演讲者创建一个单页作品集网站。

风格：深色主题（背景 #0a0a0a），Google Fonts 的 Raleway 字体，强调色 #3182CE。

布局：双栏。左侧：粘性 300px 侧边栏，含圆形照片、姓名、头衔、社交链接。右侧：主内容区——简介、演讲主题（卡片）、成就（统计）、画廊（照片网格）、联系方式。

要求：纯 HTML、CSS 和原生 JS。不用框架或外部依赖，除 Google Fonts 外。

拿到骨架后，迭代精炼。每轮专注一项任务：

• 排版与配色
• 响应式设计
• 交互元素
• 动画与微交互

技术实现细节

响应式布局与跨浏览器兼容

移动端响应式需特别关注。桌面调整后，明确要求修复移动问题：

在移动端（<768px）布局崩坏：侧边栏与内容并排，内容溢出。修复：侧边栏横向置顶（照片与联系方式一行），主内容下方全宽。

跨浏览器关键提示：

• 在 Chrome、Safari、Firefox 测试
• 为 CSS 属性添加厂商前缀
• 检查平板（768-1024px）

性能优化

视觉完成后再优化。常见问题与修复：

• 图片优化：

- PNG 转 WebP

- 调整至所需尺寸

- 添加懒加载

• 资源加载：

- Google Fonts 异步加载

- 预加载关键资源

- 延迟 iframe 加载

• 性能指标：

- LCP（最大内容绘制）

- FID（首次输入延迟）

- CLS（累积布局偏移）

优化提示示例：

网站 PageSpeed Insights 分数 38。问题：大图（12MB 头像）、阻塞渲染资源、视频无懒加载。优化：图片转 WebP，预加载英雄图，延迟 iframe 加载。

部署与托管

托管选项

• Netlify/GitHub Pages —— 免费、超简单
• 自定义 VPS —— 全掌控，但需配置

VPS 部署常见坑

• 文件名大小写敏感（Linux 很挑剔）
• 绝对路径 vs 相对路径
• 文件权限与用户隔离
• 项目结构组织

避坑Tips：

• 文件名全小写
• 无空格或特殊字符
• 记录配置文档
• 用 Git 版本控制

核心要点

• 迭代开发： 将开发拆成小任务；每轮修复一处
• 质量检查： 跨浏览器测试，运行性能工具
• 文档记录： 记录变更与决策，便于回滚
• 优化阶段： 视觉后单独处理性能

代码最佳实践

项目结构

逻辑组织文件：

project/
├── index.html
├── styles/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── scripts/
│   └── main.js
├── images/
│   ├── optimized/
│   └── original/
└── assets/
    └── fonts/

CSS 方法论

使用有意义的 BEM 类名：

.speaker-card {
    /* 卡片样式 */
}

.speaker-card__image {
    /* 卡片内图片样式 */
}

.speaker-card__image--rounded {
    /* 圆形图片修饰 */
}

JavaScript 交互

无框架添加基础交互：

// 滚动触发动画
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

// 应用到所有 .animate-on-scroll 元素
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

常见错误与修复

• 提示模糊 —— AI 输出通用模板
• 无约束 —— AI 偷偷引入不需要的库
• 忽略优化 —— 好看但卡顿
• 忽视移动端 —— 丢掉一半用户

质量控制工具

• PageSpeed Insights —— 性能审计
• Lighthouse —— 全面站点检查
• BrowserStack —— 跨浏览器测试
• Git —— 版本控制与回滚

— Editorial Team