大家好，我是RD！今天这篇问答专为完全没写过代码的新手设计——你不需要懂HTML标签、不用装VS Code、甚至不用注册Claude账号（我们用免费网页版+简单Prompt就能跑通）。目标：10分钟内生成一个能直接预览、可截图发朋友圈的个人作品集首页。
✅ 前置准备（2分钟）
你是一个前端开发教练，擅长教零基础用户用AI写出可用的网页。请生成一个完整的单页作品集网站HTML文件，要求：
使用纯HTML + 内联CSS + 内联JavaScript（不依赖外部文件）
包含：顶部导航栏（含'首页'、'作品'、'关于'、'联系'）、主标题区（带姓名和职业描述）、3个作品卡片（每张含标题、简短描述、占位图链接）、底部联系表单（姓名、邮箱、消息输入框和提交按钮）
设计简洁现代：字体用系统默认无衬线体，主色#4F46E5（深紫），背景浅灰#F9FAFB，卡片圆角8px，悬停有轻微阴影
所有图片用[placeholder.co](https://placeholder.co)生成，尺寸600x400，文字标注如'作品1'，颜色匹配主色
表单提交后弹出'感谢留言！'提示，不需后端
输出完整HTML代码，开头不要解释，直接输出代码块
💡 小技巧：Claude对「不依赖外部文件」「内联」「直接输出代码块」等指令非常敏感，务必保留这些关键词。
✅ 执行与调试（5分钟）
Claude通常会在15秒内返回一段约300行的HTML代码。点击右上角「复制」按钮，全选粘贴到记事本（Windows）或TextEdit（Mac，设为纯文本模式）。
保存为 portfolio.html（注意扩展名必须是.html，不要变成.txt！）
双击该文件——浏览器自动打开！你会看到一个清爽的作品集页面 ✅
⚠️ 如果显示错乱？常见原因及修复：
https://placeholder.co/600x400?text=作品1 替换为 https://via.placeholder.com/600x400/4F46E5/FFFFFF?text=作品1（更稳定）font-size: 16px，改成 font-size: 18px 后保存再刷新✅ 进阶一步（3分钟）：加你的名字和作品描述
用记事本打开 portfolio.html，按 Ctrl+F 搜索：
Your Name Here → 替换为你的真实姓名（如“张小雨”）Frontend Developer & AI Enthusiast → 改成你的身份（如“UI设计师｜副业接单中”）作品1 / 作品2 → 替换为你的实际项目（如“微信点餐小程序｜用Cursor+AI一周上线”）✅ 发布与复用
zhangxiaoyu.vercel.app；基于上一版，增加‘技能标签云’模块，展示HTML/CSS/JavaScript/AI工具四个词，点击可高亮。这就是AI编程的起点：不纠结语法，先跑起来，再迭代。你刚完成的不是‘代码作业’，而是你的第一个可交付数字资产。人人都是程序员——从一个能打开的HTML开始。
#延伸思考：为什么不用Cursor？因为Claude Code更适合‘生成即用’场景；而Cursor更适合‘已有代码+AI增强’。后续我们会专门讲《Cursor实战：把这份作品集升级成React动态站点》。
---
实操清单：
☑️ 复制Prompt → ☑️ 粘贴进Claude → ☑️ 复制HTML → ☑️ 保存为.html → ☑️ 双击预览 → ☑️ 替换文字 → ☑️ 分享出去
你现在拥有了一个属于自己的网页。接下来呢？试试在评论区留下你的作品集截图，RD帮你点评优化！