Second submission this week. Perch — 11 screens, built in Flowstep. Again, the part nobody posts.

Perch identifies a bird by its song, then treats the bird as a recording artist. Profile, discography of calls, a following. Your aviary fills up as you hear them.

One mechanic carries it: birds you haven't heard yet sit as watercolour illustrations on cream paper. The moment you record one, the card flips to photography on black. Illustrated until you hear it. Photographic once you have.

Same method as Bracket — Flowstep's MCP connected to Claude, every screen prompted, no Figma.

And again, the prompting wasn't the work.

What the code showed: a Follow button that was an empty component rendering as a grey box. A species name set to 104px on a 402px screen, wrapping to two lines and eating the header. A display typeface silently falling back to a serif because the font never loaded. A "spectrogram" that had quietly become a smooth sine wave — a music waveform, the exact cliché the app exists to avoid. Padding switching between 16px and 24px mid-screen. Export buttons clipping off the right edge.

Every one of those renders as a plausible-looking screen. None of them survives reading the markup.

The judgment calls were mine. One fixed accent for app chrome, colour from the bird only where it means something. The spectrogram instead of a waveform, because that's what bird audio actually looks like. The user's own profile built as a mirror of the bird's — same header, same stat row — because if birds are artists here, so is the person listening.

Motion is CSS keyframes, prompted, not animated by hand: staggered spectrogram bars, a pulse on the record control, the aviary card flipping on a loop.

The flow: Sign In → Listening → Reveal → Artist Profile → Discography → Aviary → Share.

Navigation wired element by element, so it runs like an app, not a slideshow.

Built for the @Flowstep x @Contra HQ challenge. Project: PERCH

#buildinpublic #AIworkflow #FlowstepMCP #UIdesign #prototyping