A screenshot of an interface tells you what it looks like. It doesn't tell you how it feels — what happens when you tap, how a sheet rises, whether the hierarchy still holds once you start typing.
So I've been rebuilding mobile app interfaces I admire as interactive prototypes. Real components and real state, running in a browser tab — you open a link and the thing works.
Six are live:
| App | Try it | What to tap |
|---|---|---|
| Suno (AI music) | suno-ui.edgeone.cool | Type a prompt, open Search, start the featured song — the player plays sample audio |
| Luma (events) | luma-ui.edgeone.cool | Round button → Continue with Phone → open an event |
| Threads (social) | threads-ui.edgeone.cool | Like a post, then tap + and start a new thread |
| Airbnb (stays) | airbnb-ui.edgeone.cool | Start your search → where, when, who |
| Tiimo (visual planner) | tiimo-ui.edgeone.cool | Add a task, start it, watch the focus ring |
| Structured (day timeline) | structured-ui.edgeone.cool | Add Task → pick a suggestion → complete it |
Index with source and a DESIGN.md for each: github.com/migrant620/awesome-app-design-md
One codebase, opened as a link
Each app is an Expo / React Native / TypeScript project rendered on the web through React Native Web. The browser build is what makes them shareable. A link you can tap through beats a Dribbble shot when you're trying to explain why an interface works.
The layouts are designed for a phone-width column. On a desktop they stay a centred column rather than stretching — open them in your browser's device mode, or just on your phone.
Six things these interfaces get right
Rebuilding a UI forces you to notice decisions you'd normally scroll past. A few I liked:
Suno: the player borrows the artwork. Opening a song turns the whole screen dark and paints it from the cover, so the controls sit on the mood of the track instead of a neutral panel. The pink-to-orange gradient is spent on exactly one job — making — so it never competes with anything else.
Luma: a feed that reads like a calendar. "Picked for You" is grouped by date, with a quiet grey slash between the date and the weekday. Then tapping an event drops you into a deep indigo detail page. Light list, dark detail — each makes the other feel more distinct.
Threads: text first, chrome last. The feed is a single column of avatar, handle and words; counts sit quietly under each post and the photo, when there is one, is the only colour. The composer opens as a plain sheet that is mostly empty space, which is the point.
Airbnb: search is a sentence you fill in. Where, When and Who are three stacked clauses on one sheet, not three screens. Each shows its current answer in bold and its question in grey, so a half-finished query stays readable while you edit one part of it.
Tiimo: time you can see. In focus mode a lavender arc grows clockwise from twelve o'clock, one full turn per task. The digits tell you how long is left; the arc lets you feel it at a glance. The day is split into Anytime / Morning / Afternoon / Evening instead of minutes, which lowers the precision a plan asks of you.
Structured: completed means struck through, not removed. Every task is a disc on one vertical spine. Finishing a task keeps it in place with a line-through, so the day's history stays visible. One coral colour carries every plan and action; greys do everything else.
What's a DESIGN.md here?
Each repo ships a DESIGN.md: colour tokens, type scale, spacing, radii and component notes — written as prose you can read in five minutes, next to source code that shows the values in use. Token files tell you what a value is. I'm trying to also say why it's there, in a form a person or a coding agent can rebuild from.
That format is still evolving, and it's the part I'd most like feedback on. Too much detail? Not enough? Would you rather have it as structured YAML?
The fine print
These are unofficial study projects, not affiliated with or endorsed by Suno, Luma, Threads, Airbnb, Tiimo or Structured. All content is sample data; nothing signs in or talks to the real services. The source is public under a noncommercial study-and-research licence (not an OSI licence), so please read it before reusing anything.
If you open one and something feels off — a spacing, a transition, a state that doesn't behave — tell me in the comments or open an issue. That's the most useful thing you could send.
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.