BestHub
Sign in
Tagged articles

design-to-code

30 articles · Page 1 of 1
DaTaobao Tech
DaTaobao Tech
Jun 24, 2026 · Artificial Intelligence

Tarot Pixel: An Agent‑Native Visual Restoration System for AI‑Powered Front‑End Coding

The article presents Tarot Pixel, an agent‑native visual‑restoration framework that shifts design‑to‑code from a static pipeline to an interactive AI‑driven loop, enabling Coding Agents to query structured visual data on demand, reduce manual layer handling, and iteratively refine front‑end implementations.

AI codingAgent‑NativeCoding Agent
0 likes · 31 min read
Tarot Pixel: An Agent‑Native Visual Restoration System for AI‑Powered Front‑End Coding
Tech Ocean
Tech Ocean
Jun 4, 2026 · Frontend Development

Claude Code Recreates Figma Designs: Two Practical Ways to Skip Manual Styling

The article walks through installing Claude Code and its Figma plugin, then compares two methods—official MCP extraction and screenshot‑based visual reconstruction—to automatically generate uni‑app code from Figma designs, highlighting speed gains, precision differences, and common pitfalls when converting px to rpx.

Claude CodeFigmaMCP
0 likes · 12 min read
Claude Code Recreates Figma Designs: Two Practical Ways to Skip Manual Styling
AI Programming Lab
AI Programming Lab
Apr 13, 2026 · Frontend Development

Which Tool Wins for Claude Code Vibe Design: Figma or Pencil?

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.

AI UI generationClaude CodeFigma
0 likes · 12 min read
Which Tool Wins for Claude Code Vibe Design: Figma or Pencil?
Qunar Tech Salon
Qunar Tech Salon
Feb 10, 2026 · Frontend Development

How AI + Rule Engines Revolutionize Frontend Code Generation for Complex C‑End Apps

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.

AI codingFrontendIDE plugin
0 likes · 25 min read
How AI + Rule Engines Revolutionize Frontend Code Generation for Complex C‑End Apps
Alipay Experience Technology
Alipay Experience Technology
Nov 18, 2025 · Mobile Development

Boosting KMP Native Cross‑Platform Development with AI Agents: Real‑World Practices

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.

AI AgentCompose MultiplatformKMP
0 likes · 20 min read
Boosting KMP Native Cross‑Platform Development with AI Agents: Real‑World Practices
DaTaobao Tech
DaTaobao Tech
Aug 8, 2025 · Frontend Development

Can AI Turn Design Mockups into Perfect Front‑End Code with One Click?

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.

AIMCPWeaveFox
0 likes · 20 min read
Can AI Turn Design Mockups into Perfect Front‑End Code with One Click?
DaTaobao Tech
DaTaobao Tech
Apr 18, 2025 · Frontend Development

How AI Is Transforming Frontend Development: From Design‑to‑Code to Automated Testing

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.

AIAutomationCodeGeneration
0 likes · 37 min read
How AI Is Transforming Frontend Development: From Design‑to‑Code to Automated Testing
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Mar 1, 2025 · Frontend Development

Ant Group’s Secret Weapon WeaveFox: Will AI Make Front‑End Development Obsolete?

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.

AI frontendReActVue
0 likes · 7 min read
Ant Group’s Secret Weapon WeaveFox: Will AI Make Front‑End Development Obsolete?
Baidu Geek Talk
Baidu Geek Talk
Jun 19, 2024 · Frontend Development

YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution

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.

AI code generationFigmaYYF2C
0 likes · 11 min read
YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution
JD Cloud Developers
JD Cloud Developers
Feb 7, 2024 · Frontend Development

How JD’s Huamei Platform Turns Design Mockups into Front‑End Code Automatically

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.

AIAutomationFrontend
0 likes · 13 min read
How JD’s Huamei Platform Turns Design Mockups into Front‑End Code Automatically
JD Tech
JD Tech
Jan 23, 2024 · Frontend Development

Design‑to‑Code Platform Overview and Its Impact on Frontend Development Efficiency

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.

AIPlatformUI conversion
0 likes · 11 min read
Design‑to‑Code Platform Overview and Its Impact on Frontend Development Efficiency
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 30, 2023 · Frontend Development

Seal D2C: Design‑to‑Code Solution for Efficient UI Development at NetEase Cloud Music

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.

AIComponent RecognitionUI automation
0 likes · 22 min read
Seal D2C: Design‑to‑Code Solution for Efficient UI Development at NetEase Cloud Music
ByteFE
ByteFE
Aug 9, 2023 · Frontend Development

