# Crea tu portafolio con IA > Usa IA para organizar proyectos, contar casos y publicar tu trabajo. Canonical page: https://aixdesign.kens-toolbox.com/es/learn/build-portfolio-with-ai ## 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. [Framer](https://www.framer.com/) ## Webflow Useful for detailed layout and CMS management; exported code excludes hosted CMS, password protection and form processing. [Webflow](https://webflow.com/) ## UXfolio Purpose-built for UX portfolios with case-study templates and lower setup friction. [UXfolio](https://uxfol.io/) ## Notion + Super.so Publish a site from Notion content; useful for writing-led maintenance. Test the required layouts and interactions first. [Notion + Super.so](https://super.so/) ## Squarespace Quick path to polished templates with minimal setup, but less motion/layout control. [Squarespace](https://www.squarespace.com/) ## Framer AI Generate full page layout, visual direction, and copy scaffold from a single prompt to break blank-canvas paralysis. [Framer AI](https://www.framer.com/ai/) ## Squarespace Blueprint AI Generate complete site structure from short input, optimized for getting live quickly. [Squarespace Blueprint AI](https://www.squarespace.com/websites/ai-website-builder) ## 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." [Prompt template](#) ## 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. [Claude](https://aixdesign.kens-toolbox.com/es/tools/claude) ## ChatGPT Generate multiple narrative angles quickly when choosing the strongest framing. [ChatGPT](https://aixdesign.kens-toolbox.com/es/tools/chatgpt) ## UXfolio AI Case Study Generator Most portfolio-specific assistant for turning short project input into UX-structured case-study drafts. [UXfolio AI Case Study Generator](https://uxfol.io/) ## The Designer's Toolbox - STAR Method Use Situation, Task, Action and Result to organize project experience. [The Designer's Toolbox - STAR Method](https://www.thedesignerstoolbox.com/ux-portfolio/how-to-write-a-ux-case-study/) ## UXPlaybook - Minto Pyramid Lead with a relevant outcome and supporting evidence; make your role, constraints and contribution easy to scan. [UXPlaybook - Minto Pyramid](https://uxplaybook.org/articles/ux-case-study-minto-pyramid-structure-guide) ## UXfolio - Structure vs. Template Why structure and template are not the same thing, and the three most common structural failures to avoid. [UXfolio - Structure vs. Template](https://blog.uxfol.io/ux-case-study-structure/) ## Grammarly Refine tone and clarity after drafting by reducing passive voice, hedging, and jargon. [Grammarly](https://www.grammarly.com/features) ## Notion AI Draft and refine in the same workspace when your project notes already live in Notion. [Notion AI](https://www.notion.com/product/ai) ## 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. [Prompt template](#) ## Template example Third-party portfolio writing reference; select projects by relevance and evidence, not a fixed hiring quota. [Template example](https://blog.uxfol.io/) ## B2B-focused add-on resources ## Case Study Club Large UX case study library with useful B2B, enterprise, and SaaS filtering tags. [Case Study Club](https://www.casestudy.club/case-studies) ## Growth.Design Case Studies Comic-style breakdowns of real product experiences across onboarding, retention, and growth moments. [Growth.Design Case Studies](https://growth.design/case-studies) ## NN/g — UX hiring (2026) A 2026 recruiter interview on tailoring portfolio evidence to its audience and the role. [NN/g — UX hiring (2026)](https://www.nngroup.com/articles/ux-hiring-insights/) ## Toptal - The True ROI of UX: B2B Redesign Curated B2B redesign examples with practical soft-vs-hard ROI framing. [Toptal - The True ROI of UX: B2B Redesign](https://www.toptal.com/designers/ux/roi-of-ux-redesign-case-studies) ## UXReactor B2B Enterprise Cases Enterprise software redesign walkthroughs from research to implementation. [UXReactor B2B Enterprise Cases](https://uxreactor.com/ux-case-studies/) ## Eleken - 70+ SaaS UX Cases SaaS UX case collection focused on actionable insights instead of visual-only showcases. [Eleken - 70+ SaaS UX Cases](https://www.eleken.co/cases) ## IxDF - B2B UX Design Model Explains how B2B portfolios differ from B2C and why stakeholder alignment must be explicit. [IxDF - B2B UX Design Model](https://ixdf.org/literature/topics/business-to-business-model) ## VMware - How to Ace the Portfolio Review Enterprise interviewer perspective on evaluating system depth and metric awareness. [VMware - How to Ace the Portfolio Review](https://medium.com/vmwaredesign/product-design-portfolios-63618e1692b6) ## NN/g — Portfolio structure Foundational portfolio guidance (2019) on project structure and personal contribution. [NN/g — Portfolio structure](https://www.nngroup.com/articles/ux-design-portfolios/) ## B2B Case Study Template 2025 Third-party B2B templates published in 2025: Situation -\> Trigger -\> Barrier -\> Solution -\> Result. Writing references, not a 2026 industry standard. [B2B Case Study Template 2025](https://www.thelogonaut.com/post/b2b-case-study-template-10-examples-2025-best-practices) ## Figma Community - UX Portfolio Presentation Editable portfolio presentation template with narrative scaffolding and realistic example content. [Figma Community - UX Portfolio Presentation](https://www.figma.com/community/file/1501929684055600858/ux-design-portfolio-presentation) ## Figma - Design System Examples Official reference set comparing enterprise design systems such as IBM Carbon, Atlassian, and Shopify Polaris. [Figma - Design System Examples](https://www.figma.com/resource-library/design-system-examples/) ## 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. [Mockuuups Studio](https://www.mockuuups.studio/) ## Canva AI Mockup Generator Quick one-click mockup scenes from prompts for covers and thumbnails. [Canva AI Mockup Generator](https://www.canva.com/) ## Recraft AI Prompt-based mockup generation for stylized visual compositions. [Recraft AI](https://www.recraft.ai/) ## Adobe Firefly Generate concept imagery or edit backgrounds; keep product screenshots accurate and check model and asset terms. [Adobe Firefly](https://www.adobe.com/products/firefly.html) ## Topaz Gigapixel AI Inspect text and details after enlarging images; prefer a fresh original export for product screenshots. [Topaz Gigapixel AI](https://www.topazlabs.com/gigapixel) ## remove.bg Fast background removal for cleaner compositions and layered mockups. [remove.bg](https://www.remove.bg/) ## Jitter Fast case-study walkthrough motion with Figma import and export to video/GIF/Lottie. [Jitter](https://jitter.video/) ## LottieFiles Use lightweight embeddable animation for micro-interactions and transitions in Framer/Webflow. [LottieFiles](https://help.lottiefiles.com/) ## Rive State-machine-driven interactive motion when you need more expressive behavior. [Rive](https://rive.app/) ## Spline Browser-based 3D embeds for more distinctive hero sections. [Spline](https://spline.design/) ## Behance Portfolio and case-study gallery useful for benchmarking visual narrative and presentation quality. [Behance](https://www.behance.net/galleries/interaction-design) ## Dribbble Curated visual snapshots for covers, hero layout ideas, and stylistic direction. [Dribbble](https://dribbble.com/tags/portfolio) ## Awwwards High-craft portfolio web references for motion rhythm, typography, and composition. [Awwwards](https://www.awwwards.com/websites/portfolio/) ## Unsplash High-quality free photos for hero banners and editorial sections in case-study pages. [Unsplash](https://unsplash.com/) ## Pexels Free stock photos and videos when you need broad coverage and quick replacements. [Pexels](https://www.pexels.com/) ## unDraw Consistent SVG illustration library for lightweight storytelling blocks. [unDraw](https://undraw.co/illustrations) ## IconPark Large icon set with multiple visual styles suitable for interface and case-study diagrams. [IconPark](https://iconpark.oceanengine.com/official) ## Lucide Icons Clean open-source icon system with strong web integration and consistent stroke style. [Lucide Icons](https://lucide.dev/icons/) ## The Noun Project Extensive icon and symbol database for concept diagrams and specialized domains. [The Noun Project](https://thenounproject.com/) ## Coolors Fast palette generator for creating and testing brand-adjacent color systems. [Coolors](https://coolors.co/) ## Adobe Color Palette generation and accessibility checks for harmonized visual systems. [Adobe Color](https://color.adobe.com/) ## Color Hunt Quick palette inspiration board when exploring tonal direction for portfolio refreshes. [Color Hunt](https://colorhunt.co/) ## 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." [Prompt template](#) ## 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. [Framer / Webflow SEO settings](https://www.framer.com/learn/seo/) ## Google Search Console Submit sitemap, track query visibility, and fix indexing issues early. [Google Search Console](https://search.google.com/search-console/about) ## Meta Sharing Debugger Validate your Open Graph preview and ensure a clean share thumbnail (og:image, ideally 1200x630) when your portfolio link is posted. [Meta Sharing Debugger](https://developers.facebook.com/tools/debug/) ## Squoosh / TinyPNG Compress heavy images aggressively to avoid mobile drop-off. [Squoosh / TinyPNG](https://squoosh.app/) ## LinkedIn Primary recruiter discovery channel; keep headline complete and feature your portfolio prominently. [LinkedIn](https://www.linkedin.com/) ## Dribbble Pro Useful supplementary discovery channel, especially for UI-heavy portfolios. [Dribbble Pro](https://dribbble.com/pro) ## ADPList Mentor feedback and review sessions that improve portfolio quality before recruiter exposure. [ADPList](https://adplist.org/) ## Designer Slack Community Large design community with practical peer review. [Designer Slack Community](https://www.designerslack.community/) ## r/UXDesign Raw, candid critique channel that often surfaces blind spots quickly. [r/UXDesign](https://www.reddit.com/r/UXDesign/) ## 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. [Claude or ChatGPT](https://www.anthropic.com/claude) ## Adobe Firefly / Canva Create illustrations without client information and label them as concepts or reconstructions. [Adobe Firefly / Canva](https://www.adobe.com/products/firefly.html) ## Midjourney Generate stylized concept visuals that communicate direction without exposing production UI. [Midjourney](https://aixdesign.kens-toolbox.com/es/tools/midjourney) ## Framer / Webflow / UXfolio password protection Restrict access to cases that are already approved for sharing and check the live access controls. [Framer / Webflow / UXfolio password protection](https://www.framer.com/academy/lessons/password-protection) ## Process artifacts Prioritize sketches, flows, journey maps, and research synthesis when final screens are restricted. [Process artifacts](https://www.nngroup.com/articles/ux-design-portfolios/) ## 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. [Prompt template](#) ## Recommended combinations ## Publish a first portfolio Start with one clear case and a reliable reading experience, then add projects. [Publish a first portfolio](#) ## Improve an existing portfolio Identify what makes the work hard to understand, then improve it selectively. [Improve an existing portfolio](#) ## Turn notes into a case Organize the facts before choosing the narrative and visuals. [Turn notes into a case](#) ## Explain contributions to confidential work Explain decisions and contributions within the approved disclosure scope. [Explain contributions to confidential work](#) ## Explain complex system design Explain roles, flows and tradeoffs without relying on a wall of screenshots. [Explain complex system design](#) ## Related resources - [Diseñar con IA](https://aixdesign.kens-toolbox.com/es/learn/design-with-ai.md): Métodos para investigar, idear, crear prototipos y entregar diseños. - [UX de productos de IA](https://aixdesign.kens-toolbox.com/es/learn/design-for-ai.md): Explora la confianza, la transparencia y el control en productos de IA. - [Vibe Coding para diseñadores](https://aixdesign.kens-toolbox.com/es/learn/vibe-coding.md): Métodos y herramientas para diseñadores que crean con IA. - [Crea tu portafolio con IA](https://aixdesign.kens-toolbox.com/es/learn/build-portfolio-with-ai.md): Usa IA para organizar proyectos, contar casos y publicar tu trabajo. - [Experiencias de la comunidad](https://aixdesign.kens-toolbox.com/es/learn/community-field-notes.md): Experiencias, ejercicios y recursos de nuestra comunidad de diseño. - [Herramientas de diseño con IA](https://aixdesign.kens-toolbox.com/es/tools.md): Explora herramientas de IA para diseño, investigación, creación y desarrollo. Part of [Ken's Toolbox](https://kens-toolbox.com/). Account and participant data are not included in this public summary.