30 Claude Prompts That Build Portfolios

You are a senior front-end developer and personal-brand designer. <context> I need a complete developer portfolio built as one self-contained, responsive HTML file with inline CSS and anchor-based navigation, returned as a previewable artifact. It should look like a real engineer made it, not a template. </context> <inputs> - Name and role: [E.G. JANE DOE, FULL-STACK ENGINEER] - Stack and strengths: [LANGUAGES, FRAMEWORKS, SPECIALTY] - Projects to feature: [3-5 PROJECTS WITH ONE-LINE RESULT AND TECH USED] - Links: [GITHUB, LINKEDIN, EMAIL] - Vibe: [E.G. CLEAN DARK, MINIMAL LIGHT, PLAYFUL] </inputs> <task> Build the site with sticky nav linking: a hero with name, role, a sharp one-line value statement, and primary plus secondary CTAs; an about section in two short paragraphs; a skills grid grouped by category; a featured-projects section with project cards showing title, problem-solved, tech badges, and links; a short experience timeline; and a contact footer with email and social links. Write real, specific placeholder copy and realistic project captions. </task> <constraints> - One self-contained responsive HTML file; no dependencies except Google Fonts. - Semantic HTML, accessible contrast and focus states, mobile-first. - Use labeled color blocks or CSS gradients as project-image placeholders; no lorem ipsum. </constraints> <format> Return the full HTML as an artifact, then list the design tokens (type scale, colors, spacing) and where to drop real screenshots. </format>

You are an art-directed front-end engineer who builds portfolios that double as a craft demo. <context> I need a front-end engineer portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. The interactions themselves should prove I can build polished UI. </context> <inputs> - Name and focus: [E.G. ALEX KIM, FRONTEND + DESIGN SYSTEMS] - Signature work: [3-4 PROJECTS WITH WHAT YOU BUILT] - Tools and frameworks: [REACT, CSS, ANIMATION LIBS, ETC] - Aesthetic: [E.G. SWISS GRID, NEO-BRUTALIST, SOFT MINIMAL] - Links: [GITHUB, DRIBBBLE, EMAIL] </inputs> <task> Build the site with: a hero with a tasteful CSS-only entrance animation, an about blurb, a work grid with cards that have smooth CSS hover reveals, a small live demo flourish (a working toggle, tabs, or accordion built with the details element or a tiny script), a tools strip, and a contact footer. Make the polish visible without overdoing it. </task> <constraints> - One self-contained responsive HTML file; Google Fonts allowed; keep any JS tiny and inline. - CSS-driven animations only for the main effects; reduced-motion respected via prefers-reduced-motion. - Accessible focus states and keyboard support on interactive elements. </constraints> <format> Return the full HTML as an artifact, then explain each interaction you added and which one to make the centerpiece. </format>

You are a data-science career coach and web designer who builds analyst and ML portfolios. <context> I need a data scientist portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. It should communicate impact, not just notebooks. </context> <inputs> - Name and focus: [E.G. PRIYA RAO, ML ENGINEER / NLP] - Tools: [PYTHON, SQL, PYTORCH, ETC] - Projects: [3-5 WITH THE PROBLEM, METHOD, AND RESULT/METRIC] - Domain expertise: [E.G. FINTECH, HEALTHCARE] - Links: [GITHUB, KAGGLE, LINKEDIN] </inputs> <task> Build the site with sticky nav linking: a hero with name, focus, and a results-led tagline; an about section; a skills section split into languages, ML, and data-eng; a case-study-style projects section where each card states the business problem, the approach, and a quantified outcome; a publications or talks list (optional); and a contact footer. Write specific, metric-driven copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every project must show an outcome metric, not just a tech list; semantic, accessible markup. - Use simple CSS bar or stat blocks to visualize one or two key results. </constraints> <format> Return the full HTML as an artifact, then explain how you framed projects as business outcomes and where to add charts. </format>

You are a developer-relations specialist who builds portfolios for open-source maintainers. <context> I maintain open-source projects and need a portfolio that centers my repos and community impact, built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. </context> <inputs> - Name and handle: [E.G. SAM LEE, @SAMLEE] - Flagship projects: [2-4 REPOS WITH WHAT THEY DO, STARS, USERS] - Contribution areas: [LANGUAGES, ECOSYSTEMS] - Talks or writing: [OPTIONAL] - Links: [GITHUB, SPONSORS, MASTODON/X] </inputs> <task> Build the site with: a hero with name, the maintainer identity, and a sponsor or follow CTA; a flagship-projects section with repo cards showing description, star/usage placeholders, language, and links; a contributions section; an optional talks/writing list; a 'support my work' band linking to sponsorship; and a footer. Write authentic, community-minded copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Repo cards must look like real package cards with a stat row; accessible markup. - Keep tone humble and credible; no hype words. </constraints> <format> Return the full HTML as an artifact, then explain how to keep the repo stats updatable and where a sponsorship CTA performs best. </format>

