I Redesigned My Blog with AI. When AI Handles the Skills, What's Left Is My Will
AI-generatedContents
This post was automatically translated by AI from the Japanese original. The screenshots are in Japanese.
A new look for my blog
I’ve redesigned my blog.
In my last post, I wrote about moving my blog from WordPress to Astro. I built this new design almost entirely with AI, too.
Here’s the before and after.
With AI, I can now reach things I could never express on my own.
If AI can make anything, what’s left for people?
That’s what I found myself thinking while I rebuilt my blog’s design with AI.
A completely different way of building
Until now, when I built a blog, I sketched the layout by hand, gathered materials that fit the image I had in mind, and wrote the code.
Being able to do all that was what I thought of as my skill.
But when I tried to build things myself, I often couldn’t turn what I imagined into something visible, and I’d get stuck.
Sometimes the time just slipped away while I searched for “how do I even make this?”
Honestly, AI does the whole thing for you.
Of course, I know what steps web design takes and what kind of code is being written. That’s exactly why I can give AI detailed requests and explain precisely what to fix in what it makes.
Still, what took me days of handwork, AI finishes in minutes.
Honestly, my skills are no match for AI.
It knows more than I do and does hard things faster.
I’ve had to let go of the value I used to have: my technical skill.
But it isn’t all sad. I can now make things I couldn’t easily make on my own.
And what I’m asked for as the maker is no longer skill, but will and judgment.
The concept
I built it around the analog feel I’ve always admired.
The design concept: “the atelier of a wizard who lives in the forest.”
Programming and digital making are a kind of magic that turns what you imagine into something real in an instant. And I just love the fantasy worlds of RPGs.
At the same time, what I write about is rooted in real life, so I didn’t want it to drift too far from the real world. If it looked too much like a game, or leaned too far into analog, it wouldn’t match my featured images.
When I tell AI about points like these that I’m unsure of, it shows me, “Something like this?”
Building with words
So where did I start? By deciding on a design system.
A design system is the world I want to build. It’s also the set of rules (colors, fonts, spacing, and so on) that the whole design follows so it feels like one piece.
PromptMake a design system based on the concept “the atelier of a wizard who lives in the forest.”
Claude Code“A small workshop in the forest.” Quiet, warm, with a bit of a story. Records of learning, making, and building, shown like books lined up on a shelf in the forest.
- Direction: “the forest of zero,” in keeping with the site name 0forest
- Mood: gentle and handmade / fantasy and storybook / clean and thoughtful
- Avoid: vivid primary colors, cramming in information, cold blues, mechanical and stiff design
From here, AI comes up with design ideas.
Once I picked the colors I wanted to use, I had it choose matching colors for dark mode too.
Low contrast makes text hard to read, but AI took care of readability, so choosing was easy.
Then, based on the design system, I had it make a mockup (a sample of what the finished site will look like) of my blog with the new design.
Looking at that mockup, I settled on the details: the layout, the colors, the header, and so on.
Image: AI-generated
These mockups helped so much. Seeing it as a picture brings the idea to life.
I can tell “this is it” or “no, that’s not it, I want to change this.”
Even if I say I love fantasy game worlds, it makes a big difference whether I mean a retro, NES-style UI or something a bit more modern.
Image: AI-generated
This is what came out when I first told a different AI: “Make it look like a fantasy game UI. A blog inspired by the atelier of a wizard in the forest.” Sure, it’s a game UI… but it’s nothing like what I meant!
Handing over the mockup to build
Once the mockup was ready, I had it write the code, and it was done!
It made what I couldn’t make myself
Tilting the post cards a little and adding masking tape was AI’s idea. I was amazed that this can be done with just CSS and code.
The sidebar and post pages are designed to look like stacked cards. (Who knows how long it would take if I wrote that code myself. Ha.)
For the header and footer, I had Claude Code make the images in Canva.
The header is my favorite.
I asked, “Make a header image of a wooden desk by a window looking out on the forest, with books, plants, and a lamp,” and this is what I got.
Image: AI-generated
This blog has a light mode and a dark mode, so the header switches between a morning scene and a night scene.
In the night header, the forest is dark and the lamp is lit.
Image: AI-generated
On top of that, to match the “night forest” concept, AI added lights that slowly drift across the whole page background in dark mode. (Another thing I couldn’t code myself. Ha.)
I made the avatar images for the speech balloons with ChatGPT and Midjourney.
I had them make pixel art of a fantasy girl and a boy with wolf ears.
The pixel art icons I made with ChatGPT.
ChatGPT is easy to use: even from a short description, it picks up on the image most people would imagine.
For some reason, they’re both lost in thought.
Image: AI-generated
My own avatar icon, made with Midjourney.
My impression is that it’s good at artistic illustrations.
Even in pixel art, there’s light coming in from the background and expression in the character’s face. Not what I expected, but I found myself thinking, “I love this.”
Image: AI-generated
Where it took my own hands and eyes
An eye for drawing the line
Adjusting and editing the images wasn’t something I could leave entirely to AI.
I wanted a torn-paper edge under the header, but when I asked AI, it came out as a mechanical zigzag that didn’t quite match what I had in mind.
That’s because AI was trying to do it with a coding effect.
But the random look of paper is hard to get with code.
To get an analog feel, should it be an image, or can code handle it? Deciding how to build it was up to me.
Also, generated images don’t line up neatly, so as they were, the images shifted when switching between morning and night.
That’s because it isn’t one image with its colors changed; each one is a separately generated image.
I adjusted their positions by hand myself.
In the actual work, this might be the only part where I moved my own hands.
The words to ask for one more step
Honestly, with the generated images, I still feel like I want a little something more.
But I don’t know what that something is, or how to put it so it turns into visuals, so I’ve stopped here.
I realized I need the vocabulary to express it as design.
And an eye for the whole
AI covers bugs where things don’t work, but as the user, I need to keep track of what should be consistent across the whole site.
I set up things like the animation when you hover over something with the mouse and the sidebar design by telling AI what I wanted, one at a time.
But deciding on whatever I liked in the moment made the behavior inconsistent across the site.
For example, links turning blue on one page but pink on another. If the same kind of action changes to different colors, it confuses readers.
So I listed the places where the design contradicted itself and made them consistent afterward.
Letting go of skill, what’s left is my will
I don’t have to code anymore.
I don’t have to line up the layout myself.
Even without knowing how, it takes care of everything from the look to how it works.
All I have to do is put “I want this, I want that” into words.
Whatever I can’t get across in words, I can show with a reference image.
What I want to make takes shape in an instant.
It really is that easy.
You can make things now, even without technical skill.
(Of course, knowing helps: it’s easier to work with AI, and things move faster.)
So what’s left for me?
First, the desire: “I want this, I want to make this.”
Things I’d always thought would be handy to have,
but couldn’t make until now because I didn’t know how, or because they took too much work.
I think the will to make something is a driving force that people have.
Next, judging what AI makes.
“Is this really what I mean by ‘nice’?” That’s a call I have to make myself.
Otherwise, what I love and care about won’t come through.
It would end up as one more ordinary piece, the kind AI turns out in bulk.
After letting go of technical skill, what still remains is
“What do I want to make?”
“Is this what I wanted?”
My own will, I think.
More on my blog and using AI, if you’d like:
