Picasso: An Open-Source Sketch Design to Front-End Code Automation Tool

Picasso is an open‑source project launched by 58.com in September 2020 that converts Sketch design drafts into accurate, reusable front‑end code, aiming to improve UI development efficiency and accelerate business growth.

Project background: UI automation has become a research trend; Sketch files contain structured data that can be parsed to generate code automatically.

Core design: The tool’s workflow consists of Symbol parsing, layer reconstruction, attribute parsing, and layout processing.

1. Symbol parsing: Symbol JSON files are merged into page JSONs, parameters are scoped to child symbols, and scaling is applied based on SymbolInstance and SymbolMaster dimensions.

2. Layer reconstruction: The process includes removing original groups, layering overlapping elements, reordering layers from top‑left to bottom‑right, feature‑based grouping, and structural simplification using rules that eliminate redundant containers and images.

3. Attribute parsing: Sketch attributes are mapped to CSS styles to preserve visual details.

4. Layout: After structure and style extraction, layout handling generates the final UI code.

Summary: By completing module parsing, layer reconstruction, attribute extraction, and layout, Picasso delivers automated, precise, and highly usable front‑end code from Sketch sources.

Future plans: Ongoing optimization of parsing algorithms, support for custom DSLs to generate code for mini‑programs, RN, and other clients, and expansion to parse other design sources such as Photoshop.

Contribution: The project is hosted on GitHub (https://github.com/wuba/Picasso); contributions via pull requests or issues are welcomed.