Part 1: Designing the Look Before Writing the Code

Before Digital Den was a website, it was a store. People walked in with every kind of tech question, from deep IT conversations to an elderly couple who just wanted to email their kids. When I set out to build the site in the summer of 2026, I wanted it to feel like that store: a workshop where real projects happen and anyone is welcome.

I also wanted to build it the modern way, with an AI working beside me. My coding roots go back to BASIC and COBOL, so a lot of today's tools were new to me. This series is the honest record of how it went, one session at a time, with the lesson I took from each.

Start with the look, not the code

The first session didn't produce a single line of real code. Instead, Claude and I built two full-page mockups as simple static pages. "The Workshop" used walnut, charcoal and copper. "Night Signal" went dark navy, with colors sampled from a site I admired. Seeing both side by side made the choice easy. Night Signal won, and it's still the look you see today.

A mockup like this costs almost nothing to change. Want the headline bigger, or a different accent color? It's a one-line request. Once a design is wired to a database and a login system, every change gets more expensive. It's the same reason we used to lay out a screen on a coding sheet before writing the COBOL behind it.

Small fixes that add up

Along the way we cleaned up the raw materials. My logo file turned out to hold only one reversed version, not the set of variants I expected. So we worked from a JPG instead, removed its white background, and made a transparent logo plus a white version for dark pages. The workshop photo for the top of the home page was too dark on the left side, so it got a feathered brightness boost and a softer dark overlay so the headline would still read.

None of this is glamorous, but an AI is very good at this kind of patient fix-up work. It's the kind of thing that used to eat a whole afternoon.

The question that picked the technology

Then I asked a simple question: do I need a content management system, so future helpers won't have to touch code? That turned out to be an architecture decision, and the answer shaped everything that followed.

The plan we landed on uses three main pieces. Next.js builds the website itself. Sanity is the content system: an editing screen where someone can write an article or add a project without knowing any code. Supabase handles member accounts and the database, including comments. We kept comments in Supabase rather than Sanity, because comments come from visitors, while Sanity holds the content we publish ourselves.

We also mapped out the content model, meaning the kinds of things the site holds: projects, articles, videos and homepage settings. Think of it as designing your record layouts before writing the program.

Costs, and one plan that changed

Claude modeled the monthly costs too. That estimate assumed a hosting service called Vercel at $20 a month. In the end I deployed on Netlify instead. Plans change, and that's fine. The point of an early estimate is to know whether the idea is affordable at all, not to lock in every line item.

The lesson

Prototype the look as a static page before you write real code, and decide early who will edit the content. Both are cheap to change on day one and expensive to change later.

Try it yourself

If you're starting your own project with an AI, ask it to build two or three mockups of your home page as plain HTML pages before anything else. Describe the feeling you want, not just the colors. Then ask: "Who will be adding content to this site a year from now, and what do they need?" The answer will tell you a lot about which tools to pick.

Next time: connecting the tools, and the first surprise of working with AI connectors.