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
This project showcases a highly adaptive development process, transforming an AI-generated prototype into a production-ready web application. The client provided an initial interactive prototype published directly as a Claude Artifact. To ensure design precision and structural integrity before development, the live HTML from the artifact was imported into Figma using the HTML to Design plugin. With a high-fidelity visual blueprint established, the project was hand-built in Webflow using the industry-standard Finsweet Client-First framework, guaranteeing a clean, scalable, and easily maintainable class structure.
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
Related posts
I use Claude every day
I think I'm pretty good at it
I watch two Anthropic engineers for 2 HOURS
Claude's engineer explains Skills from scratch
the first 5 minutes
wait. Skills are just folders?
folders that hold onto your workflow?
your domain? your expertise?
pause. rewind. I watch again
I think about every prompt I've rewritten from scratch
every context I've explained 100 times
every session that forgot everything
this shouldn't have happened like that
16 minutes. everything changes
skill issue detected:
is there a video? can you share the link to it? i'd like to watch
Here's your contra post content for the SideQuest Social Feed:
What if your social feed wasn't just content to scroll but challenges worth actually doing?
We designed the SideQuest activity feed and messaging system, a gamified social experience that turns friend activity into motivation, nearby events into missions, and conversations into the starting point for real-world plans.
The design problem we solved: most social apps separate discovery, activity, and messaging into three completely different experiences. The result is an app people open out of habit, not intention.
What the design does instead, three screens, fully connected:
Activity feed that shows what your friends are actually doing: Alex completed a 3.8 km morning run and earned +120 XP. Sarah joined the Sunset Rooftop Meetup at 6:30PM with 8 people. Every card has a direct action, Try Challenge or Join Event, not just a like button.
Activity detail screen that turns a 5K morning run into a complete mission brief: distance, time, XP reward, coin drop, host profile, rival challenge system, and a single Start Run CTA that removes every reason not to go.
Messages screen that connects the social layer, Meet-up 2026, Party Night, and Ronald Richards confirming tomorrow at 9PM, all organized by All, Unread, and Groups with real conversation context visible without opening a thread.
My design decision: Map, Social, and Chats in the bottom nav aren't three separate apps. They're three layers of the same gamified world and the design makes that feel true from the first tap.
What feature would you add to make a social fitness app actually stick? 👇
Love the vibe of this one.
PROJECT NAME
AION PYR — The Aitherioi
CONCEPT / PROJECT DESCRIPTION
AION PYR is a one-minute instrumental progressive-rock film by The Aitherioi, a fictional trio of pale pre-terrestrial beings older than Earth.
They were here when the planet was born from heat, basalt, and lava, and they remain calm as that world dissolves into stardust. The film follows them performing inside a collapsing volcanic cathedral while lava, steam, lightning, and stone slowly give way to void.
The music is built only from guitar, bass, and drums: slow, heavy, repetitive, bass-led, and cathartic.
PROCESS
I started by defining The Aitherioi: a fictional pre-terrestrial trio with a shared visual identity, pale ethereal bodies, severe faces, long dark hair, and calm expressions.
Then I built the visual system around contrast: fossil-dark basalt, living lava, white steam, lightning, and their stillness inside collapse.
I created character assets, face studies, wardrobe references, instrument references, environment plates, keyframes, and individual video scenes.
The music was built first as a strict one-minute instrumental progressive-rock track using only guitar, bass, and drums. The video was then structured to follow the track: bass opening, wide trio, basalt corridor, guitar catharsis, drummer pulse, matter dissolution, and final void.
Finally, I stitched the scenes together with clean cuts so the film follows the music without extra transitions or title cards.
FEEDBACK ON BUILDING WITH MELIUS
Melius worked best as a production canvas rather than a single-prompt generator.
The node-based workflow made it possible to build the project in layers: character identity, environments, audio, keyframes, video clips, and final assembly. That helped keep the concept coherent while still allowing corrections when individual shots needed refinement.
The biggest challenge was visual continuity, especially keeping The Aitherioi consistent across scenes. The most useful approach was creating strict reference assets first, then using them as anchors for keyframes and video generation.
This is raw power, like it so much!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?