skip to main content
Mari Hirano
back

Solo Design Sprint Week 2 - Homemade CMS

I always knew that when I started my own blog, I wanted it to live in my personal website, which was mainly serving as my design portfolio. While I could have simply put the link to my Medium page, I thought it would be better if the blog could fit more natively into my website. For one, it's just a better user experience if users don't have to jump to an external link, and two, having my design work and thoughts (blog) under the same website with consistent design gives both a consistent personality.

What I did I built my own blogging system that turns my Obsidian notes into published posts, which works like a small homemade CMS. I designed the blog's list page and the posts themselves (this page!) in Figma using my website's existing design system, then had Claude build it.

Along the way, I discovered opportunities to use AI to audit my posts, such as checking for grammar, detecting and hiding any sensitive information in screenshots, generating alt text, and detecting and fixing widows/orphans.

I created a system for Claude to automate this auditing process, where it looks for any posts that are marked "ready", applies the changes based on their audit, and creates a report for me to review before publishing.

Obsidian showing a test note called "Audit dry run" in the Ready folder, with date and audited properties above a screenshot of a spending ledger

What I learned Takeaway #1: Don't underestimate the power of design systems This was one of those projects where I re-recognized the value of design systems heavily. Because my past self had built one in Figma and code, designing and building the UI was a breeze.

One potential complexity I noted before building was making sure Markdown formatting, like bold text, borders and quotes, matched the design system. Claude did a beautiful job in mapping them and I felt that moment of magic when I saw Claude's first output looked exactly like what I had in Figma.

A table mapping Obsidian formatting to how it appears on the site: filename to post title, paragraphs to body text, bold, italics, quotes, dividers, images and videos

Takeaway #2: Learn how to act like a manager when working with AI My relationship with AI also had a big shift this week. When I started this project, I knew I wanted to include some form of automation, so the question I was asking myself was "what can I automate?" I quickly started to realize that there was a trap in this question. This question was based on the ability of AI, which is too open-ended. Theoretically, AI could do anything. Instead of giving me clarity, this question led to more mess and confusion.

Who was really in charge here? I was, and I had to start acting like it. That shifted my question to "what if I had an assistant?" instead. This made it clear what I wanted to hand off, what I wanted to see, and how often.

Flowchart of the audit workflow: I write a post in draft and move it to ready; every day at 5pm Claude audits the ready folder, applies fixes and writes a report; I review the audited post and move it to published to preview it locally; then I prompt Claude to publish, which checks for orphans

One of the biggest challenges in AI adoption is people not knowing what to hand off. A few years ago when generative AI was just getting introduced to our lives, I heard someone say those who are in managerial positions will have an easier time adopting AI. I've never been a manager myself, and I often have to remind myself to act like one when interacting with AI. This was one of those projects that challenged me to shift the mindset and improve my relationship with AI.