Why your portfolio is the most important thing you're not doing
Most professionals are invisible online. Their work exists — in their heads, in Slack threads, in annual reviews — but it isn't anywhere a hiring manager, a potential client, or an inbound opportunity could find it. That invisibility has a cost.
A portfolio site changes the dynamic. Instead of you chasing opportunities, opportunities start finding you. Instead of explaining your value in an interview, you send a link. Instead of hoping your resume lands right, you show your work in the way only you can frame it.
Here's what's changed: building a professional portfolio used to take a designer and a developer and weeks. With AI, it takes an afternoon — and the result is fully yours, editable, and live. The barrier is gone. There's no reason not to have one.
This guide walks you through building yours from scratch, in one session, today.
Four phases. One session. One live site.
This guide is structured as four sequential phases, each building on the last. You'll start by generating your content with Claude, define your visual direction, mock up your site, and then publish it with Lovable. By the end, you'll have a live URL you can share.
Work through the phases in order. Each phase has one or two prompts — they're written to get Claude to do the heavy lifting while keeping you in control of the decisions that matter. Open Claude in one tab and this guide in another, and work through them section by section. The prompts are designed to be run in a single Claude conversation — Claude builds context as you go, so each prompt gets smarter because of what came before it.
A few things to know before you start: you don't need any technical knowledge, you don't need to be a designer, and you don't need to know what your positioning is yet — Prompt 1 will draw it out of you. The only thing you need to bring is honesty about your work. The more real you are in your answers, the sharper your site will be.
⚡
▶
| # | Phase | What it does | Time |
|---|---|---|---|
| 1 | Content | Positioning statement — Claude asks you 4 questions, writes 3 versions | ~5 min |
| 2 | Content | Project highlights — pushes you from job-description to results language | ~5 min |
| 3 | Content | Point of view paragraph — shows how you think, not just what you've done | ~3 min |
| 4 | Content | Full content package — assembled, formatted, ready for Lovable | ~2 min |
| 5 | Design | Extract design DNA from an inspiration site → save as your design skill | ~3 min |
| 6 | Wireframe | ASCII wireframe — test structure and layout before you write any code | ~3 min |
| 7 | Mock-up | Full HTML mock-up — styled and viewable, ready to iterate on | ~5 min |
| 8 | Build | Lovable prompt — generate and publish your live site | ~5 min |
1
▶
The positioning statement is the one or two sentences that sit at the very top of your portfolio — the thing that tells a visitor in ten seconds who you are, what you do, and why it matters. Most people default to their job title. That's a mistake. Your job title tells someone where you've been; your positioning tells them what you're worth.
This prompt has Claude ask you four questions, one at a time, and then write three different versions of your positioning. You'll pick the one that sounds most like how you'd introduce yourself at your best. Claude builds context as you answer each question, so give honest, specific answers — the more real you are, the sharper the output will be.
What good positioning looks like ▶
Real examples from portfolio sites built by professionals in different fields:
- "Enterprise healthcare. Agile design. 15 years of leading $40M teams."
- "Head of Design at Rekki. Building products with purpose and sweat over details."
- "A creator that designs for creators."
Notice what's absent: job titles, "passionate about," years of experience for its own sake, buzzwords. Specific and confident beats warm and vague every time.
If the output is too generic ▶
Tell Claude: "These still sound like they could be anyone. What's the most specific, unusual, or unexpected thing about my background? Lead with that."
One follow-up question is usually enough. The goal is a version you'd actually put on your site — not one that sounds impressive in the abstract.
2
▶
Project highlights are where most professionals undersell themselves — not because their work isn't impressive, but because they describe it in the wrong language. Resume language ("I led a team of five") is about activity. Portfolio language is about impact. Claude is going to push you out of the first and into the second.
For each project, Claude will help you write a sharp name, a one-sentence problem statement, your specific contribution, and a result with a real number or a clear before/after. If you don't have a number, Claude will ask the right questions to find one. This is the part where people discover they've been significantly underselling their work.
"Led a team of 5 designers"
"Led a team that shipped a redesign adopted by 200+ hospitals"
The moment to sit with: when Claude asks "what changed?" — don't answer quickly. The real answer is usually more significant than you've been letting yourself claim.
What if my work is confidential? ▶
Replace company names with categories: "a Fortune 500 retailer," "a Series B fintech startup," "a federal government agency."
The specificity that matters is the result, not the client. "Reduced processing time by 40%" lands just as hard without a name attached.
3
▶
A point of view paragraph is what separates a real portfolio from a glorified resume. Your credentials and project highlights tell someone what you've done. Your point of view tells them how you think — and that's what makes someone want to work with you specifically, rather than the person on the next page with a similar resume.
Claude will ask you three questions about how you approach your field — what others get wrong, what you've learned from experience, what you'd teach someone. Then it will write a short paragraph from your answers. The goal is something that sounds like you'd say it at a dinner table, not something you'd put on a LinkedIn headline.
If the paragraph doesn't sound like you ▶
Read it out loud. If you'd never say it, tell Claude: "This doesn't sound like me. Here's how I'd actually say it: [say it in your own words, even roughly]."
One round of this usually gets you to something real. The goal isn't polish — it's honesty. A slightly rough paragraph that's true to your voice will outperform a perfect-sounding one that isn't.
4
Run this last
▶
Once you've finished Prompts 1–3 and are happy with your positioning, your project highlights, and your point of view, this prompt compiles everything into a single, cleanly formatted content document. This document is what you'll hand directly to Lovable in Phase 4 — so save or copy the output before moving on.
Save this output. You'll use it in Phase 4 when you build in Lovable. Copy it somewhere you can get back to — a notes app, a doc, or just keep the tab open.
5
▶
Before building anything, you need a design direction. This doesn't require a designer — it requires one site you love. Claude will analyze that site, extract its visual system (colors, typography, layout feel, vibe), and save it as a file called design-skill.md in your working directory. From that point on, every time you build something in Claude Cowork, you can reference /design-skill and it will apply your visual identity automatically.
This is one of the most powerful patterns in this guide: you're not just building a portfolio site, you're establishing a design system you own. Every future document, deck, or page you build with Claude will automatically feel like you.
Before running this prompt: have a site you admire bookmarked and ready. If you don't have one, use Option B below — it asks you four preference questions instead.
Option A — From an inspiration site (recommended) ▶
Find a portfolio, brand site, or any site whose visual feel you want to channel. It doesn't have to be in your field — it just has to feel right. Then run this prompt in Claude Cowork with the URL.
Option B — From preferences (no inspiration site) ▶
If you don't have a site in mind, this version asks you four quick questions about how you want your site to feel, then builds a design system from your answers.
Why this matters beyond today: once the skill is saved, every future project you build in Claude — decks, documents, landing pages — automatically uses your visual identity. You set it once; it follows you everywhere.
6
▶
A wireframe is a simple text diagram of how your site is laid out — which sections appear in which order, and how much space each one takes. It takes two minutes to change a wireframe and two hours to change a coded site. This step exists so that you make those decisions now, before anything is built.
If a section has too much content in the wireframe, it will feel overwhelming in the actual site. If the order doesn't feel right, fix it here. Claude will flag anything that looks crowded and suggest cuts — take those suggestions seriously.
Review before moving on. Does the order feel right? Is any section text-heavy? Push back with specific edits: "move the proof strip above the project highlights" or "the about section is too long — cut it to 3 sentences."
7
▶
This is where things start to feel real. Claude takes your wireframe and turns it into a fully designed, viewable HTML file — complete with your color system, typography, and layout from Phase 2. You'll be able to open it in your browser, see what it looks like, and iterate on it in plain English before you commit to Lovable.
This step matters because it's much easier to say "the hero section feels too crowded" when you can see it than when you're describing it from memory. Make the changes you want here — get it to a place you're happy with — and then carry it into Phase 4 as your blueprint.
How to iterate on the HTML preview ▶
Give Claude specific edits in plain English — you don't need to know any code:
- "the hero section feels too crowded — remove the subtitle and just keep the positioning line."
- "make the project cards taller with more breathing room."
- "change the CTA button color to match the accent from my design skill."
- "the proof strip numbers need to be bigger — that's the most important part of that section."
Iterate until you're satisfied with the overall structure and feel. You don't need to get it perfect here — just good enough that you know what you're building toward.
8
▶
Lovable is an AI site builder that takes a prompt and generates a fully functional, hosted website with a live URL. This final prompt has Claude translate everything you've built — your HTML mock-up, your design skill, and your content package — into the exact input Lovable needs.
You don't need to modify anything Claude generates. Take the Lovable prompt it gives you, go to lovable.dev, start a new project, paste the prompt, and click Build. Your site will be live in under 60 seconds.
Then in Lovable: go to lovable.dev, start a new project, paste the prompt Claude generated, add your content, and click Publish. Takes about 60 seconds. You'll have a live URL to share.
Making edits in Lovable after publishing ▶
Lovable responds to plain English edits the same way Claude does:
- "make the header font larger"
- "change the background color to cream"
- "add a thin line between each section"
- "center the CTA button"
Once you're satisfied, hit Publish again and your changes go live instantly. Your site lives at a Lovable URL by default — you can connect a custom domain anytime from the Lovable dashboard.
→
▶
The best portfolios get sharper over time. A few commitments to make to yourself now that your site is live:
- Every time you finish a meaningful project — add it
- Every time you get external validation (press, award, speaking) — add it to the proof strip
- Every time your direction in your work changes — update your positioning
- Share your live URL — put it in your email signature, your LinkedIn, everywhere
Your portfolio and LinkedIn need to tell the same story. Once your portfolio is live, the next step is making sure your LinkedIn reflects the same positioning — the same voice, the same results language, the same version of you. That's the work of the next session.
★
▶
If this guide was useful, the best thing you can do is share it with someone else who should have a portfolio and doesn't yet. Most people don't know this process exists — that you can go from zero to a live, professional portfolio site in a single afternoon with AI.
More guides and sessions at: angela-builds.com — LinkedIn rewrite, content system, network activation, and more.