The article compares Figma’s MCP Server integration and Pencil’s Git‑based design files for feeding Claude Code, detailing each workflow, practical constraints, and recommending the best fit for solo developers versus teams with established design systems.
This article examines the challenges of pixel‑perfect UI reconstruction and semantic code generation for consumer‑facing front‑end projects, and presents a hybrid rule‑algorithm and large‑language‑model architecture that streamlines design‑to‑code (D2C) and requirement‑to‑code (P2C) workflows, integrates IDE plugins, and dramatically improves developer productivity.
This article details how Alipay's engineering team built an AI‑Agent‑powered coding assistant for Kotlin Multiplatform (KMP) native cross‑platform development, covering architecture, UI generation from designs and images, RAG‑based knowledge retrieval, crash analysis, and future directions for AI‑driven software engineering.
This article explores how a new AI‑powered workflow combines visual layout detection, design‑system standards, DSL recall, and a custom design‑plugin to turn complex transaction‑page mockups into clean, rpx‑compatible front‑end code in just a few steps, dramatically reducing developer effort and error.
This article explores how AI-driven tools are reshaping frontend engineering by automating design‑to‑code conversion, interface‑to‑data‑model mapping, private component integration, code fitting, AI code review, and automated test regression, and it evaluates their impact on efficiency and future development workflows.
WeaveFox, Ant Group’s AI‑powered front‑end platform, claims to turn design drafts into fully functional React or Vue code—including precise pixel alignment and interactive effects—in seconds, while offering cross‑terminal support, automated refactoring, performance boosts, and a continuous learning loop, yet the author argues it won’t fully replace developers.
YYF2C, Baidu and YY Interactive’s all‑in‑one Figma‑plus‑AI platform, transforms design files into high‑fidelity, semantically named code across web, React Native and admin components, offering plugins, light‑logic tags, DSL converters and SaaS management that together boost development efficiency by roughly fifteen percent.
JD’s Huamei platform leverages AI to automatically convert design mockups into usable front‑end code, streamlining UI reconstruction and business‑logic implementation, reducing repetitive work, and boosting development efficiency for financial app teams, while outlining its workflow, capabilities, limitations, and advanced features.
This article explains JD's design‑to‑code platform that leverages AI to automatically transform design drafts into front‑end code, detailing the typical frontend workflow, the platform's capabilities and limitations, and how it improves development productivity for financial app teams.
Seal D2C, NetEase Cloud Music’s design‑to‑code platform, automatically converts Figma, MasterGo, Photoshop and Sketch files into high‑fidelity React, React Native and DSL code, cutting design‑review cycles, slashing developer‑designer communication, and delivering roughly 30% productivity gains across thousands of pages.
The article introduces Semi D2C, a design‑to‑code solution built by the Douyin frontend team that converts Figma design files into reusable JSX/CSS code, explains its capabilities, implementation details, challenges, benefits for designers and developers, and how it differs from other D2C approaches.
Alibaba’s Front‑end Intelligent Group has built a D2C‑driven platform that converts 2‑D design drafts into high‑quality, token‑driven HTML/CSS through advanced preprocessing, text‑merge, badge recognition, skeleton grouping, and epoch‑based transformation pipelines, enabling rapid, no‑code UI personalization and scalable engineering quality.
This article demonstrates how the CodeFun tool can automatically transform UI design drafts into functional front‑end code across multiple frameworks, streamlining repetitive marketing page development by eliminating manual slicing, styling, and basic logic implementation.
Vivo’s frontend team built a self‑attention‑based machine‑learning model that predicts web‑page layout types (column, row, or absolute) from node dimensions and positions, solving parent‑child and sibling relationships for design‑to‑code conversion, achieving 99.4% accuracy using over 20 k labeled, crawled, and generated samples, while outlining further enhancements.
An in‑depth look at MonaLisa, an AI‑driven visual UI inspection platform that automates pixel‑level checks by converting design files to HTML, matching DOM structures, and leveraging OpenCV and MobileNetV2 to generate reports, reduce manual rework, and streamline front‑end development workflows.
The ASLINE visual low‑code platform lets Shopee Supply Chain engineers turn Figma designs into editable Vue pages by automatically recognizing components, mapping them to internal libraries, generating API request code, and exporting semi‑finished code, achieving roughly 92% recognition accuracy and cutting development time by about 80%.
This article explains how the Deco platform uses AI and layout algorithms to automatically convert design drafts into reusable, semantic front‑end code, achieving around a 48% productivity gain during large‑scale e‑commerce events by streamlining UI reconstruction, component reuse, and data binding.
This article details the Deco intelligent code project, which leverages AI and layout algorithms to transform design drafts into semantic, reusable frontend code, achieving around 48% efficiency gains during large‑scale e‑commerce events and outlining the full pipeline from design processing to DSL generation and future AI platform integration.
The article presents a three‑stage pipeline that automatically transforms Sketch design drafts into a DSL view tree, infers layout and style properties, and generates Meituan‑compatible static front‑end code, while offering visual tools for layer cleanup, component recognition, and property adjustment to ensure high‑fidelity mobile UI reproduction.
This article details how Taobao's frontend team tackled the double‑peak Double 11 challenge with massive workload, introduced Design‑to‑Code automation, Serverless FaaS, progressive hybrid apps, edge rendering and smart UI, achieving higher efficiency, stability, and conversion gains across the massive shopping festival.
Front‑end intelligentization leverages AI and machine learning to empower developers with design‑to‑code automation, smart UI generation, and Pipcook integration, aiming to solve frontline engineers' pain points, boost productivity, and evolve the front‑end technology stack through deterministic, robust, and evolutionary approaches.
This article explains why front‑end intelligentization is needed, how AI and machine‑learning techniques are applied to design‑to‑code workflows, and the technical, operational, and cultural upgrades required to boost developer productivity and deliver business value in modern web projects.
This article describes how Alibaba Cloud’s front‑end and marketing platform team tackled frequent urgent requests and front‑end bottlenecks by adopting component‑based development and intelligent Design‑to‑Code tools like imgcook, resulting in significant automation, reduced manual effort, and a scalable low‑code workflow.
This article explores how AI-driven front‑end code generation—from design‑to‑code pipelines, product analyses, technical challenges, and layered recognition models—to improve developer efficiency, detailing the D2C system, its real‑world deployment during 2019 Double‑11, and future roadmap.
This article details Alibaba’s front‑end intelligent project that automatically transforms Sketch design files into production‑ready HTML/CSS/JS code, covering the design‑to‑code workflow, layer processing, mask handling, text calibration, layer merging, unused‑layer detection, testing, visual‑restoration metrics, and future enhancements.
This article explores how front‑end teams are leveraging AI to automate the conversion of design drafts into HTML, CSS, and JavaScript, analyzing background trends, competitive solutions, technical challenges, and the layered D2C architecture that powers Alibaba's imgcook platform.
This article explores the rise of front‑end intelligence, analyzing background trends, competitive solutions, problem decomposition, and technical approaches for automatically converting design drafts into HTML, CSS, and JavaScript, while discussing challenges, model accuracy, data quality, and future roadmap for the D2C (Design‑to‑Code) system.
This guide walks front‑end developers through essential Photoshop shortcuts and panel tricks—layer selection, property inspection, color picking, margin measurement, CSS copying, layer duplication, asset generation, and icon fine‑tuning—to streamline design‑to‑code conversion efficiently.
