Kyle Johnston's creative journal

Now

Fri, 20 Jun 2025 17:00:00 GMT

May 2026

Work

Still spending my days as a staff product designer at Etsy. Also serving as an interim product manager for my squad, focusing on improving the web sign in experience.

Life

Picked up a running habit this year. Currently focused on improving my 5k pace and seeing where things go from there.

AI

It’s become a normal part of my coding and prototyping workflow. I’m coaching and learning from colleagues at work. I still don’t use it for generating images, designs, or original writing.

August 2025

Work

Doing a rotation as a product manager at work (in addition to product design work).

Projects

Using the output of my spiral visualizer project to create a second physical piece of art (and working on a writeup for the first piece).

June 2025

Work

I spend my days as a staff product designer at Etsy. Currently, my squad is focused on improving the web homepage. I also collaborate with local nonprofits and friends to bring their ideas to life on the web.

Projects

Using the output of my spiral visualizer project to create a physical piece of art

AI

It’s solidly in the ‘we’ll see’ category for me. It’s not the everything engine. It’s not useless.

I’ve used it to successfully code projects that would never have seen the light of day without the ability to move from idea to working code in a short exchange. Other use cases: proofreader. Vim debugger. Rubber duck debugger. I don’t use it for generating images, designs, or original writing.

Thank you for using RSS! Reply via email or view this post on the web.

Learning Log, April 2026

Fri, 08 May 2026 23:27:59 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Life~Work

Life: I finished my first full 5k run on April 18th! It changed how I think about running. Now I feel like I'm the type of person who can run a 5k on a Saturday. Shorter runs feel even easier. I look forward to the days I run – I think that's a form of a runner's high? Another motivation – noticing things. Like wildlife. Mostly squirrels and common birds – robins, cardinals, chickadees. But sometimes, deer, ducks, turkeys, great blue herons (a whole nesting site!). One time, an owl. Another time, a tiny dog in a stroller, pushed by a dude and his partner/wife/girlfriend. Seeing everything turn green. Seeing what changes the day after a thunderstorm. Anticipating what I might notice is a motivator when I'm on the fence. And trying to finish more 5ks – I have a second under my belt and I'm looking forward to the third.

Work: tl;dr busy, busy, busy. Switched to a new track of product work and I'm acting as an interim product manager for my squad, which prompted me to rethink my productivity system… more on that below.

Projects

Bookshelf updates - I stumbled across an old reading list with 16 books that weren't on my bookshelf. Claude helped to quickly backfill the missing titles.
At work, I've added 'interim PM' to my duties. My productivity system wasn't scaling to support product design, product management, and a new track of work. So I used Claude to help me plan and automate a better system. It was based on my existing tools and workflows, so I was able to start using it right away. It's already making me confident nothing is slipping through the cracks.

Digital gardening

Bookshelf

What We Can Know, by Ian McEwan. – borrowing a great summary from this post: “The book is a wonderful meditation on the relationship between past, present, and future. It is dystopian cli-fi, all undergirded by the plot of a psychological thriller.”
The Wedding People, by Alison Espach. a rec from Chris Glass prompted me to read this next. I enjoyed the dark humor and I wouldn't be surprised to see it adapted as a limited series.

MEMEX

A few favorite visuals that I've added to MEMEX, my swipe file:

Fred Again.. posted photos from his recent USB 2.0 tour – love this shot featuring a beautiful fabric installation by Boris Acket
Designer and artist Matthew Curry has been posting work from his archives – this work from 2016 still hits
nogood.studio – love the illustration style and whole aesthetic of the site
😍 NES-inspired tour posters for Open Mike Eagle's European tour. On tumblr, no less
Micro site for TryAlcove, an app for macOS that makes the notch into a dynamic island. So many nice touches.

Thank you for using RSS! Reply via email or view this post on the web.

Learning Log, March 2026

Sat, 18 Apr 2026 16:05:30 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Life~Work

Life: Celebrated an anniversary. Upgraded a family member from an iPhone 6S(!) to an iPhone 17e, and the running bug is definitely biting. I hit my first-ever 5k in February and finished two more this month.

Work: I had a trip to New York that was 'perfectly' aligned with the TSA funding lapse that drove long security lines and flight delays. My flight out was canceled due to an accident at LGA the night before. Once I made it to New York, it was great to catch up with colleagues in person and the weather was lovely—perfect for drinks on the rooftop. I was also part of a small group invited to join AI for Product Designers, a course by Xinran Ma. Enjoyed it, but I still prefer Claude.

Projects

Built and launched a mobile-optimized bracket tracker for our family March Madness pool. It was fun to make something that solved for such a specific use-case. I learned how to work with Firebase for the backend, and have ideas for how to improve the UI for next year.
Scaling AI tooling was a big focus at work this month. I've been leaning into a prototype-first workflow and helping others do the same. It's been inspiring to see how different people apply the tools to their projects, especially their personal projects.

Digital gardening

Bookshelf

The Spy and the Traitor, by Ben Macintyre. Gripping account of a KGB agent secretly working with MI6.
Timeline, by Michael Crichton. An ahead-of-its-time multiverse thriller. Written in 1999, and it holds up.

MEMEX

A few favorite visuals that I've added to MEMEX, my swipe file:

Thank you for using RSS! Reply via email or view this post on the web.

Massive Bloom

Mon, 13 Apr 2026 00:00:08 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Massive Bloom is a browser-based instrument for creating evolving, atmospheric sonic textures.

View the project ¦ GitHub repo

The inspiration

The project started with a Fred Again.. video about his production process, specifically how Brian Eno's influence led him to layer ambient drones for texture in his music.

The build

I drafted the first plan in early January, spun up the first prototype, and spent the rest of the month just listening.

