How this site was built

I rebuilt my entire portfolio with Claude Opus 5.5, on medium effort. With this post I want to show that today anyone can make things with AI, and that you don't need complex prompts. You need creativity, and a critical eye for what the AI gives back.

So here are the exact prompts I used, the way I talk, and how I get to a result that isn't the usual one.

I sent 88 messages. About a third of them said some version of "no". I write in Portuguese, so every message below is translated, as close to how I wrote it as I could.

Three links and one sentence

I didn't start with a design. I started with references.

The first was adixcode.com: a bento grid where every card has its own small animation. The second was imdaryl.com, which matters more. The whole site is one idea: his portfolio is a drafting sheet, because his job is drawing interfaces. The third was my own profile on Git City, with one sentence:

so, that's where thegitcity.com comes in. for mine I wanted something in pixel art, but clean, beautiful and full of micro-interactions. look at my profile on git city, for example.+ screenshot

The AI read Git City literally. It copied its identity, put Geist next to the pixel font, and called it a start. I said no to all of it:

dude, to be honest, I don't want to use 100% of git city's visual identity. I want to be creative here. I don't like mixing fonts like this. and you made too little. I can't tell how it's going to look.+ screenshot

So it went the other way.

Four complete homes. Tap through them.

BentoHandheldPaperDesktop

Your call. What would you say?

Pick the best one and polish itAsk for four moreSave them and narrow it down

Just show me

Finding the metaphor

Daryl's site has one metaphor, so mine needed one too. I took his idea and swapped in my own:

I want something more in the style of building with little blocks, like the squares of github's contributions graph. the site I sent, its thesis is that everything is like his desk, right? in my case it's the little blocks, it's this construction. let's focus only on the hero.

I said "like the squares of the contributions graph", and the AI drew the graph: three heroes spelling my name in its cells, nearly identical. I didn't save those.

huh, you made 3 versions that are practically the same. they were supposed to be 3 different ones. this button looks horrible. I want to simulate building the site with the blocks, not show the github graph.+ screenshot

Two out of three, plus one idea

This is where the site was born. Every element on the page is now built this way: text from the font's real pixels, images averaged into 8px blocks, buttons as blocks.

Too much for one agent

With one agent building the whole page, there was too much work for it. To finish in a few seconds it had to move so fast that it looked like it was playing at 3x.

it's bad. a single agent ends up making it go too fast. after the loading, ideally more agents would come and several together would assemble the site.

The same message killed a giant "PRODUCT ENGINEER" title ("it has to be my name, but it can be smaller"). The next one killed the tagline:

much better now. but my name and the phrase "I build products people use, one block at a time." are really bad. that phrase looks very AI.

The line under my name now just says what I do.

Name the content, not the layout

The projects section took the most rounds, around nine: four cards, a list, a list with a panel, a shorter list. I kept choosing between layouts and none of them landed.

Your projects as a list, with a preview panel the agents build when you hover.

IllustrationsPanel

Your call. What would you say?

Try another layoutPick the least bad oneSay what should be in it

Just show me

Testing everything

The AI tested what it built, in a browser it controls. I tested like someone who doesn't know how anything works: on my phone, impatient, poking at things. A few of the bugs I sent it, as I sent them:

nothing works on the phone. I don't see the loading, I don't see the agent, I don't see the menu. it's all broken

if I keep moving the mouse from the title to the card several times, the agent keeps following me. there has to be a delay to see if it will really stop there

people are saying it froze a bit on the phone. why?

Test it yourself

Every one of those bugs passed the AI's own checks. It tested each change in a browser it controls, took screenshots, and told me it worked. Then I opened the site on my phone.

That's the step people skip. The AI tests the case it just built, on the screen it's using. Your visitors are on a different phone, scroll during the intro, press Esc at the wrong moment, and send the link to friends with slower devices.

So before calling anything done: open it on your phone, use it like someone who doesn't know how it works, and send it to a couple of friends. Most of what I fixed on this site came from that, not from the AI.

The tic-tac-toe one came with a second request:

is the agent dumb? I let him win but he didn't win. and when he wins, there needs to be trash talk too.+ screenshot

A lot of the site started as jokes like that. "It would be cool to play tic-tac-toe with him lol" became the game. "Don't you get tired?" is what the agent says once you've heard all its lines. "I love matrix" became a command.

What the site is for

At one point there was a work history section, built from bricks.

Your work history, one brick per quarter of each job.

Your call. What would you say?

Keep itMake it more playfulRemove it

Just show me

Then I said what the site was for:

The site is for people who follow me, not for recruiters. It's to show my creativity and capability.

That sentence removed a section and changed the contact form too. I wanted something people would play with:

FormTerminal

Remember there may be non-devs using it. And make Y the default to send. I pressed enter and it just dropped it. I'd have to type everything again.

It has buttons for people who've never seen a terminal, and commands for people who have.

Where the AI got it wrong

• It copied Git City instead of using it as a reference.
• It drew the GitHub graph itself when I meant building with blocks, three times over.
• It deployed every change to production because I had said "you can deploy" once. I had to ask why.
• It wrote the first draft of this post in the pixel font, as a timeline of timestamps. Both went.

None of these were hard to fix. Each one needed me to notice it.

What I'd tell someone directing an AI

1. Send references, then name your own idea. The references set the level. "Everything is blocks" gave every later decision a direction.
2. Describe what you see, not the code. "It looks like 3x speed" and "he doesn't take something and come back" fixed more than any technical note.
3. Shrink the scope until it's one thing. "Let's take just one thing and animate it" unlocked the whole site.
4. Ask for options, then react. Most of my decisions were picking from three and adding something.
5. Say no fast, with a screenshot. One sentence is enough.
6. Keep what you reject. It costs one commit, and this post is made of them.
7. Test like a stranger, on a real phone.

Numbers

Every message I sent, one block each:

messages I sent

88

with a screenshot

14

reference links

3

roughly, from my first message to "the hero is approved"

7h

commits in the rebuild

55

lines of code I wrote

0

There are nineteen secrets on this site. I'm not telling you where. The counter is at the bottom of the page.

The part you can't prompt

Nothing above is a clever prompt. It's how I talk: short, in Portuguese, sometimes with a typo and a "lol". The AI did all the typing.

What it couldn't do was decide what was mine. It gave me four good homes in a few minutes, and the easy move was to pick one. The site only got its DNA because I kept saying no until it looked like something I would have made myself.

That's the whole method. Creativity to know what you want, and a critical eye for what comes back.