Build your portfolio with AI
Use AI to frame your projects, develop case studies and publish your work.
1) Choose how to build your site
Choose a platform for content maintenance, visual control and delivery needs, then build one real case page before expanding.
- Check domain, hosting costs, password access and source-delivery requirements.
- Test long-form copy, imagery and navigation on mobile before committing.
Framer
Useful for designer-managed visual portfolios on platform hosting; full-site HTML export for self-hosting is not available.
Webflow
Useful for detailed layout and CMS management; exported code excludes hosted CMS, password protection and form processing.
UXfolio
Purpose-built for UX portfolios with case-study templates and lower setup friction.
Notion + Super.so
Publish a site from Notion content; useful for writing-led maintenance. Test the required layouts and interactions first.
Squarespace
Quick path to polished templates with minimal setup, but less motion/layout control.
Framer AI
Generate full page layout, visual direction, and copy scaffold from a single prompt to break blank-canvas paralysis.
Squarespace Blueprint AI
Generate complete site structure from short input, optimized for getting live quickly.
Prompt template
Use with Framer AI or Claude before setup to define positioning and homepage structure.
Prompt: "I am a [role] with [X years] experience specializing in [domain]. I want a portfolio that communicates [positioning]. Generate a homepage structure with a headline, a 2-sentence about section, 3 case-study card labels, and a contact prompt."
2) Tell the project story
Connect the problem, decisions and evidence so readers understand your role and tradeoffs. Use AI to organize and shorten the writing.
- Separate team results from your contribution and explain decisions with concrete examples.
- Do not invent metrics; ask someone outside the project to read and give feedback.
Claude
Turn messy notes into nuanced STAR-format drafts with stronger long-form readability.
ChatGPT
Generate multiple narrative angles quickly when choosing the strongest framing.
UXfolio AI Case Study Generator
Most portfolio-specific assistant for turning short project input into UX-structured case-study drafts.
The Designer's Toolbox - STAR Method
Use Situation, Task, Action and Result to organize project experience.
UXPlaybook - Minto Pyramid
Lead with a relevant outcome and supporting evidence; make your role, constraints and contribution easy to scan.
UXfolio - Structure vs. Template
Why structure and template are not the same thing, and the three most common structural failures to avoid.
Grammarly
Refine tone and clarity after drafting by reducing passive voice, hedging, and jargon.
Notion AI
Draft and refine in the same workspace when your project notes already live in Notion.
Prompt template
Add your project material, then adapt the result to the actual work.
Organize these permitted project notes into a case study: [notes]. Explain the problem, my role, decisions, tradeoffs and observed outcomes. Preserve facts and sources; list missing information as questions instead of inventing interviews, metrics or launches.
Template example
Third-party portfolio writing reference; select projects by relevance and evidence, not a fixed hiring quota.
B2B-focused add-on resources
Case Study Club
Large UX case study library with useful B2B, enterprise, and SaaS filtering tags.
Growth.Design Case Studies
Comic-style breakdowns of real product experiences across onboarding, retention, and growth moments.
NN/g — UX hiring (2026)
A 2026 recruiter interview on tailoring portfolio evidence to its audience and the role.
Toptal - The True ROI of UX: B2B Redesign
Curated B2B redesign examples with practical soft-vs-hard ROI framing.
UXReactor B2B Enterprise Cases
Enterprise software redesign walkthroughs from research to implementation.
Eleken - 70+ SaaS UX Cases
SaaS UX case collection focused on actionable insights instead of visual-only showcases.
IxDF - B2B UX Design Model
Explains how B2B portfolios differ from B2C and why stakeholder alignment must be explicit.
VMware - How to Ace the Portfolio Review
Enterprise interviewer perspective on evaluating system depth and metric awareness.
NN/g — Portfolio structure
Foundational portfolio guidance (2019) on project structure and personal contribution.
B2B Case Study Template 2025
Third-party B2B templates published in 2025: Situation -> Trigger -> Barrier -> Solution -> Result. Writing references, not a 2026 industry standard.
Figma Community - UX Portfolio Presentation
Editable portfolio presentation template with narrative scaffolding and realistic example content.
Figma - Design System Examples
Official reference set comparing enterprise design systems such as IBM Carbon, Atlassian, and Shopify Polaris.
3) Refine visuals and motion
Use screenshots, diagrams and short demos to explain the product, prioritizing accuracy, clarity and readability.
- Keep product screenshots accurate and label concept images or reconstructions.
- Use motion to explain; check loading, alternative text and reduced-motion settings.
Mockuuups Studio
Fastest drag-and-drop device mockups for making older work look current.
Canva AI Mockup Generator
Quick one-click mockup scenes from prompts for covers and thumbnails.
Recraft AI
Prompt-based mockup generation for stylized visual compositions.
Adobe Firefly
Generate concept imagery or edit backgrounds; keep product screenshots accurate and check model and asset terms.
Topaz Gigapixel AI
Inspect text and details after enlarging images; prefer a fresh original export for product screenshots.
remove.bg
Fast background removal for cleaner compositions and layered mockups.
Jitter
Fast case-study walkthrough motion with Figma import and export to video/GIF/Lottie.
LottieFiles
Use lightweight embeddable animation for micro-interactions and transitions in Framer/Webflow.
Rive
State-machine-driven interactive motion when you need more expressive behavior.
Spline
Browser-based 3D embeds for more distinctive hero sections.
Behance
Portfolio and case-study gallery useful for benchmarking visual narrative and presentation quality.
Dribbble
Curated visual snapshots for covers, hero layout ideas, and stylistic direction.
Awwwards
High-craft portfolio web references for motion rhythm, typography, and composition.
Unsplash
High-quality free photos for hero banners and editorial sections in case-study pages.
Pexels
Free stock photos and videos when you need broad coverage and quick replacements.
unDraw
Consistent SVG illustration library for lightweight storytelling blocks.
IconPark
Large icon set with multiple visual styles suitable for interface and case-study diagrams.
Lucide Icons
Clean open-source icon system with strong web integration and consistent stroke style.
The Noun Project
Extensive icon and symbol database for concept diagrams and specialized domains.
Coolors
Fast palette generator for creating and testing brand-adjacent color systems.
Adobe Color
Palette generation and accessibility checks for harmonized visual systems.
Color Hunt
Quick palette inspiration board when exploring tonal direction for portfolio refreshes.
Prompt template
Use with Jitter or Claude to script a concise 60-second feature walkthrough.
Prompt: "I want to create a 60-second video walkthrough of [feature]. The key moments to show are: [list 3-4 screens or interactions]. Write a narration script and suggest a screen-by-screen sequence for the animation."
4) Publish and share
Check links, page information and sharing previews so the intended audience can find and read your work.
- Check page titles, sharing images, contact details and mobile loading.
- Choose cases for the target role and explain their relevance when sharing.
Framer / Webflow SEO settings
Ensure role keywords are present in title, meta description, and H1 so screening tools can parse your profile.
Google Search Console
Submit sitemap, track query visibility, and fix indexing issues early.
Meta Sharing Debugger
Validate your Open Graph preview and ensure a clean share thumbnail (og:image, ideally 1200x630) when your portfolio link is posted.
Squoosh / TinyPNG
Compress heavy images aggressively to avoid mobile drop-off.
Primary recruiter discovery channel; keep headline complete and feature your portfolio prominently.
Dribbble Pro
Useful supplementary discovery channel, especially for UI-heavy portfolios.
ADPList
Mentor feedback and review sessions that improve portfolio quality before recruiter exposure.
Designer Slack Community
Large design community with practical peer review.
r/UXDesign
Raw, candid critique channel that often surfaces blind spots quickly.
5) Present confidential work
Establish what can be shared, then explain your contribution through permitted process artifacts and decisions.
- Check text, images, attachments and file metadata for sensitive information.
- Label illustrative data and reconstructed screens; password protection is not disclosure permission.
Claude or ChatGPT
Use only permitted material to help draft an anonymized case; do not upload unauthorized confidential originals.
Adobe Firefly / Canva
Create illustrations without client information and label them as concepts or reconstructions.
Midjourney
Generate stylized concept visuals that communicate direction without exposing production UI.
Framer / Webflow / UXfolio password protection
Restrict access to cases that are already approved for sharing and check the live access controls.
Process artifacts
Prioritize sketches, flows, journey maps, and research synthesis when final screens are restricted.
Prompt template
Add your project material, then adapt the result to the actual work.
These materials are approved for my portfolio: [material]. Organize a case around my decisions and contribution. Do not reconstruct omitted information. Label illustrative content and flag details that could still identify the project.
Recommended combinations
Publish a first portfolio
Start with one clear case and a reliable reading experience, then add projects.
Improve an existing portfolio
Identify what makes the work hard to understand, then improve it selectively.
Turn notes into a case
Organize the facts before choosing the narrative and visuals.
Explain contributions to confidential work
Explain decisions and contributions within the approved disclosure scope.
Explain complex system design
Explain roles, flows and tradeoffs without relying on a wall of screenshots.