Taking time to listen helped me realize one of my core development principles—YAGNI (you aren't going to need it)—works for design, too and I started cutting features. You can see the first version of the generator here.

Things I wasn't happy with: It was challenging to produce a pleasant drone sound. The UI was too complicated. Ironically, my original idea included easy mode; just press a button and hear a drone. But it didn't sound great and it lacked surprise—it sounded the same every time.

February was all about iterating the sound and shaping the remaining features. By the end of the month, the features felt more intuitive and the sound was closer to what I'd imagined. That's when I started design.

Once the design was in place, I did light user testing. Seeing people struggle with the first contact led me to simplify the UI, improve the time to first drone, and add guardrails to the sequencer.

It also led to my favorite feature: the URL updates as you change settings. It provides built-in shareability and if you program a sound that you want to hear every day, simply bookmark it. For example: load covers-little-destiny…, press the power button, and listen to the sound unfold.

The visual evolution

The future

Since launch, I've started experimenting with new sounds—classic piano, organ, kick drum. But I'm taking it slow and living with the sounds before shipping.

Thank you for using RSS! Reply via email or view this post on the web.

CLAUDE.md best practices

Sun, 15 Mar 2026 22:59:32 GMT

Note: this will post will evolve as I learn more about CLAUDE.md files, best practices, and how those things evolve over time.

Key ideas

Structure: create a CLAUDE.md in ~/.claude/ (loads globally), then add domain- and project-level files relative to where you keep your work.
Creation: let Claude write them.
Upkeep: keep them lean.

✱ Structure: where to organize CLAUDE.md files

~/.claude/CLAUDE.md (global, loads everywhere)
└ universal identity, communication preferences, and behavioral rules
└ location (macOS): your home folder
└ in Terminal, view with: cd ~/.claude/ && open .

[domain]/CLAUDE.md (shared context across related projects)
├ domain conventions, constraints, dependencies
├ optional, but useful if projects share context
└ location: relative to wherever you keep your work

[domain]/[project]/CLAUDE.md (current goals, active constraints)
├ current goals, active constraints, key dates
└ location: relative to wherever you keep your work

Examples

My global CLAUDE.md file (view on GitHub) contains frontend development princples, and an instruction to capture lessons as I guide the system, like when I make corrections, cite preferences, etc.

A project-level CLAUDE.md might explain the purpose of the project, plus how to build, test, deploy, etc. And if the project-level file conflicts with the global file, the more specific file takes priority.

For example, if I started a project that uses Next.js (which would conflict with my global frontend development principles to avoid frameworks), the project-level CLAUDE.md is more specific, so it takes priority.

✱ Creation: how to write CLAUDE.md files

Note: You can replace any of these examples with /init. Everything happens automatically, but you should review the output. Using these examples as a starting point may help you understand what’s happening under the hood.

Excerpts from Hannah Stulberg’s extensive guide to Claude Code

Method 1: Plan mode interview

Use this when you have context in your head but no docs:

I want to generate a CLAUDE.md file for [folder name]. Interview me to understand what you’d need to work effectively there. Ask me questions about the project, the people involved, and how I want things done. Then draft the file based on my answers.

Method 2: Load the docs, then generate

Use this when you have existing documentation, but no CLAUDE.md:

Read through the files in [folder name] and generate a CLAUDE.md file for that folder. Focus on what you’d need to know to work effectively there: what this is, who’s involved, key decisions that have been made, and where to find things.

Method 3: Generate from a session

Use this when you’ve finished a working session:

We just did a lot of work in this area. Generate a CLAUDE.md file for this folder based on everything we covered. Focus on context that would be useful at the start of any future session here, and ask me about any context you’re not sure is relevant to future work.

✱ Upkeep: keeping CLAUDE.md lean

After a big working session. Before you close the session, ask:

Based on the work we just did, does the CLAUDE.md for [folder name] need to be updated with any new context?

When you keep re-explaining the same thing
If you find yourself giving Claude the same context at the start of every session—who someone is, what a project is about, how you want something done—that context belongs in a CLAUDE.md file. Tell Claude to add it:

I keep having to explain [X] every session. Update the CLAUDE.md for [folder name] so you have that context automatically.

Let Claude sort it out

Look at the CLAUDE.md files in this project. Are any of them too long, redundant, or loading context that I probably don’t need every session? Suggest how to trim them down.

Sources

Anthropic Docs: Understanding system prompts
Claude.com: Using CLAUDE.md files
Claude Code for Everything by Hannah Stulberg — a comprehensive, step-by-step guide. A great place to start if you’re new to Claude Code or want to deepen your knowledge.
reddit: Claude Code is a beast — assumes a lot of domain knowledge, but sparked my curiosity about this topic.

Thank you for using RSS! Reply via email or view this post on the web.

Learning Log, February 2026

Wed, 04 Mar 2026 15:34:37 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Work~Life

My goal of walking or cycling most days has slowly evolved into a running goal. And somehow I managed to complete my first continuous 1-mile run and a 5k run/walk on the same day.

Projects

Launched Massive Bloom, my ambient drone generator project. It's a browser-based instrument for creating evolving, atmospheric drone sounds and textures. I started with a proof of concept in January and spent the past two weeks sweating the details of the sound, design, naming, etc. I'm happy with how this turned out… full writeup coming soon.
Completed a Digital Ocean server migration. I pruned defunct projects, moved to a smaller droplet, etc. I'd been putting it off until I asked Claude Code to draft a step-by-step migration – that was the push I needed. It was as time-consuming as my last migration (chunks of time over a long weekend), but I felt more confident with Claude Code available to troubleshoot issues and answer questions.
As part of the server migration, I uploaded an archive of one of my original blogs—Curiosities by flow14—it captures the design takes and the simpler times of 2006–2014.

Workflow

Last month, I mentioned LeaderKey, a wonderfully flexible launcher for MacOS made by Mikkel Malmberg. Shortly after that post, Mikkel launched Tuna. It's an even better launcher (and it includes LeaderKey features). It's deeply inspired by Quicksilver, which was a precursor to launchers like Alfred, Spotlight, and Raycast. If you're curious, Mikkel's launch video may charm you into trying it.

Digital gardening

Bookshelf

Both of this months books are sci-fi adjacent, and both are excellent.

A Psalm for the Wild-Built, by Becky Chambers. A cozy and thoughtful story of a monk on a self-discovery journey who meets a robot that's been living in the wilderness ever since robots gained self-awareness and ditched humans.
Shark Heart, a Love Story, by Emily Habeck. In which newlyweds navigate a rare diagnosis where the husband turns into a great white shark. A very strange premise, but very well written.

MEMEX

A few favorite visuals that I've added to MEMEX, my swipe file:

A copywriter's wonderfully worded job application from 1934. Can't recall where I stumbled across this, but searching the name should uncover the backstory.
“As you start to walk on the way, the way appears” captured the vibe of this year so far
bimmi packaging — by Bedow. Love how the overlapping monospaced type creates texture.
Paint packed and shipped in a fully sustainable container 😍 – by PiortWorks
A tiny layout— a thing which I didn't have a name for—until I ran across this Are.na channel

Thank you for using RSS! Reply via email or view this post on the web.

Learning Log, January 2026

Tue, 03 Feb 2026 21:10:37 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Work~Life

Work picked up in January after a planning and strategy-filled December.

I picked up a new office chair. It's been on my wishlist for a while and a use-it-or-list-it flexible spending account balance gave a good excuse to finally get it.

I started a new art project that I hope to finish this month.

And despite the bitter cold, I've kept up with daily walks (layering works!). After healing from a dumb knee injury early last year, I've been diligent about walking or cycling nearly every day. I've found it's a great way to clear my mind, especially after a long day of work.

Projects

Started creating an ambient drone generator. I'm a big fan of Fred again's music, and I wanted to create a browser-based version of the drones he uses under some of his music. The prototype works well, so now I'm working through ways to refine the sound and introduce more randomness.
Converted my professional portfolio to Astro. This will make it easier to redesign—a project for a future month.
Wrote a quick til on adding project hints to your terminal.

Workflow

I've been using LeaderKey for a while and I've been finding more and more uses for it. It's an endlessly-flexible launcher for macOS made by the entertaining Mikkel Malmberg. It can launch almost anything—apps, links, folders, scripts, even other launchers like Raycast.

Digital gardening

Bookshelf

Hum by Helen Phillips. Near-future dystopian vibes with an interesting premise involving AI, intelligent robots, and who can afford to escape it all. The ending fell flat for me, but I enjoyed reading it.
The Courage to Start by John Bingham. Reads like a long blog post (meh), but I did save this bit: "I was able to develop a dynamic definition of success that took into account the reality of the moment. On some days, I succeeded just by getting out the door for a run. On others, success was measured by how hard I pushed myself during a tempo run or track workout. The side effect of focusing on what I was feeling was that words like “winning” and “losing” were replaced by words like “doing” and “becoming” in my vocabulary."
The Ministry of Time by Kaliane Bradley. Really enjoyed this one. The gist: a government ministry in London recruits “expats” from across history to study the effects of time travel and how they adapt to modern life. I'd be surprised if this isn't adapted for streaming.

MEMEX

A few favorite visuals that I've added to MEMEX, my ever-growing swipe file:

MINI × DEUS – might have saved every image from this case study
Shape of Words — I like how the handwritten type brings out the texture
Vintage price stickers — from Flickr!
diarte . brand – the offset dot (and the meaning behind it) caught my eye

Thank you for using RSS! Reply via email or view this post on the web.

Add project hints to your terminal

Sat, 24 Jan 2026 22:33:17 GMT

Inspired by this post from Ashur, I created a CLI-based workflow to quickly add, edit, and publish content in a couple of my Astro-based projects.

Knowing future me, there’s a good chance I’ll forget to use this workflow in the future. So I asked Claude Code if there’s a way to see hints in my terminal when I cd to a project directory.

Claude recommended a couple of options, the simplest being a .project-hint file.

How to add project-specific hints

First, I added this snippet to my .zshrc file:

# Show project hints when entering directories
  cd() {
    builtin cd "$@" || return
    if [[ -f ".project-hint" ]]; then
      cat ".project-hint"
    fi
  }

This function wraps cd to look for a file named .project-hint in the current directory. If it finds that file, it displays the contents in the terminal. Now, when I cd to this project, I automatically see this hint:

✏️ POST ADMIN CLI AVAILABLE!
   npm run admin        - Interactive CLI
   npm run post:create  - create a new post
   npm run post:select  - edit a post
   npm run post:publish - publish a post

And when I type npm run admin it kicks off a workflow:

◆  What would you like to do?
│  ● Create (Create a new draft post)
│  ○ Publish
│  ○ Select

I can quickly navigate a few questions with my keyboard. Once I’m done, a fresh draft opens my editor of choice, pre-populated with a title, date, category, and more.

Thank you for using RSS! Reply via email or view this post on the web.

Endless Mew Scroller

Mon, 17 Nov 2025 19:00:00 GMT

This project started with a thought captured in my spark file: Endless Doom Scroller, but kittens?

View the project ¦ GitHub repo

That thought lingered in my spark file until Claude Code on the Web came along. This project felt like a perfect way to kick the tires.

I started with a design doc—created with the help of Obra’s superpowers—and pointed Claude Code Web to a fresh repo with this prompt: Follow the design doc in this repo and create a working prototype. The preferred API is cataas.com. But I may want to test thecatapi.com. Any questions?

I answered a few questions, went to sleep while Claude churned, and woke up to a working prototype! Exciting? Ye… not so fast!

Before declaring it a one shot, I tried a new prompt shared by a distinguished engineer at work: If you were going to re-implement this entire feature we added on this branch cleanly, which findings were non-obvious or surprising and what would you do differently?

Claude’s responses were surprising:

I’m not actually using the API properly (Biggest issue!)
Didn’t implement srcset (You specifically asked for it!)

Oh my. That day, I learned Claude Code Web isn’t as diligent about following design docs as its CLI counterpart. After a few more rounds of prompts to resolve the issues followed by design refinements, the Endless Mew Scroller launched.

Now, if you need a break from the algorithmic feeds, you can scroll cats!

Homepage

Tools used

Claude Code (pro plan) + Superpowers for planning (free)
Claude Code on the Web for development (pro plan)
TheCatAPI for the endless cats (free)
GitHub for hosting the code (free)
Cloudflare for serving the site (free)

Check out EndlessMewScroller

Thank you for using RSS! Reply via email or view this post on the web.

Learning Log, December 2025

Thu, 08 Jan 2026 19:00:00 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Life-wise, it was a pretty chill month. We had a mid-month family get-together for a three-in-one celebration; the holidays, a birthday, and my parents' anniversary. The festivities started with light snow and an impressive Titanic exhibition. We closed the day with a wonderful dinner in a castle where the owner was kind enough to bake a custom-made anniversary cake for dessert.

Projects

Built notebin for myself. It's a super minimal web app that's made for quick, transitory notes – no organization or syncing. This was an idea I'd had in my backlog for a long time. Since I've been testing Claude Code with superpowers, I was able to build, launch, and test iterations in no time. Which is a trend I've seen from other people using Claude Code… curious to see how quickly this evolves in 2026.
Built a book cover search tool, another just-for-me project. This one allows me to search for high-res book covers that I use to populate my bookshelf. It's a simple HTML file that runs locally and works like a dream.

Digital gardening

Bookshelf

A Conspiracy of Tall Men by Noah Hawley. Noah's first book and (I realized) the third book of his I've read. I guess that makes me a fan? Other writing credits he's known for include the Fargo TV series, Alien: Earth, etc.
The DaVinci Code by Dan Brown. The book adds color and nuance that didn't make the cut in the movie adaptation.
Things Become Other Things by Craig Mod. I picked this up when it was on sale briefly in November-ish and really enjoyed the book.

MEMEX

A few favorite visuals that I've added to MEMEX, my ever-growing swipe file:

Nieman Lab's Predictions for Journalism 2026. I've been drawn to card-based designs for a while, so this was an easy add.
Stüssy Spring 2023 collection. The framing of the subject caught my eye.
Too Due list by Andrew Neyer. Pro tip: Andrew's shop rewards a deep dive.
Tyco catalog cover. The marker-texture and sense of movement made me save this one.

N.B. Inspiration for this post format comes from Melanie Richards' monthly learning logs.

Thank you for using RSS! Reply via email or view this post on the web.

Tools I use every day—that I made

Wed, 03 Dec 2025 19:00:00 GMT

I’m in the ‘we’ll see’ camp about LLMs in general. But for coding—especially bite-size projects—I’m bullish on the idea that there’s never been a better or easier time to explore and build.

Two months ago, I decided to try Claude Pro and put it through its paces against my backlog of ideas. I’ve made projects tailored to my tastes; local-first tools that improve my workflow; simple prototypes to share ideas; I’ve launched long-simmering ideas that felt beyond my reach. In that time, I’ve learned that I wouldn’t reach for an LLM to create something that serves a large audience. But tools just for me or a small audience have been a sweet spot.

Here are a few of the just-for-me projects I’ve built:

A web app for capturing transitory notes. My original idea (seven years ago) was to build this as an iOS app. But after creating a few of these projects, I realized that a web app would do everything I needed. So on a lazy Sunday I created it and started using it the same day.
A daily RSS to email digest. Each morning, I wake up to an email with posts from blogs I follow. It’s powered by a Python script in GitHub that populates the email with any feeds updated in the past 24 hours. I can read at my pace and know I’m not missing anything.
Book cover search. Inspired by Gina Trapani’s just for me’ Cover Search project, this tool (a single, local HTML file) allows me to search for high-res book covers that I use to populate my bookshelf.
An ‘on this day’ email digest. I converted 12+ years of DayOne journal entries to a single markdown file (file over app!). But I missed DayOne’s ‘on this day’ feature, so I recreated it with Python. Now, each morning I get an email with journal entries from past years. A daily stroll down memory lane.

I’m still figuring out what ‘making’ means when Claude writes most of the code, but when I open my RSS digest each morning or take a quick note when I’m out on a walk, it feels good to use tools that fit me perfectly.

Thank you for using RSS! Reply via email or view this post on the web.

Stop drawing vases with AI

Thu, 25 Sep 2025 19:00:00 GMT

Generally, I steer clear of tech-focused nonfiction books. Especially those that purport to dispense advice. Too much fluff. Too many pages of stories that attempt to reiterate the same point again and again, in slightly different ways to pad their page counts.

Greg Storey’s new book, Creative Intelligence, has a strong point of view and no BS. It has content you can use right away, from ready-to-use prompts that spark your thinking to thoughtful advice for evaluating and improving your collaboration with LLMs.

At its core, Creative Intelligence is about learning to work with AI as a thinking partner rather than using it as a vending machine that replaces your thinking.

Greg starts off with a strong example from a classic brainstorm exercise. The exercise starts with the instruction, “Spend thirty seconds and draw a flower vase.” The results are predictable. The follow-up prompt, “Spend two minutes creating an experience for enjoying flowers”—is where you see creative ideas and out-of-the-box thinking. Greg’s point in this example is that many people are using billion-dollar tech to draw vases. The purpose of the book is to consistently push yourself to that second step in order to stretch your thinking, challenge assumptions, and discover unexpected insights.

A few concepts from the book that have stuck with me:

Positioning yourself as a subject matter amateur. Use AI to test your domain knowledge, not just fetch facts. At work, I happened to start a product manager rotation shortly after reading the book. I used one of the exercises to quiz myself about the extent of my PM knowledge. That helped me prioritize the skills I needed to develop and reach out to people with expertise in the areas where I needed more coaching.
Using different thinking modes. As a designer, convergent and divergent thinking is a natural part of my process. In the book, Greg details five cognitive modes that map to divergent and convergent thinking with examples of how and when to use them to unlock better results. I’ve found these really helpful at different parts of my design process to think more deeply about my work and sharpen my ideas.
Thinking in cycles. Instead of trying for a one-shot, focus on a collaborative loop—engage → generate → evaluate → refine → apply—to deepen understanding and uncover insights.
Creating a collaboration profile. You can use the profile to coach LLMs on how to respond in a way that works with how you think and process information. Think: your preferred structure, pace, and level of experience.

These are just a few takeaways, but each one is an example of how Greg’s book has changed how I use AI day-to-day. Whether you’re just figuring out how to incorporate AI into your workflow or you’re experienced with navigating LLMs and want to push into new territories, I’d highly recommend this book.

Where to get it

Greg’s website, BrilliantCrank.com has links to all the places to buy the book. There’s even a free chapter if you’re on the fence.

Thank you for using RSS! Reply via email or view this post on the web.

Public bathrooms 🤝 Liquid Glass

Mon, 08 Sep 2025 19:00:00 GMT

Quick! Find the active UI element in the Apple Music screens below. If it took you more than a second or you couldn’t spot it, you’re not alone.

Also, it’s a trick question. Because even though you navigate to this screen by tapping the search button, there’s nothing active on landing and it’s not immediately clear what you should do next.

I don’t know about you, but when I tap search, I expect the search field to have focus. Or, at a minimum, I don’t expect to hunt for the search field. But this usability flaw paired with Liquid Glass and its low contrast aesthetic—especially when it’s on a busy background—frustrates me every time I land on this screen.

I’m here to share an idea that honors the core concepts of Liquid Glass, but extends the metaphor to demonstrate a relatively easy way to create a more usable UI.

Inspiration from the real world

Let’s start with a real-world example. This is a public bathroom in Tokyo. Note the clear, colorful glass. Clear glass and public bathrooms seem like an odd combination. But as soon as you lock the door, the glass becomes opaque, giving you privacy and clearly signaling the bathroom is in use. There are usability issues with this solution (and lots of user skepticism), but let’s focus on a key concept: when you demonstrate your intent to use the bathroom by locking the door, your action results in a clear change in the material. It’s a state change that reflects the needs and goals of the user.

Making liquid glass smarter

Let’s consider how applying a key concept from Tokyo’s smart glass bathrooms could improve Apple’s Liquid Glass UX. When you signal an intent, like tapping the search button in Apple Music, let’s see what it might look like to change the UI to reflect your needs and goals.

Current state

With a more visible search bar

In this example, I’ve made two small changes. First, I’ve made the search bar almost opaque. It’s not fully opaque like the public bathrooms in Tokyo, but in this context, the change adds enough visual contrast with the competing elements to make the search bar clearly visible. Second, I made the text darker, which provides an accessible level of contrast.

From a UX perspective, these changes make the key action (search) clearer without distracting from other content on the screen. And if your intent changes—say you start to scroll through the genres—the search bar could respond to that action and change to a low-contrast, transparent state.

One more thing

Exploring iOS 26, design patterns from Photos and Mail point to an even better solution. You tap the search icon and you see… an active search field. Wow!

Let’s see how that might look in Apple Music. It’s worth noting this screen does have a complex set of options, including a toggle to search Apple Music or your library, listing recent searches, and highlighting popular genres. However, defaulting to an active search field doesn’t get in the way of these options, and it makes searching much easier.

Current state

What if active search was the default?

I know Liquid Glass will continue to evolve. I hope this demonstrates how cues from the real world can improve the UX while honoring the core concepts of the new UI.

Thank you for using RSS! Reply via email or view this post on the web.

MEMEX, AUG ‘25 EDITION

Sun, 10 Aug 2025 19:00:00 GMT

This post includes an interactive image gallery — view it on the web for the full experience.

Pulled from MEMEX, a tool I built to collect visual inspiration.

Sources:

ADC Awards pattern by Mullen Lowe Design Studio via BrandNew
Normal Computing t-shirt by Company Policy via BrandNew
Pavel Ripley paper scrap collage
Portugalia Coaster - ???
DIY bookcase
En Iwamura sculpture
Esperanza Font by LaborAndWait.xyz
Grace Mitchell - White Iverson cover
Host Grotesk font sample
100 Ways to Improve Your Writing - ??? but based on Gary Provost's book
La Tour Eiffel logo by Les Zinc via BrandNew
Noah Kalina zine
Open Mike Eagle tour poster
Orville Wright pilot's license - ???
Pavel Ripley collage
Popeyemagazine.Jp
Sable Illustration
Stabilo ad
TimePeek.App
Tucker Nichols, Mostly Everything
Websites Done Cheap
When I Believe It - ???
Why Architects custom type by Need.
WritingExamples.com

Thank you for using RSS! Reply via email or view this post on the web.

Halucidations

Sat, 26 Jul 2025 19:00:00 GMT

This project started with an idea and this prompt to ChatGPT:

Write 10 short inspirational quotes or phrases. At a glance, they should read profound, but on closer inspection, they make no sense

Which resulted in a promising start:

Sure! Here are 10 short inspirational quotes that *sound* deep at first—but if you think too hard about them, they unravel into delightful nonsense:  
Chase the horizon until the sky turns inside out // Be the echo of your own silence // When the clock forgets time, you’ll remember truth // Only a still river knows how to climb // Grow roots in the wind, and the storm becomes home // To leap is to arrive before you begin // The loudest whispers carve the deepest shadows // You are the footprint of a thought not yet walked // Melt your boundaries in the furnace of maybe // Balance is just falling in every direction at once

From that seed, I generated a lot more nonsense phrases (100+) and transformed them into a simple site with this prompt:

I’d like to turn these into a simple web page that displays one quote at a time. Visually, the quote appears on something that looks like tissue paper. Something with an ephemeral vibe. Serif type. Soft, pastel color scheme. Maybe a blobby animated gradient in the background. There’s a ‘next’ button at the bottom of the screen to load the next phrase. Before you give me the answer, ask me everything you need to know to give me the best result possible.

Note: I’ve found finishing a prompt with this phrase — Before you give me the answer, ask me everything you need to know to give me the best result possible. — acts as a requirements-gathering step that really clarifies intent and vision.

In this case, it helped me clarify details like the quotes should be randomized and stored in a way that lets me easily add more over time; where I planned to host the site; the language and framework I wanted to use; and a feature or two that I ended up dropping, like a share button.

ChatGPT’s output was a zip file with the HTML, CSS, and JavaScript files that I could use to test and tweak locally. I refined the CSS and typography to my tastes, prompted ChatGPT to add swipe support on mobile, then named and launched the site. Easy peasy.

View the project ¦ GitHub repo

Halucidations

All in, this project took 1–2 hours to complete. One surprising detail of using ChatGPT for this; it would suggest features. For example, I asked ChatGPT to add swipe support on mobile. In addition to the code, it asked if I wanted to add haptic/tactile feedback or animations on swipe. I found out later that’s only supported on Android, but I liked the suggestion.

Tools used

ChatGPT for generating the quotes and the initial HTML/CSS/JS. (free)
VS Code for editing the code and making refinements. (free)
GitHub for hosting the code. (free)
Cloudflare for serving the site. (free)

Check out Halucidations

Thank you for using RSS! Reply via email or view this post on the web.

Unlocks for side projects

Mon, 07 Jul 2025 19:00:00 GMT

Capturing ideas

The biggest unlock is the simplest. Capture every idea. I keep a spark file (inspired by Steven Johnson’s technique). When inspiration strikes—like an idea for a new project or a feature for an existing project—I add it to the top of my spark file. I have a monthly reminder to review the file, and I scan it from top to bottom. Some ideas still seem good, but I might not have the time, tools, or skills to bring them to life. Other ideas don’t make sense anymore (in the ‘what was I thinking’ sense). I don’t remove anything from the list. If an idea leads to a project, I give it a checkmark and maybe add a launch date.

Here’s a random sample of three ideas from my spark file:

Use my markdown-based journal to generate a daily ‘on this day’ email. I created a working prototype, but haven’t finished it.
Create a macOS app that highlights the current active window (helpful when I’m using multiple displays).
Domain ideas for side projects. I find it’s better to write down ideas rather than buy and hoard domains I may never use. Not that I don’t own a bunch of domains I’ll never use…

(For the productivity nerds, I manage my list in Obsidian and use Things for recurring reminders.)

Visual inspiration and design

MEMEX is one of my side projects I use to this day. It’s my personal collection of visual inspiration. Kind of a private, self-hosted Pinterest. When I’m starting a project, I grab visuals from MEMEX and create a mood board in my current design tool of choice…

Figma. If you’re reading this, you’ve probably heard of it. For my side projects, I use a scratchpad file to build mood boards and explore design ideas. If I get serious about an idea, I’ll move it to its own file. For example, here’s my Figma file for this site.

Prototyping and building

When I want to see something in a browser as quickly as possible, I reach for Laravel Herd. On macOS, I open the ~/Sites/ folder, add a new folder (like myidea), add an index.html file, and view the page in a browser at myidea.test. I used Herd to make almost all the sites on my project page.

For more complex projects—like this site—Astro is my favorite web framework for building content-heavy sites. Even their basic starter makes it easy to start a new project and focus on building. If an idea leads somewhere, I can easily layer on design and features and launch the project. Astro powers my bookshelf and a recipe site.

Hosting

When I’m ready to launch, I point Cloudflare Pages to my GitHub repo and the project is automatically deployed. I have used Netlify and Vercel (both great), but I prefer Cloudflare. They have a generous free tier that’s perfect for the scale of my projects and they offer low-cost domain registrations so I can manage everything in one place.

That’s it. That’s the list. A modest set of techniques and tools that help me create side projects. Maybe they’ll help you create yours, too.

Thank you for using RSS! Reply via email or view this post on the web.

Full-text feed in Astro

Wed, 02 Jul 2025 19:00:00 GMT

Today I learned how to generate a full-text RSS feed in Astro! It handles both Markdown and MDX files. And most importantly, it handles any images or inline components used in those files.

tl;dr I used this code from Chris Swithinbank. It works by rendering any posts in a content collection, then pipes that content to Astro’s native RSS function. And it works like a charm.

One gotcha I ran into implementing this: I followed Astro’s documentation for implementing a feed. They recommend creating a rss.xml.js file. Chris’s solution includes type-checking, so the code didn’t work until I renamed the file rss.xml.ts.

Obviously I had to customize details tailored to my environment. I also added a filter for draft posts, so those don’t get published to the feed, along with sorting by pubDate or tendDate, the latter of which I use to note when a post is updated.

The frustrating journey to get here

I’m using both Markdown and MDX files for my posts, which made this challenging to figure out.

Astro’s official documentation for generating a basic RSS feed does handle both Markdown and MDX files, but it won’t generate a full-text feed. They describe a method for generating a full-text feed, but it only handles Markdown files.

I tried (and failed) to vibe code a solution using a combination of CoPilot (Claude Sonnet 3.5), Claude Sonnet 4, and the model native to Dia’s chat feature. They all got close – some with wonderfully complicated approaches – but they all failed when it came to handling the complexities of MDX files, namely the imports and images (i.e. embedded components) I’m using.

Eventually, I found the answer in Astro’s Discord. A simple search for ‘full-text rss’ pointed me to Chris’s solution.

My next step is to investigate why this isn’t part of Astro’s documentation. Based on my frustrated searches, many others have wrestled with this question.

Thank you for using RSS! Reply via email or view this post on the web.

My Figma workflow atm

Mon, 23 Jun 2025 19:00:00 GMT

At work, a fellow product designer asked how other designers structure their Figma files to support collaboration and how we flow from roving design explorations to focused design specifications.

In this post, I’ll cover how I organize my files, how I structure pages within those files, and how I move from design explorations to dev handoff.

Context setting

We work in squads, which consist of a designer, product manager (PM), engineering manager, and 6-ish engineers. Each squad has a particular focus area and squads delivering on similar tracks of work are organized into groups. Which is important for the next bit, collaboration.

Who do I collaborate with?

Multiple times a week, I share ideas and designs with my squad. I also join weekly critiques with the other product designers in my group where we share work and feedback. There are other touch points, but these key interactions shape how I think about organizing my work in Figma.

How I organize my Figma files

There are two ways I organized files, determined by the needs of the squad I’m working with.

My primary squad works across several pages on the website, developing experiments and features scoped to a page. I’ve found the best approach is to sort my designs explorations into page-specific files. I might have a Figma file dedicated to the homepage, another for the product page, and so on.

Why this works we run a lot of experiments. This structure helps me quickly find the right designs when I’m sharing work in progress or getting feedback. It also limits the number of files I need to manage and makes it simple for my squad to find what they’re looking for because there’s one place to look.

Occasionally, I work with other squads who need design support and I adapt my approach. For example, I worked with an App squad who focused on a specific screen on iOS. Given the way the squad worked, I found it was best to create one file per feature or experiment.

How I organize pages in each file

I use a combination of sections for different stages of the design process, and pages for each project and steps (we have a custom plugin to automatically create these sections):

The sections

Discovery – includes pages for research and data, past work, and audits. Anything relevant to our track of work.
Design – the busiest section of any file. Each experiment or feature gets its own page, sorted by date and topic (e.g. 2025-JUN · Feature exploration).
Review – when I’m ready to share work for feedback, I’ll create a new page in this section and copy a specific design and relevant context from the design section. This helps focus the feedback because people don’t have to hunt through all my design explorations. It also helps me keep track of any feedback (in the form of comments in Figma).
Design specs – this is the handoff to engineers, and source of truth for what we build. I’ll cover this in more detail in the next section.

Design explorations

On each design page in my file, a single exploration may go through several rounds of changes and refinements – starting with a bunch of exploratory concepts all the way through the final design we’ve agreed to build. All those designs are contained on a single page, grouped using Figma’s sections. Keeping everything on a single page allows me to grab elements I want to reuse and makes it easy for others to reference earlier ideas when we’re weighing different treatments. Using sections allows me to share links to specific stages and tailor what I’m sharing based on who will be looking at the work and the type of feedback I need. This is a great way to see how designs evolve based on all the thoughtful feedback people share – I can see how designs and ideas get sharper as they move through the process.

How I prep designs for handoff

When we agree a design is done and ready to hand off for development, I create a new page under design specs. I name each page using a ticket number and experiment title (ENG-2424 · Feature name). Each page includes the treatment and control designs, page-level specs, specs for key features on the page, any states we need to account for, and specs for up to six breakpoints. Each of these are grouped into sections so I can point people to the right place.

I arrived at this process through a combination of experience and by applying a design process to my design process. If I have trouble finding a design or notice others getting lost or confused – I note that as a signal there’s room for improvement. Like any good design process, I take time to think through what’s working and not working, iterate on the system, and observe whether my changes helped improve collaboration.

Thank you for using RSS! Reply via email or view this post on the web.

The Wadsworth Constant

Sat, 03 May 2025 19:00:00 GMT

The Wadsworth Constant says that you can safely skip the first 30% of anything you see online. (It was meant for YouTube videos, but it applies just as well to writing).
This is one of those annoying pieces of advice that remains applicable even after you know it. Somehow, whenever I finish a draft, my first few paragraphs almost always contain ideas that were necessary for writing the rest of the piece, but that aren’t necessary for understanding it. It’s like I’m giving someone a tour of my hometown and I start by showing them all the dead ends.

Via this excellent post, 28 slightly rude notes on writing.

Soon after I learned about the Wadsworth Constant, I spotted it in a big list of eponymous laws.

This also relates to a communication principle from the military I learned recently, BLUF, or bottom line up front. Meaning communicate key information first. Which goes against the Wadwworth Constant, but now those ideas are connected in my mind.

Thank you for using RSS! Reply via email or view this post on the web.

‘Before you answer…’

Wed, 02 Apr 2025 19:00:00 GMT

TIL you can greatly improve the quality of an answer you get from an LLM if you include this in your prompt: Before you give me the answer, ask me everything you need to know to give me the best result possible.

Using this technique, I’ve found cases where I had the answer all along and explaining things to the LLM helped me find it. Which I’ve since learned is basically rubber duck programming.

Thank you for using RSS! Reply via email or view this post on the web.

Spiral Visualizer

Sat, 08 Feb 2025 19:00:00 GMT

This is a web-based project I created (with the help of an LLM) to support a concept I have for an art project. The visualizer’s controls allow me to play with the parameters of a Vogel spiral and see in real time how they affect the shape. Once I find a shape I like, I can export it as an SVG to use in other contexts.

View the project ¦ GitHub repo

How I collaborated with AI in this project

I tried to create this project on my own with Processing, but I never had luck with producing the fine-grained controls. When I discovered Claude Artifacts, I was able to build a web-based tool with a few simple prompts. Once the bones were in place, I took over and customized the design, defaults, and outputs to suit the needs of my project.

What’s a Vogel Spiral?

A Vogel spiral is a pattern of points spiraling outward in a very natural, super-efficient way, based on the golden angle. It was described by the German biophysicist Helmut Vogel in 1979 when he was modeling sunflower seed arrangements.

Tools used

Claude for generating the HTML/CSS/JS. (free)
VS Code for editing the code and making refinements. (free)
GitHub for hosting the code. (free)
Cloudflare for serving the site. (free)

Check out the Spiral Visualizer

Thank you for using RSS! Reply via email or view this post on the web.

WordWiz

Mon, 01 Jul 2024 19:00:00 GMT

WordWiz is a word game I created in 2024. It’s a simple game where you choose a letter then add as many words as you can think of that start with that letter.

View the project ¦ GitHub repo

The concept

The idea for the game was inspired by a newly-retired family member who wanted a fun, casual way to keep their mind sharp, but didn’t like the competitiveness or complexity of other popular word games.

How LLMs unlocked this project

We had joked about finding a game where you type as many words as you could think of. I built a simple proof of concept with ChatGPT to test the mechanics of the idea. From that seed, I quickly iterated and added features like score tracking, an optional timer, and motivational phrases provided by ElevenLabs.

Once the core features were in place, I took over and customized the design. I created a logo and color scheme and optimized the design for desktop and mobile browsers. The game was well-received and at least one person in the world enjoys playing it each day!

Tools used

ChatGPT & Claude for core game functionality. (free)
Figma for design and branding. (pro plan)
VS Code for frontend code. (free)
GitHub for hosting the code. (free)
Cloudflare for serving the site and domain registration. (free hosting, $11.18 for the domain)

Check out WordWiz

Thank you for using RSS! Reply via email or view this post on the web.

.new & multiple accounts

Sat, 03 Jun 2023 19:00:00 GMT

TIL if you use Google’s .new URLs – like docs.new or sheets.new – and you have multiple Google accounts, you can choose which account is used for new files by using: docs.new/1, docs.new/2, etc.

Thank you for using RSS! Reply via email or view this post on the web.

t000.day

Tue, 18 Apr 2023 19:00:00 GMT

t000.day is a single-serving site that answers a simple question: what day of the year is it?

View the project ¦ GitHub repo

The idea for this project was inspired by a frustration with my 365 photo project. Occasionally, I would lose track of the day and I needed a quick and simple way to get back on track. There are plenty sites with this information, but they’re often either (A) poorly designed or (B) loaded down with extra content like ads.

How LLMs unlocked this project

When LLM-based coding tools hit the scene, I dusted off this idea and used ChatGPT to turn it into a super-simple, working site. Under the hood, it’s bascially an HTML file with few JavaScript functions. The JavaScript determines the date, adds the correct suffix, and renders it on the page.

Since launching, I’ve added a few quality-of-life features, like parsing the day based on the URL. Now, I can add any date to the URL (starting in 1900) and see what the day was (or will be).

Tools used

Figma for exploring designs. (pro plan)
ChatGPT & Claude for JavaScript-based date calculations. (free)
VS Code for editing the code and making refinements. (free)
GitHub for hosting the code. (free)
Cloudflare for serving the site and domain registration. (free hosting, $10.18 for the domain)

Check out t000.day

Thank you for using RSS! Reply via email or view this post on the web.

Bookshelf

Thu, 01 Sep 2022 19:00:00 GMT

I created a bookshelf to track the books I’ve read since I started tracking my reading in 2009-ish. It’s a custom design, built with Astro, my current favorite web framework.

View the project ¦ GitHub repo

Homepage

Book detail page

Since launching the site in 2022, I’ve continued to tinker with it and add features. I’ve added search, pagination, page transitions, a list view, and more.

If you’re curious about the design and tooling, the about page has all the details. And the source code is available on GitHub.

Tools used

Figma for design explorations. (pro plan)
Astro for compiling and building the static site. (free)
VS Code for frontend code. (free)
GitHub for hosting the code. (free)
Cloudflare for serving the site. (free)

Check out my bookshelf

Thank you for using RSS! Reply via email or view this post on the web.

Sketching with Code

Wed, 31 Oct 2018 19:00:00 GMT

Read on to learn how I made this image…

I’ve been spending some of my free time sketching in code using Processing and the Hype library. There are tons or resources and inspiration out there, but I’ve learned a lot by joining Joshua Davis’ Patreon page, where he shares the methods to his generative art madness. His lessons helped me generate this video:

Color, texture, and algorithm

One of takeaways I especially liked from Josh’s tutorials was the idea that you can generate endless number of patterns by manipulating three variables: (1) color, (2) texture, and (3) the algorithm.

To speed up my process, I’ve started to build a library of colors and textures I can use in my code sketches. When I have time to create a new sketch, I grab a few elements from my library and jump right into code. Like anything else, when you start to look for inspiration, you’ll see it everywhere.

Color

My color inspiration came from the plethora of Apple logos created to promote an October 2018 event. I had saved of number of the logos from this gallery, so I picked three of my favorites, created gradient scales in Figma, then output those gradients as PNGs.

My color inspiration and gradient scales

Texture

My texture inspiration came from a case study of Uber’s 2018 rebrand. I spotted a cool tile pattern in one of the photos featured in their photography guidelines, and created several graphics based on those patterns.

The inspiration and the output

Algorithm

Using my colors and textures and the code Josh shared, I started playing with different combinations of elements until I found one I liked. You can find my final source code on GitHub.

Turning a Processing sketch into a video

There are a number of ways to generate a video from a Processing sketch; my current preferred technique is using a snippet of code that exports each frame of the sketch as a high-res image. I wasn’t exactly sure how many frames it would take to create a usable video, so I started by exporting 5,000 jpegs. After ~12 minutes of render time, I looked through the jpegs to find a good stopping point for my video — frame 2,580 was the winner. It’s easily divisible by 30 and 60, which is great for my purposes because 1 frame = 1 second of video. Simple math!

I trashed the jpegs, changed the output format to TIFF (for a crisp, high-res image) and output my images. 2 minutes later, I had 2,580 TIFFs ready to use.

I like to use Adobe Premiere to create my videos because it gives me a lot of control over outputs and effects. I start by importing all the TIFFs into Premiere, add those to the timeline, set the frame duration to 1 second, then export a video. I’m still trying to find a combination of export settings that I’m happy with; so far starting with Premiere’s default settings for Vimeo and changing VBR to 2-pass has delivered the best results. In this case, the result is this slow-paced video:

To make things more interesting, I import my first video into a new Premiere project. Now, I can play with the playback speed, visual effects (mirroring is always fun to try), and color treatments. In this case, I changed the duration to 10 seconds, which dramatically speeds up the animation, and exported a new video (using the same settings from the first pass), resulting in my final video:

It’s just that easy!

Once you get the steps down, this is a relatively quick process — and the possibilities are endless. If you think it looks interesting, I highly encourage you to jump in and try it for yourself. Josh’s Patreon posts are a great starting point and cover everything you need to get started.

Happy sketching!

Thank you for using RSS! Reply via email or view this post on the web.

MEMEX

Sun, 01 Jul 2018 19:00:00 GMT

I created MEMEX as a tool to gather design inspiration. For years, I had used tools like Pinterest or standalone macOS apps to gather inspiration, but they were either too complex, too basic, too expensive; the list goes on.

I wanted something where I could drop images into a folder and see them in a browser. When I discovered PHP had a simple method to support this, MEMEX was born. Under the hood, a snippet of PHP looks for any image in a folder and renders it on the page. Simple!

View the project ¦ GitHub repo

Design Index

Art & Illustration page

Navigation view

I run a local version of the site that’s always up-to-date (and speedy). I also maintain a public version so I can browse for inspiration when I’m away from home.

Since creating MEMEX in 2018, I’ve regularly refined it. I’ve restructured the nav several times, randomized the image rendering, added an inbox, and more. I’ve added a few LLM-assisted features, like displaying image counts for each page, and created index pages that render images from all the subdirectories for my largest categories, visual design and web design.

If you’re curious about the design and tooling, there’s a colophon. And I keep a changelog to track how the site is evolving. The source code is available on GitHub and there’s even a boilerplate version if you want to roll your own version.

Tools used

Figma for design explorations. (pro plan)
PHP for the core functionality. (free)
VS Code for coding. (free)
GitHub for hosting the code. (free)
Digital Ocean for serving the site. ($12/month)

Explore the MEMEX

Thank you for using RSS! Reply via email or view this post on the web.

The best design tool I’ve used

Tue, 10 Apr 2018 19:00:00 GMT

I recently dove headfirst into Figma, a browser-based(!) design tool made for modern UI and web design. After two-ish weeks of steady usage, I’m ready to call it: it’s easily the best design tool I’ve used.

Why now

When Figma rolled out in late 2015, it looked impressive. But at the time, I had too many excuses holding me back from giving it a shot. My team’s workload and deadlines didn’t lend themselves to learning new tools. The tools I was already using were good enough. The list goes on.

Today, I’m running my own design studio and I’m taking time to reevaluate the tools I rely on. Sketch is impressive — it runs circles around the Adobe tools I use most — but I’m hesitant to spring for a license. I’ve already paid for an annual Adobe Creative Cloud subscription, and it’s good enough for my day-to-day design needs.

But when a Figma-authored post on John Maeda’s Design in Tech report floated through my stream, I decided to give Figma another look. Reading comparisons of Figma and Sketch, even somewhat dated posts comparing their merits put Figma on top. Plus, the price is right for a longer-term test — it’s free for up to 2 editors.

Getting started

After a quick and easy sign up process, I was happy to find Figma provides a handful of starter files. Reviewing their sample file was a great way to learn the UI, tools, and basic tips and tricks. It’s a great onboarding experience— they’ve eliminated the dreaded blank page effect and made it super-easy to get started and get comfortable with the tools.

Once I was comfortable with the basics, I created my first screens. I keep a Spark File — a running list of hunches, ideas, and inspiration — for just this sort of thing. I chose a simple app idea — it’s dedicated to displaying the day of the year. I have a long-running 365 photography project, so I’m a frequent visitor to poorly-designed online DoTY calendars. I’ve always thought a simple app would make my life easier.

After a few quick sketches, I jumped over to Figma and started designing. Later that day, I had screens ready to share. By the following day, I had basic interactions prototyped and was able to try them on my phone thanks to Figma’s impressively easy-to-use mirroring app.

Since my first starter exercise, I’ve used Figma to make:

Page mockups for a website I’m working on — thanks to Figma’s components, I should be able to easily create simple style guide and pattern library for my clients.
A library of regularly used logos.
A scratchpad for random ideas, which I’ve used to quickly try new responsive layouts, test grids, generate patterns, and more.

Simply put: Figma is a powerful design tool. It’s easy to get started: you can use it in its native environment, the browser (which is crazy impressive). They also offer a slick desktop app. And compared to Adobe’s software, it’s much easier on my battery and CPU.

For the curious minds

So if you’re a designer who’s been on the fence about trying Figma, use a little time during a lunch break, evening, or a bit of time on the weekend to give it a shot. There’s a good chance you’ll get hooked.

For the curious, here are a few of the articles and resources I found most helpful as I was getting started:

The aforementioned Figma vs Sketch comparison. A little dated, but the points have aged well.
For wrapping your head around the potential of Figma: How to streamline your UI/UX workflow with Figma from Prototypr and Component architecture in Figma from Figma Design
For tips and tricks, Figma regularly shares roundups — FigmaTip Roundup 2.0 and FigmaTip Roundup 6.0 were especially helpful.
Getting more advanced: Waiting for a sign to start building your design team’s component library? – on how Gusto used Figma to build a component library.

Thank you for using RSS! Reply via email or view this post on the web.

Kyle Johnston's creative journal

Now

May 2026

Work

Life

AI

August 2025

Work

Projects

June 2025

Work

Projects

AI

Learning Log, April 2026

Life~Work

Projects

Digital gardening

Bookshelf

Other reading

MEMEX

Learning Log, March 2026

Life~Work

Projects

Digital gardening

Bookshelf

Other reading

MEMEX

Massive Bloom

The inspiration

The build

The visual evolution

The future

CLAUDE.md best practices

Key ideas

✱ Structure: where to organize CLAUDE.md files

Examples

✱ Creation: how to write CLAUDE.md files

Method 1: Plan mode interview

Method 2: Load the docs, then generate

Method 3: Generate from a session

✱ Upkeep: keeping CLAUDE.md lean

Sources

Learning Log, February 2026

Work~Life

Projects

Workflow

Digital gardening

Bookshelf

Other reading

MEMEX

Learning Log, January 2026

Work~Life

Projects

Workflow

Digital gardening

Bookshelf

Other reading

MEMEX

Add project hints to your terminal

How to add project-specific hints

Endless Mew Scroller

Tools used

Learning Log, December 2025

Projects

Digital gardening

Bookshelf

Other reading

MEMEX

Tools I use every day—that I made

Stop drawing vases with AI

Where to get it

Public bathrooms 🤝 Liquid Glass

Inspiration from the real world

Making liquid glass smarter

One more thing

MEMEX, AUG ‘25 EDITION

Sources:

Halucidations

Tools used

Unlocks for side projects