作品集打造
用 AI 梳理项目、组织案例叙事，完成作品集并持续打磨。
1) 选择建站方式
先选制作方式：直接套模板、可视化自定义，或让 AI 从头写代码。每条路径的制作、维护和发布方式都不同。先完成一个真实案例页，再扩展整站。
- 先想好四件事：域名、托管要花多少钱、要不要密码访问、要不要拿走源码。
- 在手机上看看长文、图片和导航。顺手的话，再决定长期用不用它。
Framer
视觉型作品集，设计师自己就能维护。只能用它的托管，整站 HTML 导不出来。
Webflow
布局要细、内容要用 CMS 管的话选它。导出的代码不带 CMS、密码保护和表单处理，这些只在它的托管上有。
UXfolio
专门给 UX 作品集用的，案例模板现成。想把精力放在内容上、不折腾排版的人适合。
Notion + Super.so
内容写在 Notion 里，网站自动生成，主要靠写作维护的人合适。想先免费试，可以直接用 Notion 自带的网页发布。版式和交互能不能满足，先试再定。
Squarespace
套现成模板建站。付费方案里的 Blueprint AI 能先给一版站点结构，案例内容还得你自己写。选之前确认模板的布局和交互够不够用。
Framer AI
让它先生成页面布局和文案初稿，你再按自己的项目改。
作品集首页 Prompt
动手建站之前，先用 Framer AI 或 Claude 把定位和主页结构定下来。
我是【角色】，在【领域】做了【X 年】。我想要一个能传达【定位】的作品集。请给我一个主页结构，包括：一句标题、两句自我介绍、三个案例卡片的标题、一句联系方式的引导。
2) 写清项目故事
用问题、决策和证据把案例串起来，读者才知道你是什么角色、做了什么、放弃了什么。整理和精简文字可以让 AI 帮忙。
- 团队做的和你做的分开写。重要决定用具体例子讲。
- 没量过的结果别填数字。找个不了解项目的人读一遍，听他怎么说。
Claude
把项目笔记丢给它，理成背景、做了什么、结果如何，再压短。
ChatGPT
让它多写几种开头和结构，挑最能讲清项目价值的那种。
UXfolio AI Case Study Generator
填项目信息，它出案例草稿。真实的决策和证据你再往里补。
The Designer's Toolbox - STAR Method
STAR 法：情境、任务、行动、结果，四段讲一个项目。
UXfolio - Structure vs. Template
怎么围绕项目本身组织内容，而不是往模板里机械填空。
Grammarly
查语法、查语气、查啰嗦的地方。
Notion AI
项目笔记本来就在 Notion 里的话，直接在里面起草和改，不用搬。
案例写作 Prompt
补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。
根据这些项目笔记整理一个案例：【已获准使用的笔记】。写清楚：问题是什么、我的角色、重要决定、取舍、已有的结果。事实和来源要保留。缺的信息列成问题问我，不要替我编访谈、指标或上线成果。
案例结构参考
第三方的作品集写作参考。按岗位和证据质量挑项目，别把「必须放几个项目」当成招聘标准。
B2B 案例参考
Case Study Club
UX 案例库，量很大。可以按 B2B、企业软件、SaaS 筛。
Growth.Design Case Studies
用漫画式图解拆真实产品的引导、留存和转化，看着轻松，讲得细。
NN/g — UX hiring (2026)
NN/g 在 2026 年访谈了一批招聘方。结论：作品集要按读者组织，讲清能力、贡献和跟岗位的关系。
Toptal - The True ROI of UX: B2B Redesign
几个 B2B 改版案例，顺带讲了怎么算改版的收益，包括能量化的和不能量化的。
UXReactor B2B Enterprise Cases
企业软件改版的完整过程，从研究到上线。
Eleken - 70+ SaaS UX Cases
SaaS 的 UX 案例集。重点是讲做了什么判断，不只是放图。
IxDF - B2B UX Design Model
B2B 作品集和 B2C 到底哪里不一样，以及为什么一定要把相关方写清楚。
VMware - How to Ace the Portfolio Review
VMware 的面试官讲他们怎么看作品集：系统想得深不深、有没有指标意识。
NN/g — Portfolio structure
NN/g 讲作品集结构和怎么写个人贡献。2019 年的文章，方法到今天还管用。
B2B Case Study Template 2025
第三方的 B2B 案例模板：背景、起因、障碍、方案、结果，五段。2025 年的，当写作参考就好，不是行业标准。
Figma Community - UX Portfolio Presentation
能直接编辑的作品集演示模板，叙事框架和示例内容都填好了。
Figma - Design System Examples
Figma 官方整理的企业设计系统案例，IBM Carbon、Atlassian、Shopify Polaris 放在一起比。
3) 整理视觉与动效
截图、图解、短演示都是为了让读者看懂产品。真实、清楚、好读，比好看优先。
- 真实产品截图原样放。概念图、重画的示意图，单独标出来。
- 动效是用来说明的，不是用来炫的。查一下加载速度、替代文本，还有用户关掉动效之后长什么样。
Mockuuups Studio
将产品界面放入设备样机，展示使用场景与页面效果。
Canva AI Mockup Generator
做封面和缩略图里的样机场景。产品内容要真实。
Adobe Firefly
生成概念配图、改背景。真实产品截图不要动。用之前看一下模型和素材的使用条款。
remove.bg
一键抠图，排版和分层展示方便。
Jitter
做短动效和操作演示。导出格式按你要发的平台选。
LottieFiles
轻量的嵌入式动画，Framer 和 Webflow 都能用。做微交互和过渡合适。
Rive
动效要跟着用户操作变的话用它。状态和切换都能定义。
Spline
做能嵌进网页的 3D。放之前想清楚：它帮读者理解了什么？加载要多久？
Unsplash
找配图用的照片。用之前看一下授权条款。
Pexels
找照片和视频素材。不同用途授权不一样，查一下。
unDraw
风格统一的 SVG 插图，配着说明用。
Lucide Icons
线条粗细统一的图标库。界面和图解用同一套，看着整齐。
The Noun Project
图标和符号特别全，冷门领域的也有。画概念图的时候好用。
Coolors
找和品牌风格搭的配色。
Adobe Color
生成配色，顺便查对比度过不过无障碍。
演示视频脚本 Prompt
配合 Jitter 或 Claude，写一个 60 秒的功能演示脚本。
我想做一个 60 秒的【功能】演示视频。要展示的关键时刻：【列 3 到 4 个界面或交互】。写一段旁白，再建议每一屏的动画顺序。
4) 发布与分享
链接、页面信息、分享预览都查一遍。目标读者要能找到你，点开也能顺利读完。
- 查四样：页面标题、分享图、联系方式、手机上打开快不快。
- 按目标岗位挑案例。发出去的时候说一句为什么这个案例和对方有关。
Framer / Webflow 页面设置
页面标题、简介、主标题写清楚。读者和搜索引擎都靠这几样理解你的页面。
Google Search Console
提交站点地图，看你的站在搜索里露不露脸，索引出问题早点修。
Meta Sharing Debugger
把链接发到社交平台时显示的标题、描述和预览图，先在这里看一眼。
Squoosh / TinyPNG
把大图压小，看看清晰度还行不行。手机上加载会快很多。
把个人简介和作品集链接填好。发项目的时候，挑和目标岗位相关的。
ADPList
约同行或导师看一眼作品集，听听他们看懂了没有。
r/UXDesign
在这里讨论作品。反馈很多，结合你的项目背景挑值得听的。
5) 展示受保密限制的项目
先确定哪些能公开。然后用能公开的过程和决策，讲清你的贡献。
- 文字、图片、附件、文件属性，全都检查一遍。敏感信息经常藏在你没想到的地方。
- 示意数据和重画的界面要标明。加了密码不等于拿到了披露许可。
Claude / ChatGPT
只给它已获准使用的材料，让它帮你整理成匿名案例。没许可的机密原文别往里传。
Adobe Firefly / Canva
做不含客户信息的示意图，并且标明这是概念图或重画的。
Framer 密码保护页面
给已获准分享的案例单独加密码，只发给面试方。上线后用无痕窗口自己试一下，确认真的锁住了。
NN/g：UX 作品集怎么写
讲清作品集该展示过程和决策。最终界面不能放的话，照这个思路用能公开的草图、流程图和决策记录讲你的贡献。
保密项目写作 Prompt
补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。
这些材料已获准放进作品集：【材料】。请整理成一个项目案例，突出我的决策和贡献。省略掉的信息不要替我补。示意内容要标明。可能暴露项目身份的细节单独列出来给我检查。
实践路径
发布第一版作品集
先把一个案例写清楚、把阅读体验做顺，再一个一个加项目。
改善已有作品集
先找出哪些地方让人看不懂、看不清，再针对性地改。
从笔记写成案例
先把事实理清，再定怎么讲、配什么图。
展示保密项目的贡献
在能公开的范围内，把决策和贡献讲清楚。
讲清复杂系统设计
用角色、流程和取舍来讲系统设计，不靠堆界面截图。