Start with the reason
Define the user, friction and desired change before choosing the stack or drawing the interface.
Development
The method behind the projects: concept, design, AI-assisted code, backend and the infrastructure that gets the work online.
My role
Product thinking, design direction, implementation and iteration.
concept→design→code→ship
AI accelerates the work. It does not make the decisions.
I use AI to explore, implement and debug faster, while keeping product intent and visual judgement human-led.
The process is not a fixed waterfall. I move between concept, prototype and implementation, using each working version to expose the next design question. The goal is always a coherent product, not a pile of generated screens.
Design a system
Figma and Stitch help establish hierarchy, tokens and reusable components before code multiplies decisions.
Ship to learn
A deployed build reveals responsive, performance and content problems that static frames cannot.
02 / UX
A repeatable loop, adapted to each product.
Every phase produces something testable and feeds evidence back into the next decision.
Concept and scope
Turn a loose idea into a clear problem, primary journey and realistic first release.
Design direction
Use references, Figma or Stitch to define the visual language, responsive behaviour and component rules.
AI-assisted implementation
Build in small, reviewable slices; inspect output against the source rather than accepting generated defaults.
Backend and data
Choose Supabase, Neon, Firebase or a simpler static model based on the real product constraints.
Deploy and verify
Use Vercel or Cloudflare, then test the live result across routes, breakpoints and meaningful interactions.
04 / UI system
The UI system is part of the build, not decoration after it.
Tokens, components and motion rules form the bridge between a design direction and maintainable code.
Palette
Concept#FF6D52
Design#D2F000
Build#101010
Ship#FFFFFF
Typography
IdeaDisplayProduct character
BuildBodyReadable interface copy
npmMonoTechnical metadata
Components
Design tokensResponsive primitivesAccessible controlsGSAP motion rulesContent modelsError and empty states
05 / Build
The stack changes when the problem changes.
Next.js and React are common on the web; Flutter handles native product work. Supabase, Neon and Firebase cover different data and realtime needs, while Vercel and Cloudflare support deployment, edge logic and delivery.
- Concept + product framing
- Figma / Stitch
- AI-assisted coding
- Next.js + React
- Flutter + Dart
- Supabase / Neon / Firebase
- Vercel / Cloudflare
- GSAP + browser verification
The point
Build faster without making the work feel generated.
The best use of AI is to expand what I can execute while sharpening, not outsourcing, the choices that make a product coherent.
Back to all work →