AI Product Designer with a computer engineering background, currently pursuing a Master’s in User Experience at ASU and bringing 1.5 years of experience. I translate ideas into intuitive products using Figma, while leveraging low-code AI tools like Figma Make to accelerate iteration, automate workflows, and design scalable,
intelligent experiences.
My AI Prototyping workflows
Figma
Cursor
Figma
Ideation, wireframing, and high-fidelity UI design in Figma, with reusable, scalable design systems built for consistency, accessibility, and fast iteration.
Cursor (MCP)
Design frames are sent directly from Figma into Cursor via MCP, to translate UI into working components. I extend and refine the generated code inside the IDE, enabling rapid iteration, technical validation, and cleaner handoff for production. view more
Figma MCP workflow
Figma
Cursor
Google Stitch
Rapid UI screen generation for early exploration and layout validation, accelerating design cycles and reducing manual setup.
Google AI Studio
Stitch-generated screens are converted into functional web prototypes to validate interactions, flows, and technical feasibility early in the process. Code is eXported locally. To be used with antigravity
Antigravity
Final UX and interaction iterations, Technical cleanup and consistency checks, Preparing artifacts for developer handoff. (Ps - It does way more than that).
Figma
I lead ideation, wireframing, and high-fidelity UI design in Figma, building modular, scalable design systems that support consistency, accessibility, and rapid iteration across products.
Figma Make
I convert finalized Figma screens into functional prototypes using Figma Make by importing design frames directly. This enables fast translation of UI into working components for interaction testing, stakeholder reviews, and early technical validation.
Cursor & GitHub
I integrate Figma Make with GitHub to push generated code into version-controlled repositories. This allows me to pull clean, structured code into their Cursor, extend functionality, and move efficiently toward production, minimizing design-to-development friction.
Steps 1: Start with an example file.
1: Start with an example file.
2: Let Antigravity structure the problem.
3: Add context through comments and files.
4: Generate the initial build.
5: Test what actually matters.
Things you can do to get better results!
1. More detailed prompt - Using, PromptR could have had a more detailed prompt. https://prompt.figma.site/
2. Attaching and actual design system - Either a Supernova or Figma design system would have done the job!
Using Agent kit in Antigravity yo build a website
Antigravity Kit is a comprehensive collection of AI Agent templates with Skills, Agents, and Workflows designed to supercharge AI coding assistants for Antigravity.
What's Included
1. 20+ Specialist Agents - Domain experts for frontend, backend, security, and more.
36+ Domain skills - Knowledge modules for React, Next.js, testing and more.
11+ Workflows - Slash command procedures for common dev tasks
Using Agent kit in Antigravity yo build a website
Antigravity Kit is a comprehensive collection of AI Agent templates with Skills, Agents, and Workflows designed to supercharge AI coding assistants for Antigravity.
What's Included
1. 20+ Specialist Agents - Domain experts for frontend, backend, security, and more.
36+ Domain skills - Knowledge modules for React, Next.js, testing and more.
11+ Workflows - Slash command procedures for common dev tasks
Antigravity Workflow
X/Twitter
Antigravity
Pencil.dev