AI Vibe Coding
Vibe Coding
2026
Exploring AI-assisted design workflows — from Claude conversation to interactive prototype to design system, without traditional handoff.
Why Neumorphic?
Neumorphic design uses soft shadows and rounded forms to create depth without harsh contrast. For a sleep app, this isn't just aesthetic — the visual softness itself reduces stimulation. Every surface feels touchable, calm, familiar.
AI-Assisted Design Workflow
This project was built entirely through conversation and iteration with AI tools.
Why It Failed
What Worked
The neumorphic style delivered exactly the emotional quality I was after — soft, tactile, and immersive at a fixed viewpoint. What surprised me was how much of the heavy lifting AI handled: the layered shadows, highlight gradients, and material depth that would normally take days of manual refinement came together through iteration in hours. The aesthetic held up beautifully in controlled presentation contexts.
What Didn't
Neumorphism is fundamentally a fixed-perspective illusion. The moment a user tilts their phone, the light logic breaks. Real-world constraints — dynamic viewing angles, dark mode, accessibility requirements — expose the style's systemic limitations. These aren't execution failures; they're the ceiling of the design language itself.
The Real Finding
This is where AI vibe coding changed something for me. Traditionally, you'd invest weeks building something to this fidelity before discovering its limits. Here, the cost of exploration dropped low enough that I could reach that conclusion in days — not as a disappointment, but as a design judgment.
AI didn't just accelerate execution. It accelerated the moment of clarity.
That's the part worth keeping.
Design Insights
Neumorphism creates emotional depth through simulated physicality — but that physicality is also its ceiling. The moment real-world constraints enter (rotating viewpoints, dark mode, accessibility), the illusion breaks. It's a style that works beautifully in a controlled frame, and falls apart outside of it.
The more durable approach for a sleep and meditation context isn't to simulate physical materials — it's to use abstract visual language to carry emotion. This is what Claude's generative illustrations and Endel's motion design get right. Neither depends on a fixed light source or a specific viewing angle. The feeling survives any context.
The insight: emotion doesn't require physicality. Abstraction can be just as immersive — and far more resilient.
Next Steps
If I were to take this further, the direction would be:
Background layer — slow, generative gradient animation as the emotional foundation, shifting with playback state like Endel
Mid layer — glassmorphic card for track info, naturally adaptive across light and dark modes
Foreground — minimal controls with proper type scaling and accessibility built in from the start
The vinyl component stays — but reframed as an abstract glass disc rather than a physical object. The mood remains. The physical constraints don't.
Appendix
Design System
Color tokens, typography, spacing, border radius, and component states
all extracted directly from the working prototype, not designed separately.
