Modul praktis Level 2 VibeKoding: Dari Prototipe Desain Menjadi Kode Nyata.Modul praktis Level 2 VibeKoding: Dari Prototipe Desain Menjadi Kode Nyata.
How can you turn a prototype from a design tool into frontend code that actually runs in the browser?How can you turn a prototype from a design tool into frontend code that actually runs in the browser?
------
After finishing a UI design in tools like Figma or MasterGo, a practical question naturally appears: how do you turn that structured design into real frontend code?After finishing a UI design in tools like Figma or MasterGo, a practical question naturally appears: how do you turn that structured design into real frontend code?
In practice, there are three common paths:In practice, there are three common paths:
| Path | Method | Characteristics | Best for |
|---|---|---|---|
| Path 1 | Use multimodal models to recreate code directly from screenshots | Flexible, no specific platform required | Fast prototype validation, simple pages |
| Path 2 | Export usable code through the platform itself or plugins | High fidelity, strong editability | Existing Figma or MasterGo workflows |
| Path 3 | Combine the design platform with MCP-based export | Highly automated, customizable | Deeply integrated design-to-dev workflows |
This chapter walks through all three so you can choose the one that fits your project.This chapter walks through all three so you can choose the one that fits your project.
Before starting this chapter, it is helpful to first read [Figma and MasterGo Basics](../figma-mastergo/).Before starting this chapter, it is helpful to first read [Figma and MasterGo Basics](../figma-mastergo/).
------
Models with vision capabilities are naturally suited to turning images into code. All you need to do is upload screenshots of the design and ask the model to generate the implementation.Models with vision capabilities are naturally suited to turning images into code. All you need to do is upload screenshots of the design and ask the model to generate the implementation.
CODE Generate the corresponding HTML/CSS code from this design image. Requirements: - Use modern CSS layout techniques such as Flexbox or Grid - Make it responsive for different screen sizes - Include all visible UI elements - Match colors and font sizes as closely as possible
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
.html file for easy local testingSave it as a single .html file for easy local testingDesign-to-code is never fully automatic. Here are a few issues you may run into:Design-to-code is never fully automatic. Here are a few issues you may run into:
| Problem | Solution |
|---|---|
| Uneven layout | Describe the layout problem clearly and ask the model to adjust CSS margin and padding |
| The page is cut off | Check whether the viewport is set correctly and ask for responsive breakpoints |
| Colors are inaccurate | Use a color picker on the design and provide the exact values |
| Fonts do not match | Specify a font family or ask for a Google Fonts replacement |
It is often easier to generate plain HTML first, then import that result into your local IDE and convert it into a React or Vue project afterward.It is often easier to generate plain HTML first, then import that result into your local IDE and convert it into a React or Vue project afterward.
MasterGo also provides strong AI page generation features and can generate usable webpage code from a reference image.MasterGo also provides strong AI page generation features and can generate usable webpage code from a reference image.
In the top toolbar of the MasterGo editor, you can find the AI tool entry:In the top toolbar of the MasterGo editor, you can find the AI tool entry:
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
Insert to canvas button if you want to edit the result visuallyClick the blue Insert to canvas button if you want to edit the result visuallyCode button on the right to copy the implementation locallyOr click the Code button on the right to copy the implementation locally🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
------
Figma Make is Figma's official AI design feature. It can recreate webpage UI prototypes with much higher fidelity from either prompts or reference images.Figma Make is Figma's official AI design feature. It can recreate webpage UI prototypes with much higher fidelity from either prompts or reference images.
To use the full Figma Make experience, you usually need Figma Pro. Students can often get Pro access through education verification.To use the full Figma Make experience, you usually need Figma Pro. Students can often get Pro access through education verification.
Make button on the Figma homepageClick the Make button on the Figma homepage🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
🖼️ Dari Prototipe Desain Menjadi Kode NyataDari Prototipe Desain Menjadi Kode Nyata
Besides the native AI features, both Figma and MasterGo support plugins that export code.Besides the native AI features, both Figma and MasterGo support plugins that export code.
Common Figma pluginsCommon Figma plugins
Typical workflowTypical workflow
------
MCP, or Model Context Protocol, is an open standard that lets AI models access external tools and data sources in a safe and controllable way. In the context of frontend design, MCP allows a model to read the structure, styles, and component metadata of a design file directly instead of guessing from screenshots.MCP, or Model Context Protocol, is an open standard that lets AI models access external tools and data sources in a safe and controllable way. In the context of frontend design, MCP allows a model to read the structure, styles, and component metadata of a design file directly instead of guessing from screenshots.
text ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ AI model │ ←→ │ MCP server │ ←→ │ Design tool │ │ (Claude etc.)│ │(protocol adapter)│ │(Figma/MasterGo)│ └─────────────┘ └─────────────┘ └─────────────┘
Typical flowTypical flow
bash npx figma-mcp-server
json { "mcpServers": { "figma": { "command": "npx", "args": ["figma-mcp-server"], "env": { "FIGMA_ACCESS_TOKEN": "your-figma-token" } } } }
text User: Please convert this Figma design into React code Link: https://www.figma.com/file/xxxxx AI: I have connected to Figma through MCP and I am reading the design structure...
text User: Please extract the button into a reusable component AI: I identified the Button component from the design system via MCP and I am generating a reusable React component with props...
| Feature | Traditional approach | MCP approach |
|---|---|---|
| Data accuracy | Based on screenshots, may lose detail | Reads the original design data directly |
| Component recognition | The model has to guess boundaries | Exact component definitions are available |
| Style fidelity | Estimated from pixels | Reads exact design tokens |
| Iteration speed | Re-screenshot after every change | Design changes can be synced directly |
| Automation | Copy and paste manually | Can write directly into project files |
Design-side MCP toolsDesign-side MCP tools
Development-side MCP toolsDevelopment-side MCP tools
The MCP ecosystem is evolving quickly. Over time, design tools and development environments will become much more tightly integrated, and one-click design-to-code workflows will likely become far more common.The MCP ecosystem is evolving quickly. Over time, design tools and development environments will become much more tightly integrated, and one-click design-to-code workflows will likely become far more common.
------
Once you have the code, open it in your local IDE and test it:Once you have the code, open it in your local IDE and test it:
bash # For plain HTML, open it directly in the browser open index.html # For React/Vue projects npm install npm run dev
| Stage | Problem | Solution |
|---|---|---|
| Layout | Elements are misaligned | Check display, position, and container structure |
| Styles | Colors do not match | Use browser devtools to inspect the actual applied values |
| Responsive behavior | Mobile layout breaks | Add or refine media-query breakpoints |
| Interaction | Buttons do nothing | Check JavaScript event bindings |
------
| Dimension | Path 1: Multimodal AI | Path 2: Platform features | Path 3: MCP |
|---|---|---|---|
| Ease of getting started | ⭐ Easy | ⭐⭐ Moderate | ⭐⭐⭐ More complex |
| Fidelity | ⭐⭐⭐ Medium | ⭐⭐⭐⭐ High | ⭐⭐⭐⭐⭐ Highest |
| Flexibility | ⭐⭐⭐⭐⭐ High | ⭐⭐⭐ Medium | ⭐⭐⭐⭐ Fairly high |
| Automation | ⭐⭐ Low | ⭐⭐⭐ Medium | ⭐⭐⭐⭐⭐ High |
| Cost | Low | Medium | Low |
Choose Path 1 ifChoose Path 1 if
Choose Path 2 ifChoose Path 2 if
Choose Path 3 ifChoose Path 3 if
------
In this chapter, you learned the three core paths from design prototype to code:In this chapter, you learned the three core paths from design prototype to code:
- If you are new: start with Path 1 for speed - For team collaboration: use Path 2 to preserve design consistency - For maximum efficiency: experiment with Path 3 and build an automated workflow - Use them together: switch between paths depending on the project stage- If you are new: start with Path 1 for speed - For team collaboration: use Path 2 to preserve design consistency - For maximum efficiency: experiment with Path 3 and build an automated workflow - Use them together: switch between paths depending on the project stage
------