You are a product-minded designer who builds 'maker' portfolios for indie hackers. <context> I ship side projects and small products. I need a maker portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, that frames me as someone who ships. </context> <inputs> - Name and tagline: [E.G. JO RIVERA, BUILDS TINY SAAS] - Products shipped: [3-6 WITH NAME, ONE-LINER, STATUS, AND ANY REVENUE/USERS] - Story: [WHY YOU BUILD] - Links: [X, PRODUCT HUNT, EMAIL] </inputs> <task> Build the site with: a hero with a confident maker tagline and a 'currently building' status line; a 'things I have shipped' grid of product cards each with name, one-liner, status badge (live/archived/beta), and a metric if available; a short story section; a 'what I am working on now' note; and a contact footer. Write energetic, honest builder copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Status badges visually distinct; cards consistent and scannable; accessible markup. - Honest, specific copy; no inflated claims. </constraints> <format> Return the full HTML as an artifact, then suggest how to order the products (by recency vs. by traction) for the strongest first impression. </format>

You are a senior UX designer and portfolio mentor who reviews design portfolios for hire. <context> I need a UX/product designer portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. Hiring managers should grasp my process and impact fast. </context> <inputs> - Name and specialty: [E.G. MAYA SOLIS, PRODUCT DESIGNER / B2B SAAS] - Case studies: [2-4 WITH PROJECT, ROLE, PROBLEM, AND OUTCOME] - Skills: [RESEARCH, PROTOTYPING, DESIGN SYSTEMS, ETC] - Aesthetic: [E.G. EDITORIAL, MINIMAL, COLORFUL] - Links: [LINKEDIN, EMAIL, RESUME] </inputs> <task> Build the site with sticky nav: a hero with name, specialty, and a one-line philosophy; an about section; a featured case-study section where each card shows the project, your role, the problem, and the measurable outcome, with a 'view case study' link; a skills/process strip; a brief testimonial; and a contact footer. Write specific, outcome-led copy and credible case-study captions. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Case-study cards must read problem to outcome, not just pretty pictures; accessible markup. - Use labeled color blocks as cover-image placeholders; strong typographic hierarchy. </constraints> <format> Return the full HTML as an artifact, then explain how you structured each case-study card and which project to feature first. </format>

You are an art director who builds visually striking graphic-design portfolios. <context> I need a graphic designer portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. The layout itself should demonstrate strong design sense. </context> <inputs> - Name and discipline: [E.G. NOAH PARK, BRAND + EDITORIAL DESIGN] - Work to show: [6-10 PIECES WITH TITLE, CLIENT, AND CATEGORY] - Categories: [E.G. BRANDING, PACKAGING, POSTERS, TYPE] - Aesthetic direction and colors: [DESCRIBE] - Links: [INSTAGRAM, BEHANCE, EMAIL] </inputs> <task> Build the site with: an expressive hero with a statement headline, a masonry-feel work grid of project tiles with hover captions showing title and client, a category filter look (visual only), a short about/bio, a client or recognition strip, and a contact footer. Use bold type and confident spacing. Write concise, professional captions. </task> <constraints> - One self-contained responsive HTML file; Google Fonts allowed. - Use solid color blocks or CSS gradients labeled with each piece's title as image placeholders; CSS-only hover effects. - Accessible contrast and focus states; coherent design system. </constraints> <format> Return the full HTML as an artifact, then describe the grid and type system so I can swap in real artwork without breaking the layout. </format>

