Studio XID · Head of Product Dev Team
UI code automation AI system
- Design-to-Code
- ML Pipeline
- Cross-platform
Problem
General-purpose LLMs alone couldn't reliably read a design's structure (hierarchy, repeated elements), so the generated code came out flat, screen by screen, and was hard to reuse.
Key decisions
- 01Designed a code generation pipeline that places AI model stages between rule-based modules
- 02Designed conversion paths so that both image-based and layout (structure)-based inputs can be turned into code
- 03Designed the training of auxiliary models that understand images and layout (structure) and built the training data myself; connected the models trained by teammates to the pipeline to output AOS, iOS and Web component code
Outcome
Developed the core pipeline (PoC) myself, productized it with the team, and officially launched it as ProtoPie MCP in October 2026. Dev View has also finished its beta and is now officially available. Code MCP uses ProtoPie engine information to generate code for 7 frameworks, including React, Flutter and SwiftUI. (Docs)
The effect of grouping repeated UI elements into reusable components is a qualitative observation based on internal cases.
From design data
to cross-platform code
Details
- Project name
- AI-assisted Design-to-Code System for Cross-platform Components
- Client · Domain
- Studio XID / Design & Interaction data
- Period
- 2026.01 - 2026.10
- Scope of work
- Hands-onDesigned a code generation pipeline combining rule-based modules with AI model stages, and developed the core pipeline (PoC)
- Hands-onDesigned the training of auxiliary models that understand images and layout (structure), and built the training data
- Hands-onDesigned the product integration architecture for plugging the code generation pipeline into the existing product (ProtoPie)
- Hands-onDesigned the data pipeline that refines design data accumulated in-house into training data
- LeadRan an agile team of 4–5 AI engineers and app developers — model training by the AI engineers, integration development with the team
- LeadDesigned the MLOps pipeline from data cleaning → training → deployment
- LeadExpanded to cross-platform component code generation for AOS, iOS and Web; official launch as ProtoPie MCP in October 2026
- Role
Head of Product Dev Team
(+ Product Owner, + AI Engineer)
- Tech stack
- Python
- Computer Vision
- LLM
- ML Pipeline
- AWS
- Git
- Figma
- Notion