The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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.
#buildinpublic #AIworkflow #FlowstepMCP #UIdesign #prototyping
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
A NORMAL AMOUNT OF SKY
My entry for the CapCut Seedance 2.5 Video Challenge.
I am interested in creating worlds that exist somewhere between magical realism, liminal spaces, dreams, and quiet unease. Places that initially feel soft or nostalgic, but gradually reveal that their architecture, scale, or internal logic cannot be trusted.
For this film, I imagined a girl beginning inside an empty school, a place shaped by repetition, observation, rules, and the pressure to become a recognizable version of yourself. She walks into a faded pastel-pink bathroom and discovers a luminous horse behind a full-length mirror.
The horse represents the possibility of escape, freedom, desire, and a life that cannot be completely explained. When she crosses the mirror, the camera crosses with her. She runs alongside the horse through a fluorescent landscape where rain, flowers, institutional ceilings, and an artificial sky coexist.
An astronaut eventually leads the horse away. I see the astronaut as a figure already accustomed to surviving unfamiliar worlds, while the girl is encountering one for the first time.
As the camera pulls backward, the apparently endless landscape is revealed to exist inside a crystal sphere held by another version of the same girl. She releases the sphere, breaking the boundary around the imagined world. The luminous horse survives in miniature among the fragments.
For me, the ending is about carrying a small piece of freedom back into reality. The escape may be fragile, altered, or impossible to preserve at its original scale, but it does not disappear.
WORKFLOW
I developed the film in CapCut Video Studio using Seedance 2.5. I began with visual references centered on luminous horses, cyan rain, retro astronauts, pastel magical-girl imagery, artificial landscapes, wet reflections, 35mm grain, analog halation, and uncanny institutional architecture.
I then created a timestamped 30-second prompt defining the character continuity, camera path, environmental transformations, sound design, and narrative progression. I generated multiple iterations and refined the mirror crossing, the girl’s visibility, the relationship between the horse and astronaut, the macro pullback from the sphere, and the final release of the miniature horse.
The final camera path moves continuously from the school corridor into the bathroom, through the full-length mirror, alongside the running girl and horse, outward through the crystal sphere, and down to the fragments on the bedroom floor.
Created with CapCut Video Studio and Seedance 2.5.
I created The Red Umbrella, a 30 second emotional anime short about loneliness, kindness, and a connection that quietly travels across generations.
One of my main goals was to make the full 30 seconds feel like one continuous cinematic experience rather than a collection of separate AI generated shots. I planned each scene around camera direction, movement continuity, match cuts, character blocking, and seamless transitions so the story could flow naturally from beginning to end.
I built the project around consistent characters, locations, and props, then directed each moment to preserve continuity across the entire film.
The red umbrella acts as the visual thread throughout the story. What begins as a simple act of kindness eventually reveals a connection to the girl's mother, turning an ordinary object into a memory passed between generations.
My main focus was subtle emotional acting, controlled pacing, consistent anime direction, and a continuous visual flow across the full 30 seconds.
I also included a short workflow video after the final film, showing how I created the assets, structured the scenes, maintained continuity, and brought everything together in CapCut.
Loved the story behind this ❤️ The emotional connection between generations really got me.
⚡ FLASH DEMO
Can AI actually design a mascot worth using in a real product?
I used Grok Imagine 2.0 to create a a 'fictional' mascot for ThisDay, my upcoming productivity app.
The first result was honestly pretty bad, but after three iterations we got much closer. From there, I used a few precision edits and refinements to clean up the character and push it into something that could work.
Once the mascot was finished, I also animated it directly in Grok Imagine and exported the final video.
Still not replacing a full design workflow for me, but being able to go from rough idea → iterations → targeted edits → animation in one place was surprisingly useful.
Would you use an AI-generated mascot in a real product, or would you still prefer to build it manually?
Honestly, I’d use it if the mascot fits the product. The fact that you can iterate and animate it in the same workflow is pretty impressive.