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
SWAPBLOCK — an AI hand-tracked voxel world
I built SWAPBLOCK for the Flowstep Challenge: a browser-based voxel game you control with nothing but your hand and a webcam. No mouse, no keyboard.
You pinch your thumb and index finger together to grab a colored block, move your hand through the air to carry it, and release to drop it.
The goal: match each block to the colored ring that corresponds to it, using only hand gestures tracked live through your camera.
Design process: I designed the entire multi-screen product, landing, onboarding, live session, and results screen in Flowstep, working through the color system, typography, and interaction states screen by screen before writing a line of code.
Flowstep let me iterate on the whole product experience fast: refining the HUD layout, the gesture-status states, and the color-matching mechanic visually before I touched implementation.
From there, I built the functioning version using Three.js for the 3D voxel world and MediaPipe Hands for real-time in-browser hand tracking.
No AI training required; everything runs client-side. Sound is fully synthesized in-browser (no audio assets), and the whole thing is deployed live on Vercel.
>>> Flowstep file (design prototype): https://app.flowstep.ai/file?activeFileId=e6f9d351-0366-4b64-a3d5-63f31bbf1a2b
>>> Live, playable demo: https://swapblock.vercel.app/
Happy to walk through the process
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
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Nice work! - I like the combination of MCP to canvas to code
Built an entire fintech UI in one session - 16 screens, zero Figma files.
Connected @flowstep_ai MCP to Claude Code > generated every screen directly on the canvas via prompts. No manual pixel-pushing.
Used design skills (hallmark, impeccable, prompt-master) to refine each...
We developed the Lost Art mobile application using Flowstep, an AI-powered application development tool.
The entire app concept, user experience, interface structure, and visual design were developed directly through Flowstep, without using Figma. Lost Art is an AI-powered creative art platform designed to help users rediscover unfinished sketches and transform them into new creative possibilities. Users can upload unfinished artwork, explore multiple AI-generated creative directions, discover other artists' creative journeys, and develop their own artistic ideas. The application also features a dynamic color system that analyzes each artwork and adapts the app's visual atmosphere to reflect its unique colors and identity. Lost Art is not designed to create art instead of the artist, but to help artists discover possibilities they may not have seen themselves.
Hey @Şule Ağaoğlu this is great but it looks like you're missing a link to your project. Make sure to include it in the comments here so the judges can properly review your submission.
I built Threadline for the $100k Higgsfield App Contest
I just entered Threadline into the Higgsfield App Contest — an AI launch studio for streetwear and fashion brands. Upload one product mockup, and it turns into a full launch pack: styled product photos, a lookbook video, a UGC-style clip, and ready-to-post captions.
The whole thing was built by Claude, through Higgsfield's own MCP server — direct git access to the app's repo, real deploys, iterating live against the actual running app instead of a local mockup. No hand-written scaffolding.
A few things I focused on: mixing different AI models per asset (or locking one model so the same person shows up across every photo and video), editing any generated photo with a prompt, and a full history so nothing you generate is ever lost. Full technical breakdown, including what I ran into building on Higgsfield's own design system: https://contra.com/p/mP2FqcZc-ai-powered-app-threadline-for-higgsfield-supercomputer
Try it live: threadline.higgsfield.app — or on the Higgsfield platform itself: https://higgsfield.ai/supercomputer/apps/0eabe215-ee8b-4c39-9457-b3ae3cca9004/view
If you're in this community and already build with Higgsfield — come test it and tell me what's broken and what could be better. This is v1, and I want to keep pushing it until it's an actual tool people reach for, not just a contest demo.
Incredible project! Turning a single mockup into a full visual launch suite with UGC videos and consistent models is pure magic for streetwear brands. The Claude + MCP development workflow makes this even more impressive. Outstanding execution, fingers crossed for the contest! 🚀🔥