作品集网站应该让潜在客户轻松回答三个问题：你做什么，你为谁工作，以及你能否真正交付？问题是，构建一个能够传达这三点的作品集往往比预期花费更长时间。我想看看 AI 设计工具是否能在不让网站看起来像另一个通用 AI 生成模板的情况下处理第一个版本。
于是我在这些工具中使用了相同的核心需求——Figma Make、Google Stitch、Vercel 的 v0 和 Banani，然后像对待真实客户项目一样审查了输出结果。结果很有用：AI 出人意料地擅长处理重复的设计工作，但让作品集显得可信的部分仍然需要人工决策。
我使用的提示
我并没有为每个工具创建一个庞大的提示。我希望得到一个实际可用的、可以在不同 AI 设计工具之间复用的方案。
提示：
为一位帮助企业构建高质量网站和数字体验的数字设计师和网页开发者创建一个现代、专业的作品集网站。
包含一个具有清晰标题、简短介绍和 CTA 的强大 hero 区块，随后是精选项目、服务、关于我、技能、工作流程、客户评价和联系部分。
使作品集以项目为中心，提供展示截图、项目目标、我的角色、所提供服务和结果的空间。突出网站设计、UI/UX、响应式设计以及房地产网站开发服务。
采用简洁布局、强烈排版、充足留白、细腻交互以及专业配色方案。保持导航简洁，确保网站在桌面和移动端完全响应式。
整体设计应给人精致、可信且有人味的感觉，而不像通用的 AI 生成模板。保持文案简洁且以客户为中心，说明我做什么，我帮助谁，以及客户为什么应该与我合作。
我将此作为起点，而不是为每个工具更改整个需求。这样比较就更有用了，因为我可以看到每个平台对基本相同的需求有何不同的解读。
我希望从 AI 工具中得到什么
我并不是想证明 AI 能完全取代设计师。
这不是重点。
我想回答一个更实际的问题：
AI 能否让我从空白画布直接得到一个值得向客户展示的作品集，而无需在初期设计上花费几天时间？
对我来说，重要的需求很简单：
- 清晰的定位
- 有力的项目展示
- 专业的视觉层次
我也想避免典型的 AI 生成网站问题：标题过大、渐变过度、无意义的动画、通用的股票图片，以及听起来像是为互联网上每家企业而写的文案。
我用来构建作品集网站的 AI 设计工具
1. Figma Make
🔗 实时输出： puzzle-igloo-74654147.figma.site
Figma 是我想要首先测试提示的地方，因为我一直认为作品集主要是界面和信息架构问题。
第一次输出让我得到的东西比一个完成的网站更有价值：
一个方向。
与其从空白设计文件开始，我不如拥有一个可以检查和质疑的主页结构。
基本流程如下：
英雄区 → 作品 → 服务 → 关于 → 流程 → 评价 → 联系
这个结构很合理，但我并没有接受它生成的每一个决定。
我立即查看了层次结构。
最重要的项目是否得到了足够的关注？
服务内容是否清晰？
有人能在不阅读整个页面的情况下理解我的专长吗？
各个 CTA 是否相互竞争？
这些问题比界面是否看起来令人印象深刻更重要。
我保留了什么
- 整体页面结构
- 项目卡片方式
- 清晰的章节层次
- 简单导航
- 响应式思考
我改动了什么
- 重新编写了英雄区文案
- 减少了不必要的装饰元素
- 调整了间距
- 改进了项目描述
- 使 CTA 更具体
- 移除了通用的视觉处理
这是我第一次意识到某件重要事情的时刻：
AI 给了我一个很好的起点，但我仍然需要设计体验。
2. Google Stitch
🔗 实时输出： stitch.withgoogle.com/projects/7200596362741624643
Google Stitch 之所以有用，是出于另一个原因。
我并没有执着于第一个布局，而是用它来探索同一份作品简报的另一种诠释。
这就是 AI 设计工具真正发挥作用的地方。
通常，探索三到四种不同的方向意味着需要手动制作多个版本。有了 AI，我可以快速得到替代方案。
我特别关注它如何处理以下方面：
- 英雄布局
- 项目网格
- 排版
- 章节间距
- 服务展示
- 移动端布局
- CTA 放置
一个版本视觉效果很强，但把作品项目推得太靠下了。
另一个版本层次更好，但感觉太像模板。
我并不想完全按照生成的任何一个版本使用。
但它们共同为我提供了足够的灵感，以制定更好的最终方向。
这就是我认为 AI 辅助设计最有用的部分：
你不一定需要 AI 给出最终答案。你需要它快速提供更多好的选项。
3. Vercel 的 v0
🔗 实时输出： portfoliosite-portfolio.vercel.app
当我超越纯粹的视觉探索时，Vercel 的 v0 变得更有意义。
此时，我想看看作品章节如何转化为功能性的网页组件。
例如，我不必仅仅设计一个项目卡片，我可以生成一个带有以下内容的可工作项目章节：
- 项目图片
- 类别
- 描述
- 技术标签
- CTA
- 响应式行为
这与纯设计工具的生产力是不同的。
我发现这对网站的重复部分特别有用。
导航、卡片、按钮、表单、网格和响应式章节不一定需要每次都从零开始构建。
但我仍然审查了生成的实现。
我检查了结构、响应式、间距、可访问性，以及组件是否真的适合这个作品集。
最大的错误就是把生成的代码当作直接可用于生产环境。
快速生成很有用。盲目接受则不然。
4. Banani
🔗 实时输出： app.banani.co/preview/oo_s2sFFvkv9
Banani 也是这次实验中有趣的一部分，因为我想看看另一个 AI 驱动的设计工作流会如何解释相同的作品集需求。
我保持了需求的一致性，而不是专门创建一个让 Banani 看起来更好的提示。
这让我得到了一个更真实的比较。
生成的概念帮助我评估了不同的方法：
- 作品集布局
- 案例研究展示
- 首屏区域
- 服务模块
- 视觉层次
- 响应式结构
最有用的部分并不是任何单独生成的屏幕。
而是能够比较想法。
例如，一种布局可能在首屏区域更强，而另一种在项目展示上更好。与其选择一个输出并全盘接受，不如我可以从不同概念中挑取最强的想法，自己优化结构。
这更接近我在专业项目中实际使用 AI 的方式。
我手动所做的最大改动
这就是作品集不再像 AI 实验，而开始呈现出我实际工作的样子的地方。
1. 我重写了首屏区域
AI 生成的标题常常试图听起来令人印象深刻。
我希望自己的标题能够立刻被理解。
访客不应该需要去解读我做什么。
作品集的标题应该快速传达服务内容及其面向的受众。
2. 我让项目更具体
仅凭截图无法解释项目为何重要。
我添加了以下背景：
问题 → 我的角色 → 我构建的内容 → 结果
这使得作品集对考虑雇佣你的人来说更有用。
3. 我移除了不必要的设计效果
AI 工具喜欢为界面赋予视觉个性。
有时候这很有用。
有时候这仅仅是因为可以而添加效果。
我移除了所有不能提升可用性或沟通的内容。
4. 我简化了导航
作品集不需要复杂的菜单。
我希望访客能在首页快速找到作品和联系信息。
5. 我手动检查了移动端布局
这是我不信任首次生成结果的一个领域。
桌面设计可能看起来很好，但移动版可能出现间距不协调、文字过大或图片裁剪不当的情况。
我分别检查了每个主要部分。
客户实际上注意到的内容
最大的变化不是有人识别出该网站是 AI 生成的。
他们没有。
人们注意到作品集变得更易理解。
项目变得更清晰。
服务变得更易查找。
网站看起来更一致。
最重要的是，访客无需翻遍整个网站就能了解我实际从事的工作类型。
这是一个重要的区别。
客户不会因为你使用了 Figma Make、Stitch、v0 或 Banani 而雇佣你。
他们关心的是你的网站是否能让他们相信你理解他们的问题。
例如，如果有人在寻找房地产网站开发服务，他们不一定在乎最初的布局是由哪个 AI 工具创建的。他们想看看你是否理解房产列表、潜在客户生成、响应式界面、转化路径以及他们的业务需求。
工具在幕后。
结果才是被注意到的。
我会如何使用每个工具
在测试了四种方法之后，我不认为它们可以直接相互替代。
我会以不同的方式使用它们。
| 工具 | 我会在何处使用它 |
|---|---|
| Figma Make | 界面探索与优化 |
| Google Stitch | 快速探索不同的视觉方向 |
| v0 by Vercel | 功能性 UI 和网页组件 |
| Banani | 生成并比较 UI 概念 |
这种工作流比让一个工具完成所有事情更现实。
我的 AI 辅助作品工作流
如果我要从零开始构建另一个作品集，我会保持流程简单。
1. 明确受众
清楚地知道你希望作品集吸引谁。
2. 撰写一份有用的简报
描述你的服务、受众、章节和视觉方向。
3. 生成多个概念
使用 AI 探索可能性，而不是立即选择第一个结果。
4. 选择最强的结构
关注层次和可用性，而不仅仅是视觉吸引力。
5. 构建界面
为实现阶段选择最合适的工具。
6. 重写重要文案
你的定位和项目描述不应听起来泛泛而谈。
7. 手动审查一切
检查桌面、平板和移动端布局。
8. 测试信息
向不熟悉你工作的人展示网站并询问：
“你认为我在做什么？”
如果他们不能快速回答，作品集仍需改进。
使用 AI 构建的真正教训
AI 没有神奇地创造出客户注意到的作品集。
它帮助我更快地到达一个强有力的起点。
这就是真正的优势。
这些工具处理了创建布局、探索变体和生成界面组件所涉及的大量重复工作。这让我有更多时间专注于真正决定作品集是否有效的因素：定位、项目选择、内容、层次结构和可用性。
我也不建议直接发布 AI 工具生成的第一稿设计。
第一次输出应当被视为草稿。
第二次迭代才是真正的设计工作开始。
结论
使用 Figma Make、Google Stitch、Vercel 的 v0 和 Banani 构建我的作品集让我明白，AI 设计工具在加速决策而非取代决策时最有用。我能够从空白画布快速得到多种可行的方向。
然而，最终的改进来源于审视布局、重写文案、简化界面以及让项目更易于理解。客户真正注意到的不是 AI 帮助搭建了网站，而是最终的作品集清晰地传达了我做什么、我构建了什么以及我如何能够帮助他们。
