# 作品集打造

> 用 AI 梳理项目、组织案例叙事，完成作品集并持续打磨。

Canonical page: https://aixdesign.kens-toolbox.com/zh/learn/build-portfolio-with-ai

## 1) 选择建站方式

先选制作方式：直接套模板、可视化自定义，或让 AI 从头写代码。每条路径的制作、维护和发布方式都不同。先完成一个真实案例页，再扩展整站。

- 先想好四件事：域名、托管要花多少钱、要不要密码访问、要不要拿走源码。
- 在手机上看看长文、图片和导航。顺手的话，再决定长期用不用它。

## Framer

视觉型作品集，设计师自己就能维护。只能用它的托管，整站 HTML 导不出来。

[Framer](https://www.framer.com/)


## Webflow

布局要细、内容要用 CMS 管的话选它。导出的代码不带 CMS、密码保护和表单处理，这些只在它的托管上有。

[Webflow](https://webflow.com/)


## UXfolio

专门给 UX 作品集用的，案例模板现成。想把精力放在内容上、不折腾排版的人适合。

[UXfolio](https://uxfol.io/)


## Notion + Super.so

内容写在 Notion 里，网站自动生成，主要靠写作维护的人合适。想先免费试，可以直接用 Notion 自带的网页发布。版式和交互能不能满足，先试再定。

[Notion + Super.so](https://super.so/)


## Squarespace

套现成模板建站。付费方案里的 Blueprint AI 能先给一版站点结构，案例内容还得你自己写。选之前确认模板的布局和交互够不够用。

[Squarespace](https://www.squarespace.com/)


## Framer AI

让它先生成页面布局和文案初稿，你再按自己的项目改。

[Framer AI](https://www.framer.com/ai/)


## 作品集首页 Prompt

动手建站之前，先用 Framer AI 或 Claude 把定位和主页结构定下来。  我是【角色】，在【领域】做了【X 年】。我想要一个能传达【定位】的作品集。请给我一个主页结构，包括：一句标题、两句自我介绍、三个案例卡片的标题、一句联系方式的引导。

[作品集首页 Prompt](#)


## 2) 写清项目故事

用问题、决策和证据把案例串起来，读者才知道你是什么角色、做了什么、放弃了什么。整理和精简文字可以让 AI 帮忙。

- 团队做的和你做的分开写。重要决定用具体例子讲。
- 没量过的结果别填数字。找个不了解项目的人读一遍，听他怎么说。

## Claude

把项目笔记丢给它，理成背景、做了什么、结果如何，再压短。

[Claude](https://aixdesign.kens-toolbox.com/zh/tools/claude)


## ChatGPT

让它多写几种开头和结构，挑最能讲清项目价值的那种。

[ChatGPT](https://aixdesign.kens-toolbox.com/zh/tools/chatgpt)


## UXfolio AI Case Study Generator

填项目信息，它出案例草稿。真实的决策和证据你再往里补。

[UXfolio AI Case Study Generator](https://blog.uxfol.io/ux-portfolio-ai-case-study-workflow/)


## The Designer's Toolbox - STAR Method

STAR 法：情境、任务、行动、结果，四段讲一个项目。

[The Designer's Toolbox - STAR Method](https://www.thedesignerstoolbox.com/how-to-write-a-ux-case-study)


## UXfolio - Structure vs. Template

怎么围绕项目本身组织内容，而不是往模板里机械填空。

[UXfolio - Structure vs. Template](https://blog.uxfol.io/ux-case-study-structure/)


## Grammarly

查语法、查语气、查啰嗦的地方。

[Grammarly](https://www.grammarly.com/features)


## Notion AI

项目笔记本来就在 Notion 里的话，直接在里面起草和改，不用搬。

[Notion AI](https://www.notion.com/product/ai)


## 案例写作 Prompt

补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。  根据这些项目笔记整理一个案例：【已获准使用的笔记】。写清楚：问题是什么、我的角色、重要决定、取舍、已有的结果。事实和来源要保留。缺的信息列成问题问我，不要替我编访谈、指标或上线成果。

[案例写作 Prompt](#)


## 案例结构参考

第三方的作品集写作参考。按岗位和证据质量挑项目，别把「必须放几个项目」当成招聘标准。

[案例结构参考](https://blog.uxfol.io/)


## B2B 案例参考




## Case Study Club

UX 案例库，量很大。可以按 B2B、企业软件、SaaS 筛。

[Case Study Club](https://www.casestudy.club/case-studies)


## Growth.Design Case Studies

用漫画式图解拆真实产品的引导、留存和转化，看着轻松，讲得细。

[Growth.Design Case Studies](https://growth.design/case-studies)


## NN/g — UX hiring (2026)

NN/g 在 2026 年访谈了一批招聘方。结论：作品集要按读者组织，讲清能力、贡献和跟岗位的关系。

[NN/g — UX hiring (2026)](https://www.nngroup.com/articles/ux-hiring-insights/)


## Toptal - The True ROI of UX: B2B Redesign

几个 B2B 改版案例，顺带讲了怎么算改版的收益，包括能量化的和不能量化的。

[Toptal - The True ROI of UX: B2B Redesign](https://www.toptal.com/designers/ux/roi-of-ux-redesign-case-studies)


## UXReactor B2B Enterprise Cases

企业软件改版的完整过程，从研究到上线。

[UXReactor B2B Enterprise Cases](https://uxreactor.com/ux-case-studies/)


## Eleken - 70+ SaaS UX Cases

SaaS 的 UX 案例集。重点是讲做了什么判断，不只是放图。

[Eleken - 70+ SaaS UX Cases](https://www.eleken.co/cases)


## IxDF - B2B UX Design Model

B2B 作品集和 B2C 到底哪里不一样，以及为什么一定要把相关方写清楚。

[IxDF - B2B UX Design Model](https://ixdf.org/literature/topics/business-to-business-model)


## VMware - How to Ace the Portfolio Review

VMware 的面试官讲他们怎么看作品集：系统想得深不深、有没有指标意识。

[VMware - How to Ace the Portfolio Review](https://medium.com/vmwaredesign/product-design-portfolios-63618e1692b6)


## NN/g — Portfolio structure

NN/g 讲作品集结构和怎么写个人贡献。2019 年的文章，方法到今天还管用。

[NN/g — Portfolio structure](https://www.nngroup.com/articles/ux-design-portfolios/)


## B2B Case Study Template 2025

第三方的 B2B 案例模板：背景、起因、障碍、方案、结果，五段。2025 年的，当写作参考就好，不是行业标准。

[B2B Case Study Template 2025](https://www.thelogonaut.com/post/b2b-case-study-template-10-examples-2025-best-practices)


## Figma Community - UX Portfolio Presentation

能直接编辑的作品集演示模板，叙事框架和示例内容都填好了。

[Figma Community - UX Portfolio Presentation](https://www.figma.com/community/file/1501929684055600858/ux-design-portfolio-presentation)


## Figma - Design System Examples

Figma 官方整理的企业设计系统案例，IBM Carbon、Atlassian、Shopify Polaris 放在一起比。

[Figma - Design System Examples](https://www.figma.com/resource-library/design-system-examples/)


## 3) 整理视觉与动效

截图、图解、短演示都是为了让读者看懂产品。真实、清楚、好读，比好看优先。

- 真实产品截图原样放。概念图、重画的示意图，单独标出来。
- 动效是用来说明的，不是用来炫的。查一下加载速度、替代文本，还有用户关掉动效之后长什么样。

## Mockuuups Studio

将产品界面放入设备样机，展示使用场景与页面效果。

[Mockuuups Studio](https://www.mockuuups.studio/)


## Canva AI Mockup Generator

做封面和缩略图里的样机场景。产品内容要真实。

[Canva AI Mockup Generator](https://www.canva.com/)


## Adobe Firefly

生成概念配图、改背景。真实产品截图不要动。用之前看一下模型和素材的使用条款。

[Adobe Firefly](https://www.adobe.com/products/firefly.html)


## remove.bg

一键抠图，排版和分层展示方便。

[remove.bg](https://www.remove.bg/)


## Jitter

做短动效和操作演示。导出格式按你要发的平台选。

[Jitter](https://jitter.video/)


## LottieFiles

轻量的嵌入式动画，Framer 和 Webflow 都能用。做微交互和过渡合适。

[LottieFiles](https://lottiefiles.com/)


## Rive

动效要跟着用户操作变的话用它。状态和切换都能定义。

[Rive](https://rive.app/)


## Spline

做能嵌进网页的 3D。放之前想清楚：它帮读者理解了什么？加载要多久？

[Spline](https://spline.design/)


## Unsplash

找配图用的照片。用之前看一下授权条款。

[Unsplash](https://unsplash.com/)


## Pexels

找照片和视频素材。不同用途授权不一样，查一下。

[Pexels](https://www.pexels.com/)


## unDraw

风格统一的 SVG 插图，配着说明用。

[unDraw](https://undraw.co/illustrations)


## Lucide Icons

线条粗细统一的图标库。界面和图解用同一套，看着整齐。

[Lucide Icons](https://lucide.dev/icons/)


## The Noun Project

图标和符号特别全，冷门领域的也有。画概念图的时候好用。

[The Noun Project](https://thenounproject.com/)


## Coolors

找和品牌风格搭的配色。

[Coolors](https://coolors.co/)


## Adobe Color

生成配色，顺便查对比度过不过无障碍。

[Adobe Color](https://color.adobe.com/)


## 演示视频脚本 Prompt

配合 Jitter 或 Claude，写一个 60 秒的功能演示脚本。  我想做一个 60 秒的【功能】演示视频。要展示的关键时刻：【列 3 到 4 个界面或交互】。写一段旁白，再建议每一屏的动画顺序。

[演示视频脚本 Prompt](#)


## 4) 发布与分享

链接、页面信息、分享预览都查一遍。目标读者要能找到你，点开也能顺利读完。

- 查四样：页面标题、分享图、联系方式、手机上打开快不快。
- 按目标岗位挑案例。发出去的时候说一句为什么这个案例和对方有关。

## Framer / Webflow 页面设置

页面标题、简介、主标题写清楚。读者和搜索引擎都靠这几样理解你的页面。

[Framer / Webflow 页面设置](https://www.framer.com/help/articles/guide-to-seo-features-and-tools/)


## Google Search Console

提交站点地图，看你的站在搜索里露不露脸，索引出问题早点修。

[Google Search Console](https://search.google.com/search-console/about)


## Meta Sharing Debugger

把链接发到社交平台时显示的标题、描述和预览图，先在这里看一眼。

[Meta Sharing Debugger](https://developers.facebook.com/tools/debug/)


## Squoosh / TinyPNG

把大图压小，看看清晰度还行不行。手机上加载会快很多。

[Squoosh / TinyPNG](https://squoosh.app/)


## LinkedIn

把个人简介和作品集链接填好。发项目的时候，挑和目标岗位相关的。

[LinkedIn](https://www.linkedin.com/)


## ADPList

约同行或导师看一眼作品集，听听他们看懂了没有。

[ADPList](https://adplist.org/)


## r/UXDesign

在这里讨论作品。反馈很多，结合你的项目背景挑值得听的。

[r/UXDesign](https://www.reddit.com/r/UXDesign/)


## 5) 展示受保密限制的项目

先确定哪些能公开。然后用能公开的过程和决策，讲清你的贡献。

- 文字、图片、附件、文件属性，全都检查一遍。敏感信息经常藏在你没想到的地方。
- 示意数据和重画的界面要标明。加了密码不等于拿到了披露许可。

## Claude / ChatGPT

只给它已获准使用的材料，让它帮你整理成匿名案例。没许可的机密原文别往里传。

[Claude / ChatGPT](https://www.anthropic.com/claude)


## Adobe Firefly / Canva

做不含客户信息的示意图，并且标明这是概念图或重画的。

[Adobe Firefly / Canva](https://www.adobe.com/products/firefly.html)


## Framer 密码保护页面

给已获准分享的案例单独加密码，只发给面试方。上线后用无痕窗口自己试一下，确认真的锁住了。

[Framer 密码保护页面](https://www.framer.com/academy/lessons/password-protection)


## NN/g：UX 作品集怎么写

讲清作品集该展示过程和决策。最终界面不能放的话，照这个思路用能公开的草图、流程图和决策记录讲你的贡献。

[NN/g：UX 作品集怎么写](https://www.nngroup.com/articles/ux-design-portfolios/)


## 保密项目写作 Prompt

补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。  这些材料已获准放进作品集：【材料】。请整理成一个项目案例，突出我的决策和贡献。省略掉的信息不要替我补。示意内容要标明。可能暴露项目身份的细节单独列出来给我检查。

[保密项目写作 Prompt](#)


## 实践路径




## 发布第一版作品集

先把一个案例写清楚、把阅读体验做顺，再一个一个加项目。

[发布第一版作品集](#)


## 改善已有作品集

先找出哪些地方让人看不懂、看不清，再针对性地改。

[改善已有作品集](#)


## 从笔记写成案例

先把事实理清，再定怎么讲、配什么图。

[从笔记写成案例](#)


## 展示保密项目的贡献

在能公开的范围内，把决策和贡献讲清楚。

[展示保密项目的贡献](#)


## 讲清复杂系统设计

用角色、流程和取舍来讲系统设计，不靠堆界面截图。

[讲清复杂系统设计](#)


## Related resources

- [AI 设计方法](https://aixdesign.kens-toolbox.com/zh/learn/design-with-ai.md): 从用户研究、创意探索到原型与交付，找到适合当前任务的方法。
- [AI 产品体验设计](https://aixdesign.kens-toolbox.com/zh/learn/design-for-ai.md): 探索信任、透明度与用户控制，让 AI 产品更易理解和使用。
- [设计师的 Vibe Coding](https://aixdesign.kens-toolbox.com/zh/learn/vibe-coding.md): 面向设计师的 AI 编程方法、工具与实践参考。
- [作品集打造](https://aixdesign.kens-toolbox.com/zh/learn/build-portfolio-with-ai.md): 用 AI 梳理项目、组织案例叙事，完成作品集并持续打磨。
- [社区经验与复盘](https://aixdesign.kens-toolbox.com/zh/learn/community-field-notes.md): 整理社区分享、设计圆桌与作品集互评中的经验、练习和资源。
- [AI 设计工具目录](https://aixdesign.kens-toolbox.com/zh/tools.md): 探索设计、研究、视觉创作与开发中的 AI 工具。

Part of [Ken's Toolbox](https://kens-toolbox.com/). Account and participant data are not included in this public summary.