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
Rapid AI-assisted prototype exploring tactile object-clearing and hidden-object interaction systems.
Developed over two days using AI-assisted prototyping workflows (May 2026), I directed and iteratively developed the gameplay concept, interaction feel, visual atmosphere, procedural logic, audio/sound design, feedback timing, and gameplay refinement from concept to playable prototype.
Focus areas included tactile interaction design, gameplay responsiveness, environmental feedback, onboarding flow, experiential pacing, and atmospheric cohesion.
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
working on Sonora product sections
making AI feel more tangible, approachable, and human
Good job with the design. one minor thing is how the information blocks are packed, adding a bit more negative space might beautifully convey that relaxed feel you are going for.
SonicPro X — Futuristic 3D Audio Experience
Short Description:
A premium, interactive 3D landing page for a futuristic wireless headphone product. The experience features a sleek floating headphone model in the center with dynamic neon lighting (blue and purple), subtle particle effects, and a minimalist UI overlay. Users can explore the product in 3D, interact with the scene, and feel the premium tech aesthetic.
Visual Style:
Futuristic & tech-focused with dark background
Neon glow effects (cyan blue + magenta purple)
Minimalist UI with clean typography
Premium product presentation — the headphones are the focal point
Cinematic lighting with soft ambient particles floating around
How It's Used:
Perfect for product landing pages (audio brands, tech companies)
Can be used as an interactive portfolio piece for designers
Suitable for e-commerce product showcases where you want users to explore in 3D
Ideal for awards submissions or creative web experiences that need to stand out
Technical Details:
Built 100% in Omma by Spline (Omma Canvas + Omma Studio)
1 AI-generated 3D asset (headphone model) from Omma Studio
Optimized for smooth performance on average devices
Interactive elements: floating animation, hover effects, particle movement
Why It's Unique:
Original design created during the Buildathon window — not based on external sources. The 3D headphone model was generated entirely with Omma AI, and the entire experience was built in Omma Canvas without relying on imported assets.
I like the lightning looks really nice!
Figma Make isn't just a prototyping tool. I used it to ship a Claude-powered design system generator.
Most designers treat Figma Make as a quick vibe-coding sketchpad. I wanted to show it's something deeper — a full vibe-coding platform that integrates with external APIs.
The connection nobody writes about
There are three ways Claude connects to Figma today. Figma MCP — Claude reads and writes Figma files via MCP server. Figma's built-in AI — Figma calls its own models internally. And mine — a React app inside Figma Make that calls Claude API directly from the browser. Claude responds to the code, not to Figma. Figma Make is the hosting.
The new pipeline
Old approach: get brandbook and references from client → generate moodboard → align → write prompts for UI Kit. Separate steps, human in the center every time.
My approach: collapse all of that into one step. Run an AI analysis and output structured data — input for machines, not a result for humans.
We don't ask AI how the brand looks. We run an MRI on it and get structured data that machines use to build code.
What gets generated
11 files, all consistent with each other because they share one analysis. For Figma specifically:
tokens.json — W3C DTCG 3-tier format (primitive → semantic → component), imports directly into Figma Variables via Tokens Studio or Figma Make prompt
design-system.css — all tokens as CSS custom properties, ready to import
starter.tsx — paste into Figma Make, full design system renders instantly
figma-make.md — session context, paste once and the AI knows the entire design system
Add a content plan on top — generate a full design in one run with minimal token spend.
The entire tool was built and shipped inside Figma Make. No external hosting. No separate codebase.
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI #BuildInPublic
tNot gonna lie, I opened this out of curiosity and left with more questions than answers 😅 But that's usually a good sign. Really interesting exploration of what design workflows might look like in the AI era. And by the way, this link doesn't work figma-make.md
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.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
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?