Design Process · AI-Assisted Development
From Figma to Functional UI
A collaborative design-to-development workflow connecting Figma, ChatGPT Codex, VS Code, and GitHub to streamline UI implementation and reduce the gap between design and development.
FIGMA
FIGMA MCP + CODEX
VS CODE
LOCALHOST
GITHUB
01 · Background
Closing the Gap Between Design and Development
Traditional Workflow
Figma Design → Developer Implementation → Designer Feedback → Developer Revision
Previously, UI changes depended on developer implementation, followed by visual review and additional revision cycles.
New Collaborative Workflow
Figma Design → Developer Implementation → Designer UI Refinement → Developer Review
With access to the existing codebase and AI-assisted development tools, I can contribute directly to UI refinement while developers remain responsible for application architecture, functionality, and final code approval.
The goal is not to replace developers, but to make design and development work more closely together.
02 · Development Workflow
One Connected Workflow, From Design to Code
01 — DESIGN
Figma
Create layouts, components, visual specifications, and interaction designs.
02 — DEVELOP
Developer Implementation
Build the initial application structure, functionality, and UI.
03 — CONNECT
GitHub + Local Repository
Clone the existing project after receiving repository access.
04 — IMPLEMENT
Figma MCP + ChatGPT Codex + VS Code
Reference Figma designs and make UI-focused changes directly in the code.
05 — VALIDATE
Localhost Preview
Run the application locally and compare the implemented interface with Figma.
06 — REVIEW
GitHub Pull Request
Submit UI changes for developer review, testing, and integration.
03 · Tools & Integration
Connecting Design Tools With the Development Environment
01
Figma
Source of truth for UI layouts, components, and design specifications.
02
Figma MCP
Provides design context and component information to support code implementation.
03
ChatGPT Codex
Assists with understanding existing code and implementing UI changes.
04
Visual Studio Code
Local development environment for editing and testing frontend code.
05
GitHub
Repository management, version control, collaboration, and developer review.
04 · Implementation Process
Turning Approved Designs Into Working Interfaces
STEP 01
Start With the Design Source
The UI is first designed in Figma, defining the layout, typography, components, colors, and responsive behavior.
STEP 02
Translate Design Context Into Code
Figma MCP connects design specifications with ChatGPT Codex, allowing UI changes to be implemented with reference to the original design and existing project structure.
STEP 03
Refine the UI Directly in the Codebase
Using VS Code and Codex, I adjust frontend layouts, spacing, typography, colors, components, and responsive behavior while preserving existing application functionality.
STEP 04
Validate the Actual Interface
The application runs locally, allowing direct comparison between the Figma design and the rendered UI before submitting changes.
STEP 05
Review Before Integration
UI changes are committed to a dedicated branch and submitted through GitHub for developer review before merging into the shared codebase.
GITHUB BRANCH / PULL REQUEST
05 · Collaboration
Clear Responsibilities, Shared Product Quality
Product Designer
UX/UI design in Figma
Figma MCP integration
AI-assisted UI implementation
Visual refinement
Responsive UI testing
Localhost validation
Pull request submission
Developer
Application architecture
Business logic
API integration
Core functionality
Code quality
Security review
Testing and merge approval
Designer-Led UI Refinement + Developer-Led Technical Validation
06 · Development Quality
Faster Development Without Compromising Quality
01 — Code Security
Keep credentials, tokens, private keys, and sensitive configuration outside AI prompts and shared outputs.
02 — Functional Stability
Keep UI changes separate from business logic and API integrations unless reviewed by developers.
03 — Code Review
Use dedicated branches, local testing, and developer-approved pull requests before integration.
07 · Expected Impact
Less Rework. Faster UI Iteration. Better Collaboration.
01 — Faster UI Refinement
Small visual adjustments can be implemented directly without requiring every change to return to the developer.
02 — Improved Design Consistency
The rendered UI can be compared with Figma throughout implementation.
03 — More Efficient Collaboration
Developers can focus on core functionality while designers contribute to frontend visual quality.
Key Takeaway
Design Doesn’t Stop at Figma.
By connecting Figma, ChatGPT Codex, VS Code, and GitHub, I expanded my workflow from designing interfaces to contributing directly to their implementation. This approach helps bridge the gap between design intention and the final product while maintaining developer collaboration and technical review.
DESIGN → IMPLEMENT → PREVIEW → REFINE → REVIEW
