I’m not a coder. I’m a UX/UI designer who used to live in Figma land, sketching perfect screens and then… waiting. Waiting for devs, waiting for handoffs, waiting for someone else to translate pixels into reality. Enter AI: my impatient, very-helpful co-developer. With it I learned how VS Code, GitHub, and React actually play nice together — and I got to see my website live sooner than I ever expected. It is still a work in progress but I get to see bits and pieces of reality come true.

Key takeaways

AI is an accelerant, not a replacement. It speeds up the mechanical parts so you can focus on empathy and flow.
Non-coders can ship. With AI + VS Code + GitHub + React, designers can own more of the product lifecycle.
Ship small, iterate fast. Continuous deployment lets you validate UX choices with real users sooner.
Keep the human in the loop for culture and accessibility. The AI helps build — you make it meaningful.

Why AI mattered (and why it should matter to designers)

Designers obsess about fidelity and flow. But engineering reality requires boilerplate, wiring, props, and… syntax errors. AI took away the friction of the mechanical parts so I could focus on user flows and micro-interactions.

UX/UI wins:

Atomic design became literal: AI helped me scaffold atoms → molecules → organisms as reusable React components.
Design tokens translated from Figma styles to CSS/JS variables so spacing, color, and typography stayed consistent.
Accessibility checks were baked into suggestions — aria labels, keyboard focus, and color contrast nudges.

How the stack fits together (plain-language, no PhD required)

VS Code — my code editor playground. It’s where I paste AI-generated components, test locally, and see live updates with a local dev server.
React — the UI library that lets me compose components (buttons, cards, navs) into pages. Think of React as LEGO for UIs.
GitHub — version control and the place where my work lives remotely. Push changes here so I don’t ever lose a working iteration.

AI was the glue that helped me understand how to move a UI from Figma into VS Code → commit → push → deploy without feeling like I was defusing a bomb.

My actual workflow (what I did, step-by-step)

Design a screen in Figma (low → high fidelity).
Prompt the AI: “Create a responsive React component for this Figma frame with props for title, image, and CTA.”
Paste the generated component into VS Code, run start, fix little things, and watch it render.
Wrap the component into my design system structure (atoms/molecules/organisms).
Commit locally, push to GitHub, and trigger a deploy.
Iterate — change tokens in Figma, update the token file in the repo, push — and see it live.

Result: I went from static frames to an interactive page in hours, not weeks.

Work in progress — I’m still playing with it (and yes, bugs exist) 🛠️🐞

This is not a polished museum piece — it’s an active project. I’m intentionally sharing it mid-build because iteration is the UX way. That means there are bugs, visual glitches, and behavior edge cases. Here’s how I’m handling that reality:

Screenshot of WIP homepage with the expanded navigation

What I see right now

CSS breakpoints that need fine-tuning (some cards overlap at odd widths).
A few ARIA labels missing on dynamic widgets — accessibility triage required.
State edge-cases (e.g., empty lists, slow network) where error and loading states need polishing.
Tiny visual regressions after token updates (comma placement in styles can be spiteful).

AI’s role in debugging

AI helps me generate test skeletons and suggests likely fixes for CSS or small logic bugs.
It suggests reproduction steps and sometimes points out missing edge-case handling I hadn’t thought of.
But I still verify everything — AI gives hypotheses, I confirm and ship.

Why this is great for a non-coder

Instead of being blocked by a bug I don’t understand, I get a readable explanation and a starting patch.
The learning loop is fast: prompt AI → implement suggestion → run tests → see result in the browser → learn.
I’m learning debugging patterns, not just copy-pasting fixes.

Playful reality check: Bugs are the app’s version of “trying on wedding shoes” — mildly painful, sometimes awkward, but necessary before the big day.