Semi D2C: Design‑to‑Code System for Accelerating Frontend UI Development

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.

Component RecognitionFigmaLow-code
0 likes · 26 min read
Semi D2C: Design‑to‑Code System for Accelerating Frontend UI Development
DaTaobao Tech
DaTaobao Tech
Feb 17, 2023 · Frontend Development

Advances in Front‑end Intelligent Layout Algorithms and D2C Technology

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.

Engineeringdesign-to-codeintelligent UI
0 likes · 23 min read
Advances in Front‑end Intelligent Layout Algorithms and D2C Technology
vivo Internet Technology
vivo Internet Technology
Aug 24, 2022 · Frontend Development

Applying Self-Attention Based Machine Learning Model to Design-to-Code Layout Prediction

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.

D2CNeural NetworkSelf-Attention
0 likes · 11 min read
Applying Self-Attention Based Machine Learning Model to Design-to-Code Layout Prediction
Shopee Tech Team
Shopee Tech Team
May 19, 2022 · Frontend Development

ASLINE: A Visual Low‑Code Platform for Efficient Front‑End Development in Shopee Supply Chain WMS

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%.

API integrationAutomationComponent Recognition
0 likes · 27 min read
ASLINE: A Visual Low‑Code Platform for Efficient Front‑End Development in Shopee Supply Chain WMS
Aotu Lab
Aotu Lab
Nov 5, 2021 · Frontend Development

How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code

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.

AIFrontenddesign-to-code
0 likes · 16 min read
How Deco Boosts Frontend Efficiency by 48% with AI‑Powered Design‑to‑Code
JD Tech
JD Tech
Nov 5, 2021 · Frontend Development

Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development

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.

AIFrontenddesign-to-code
0 likes · 14 min read
Deco Intelligent Code Project: Design‑to‑Code Solution for Frontend Development
Meituan Technology Team
Meituan Technology Team
Mar 25, 2021 · Frontend Development

Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms

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.

AutomationFrontendcode generation
0 likes · 19 min read
Automated Generation of Front-End Code from Design Drafts: Architecture and Algorithms
Taobao Frontend Technology
Taobao Frontend Technology
Nov 16, 2020 · Frontend Development

Taobao Frontend Secrets Behind Double 11: FaaS, D2C, Performance Hacks

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.

Double11Optimizationdesign-to-code
0 likes · 20 min read
Taobao Frontend Secrets Behind Double 11: FaaS, D2C, Performance Hacks
Taobao Frontend Technology
Taobao Frontend Technology
Nov 4, 2020 · Frontend Development

How Front‑End AI is Transforming Development: From Design to Code

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.

AIAutomationdesign-to-code
0 likes · 14 min read
How Front‑End AI is Transforming Development: From Design to Code
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 4, 2020 · Frontend Development

How AI is Transforming Front‑End Development: From Design to Code

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.

AIAutomationFrontend
0 likes · 14 min read
How AI is Transforming Front‑End Development: From Design to Code
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 24, 2020 · Frontend Development

How Alibaba’s Front‑End Team Boosted Efficiency with Design‑to‑Code Automation

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.

AutomationComponentizationFrontend
0 likes · 9 min read
How Alibaba’s Front‑End Team Boosted Efficiency with Design‑to‑Code Automation
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 19, 2020 · Frontend Development

How AI Is Revolutionizing Front-End Code Generation

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.

AIAutomationFrontend
0 likes · 19 min read
How AI Is Revolutionizing Front-End Code Generation
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 28, 2019 · Frontend Development

How Frontend Code Is Auto‑Generated: Inside Alibaba’s Design‑to‑Code System

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.

AutomationFrontendSketch Plugin
0 likes · 15 min read
How Frontend Code Is Auto‑Generated: Inside Alibaba’s Design‑to‑Code System
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 21, 2019 · Frontend Development

How AI Is Revolutionizing Front‑End Development: From Design Drafts to Code

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.

AIAutomationFrontend
0 likes · 20 min read
How AI Is Revolutionizing Front‑End Development: From Design Drafts to Code
Aotu Lab
Aotu Lab
Jun 30, 2017 · Frontend Development

Boost Your Front‑End Workflow: 10 Photoshop Tricks Every Developer Should Know

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.

CSS extractionPhotoshopasset generator
0 likes · 10 min read
Boost Your Front‑End Workflow: 10 Photoshop Tricks Every Developer Should Know