You are a creative-portfolio designer who specializes in illustration and concept-art sites. <context> I need an illustrator portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, that puts the artwork front and center. </context> <inputs> - Name and style: [E.G. LENA FROST, WHIMSICAL CHARACTER ART] - Galleries: [CATEGORIES LIKE PERSONAL, COMMISSIONS, CONCEPT, EACH WITH A FEW PIECE TITLES] - Services: [COMMISSIONS OPEN/CLOSED, RATES NOTE] - Vibe and palette: [DESCRIBE] - Links: [INSTAGRAM, ARTSTATION, EMAIL] </inputs> <task> Build the site with: a hero featuring an oversized signature-piece placeholder and the artist name and style; a gallery section with category tabs or sections, each a clean grid of artwork tiles with title-on-hover; a short artist statement; a commissions section noting availability and how to inquire; and a contact footer. Let the imagery dominate and keep chrome minimal. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Artwork tiles are labeled color blocks or gradients standing in for images; generous whitespace; CSS-only hover. - Accessible markup; the commissions status must be obvious. </constraints> <format> Return the full HTML as an artifact, then explain the gallery structure and how to add a lightbox later without a heavy library. </format>

You are a motion-design portfolio specialist who builds reels-first sites. <context> I need a motion/3D designer portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact. It should feel cinematic and built around showreels. </context> <inputs> - Name and specialty: [E.G. RIO TANAKA, MOTION + 3D FOR ADS] - Reel and projects: [SHOWREEL PLUS 3-5 PROJECTS WITH CLIENT AND ROLE] - Software: [AFTER EFFECTS, BLENDER, C4D, ETC] - Aesthetic: [E.G. DARK CINEMATIC, NEON, CLEAN] - Links: [VIMEO, INSTAGRAM, EMAIL] </inputs> <task> Build the site with: a dark hero with a large showreel video placeholder (16:9 framed block with a play affordance) and the designer name/specialty; a selected-work grid of video-thumbnail cards with client and role on hover; a software/skills strip; a short bio; a clients strip; and a contact footer. Write tight, professional copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts allowed. - Video placeholders are framed 16:9 blocks with captions and an accessible play label, ready to swap for embeds; CSS-only hover. - Dark, cinematic design system with accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain where to embed real Vimeo/YouTube players and how the thumbnail grid scales. </format>

You are a portfolio designer for architecture and industrial-design professionals. <context> I need an architecture or industrial-design portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, with a refined, editorial feel. </context> <inputs> - Name and discipline: [E.G. CLARA WOLF, ARCHITECT / SPATIAL DESIGN] - Projects: [4-6 WITH NAME, TYPE, YEAR, LOCATION, AND A ONE-LINE CONCEPT] - Approach/philosophy: [SHORT STATEMENT] - Aesthetic: [E.G. MINIMAL, MONOCHROME, WARM] - Links: [LINKEDIN, EMAIL] </inputs> <task> Build the site with: a quiet, typographic hero with name and discipline; a project index where each entry shows name, type, year, location, and concept with a large cover placeholder; an alternating image-and-text project layout; a philosophy/about section; a selected-clients or awards line; and a contact footer. Write restrained, precise copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Large labeled image placeholders with captions; generous margins; refined type scale. - Accessible contrast and semantic structure; no decorative clutter. </constraints> <format> Return the full HTML as an artifact, then summarize the type and grid system so I can keep new projects consistent. </format>

You are a portfolio designer who builds image-first photography sites. <context> I need a photographer portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, where the photos carry the page. </context> <inputs> - Name and genre: [E.G. ELLA MOORE, WEDDING + PORTRAIT] - Galleries: [CATEGORIES SUCH AS WEDDINGS, PORTRAITS, TRAVEL, EACH WITH A FEW SHOT TITLES] - Services and pricing note: [WHAT YOU OFFER, STARTING PRICE] - Mood and palette: [DESCRIBE] - Links: [INSTAGRAM, EMAIL, BOOKING] </inputs> <task> Build the site with: a full-bleed hero image placeholder with the photographer name and genre overlaid; a gallery section organized by category with clean grids of photo tiles (title and location on hover); a short about/bio; a services-and-pricing teaser; a testimonial; and a 'book a session' contact footer. Keep UI minimal so imagery dominates. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Photo tiles are labeled color blocks or gradients as placeholders; generous whitespace; CSS-only hover overlays. - Accessible alt-text placeholders and contrast on overlaid text. </constraints> <format> Return the full HTML as an artifact, then explain the gallery grid, how overlays handle long titles, and where to add a contact form. </format>

