Steal it
I built this with AI and the first draft was generic slop.
It wasn’t the tool, it was me. I asked for a portfolio and left every call to the LLM, so I got the average of every portfolio ever made. What actually fixed it was boring: I had to know what I wanted, or make Claude decide, instead of leaving it up to the model. That’s not really an AI thing, it’s every project. The LLM just makes it faster. Here’s what that looked like, plus the working starter, so you can skip the week I spent learning it.
What fixed it
Design first, copy last. Lock the layout before you touch the words. Let rough copy drive the design and the whole thing bends around bad copy.
Point it at real taste. “Make it clean” means nothing. Pick two sites you actually like, have it open them and read the real CSS, then lift the specific parts.
Make it data-driven. One file for who you are, one for your projects. Change one file and the whole site updates.
You can start from the working code
Below is this exact site, stripped of my content. Same layout engine, same data-driven cards. It ships with a CLAUDE.md and a DECISIONS.md so your Claude picks it up and keeps the design from drifting generically. If you edit two files it becomes yours.
Use this template → Download the .zip
Open it in Claude Code and read CLAUDE.md first, it knows the rest. Or browse it on GitHub.
Build one from scratch
Paste this into Claude. Fill the brackets first, it's most of the work.
I want to build a personal portfolio site. Work with me like this: Context first. Read my About Me file (attached). If I hadn't given you one, you'd interview me first (10-15 questions on my work, goals, and voice) and save it as about-me.md before building anything. Treat every word of copy as a placeholder until the design is locked. Design first. Do not let my rough copy shape the layout. The look (this is my taste, don't drift). - Steal from these: [SITE 1] for [e.g. fonts + branding], [SITE 2] for [e.g. card structure and layout]. Actually open them and read the real CSS, then lift those specific parts closely, section by section. Be original only where I haven't pointed at something. - How literal: [e.g. near-literal on structure, my own color and type]. - Mobile-first. Overall structure: [e.g. everything is a card in a bento grid, single column on mobile, two on desktop, a floating nav pill]. - Before you build the whole thing, show me 1-2 quick visual options for anything I'm likely to be picky about (font, card style) as a small clickable mockup. I'll pick, then you build. Screenshots / assets. [I'll provide screenshots at these paths] OR [I don't have them yet, use tasteful placeholders and wire the layout so I can drop real images in later at fixed filenames with no code changes]. Build. Make it a real git repo. [Stack: simplest thing that works, or Node/Express if I'll add pages]. Make it data-driven so I can add a project or section by editing one file. Include basic SEO and an llms.txt so AIs describe me accurately. After any visual change, screenshot it at mobile (390px) and desktop (1280px) and show me before calling it done. Process. Ask all your clarifying questions up front, batched, before you build. Expect 1-2 rounds of me reacting to visuals, show don't tell. When the design is settled, write a CLAUDE.md so I can keep iterating in Claude Code.
Already have a site? Add one story
Paste this at the top of a new chat, then just talk through the project. It hands back a ready-to-paste entry.
You are helping me add a new work story to my portfolio site. Your job is to take a rough spoken brain-dump from me and turn it into one complete project object that drops straight into content/projects.js, matching the site's data model and my writing voice. Then I hand it to Claude Code. Read the project's content/projects.js first (it's the source of truth, don't rely on memory) for the exact object schema and the existing stories. Match that shape and match the tone of what's already there. The object you produce (fields): - slug: kebab-case url segment, e.g. kid-search - label: 2-4 word card title - tagline: one concrete line, the decision or action, not a slogan - screenshot:.png (I'll supply the actual image, just name it) - number: the big headline on the detail page (a metric like +35%, or a short phrase like "Built solo" when there's no clean number) - metric: one line under the number - org: the company or product name - size: "md" by default; "lg" for a feature story; "tall" only for portrait content - link: external url if there is one, else null - detail.title: first person, plain, e.g. "I built search by learner name" - detail.lede: one or two sentences that land the whole story - detail.sections: default three: "The problem", "What I did", "What moved". Each body is an array of 1-2 short paragraphs. Rename or add a section if the story wants it. - detail.images: leave [] unless I give you more shots. How to run the intake: 1. Let me talk. Pull as much as you can from what I say. 2. Then ask, in ONE batched message, only for what's genuinely missing: the company/context, the core problem, what I specifically did, the outcome, and whether there's a metric I can defend. 3. Draft the full object. Honesty rules: - Only use a hard metric if I actually influenced it, understand the mechanism, and could defend it in an interview. If unsure, write the outcome qualitatively. Never invent a number. - One idea per line. Lead with the decision, not the ceremony. What to output: 1. The complete project object, formatted exactly like the others in projects.js, in a code block I can paste. 2. Where it goes: which position in the array (order affects the bento layout, flag it if size "tall" or "lg" will change neighbors). 3. A one-line reminder of what I still owe: the screenshot at public/img/ .png. 4. If the repo is connected and I say go, offer to make the edit directly and leave the rest for Claude Code. Keep it tight. If a section would just be filler, cut it. When in doubt about fit or a claim, ask me before writing it.