From design system to production with AI-assisted development
Context
I wanted my portfolio to do more than present finished work. I treated it as a product I could take from information architecture and visual design through implementation and production.
Instead of using a website builder or handing the design to a developer, I built it with Figma, Next.js, Tailwind CSS, GitHub, Vercel, ChatGPT, and Codex in VS Code.
The goal was not to become a frontend engineer, but to understand how design decisions translate into implementation, keep design and code aligned, and explore how AI-assisted development could extend what I could ship independently.
Insights
Building the portfolio exposed several recurring gaps between design and implementation.
Design systems should survive implementation
A system can be carefully structured in Figma while the production interface gradually diverges from it.
Its real value appears when the same foundations, components, and rules are maintained across both environments.
Implementation knowledge improves design decisions
Understanding component structure, responsive behavior, tokens, and technical constraints helped me design solutions that were more realistic to build and maintain.
AI changes how far a designer can take an idea
AI-assisted development allowed me to participate much deeper in implementation while keeping design intent and product judgment under my control.
Challenge
Create a portfolio in which design and implementation remained part of the same system.
That meant:
- translating the Figma design system into reusable code foundations;
- keeping typography, spacing, colors, grids, and responsive behavior consistent across environments;
- building reusable components instead of one-off page implementations;
- using AI without losing control over design intent;
- supporting safe iteration before production;
- and shipping the result as a real production website.
The goal was not to reproduce Figma in code, but to preserve design decisions all the way to production.
Design principles
One system, two environments
Figma and code should express the same design logic.
Variables in Figma became tokens in code, and reusable Figma components were mirrored by reusable interface components wherever practical.
The implementation was treated as another representation of the design system rather than a separate artifact.
Keep intent and judgment in the loop
AI worked best when design intent, interaction behavior, constraints, and expected outcomes were explicit.
Before implementation, I worked through the problem, structure, and trade-offs, then used ChatGPT and Codex to extend execution rather than replace understanding.
I reviewed both behavior and code, iterating until the result matched the intended experience.
Treat production as part of the design process
A feature was not finished when it looked correct locally.
It also needed to work responsively, survive deployment, preserve links and metadata, and behave correctly in production.
Staging, QA, and production became part of the same iterative loop as design.
Key improvements
Build a shared design system across Figma and code
The portfolio began with a structured design system in Figma.
Typography, spacing, colors, radii, grids, and responsive modes were defined as variables rather than repeated values, then represented in code through shared tokens and reusable foundations.
This made design-to-code consistency something that could be maintained rather than manually checked on every screen.
Translate components rather than screenshots
The implementation was built around reusable components instead of reproducing individual frames.
Navigation, capability tabs, article layouts, buttons, and other recurring patterns were treated as systems with states and responsive behavior.
When a component already existed in Figma, Codex could inspect it as implementation context, helping preserve the relationship between the designed component and the production version.
Create an AI-assisted design-to-development workflow
The workflow developed into a repeatable loop:
ChatGPT supported reasoning and specification, Figma remained the source of design intent, Codex worked directly in the codebase through VS Code, and GitHub and Vercel supported versioning and deployment.
The important part was not any individual AI tool, but maintaining human control over intent while delegating parts of execution.
Build a production workflow for safe, responsive shipping
Once the portfolio moved beyond an experiment, changes were tested locally and through deployment previews before reaching production.
This made it possible to validate responsive behavior, navigation, links, downloadable assets, metadata, Open Graph previews, and domain configuration without using the live site as the testing environment.
Responsive behavior was also treated as a system: shared breakpoints and design-system modes controlled how typography, spacing, layout, and content density adapted across viewport sizes.
Once changes reached production, the live site became another source of design feedback. Reviewing real pages and sharing contexts led to further refinements, turning the process into a continuous loop:
Design → Build → Ship → Observe → Refine
My role
I owned the portfolio end to end: information architecture, visual design, design system, implementation direction, QA, and production release.
I used ChatGPT for product reasoning and specification, Codex in VS Code for implementation, and GitHub and Vercel for versioning, previews, and deployment.
My role remained that of a Product Designer, but with greater ownership over how design decisions were translated into the final product.
Outcome
The result is the production portfolio you are using now, built from the same design system defined in Figma and maintained through reusable code foundations.
The project gave me a repeatable workflow for taking ideas from design intent through implementation, validation, and production.
It also changed how I work: implementation awareness and AI-assisted development now help me prototype further, communicate more precisely with engineers, and take greater responsibility for what ultimately ships.