用 Vibe Coding 做你的摄影师作品集

01这和模板选择器有什么不同

模板库给你看一个成品设计，问你喜不喜欢。这个工具更进一步：下面六个方向，每一个都基于一个真实在运行的摄影师作品集，我们确实研究过它（截图、实时版式、计算出的颜色、计算出的字体），而不是某个人为了在色板里好看而编出来的配色。比如“杂志风”方向用的是 EB Garamond，因为一位真实的时装摄影师的网站用的正是这款字体，我们是直接检查页面匹配出来的。

在构建这个工具所参考的真实网站里，有两种模式几乎无处不在，并且已经融入这里的每个方向：导航收在一个汉堡图标后面，即使在桌面端也没有可见的链接列表；以及一次只展示一张大图，而不是网格。界面颜色始终接近于零：颜色由照片提供，而不是由界面提供。

02最后你会得到什么

一份结构完整的提示词，涵盖整体方向、精确的十六进制颜色、字体名称和搭配、页面清单、导航行为、相册版式和图片边框、要包含的功能、附带真实费用权衡的托管建议，以及一组固定的构建质量要求（可访问的替代文字、响应式断点、不写死密钥、图片懒加载）。把它粘贴进你常用的 AI 编程应用，它就具备了开工所需的一切。

03从提示词到上线网站：完整流程

提示词是设计说明，不是终点。从复制它到拥有一个能印在名片上的真实网址，中间的每一步都在这里，免费或接近免费。

复制提示词，打开一个 AI 编程应用

Claude、Cursor、Claude Code、Windsurf 或 Replit 的 AI 智能体都可以，只要能替你写文件、存文件，而不只是聊天。如果你从没用过，可以用基于浏览器的 claude.ai 或 Replit，无需安装：把提示词粘贴成第一条消息就行。

让它去搭建，然后认真看看它做出了什么

让它把网站搭建成静态 HTML/CSS/JS（或提示词托管部分指定的其他形式），并给你看预览。往下走之前，先检查提示词要求的六件事（颜色、字体、相册行为、导航、边框、页面）。现在改一个不对的强调色，比放进照片之后再改便宜得多。

换上你真实的照片、简介和联系方式

替换掉每一张占位图和每一行占位文字。请让你的 AI 应用在过程中为每张照片写一个真实、具体的 alt 属性，不要写“image1.jpg”，而要写一段真正的描述，因为这既是无障碍的要求，也能小幅提升 SEO。这时也要再确认一下，联系表单确实指向你会查看的邮箱地址。

部署到免费托管

如果你选了“静态 & 免费”档，请让你的 AI 应用带你把项目文件夹或 GitHub 仓库连接到上方菜单“托管”页里的某个托管服务。这四个都会在你每次推送改动时自动构建并部署，连接之后不需要手动上传。

绑定自定义域名（可选，但值得）

一个免费的子域名（比如 yourname.netlify.app）起步完全够用。等你想用 yourname.com 时，需要买一个域名，再改一次 DNS，下面会详细讲。

04该用哪个免费托管？

这些都能让静态网站免费上线，带免费的 HTTPS，免费额度也足以轻松应付个人作品集的流量。免费额度的限制变化得比较频繁，所以请把“托管”页上的数字当作大致的轮廓，而不是当前的确切数字，决定之前请去各家自己的价格页确认。

让你的 AI 编程应用陪你完成实际的部署步骤：“把这个项目连接到 Netlify”是完全正常的请求，它通常能在几分钟内带你完成账号创建和第一次部署。

05绑定自定义域名

域名是一笔小额年费（视后缀而定，通常每年 $10 到 20），与托管分开，托管仍然免费。分三步：

1. 购买域名。Namecheap、Cloudflare Registrar，或者 Google Domains 的继任者（Squarespace Domains）。
2. 添加 DNS 记录。一条 CNAME（或 A 记录），把你的域名指向你的托管服务，在注册商的后台添加。在注册商的表格里就是两行：一条 www 的 CNAME，指向托管服务给你的地址，比如 your-portfolio.netlify.app；以及一条裸域名的 A 记录，指向托管服务的 IP。
3. 在托管服务里添加。把同一个域名粘贴到托管服务的“自定义域名”设置里，HTTPS 会自动配置。

“托管”页上的每个托管服务都有“自定义域名”或“域名”标签页，会给出要添加的确切记录，复制过来，在注册商那里添加，然后等待。DNS 改动通常几分钟到几小时生效，偶尔最长要 24 到 48 小时。如果卡住了，你的 AI 编程应用可以带你看你那家注册商的具体后台；把设置页截图发给它，问它该点哪里。看到挂锁图标，没有“不安全”警告：那就是终点线。

06上线前检查清单

花五分钟过一遍这份清单，就能发现大多数让作品集显得没做完的问题。这些检查项就是上方菜单里的“上线前”页，边做边打勾。

07常见问题