Taking my portfolio from Figma to production with AI
I designed and built this portfolio independently, taking it from the first element in Figma to a published website in approximately two months. ChatGPT and Codex supported the work; I owned the design, directed implementation, tested the result, and decided when changes were ready to ship. The project established a workflow for maintaining the design system across Figma and code and reviewing updates in a separate preview environment, Demo, before releasing them to production.
- Product
- Personal portfolio · responsive website
- My role
- Sole designer and builder · design, implementation direction, QA, and release
- Team
- Built independently with ChatGPT and Codex; no other contributors
- Timeline
- Approximately 2 months from initial design to first published version
- Tools
- Figma, ChatGPT, Codex in VS Code, Next.js, Tailwind CSS, GitHub, Vercel
- Status
- Live · maintained through ongoing updates
Carrying the design system into code
I wanted a portfolio I could continue to develop as my work evolved. That meant bringing its design foundations and reusable components into the implementation, including typography, colors, spacing, and responsive behavior.
One practical challenge was translating variable names between environments. Figma used slashes to organize variables into groups. I wanted to preserve that structure while giving the corresponding code tokens names appropriate to their environment. I implemented the mapping with Codex, and I subsequently updated variables and components while keeping the design system consistent across Figma and code.
Updates are deliberate: when I change a design, I ask Codex to inspect the relevant screens, components, or variables and update their code counterparts. The project context identifies where those elements are stored. I review the resulting implementation before it reaches production.
Reviewing changes from design to release
ChatGPT supported reasoning and specification, while Codex worked in the codebase. I used the following workflow to keep design decisions, implementation review, and release approval under my control.
- 1. Update design
Screens, components, variables
- 2. Inspect changes
Codex proposes updates
- 3. Review scope
I approve the update list
- 4. Build on Demo
Codex applies changes
- 5. Test and refine
I check visuals and behavior
- 6. Ship to production
I approve the release
On Demo, I checked visual accuracy, sizes, interactive states, and links, supported by a dedicated QA chat using guidance I provided. When something needed improvement, I requested another iteration and tested it again before approving release.
Outcome
The result is the live portfolio you are reading. I delivered its first version independently in approximately two months and have continued updating its variables, components, and content through the same workflow.
The project gave me practical experience translating design decisions into a working website and maintaining it after release. AI extended what I could implement independently; defining the experience, evaluating the output, and deciding what to ship remained my responsibility.