Floral Recognition Interface is a design-led AI experiment:
its an AI-assisted interface for bouquet analysis, built to present floral work as an interactive experience rather than a static gallery
Stack & tools
Figma, Cursor (agent workflow), React, Vite, Gemini API, Vercel, Upstash KV, GitHub.
My role
I handled this end-to-end: concept, UX/UI direction, interaction design, AI-assisted build workflow, implementation, deployment, and iteration.
ImPACT
Turned a personal bouquet practice into a usable, interactive floral analysis product flow.
Shipped a public demo with input validation, shared history, and real-world API usage limits.
Iterated from prototype to stable release, with a clear visual direction and desktop-focused UX quality.
Constraints I Handled
Secured API usage server-side and added guardrails (scan limits + access gating).
Solved deployment/storage edge cases and migrated history handling to a safer shared storage model.
Scoped intentionally as desktop-first, with mobile optimization planned.
Opportunity
How might I present bouquet work in a way that feels more alive, exploratory, and memorable than a standard gallery layout?
Approach
I designed and built an AI-assisted floral analysis interface that balances visual atmosphere with practical product behavior for public use.
Core FLows
Floral scan — user uploads a bouquet image, the model identifies visible flowers, and the UI returns annotated specimen details.
Invalid input handling — non-floral uploads are rejected with clear guidance to keep the interaction focused.
Shared previous analyses — visitors can browse recent analyses, making the experience feel active and communal.
Usage gate — limited free scans with an access gate to protect API usage and keep the demo sustainable.
What I Learned
What started as an idea during a Cursor build event evolved into a fully usable product, and that transition taught me a lot in practice.
AI can accelerate execution, but quality still depends on design judgment and repeated refinement.
Deployment, storage, and API limits are product constraints, not just technical details.
Scope is a design decision: this release is desktop-first, with mobile optimization planned next.