# From UI Design Image to GUI Skeleton: A Neural Machine Translator to Bootstrap Mobile GUI Implementation

> UI2code translates a mobile UI image into an Android component hierarchy and layout skeleton using a neural encoder-decoder. The paper evaluates structural prediction and a small developer study of implementing layouts from generated skeletons.

- Authors: Chunyang Chen; Ting Su; Guozhu Meng; Zhenchang Xing; Yang Liu
- Venue: ICSE 2018
- Status: Conference paper
- Publication / posting date: May 27, 2018
- Date source: Publisher-deposited Crossref publication date for the ICSE proceedings article.
- DOI: 10.1145/3180155.3180240
- Sources reviewed: 2026-10-17
- Added to the catalog: 2026-10-17
- Original paper: <https://doi.org/10.1145/3180155.3180240>
- PDF: <https://chunyang-chen.github.io/publication/ui2code.pdf>
- Code: <https://github.com/ccywch/UI2code>
- BibTeX: <https://awesomerea.org/papers/citations/paper-ui2code.bib>
- Catalog page: <https://awesomerea.org/papers/paper-ui2code/>
- Record JSON: <https://awesomerea.org/papers/paper-ui2code/record.json>
- Chinese version: [简体中文](https://awesomerea.org/zh/papers/paper-ui2code/index.md)

## Scope and limitations

The output covers component types and hierarchy from a single image; detailed styling and text require developer work. Structural token accuracy and an eight-participant study on five screenshots do not establish complete visual fidelity, navigation, app logic or backend recovery. The main split is screenshot-based; a separate evaluation on 1,208 images from 20 unseen apps provides limited generalization evidence.

## Why it fits this collection

A native-app reconstruction foundation that explicitly generates and evaluates GUI structure from visual observations, beyond locating interface elements.

## Publication and review notes

The author-hosted PDF prints 10.1145/3180155.3180222, which identifies another paper; the DOI here follows publisher-deposited metadata for this title, pages 665–676. The artifact README lists 29,887 screenshots, while the paper reports 185,277 image/skeleton pairs. The pinned legacy Torch/Lua repository has no license file.

## Primary sources

1. <https://doi.org/10.1145/3180155.3180240>
2. <https://api.crossref.org/works/10.1145/3180155.3180240>
3. <https://chunyang-chen.github.io/publication/ui2code.pdf>
4. <https://conf.researchr.org/details/icse-2018/icse-2018-Technical-Papers/12/From-UI-Design-Image-to-GUI-Skeleton-A-Neural-Machine-Translator-to-Bootstrap-Mobile>
5. <https://github.com/ccywch/UI2code>
6. <https://raw.githubusercontent.com/ccywch/UI2code/fa2cb895dd3367340180257880a76886c9b6ee2f/README.md>
7. <https://raw.githubusercontent.com/ccywch/UI2code/fa2cb895dd3367340180257880a76886c9b6ee2f/src/train.lua>

## About this entry

Reviewed against the paper and its primary sources. Cite the original authors using the linked paper or BibTeX.
Original editorial content: MIT. Linked projects, papers and assets retain their own rights and licenses.