You are an editor-turned-web-designer who builds clean writing portfolios. <context> I need a writer/journalist portfolio built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, optimized for readability and credibility. </context> <inputs> - Name and beat: [E.G. DEV PATEL, TECH + CULTURE REPORTER] - Clips: [5-8 PIECES WITH HEADLINE, PUBLICATION, AND ONE-LINE SUMMARY] - Beats/topics: [WHAT YOU COVER] - Bio: [SHORT PROFESSIONAL BIO] - Links: [TWITTER, LINKEDIN, EMAIL] </inputs> <task> Build the site with: a typographic hero with name, beat, and a one-line positioning; an about/bio section; a 'selected work' clips list where each item shows headline, publication, date, and a short summary with a 'read' link; a topics/beats strip; an optional 'available for' note (freelance, features, etc.); and a contact footer. Write a clean, editorial copy voice. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Clips list must be highly readable and scannable, publication names emphasized; accessible markup. - Editorial, restrained design; comfortable line length and reading rhythm. </constraints> <format> Return the full HTML as an artifact, then explain how you ordered the clips and where to add a 'pitch me' contact form. </format>

You are a personal-brand designer who builds tasteful link-in-bio pages. <context> I need a personal landing / link-in-bio page built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, that beats the generic link-tree look. </context> <inputs> - Name and tagline: [E.G. SAM REED, CREATOR + PODCASTER] - Links to feature: [4-8 DESTINATIONS WITH LABEL, E.G. NEWSLETTER, PODCAST, SHOP, BOOKING] - Highlight: [ONE THING TO PUSH HARDEST] - Avatar/brand: [PHOTO PLACEHOLDER, COLORS, VIBE] - Socials: [PLATFORMS AND HANDLES] </inputs> <task> Build a centered single-column page with: an avatar placeholder, name, tagline, and a one-line bio; a vertical stack of large tappable link buttons with icons and labels; one featured/highlighted link styled distinctly at the top; a small social-icon row; and a subtle footer. Make it feel branded and intentional, with big tap targets. </task> <constraints> - One self-contained responsive HTML file; Google Fonts allowed; inline SVG icons (no icon library). - Mobile-first, very large tap targets, accessible focus states and labels. - One clear visual hierarchy; the highlighted link must stand out. </constraints> <format> Return the full HTML as an artifact, then explain the visual hierarchy and which single link to feature for the most clicks. </format>

You are a career strategist and web designer who turns resumes into clean personal sites. <context> I need a resume website built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, that looks great on screen and prints cleanly to PDF. </context> <inputs> - Name and target role: [E.G. AMARA OKO, SENIOR PRODUCT MANAGER] - Summary: [2-3 SENTENCE PROFESSIONAL SUMMARY] - Experience: [3-5 ROLES WITH TITLE, COMPANY, DATES, AND 2-3 ACHIEVEMENTS EACH] - Skills, education, certifications: [LISTS] - Links: [LINKEDIN, EMAIL, PORTFOLIO] </inputs> <task> Build the site with: a header with name, target role, and contact links; a summary section; an experience section with each role showing title, company, dates, and achievement bullets (lead with verbs and numbers); a skills grid; an education and certifications block; and a download/print affordance. Keep it scannable and ATS-friendly in structure. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Include a print stylesheet so it exports to a clean one or two-page PDF; semantic, accessible markup. - Achievement bullets must be specific and quantified; no vague 'responsible for'. </constraints> <format> Return the full HTML as an artifact, then explain the print/PDF handling and how to tailor the summary per application. </format>

You are a personal-brand strategist who builds authority sites for speakers and coaches. <context> I need a speaker/coach personal site built as one self-contained, responsive HTML file with inline CSS, returned as a previewable artifact, that builds authority and drives bookings. </context> <inputs> - Name and positioning: [E.G. JORDAN HALE, LEADERSHIP SPEAKER + EXECUTIVE COACH] - Topics/talks: [SIGNATURE TALK TITLES OR COACHING OFFERS] - Credibility: [STAGES, CLIENTS, BOOKS, MEDIA] - Primary action: [BOOK A TALK / FREE CONSULT] - Vibe: [E.G. WARM AUTHORITY, BOLD, CALM] </inputs> <task> Build the site with: a hero with name, positioning, a credibility line, and a primary booking CTA; an 'as seen on' or stages strip; a signature talks/offers section with cards; an about-and-story section; a testimonials block with attribution; a media/press or speaker-kit note; and a final book-me CTA footer. Write confident, credible copy. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Booking CTA repeated at hero and footer; testimonials need real-feeling attribution; accessible markup. - Authoritative but not arrogant; specific proof over adjectives. </constraints> <format> Return the full HTML as an artifact, then explain the authority signals you led with and where to link a speaker kit or calendar. </format>