Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Production-Grade AI Coding System for Client-Side Development

Ruihan Wang, Chencheng Guo, Guangjing Wang

TL;DR

Results show that domain-specific adaptation significantly improves PRD understanding accuracy, while end-to-end evaluations demonstrate high UI fidelity and robust implementation of interaction logic in real-world cases suggest that structured, artifact-centric pipelines provide a practical foundation for production-grade AI coding systems.

Abstract

Deploying large language model-based code generation in real-world client-side development remains challenging due to heterogeneous inputs, strict engineering constraints, and complex interaction logic expressed in product requirement documents (PRDs). Existing design-to-code approaches often focus on visual translation or single-shot generation, and struggle to reliably align generated code with production requirements. This paper presents a production-grade AI coding system designed for client-side development under realistic industrial constraints. The system adopts a structured, multi-stage pipeline that integrates Figma designs, natural-language PRDs, and domain-specific engineering knowledge into explicit intermediate artifacts, enabling controlled planning and incremental code generation. By grounding PRD understanding in concrete UI components, the system improves alignment between product requirements and implementation. We evaluate the system on proprietary but realistic datasets derived from production client-side projects. Results show that domain-specific adaptation significantly improves PRD understanding accuracy, while end-to-end evaluations demonstrate high UI fidelity and robust implementation of interaction logic in real-world cases. These findings suggest that structured, artifact-centric pipelines provide a practical foundation for production-grade AI coding systems.

Production-Grade AI Coding System for Client-Side Development

TL;DR

Results show that domain-specific adaptation significantly improves PRD understanding accuracy, while end-to-end evaluations demonstrate high UI fidelity and robust implementation of interaction logic in real-world cases suggest that structured, artifact-centric pipelines provide a practical foundation for production-grade AI coding systems.

Abstract

Deploying large language model-based code generation in real-world client-side development remains challenging due to heterogeneous inputs, strict engineering constraints, and complex interaction logic expressed in product requirement documents (PRDs). Existing design-to-code approaches often focus on visual translation or single-shot generation, and struggle to reliably align generated code with production requirements. This paper presents a production-grade AI coding system designed for client-side development under realistic industrial constraints. The system adopts a structured, multi-stage pipeline that integrates Figma designs, natural-language PRDs, and domain-specific engineering knowledge into explicit intermediate artifacts, enabling controlled planning and incremental code generation. By grounding PRD understanding in concrete UI components, the system improves alignment between product requirements and implementation. We evaluate the system on proprietary but realistic datasets derived from production client-side projects. Results show that domain-specific adaptation significantly improves PRD understanding accuracy, while end-to-end evaluations demonstrate high UI fidelity and robust implementation of interaction logic in real-world cases. These findings suggest that structured, artifact-centric pipelines provide a practical foundation for production-grade AI coding systems.
Paper Structure (44 sections, 1 equation, 2 figures, 4 tables)

This paper contains 44 sections, 1 equation, 2 figures, 4 tables.

Table of Contents

  1. Introduction
  2. System Design
  3. Core Insight
  4. System Overview
  5. Context Canonicalization
  6. Figma Canonicalization
  7. PRD Decomposition
  8. Knowledge Injection via Retrieval-Augmented Context
  9. Task Planning
  10. Execution Orchestration
  11. Implementation Details
  12. Implementation Architecture and Engineering Stack
  13. Execution Workflow
  14. Fine-tuning for PRD Decomposition
  15. Design of UI Component Taxonomy
  16. ...and 29 more sections

Figures (2)

  • Figure 1: Temporal workflow of the system, showing how natural language and design inputs are progressively transformed into executable code through a sequence of structured stages. Detailed explanations of the stages and connections are provided in the main text.
  • Figure 2: An anonymized example of an emoji searching interface used in our evaluation. (a) Target UI design. (b) Generated UI design produced by the system. All visual elements are mock assets and do not correspond to any real product.