I have been working on a poetry book for a while now. While I've procrastinated finishing it (as every writer does), I've daydreamed about building a website for the book. Recently I put down some pixels and made a prototype to explore that.
Thread
To record this video, I played around with Figma Slides for the first time. It's very straightforward — especially if you're already familiar with Figma as a design tool. Here's how I captured the recording with Figma Slides and CleanShot X (a screen capture tool)...
1. Create a base slide — background image, rectangle, text 2. Add a prototype from the toolbar 3. Open the file in a second tab on a second monitor 4. Go full screen from monitor 1 and "follow" yourself 5. Record your screen on monitor 1 and control the prototype on monitor 2
For almost every website or app I work on, I start by generating a color palette, specifically for designing interfaces. Inspired by the default palettes in TailwindCSS, several people have reverse-engineered a way to programmatically create custom palettes from any color...
UI color palette generators are a dime-a-dozen now, but my favorite is uicolors.app
I've started using the new Artifacts feature in Claude several times a week. With this project, I was curious how it would do if I gave it a screenshot to replicate and explained the functionality I wanted. The following was the result of 3 prompts.
I haven't jumped into the world of Cursor yet, but this is a great use case for it. Between Claude, Cursor, and the new simple deployment workflows I've seen, I think this might be easier to build with custom code than a website builder — and I have very little dev experience.
Lastly, I'm still no more motivated to finish my book than before I did this. It's a deeply personal collection of writing, so I know that motivation will come from elsewhere. Let me know if you have questions about any of this!