BORED. Stop scrolling. Start doing.

For the Flowstep challenge, I built the product I keep wishing existed: a tiny decision engine for the moments when you have free time, but no idea what to do with it.

BORED. starts with a quick context check based on your available time, energy and company. Then it gives you one curated recommendation across four categories:

🎬 Watch a documentary 🎶 Listen to a playlist 🏡 Do something inside 🌲 Go outside

No endless feed. No decision fatigue. Just one good option, with the ability to retry when it doesn’t feel right.

The process became a real journey. I explored the initial direction with Figma Make, developed and iterated on the experience using Flowstep and Codex through MCP, then refined the visual system and complete interaction flow manually in Figma.

During the final sync, I ran into a persistent Figma API rate limit. Instead of letting that stop the project, I adapted the workflow and shipped the final clickable experience through Vercel.

It was messy, experimental and occasionally frustrating, but that is exactly what building something real looks like. What a journey. ✨

Explore the project: Flowstep board Figma prototype Live prototyp

Built with Flowstep, Flowstep MCP, Codex, Figma Make, Figma and Vercel.

I also created a complete video walkthrough of the process. Since English is not my first language, I used an AI-assisted voiceover based on my own script so the story, decisions and challenges would be communicated clearly. The concept, design process, direction and final narrative are entirely mine.

#FlowstepChallenge #ProductDesign #UXDesign #AI #Figma #Codex #Prototype

this is so cool, love the clean and intentional design language, can totally see using this app ourselves!🔥

The walls of a home do not move. The person does. A hall that was wide enough at sixty stops being wide enough the year a walker appears; a bathroom that worked for decades fails the day a wheelchair has to turn in it. Clearance shows where a home and its person will stop fitting each other, with measurements, before it happens.

For most people this question does not arrive as their own. It arrives through a parent: a fall, a hospital discharge, a family that has days to answer "can she come back to this flat?" with nothing on the table but opinions. For others it comes quietly in their fifties, while choosing the home they intend to grow old in, when there is no way to ask the showroom whether the bathroom will still work in twenty years. Either way, the numbers that decide already exist, published in accessibility standards. Nobody reads them next to their own hallway. I wanted the tool that does.

How it works: you pick a home layout, correct four measurements (bathroom door, hall width, bathroom size, entrance threshold), and set a mobility trajectory: cane, then walker, then wheelchair. Clearance draws the space that person needs directly over the floor plan until it collides with the walls. The collision is the finding. Every deficit is a measured figure against a required figure with the clause cited next to it: UK Approved Document M for the verdicts, US ADA figures shown separately, never blended. No scores, no advice tone. A room passes or it fails.

The worked example is Flat 12, Maren House: a 1968 walk-up, 46 m², second floor, six steps at the entrance, no lift. Its resident is 62 and lives alone. Inside the flat, every failure has an intervention. The staircase has none, and from the walker stage on the building decides, not the flat. That is the finding the product exists to surface: a flat can pass while its building fails.

There is also a carer toggle. Care is getting scarcer, and where a carer does come, the home has to give a second working body its own clear floor space. Switch the toggle on and rooms that passed a second ago start failing. No published standard defines a carer's working zone, so that overlay is labeled on screen as modeled, not a code figure. If the data has a hole, the screen says so.

The test ends in a dwelling passport: a verdict-by-decade document with every clause cited, made to be sent to the family. Often the person who sees the problem first is an adult child living in another city, who can persuade but not decide. The passport lets the conversation argue with measurements instead of arguing with them.

How I used Flowstep

Guidelines before generation. I wrote a design system doc for an architect's drawing-set register (paper, ink, hairlines, monospace figures, one alarm red reserved for collisions, plus a ban list of genre defaults: no pastels, no gradients, no smiling stock seniors) and pushed it to Flowstep over MCP before generating anything.

The hero sheet, the floor plan with clearances, was drawn by hand in Figma and imported through the MCP connection. Re-importing the same frame updates the screen in place, so I could iterate in Figma and refresh. The other sheets were generated one at a time in chat, then each render was audited against the approved copy deck and patched by hand through the JSX surface: get-screen, fix, add-screen. Those calls don't consume generation quota, which turned the whole build into a workable loop of generate, audit, patch. The trajectory slider and the carer toggle are staged as navigation between screen variants, wired manually and locked. Ten screens, clickable end to end.

After the prototype I rebuilt Clearance as a live coded version from the same Figma tokens. The deployed app recomputes every verdict from the four inputs, with no backend and no LLM at runtime.

What I liked the most

The JSX import/export surface. Generation gets a screen most of the way there; get-screen and add-screen let me fix the rest precisely and for free instead of rolling the dice again. Also the in-place Figma re-import, and the element-level Navigation panel that lets imported screens join the clickable flow like native ones.

Flowstep file:  https://app.flowstep.ai/file?activeFileId=3bfea440-d465-49a6-b4f2-ff24e6c439df

Live version: clearance-app-blue.vercel.app