AI Design Engineering: How Designers Now Deliver Production React Code for B-End Efficiency

Background

As AI capabilities grow, designers across domains explore using AI to accelerate daily design output. In an era of technology democratization, the article asks whether designers can move beyond delivering static mockups and participate directly in code implementation. The author shares practical experience from the Taobao Shango merchant B-end promotion business.

AI assists differently across requirement types: for standard requirements with reusable components and fixed structures, AI boosts output efficiency; for custom and creative needs, AI serves as an inspiration tool.

Technical Selection: Why AI Design Engineering

A key trait of AI engineering is that the deliverable becomes code. Before detailing the technical choice, the article clarifies the difference between raw HTML and front-end React engineering code.

The article references an image illustrating four main technical paths for AI-driven efficiency (the specific paths are shown in the diagram but not enumerated in the text).

Advantage 1: Standardization

Designers directly use three code libraries — Design Tokens, component library, and template library — during the design process and in the delivered artifacts. Developers can consume these artifacts directly, unlike design mockups or HTML which require an additional developer "translation" layer.

Advantage 2: High Efficiency

Designers skip annotation and slicing steps. Design fidelity approaches 100%, and the number of design-to-dev walkthrough rounds trends toward zero.

Implementation Process & Challenges

The article presents a flowchart (referenced as an image) of the end-to-end process.

Challenge 1: New Design Process & Developer Collaboration

In AI design engineering, designers shift from "delivering images" to "delivering code," taking on roughly 30% more work that previously belonged to front-end developers. This new responsibility is a high barrier for some designers. Two problems emerge: unfamiliarity with the AI design engineering workflow, and low efficiency due to multi-round conversations between designers and the IDE. To lower the entry barrier and accelerate engineering deployment, the team collaborated with developers to distill an SOP Skill that automates the entire process.

Challenge 2: AI Generation Quality Control

The core solution applies design thinking to define Skill content, build an efficient framework, improve generation quality and speed, and reuse lessons in an App Skill.

Content Layer

To overcome the "blank page" problem when authoring Skills, the team mirrored the designer's mental model: understand the business, map the business flow, decide page frameworks per flow node, select components per page, and ensure global style compliance. This yielded a four-step core sequence: Business Process → Page Framework → Component Usage → Global Style . They also evaluated AI UI generation tools (including Lovable and Figmamake) to understand AI capability boundaries and strengths.

Framework Layer

The initial design considered a two-level parent-child structure where a parent skill orchestrated child skills. This added complexity and risked degrading AI comprehension and generation. The final principle favored simplicity, lightweight structure, and progressive disclosure, consolidating all logic into a single design skill.

Co-build Mechanism

Design asset Skills require long-term iteration. Placing multi-business design specs into one Skill would cause bloat and context explosion. The interim strategy: maintain common specifications (Design Tokens, Layout, base components, base templates) centrally, while each business team independently maintains its own business-specific specs.

Results & Outlook

Current efficiency gains for standard promotion pages are illustrated in a referenced chart. The ultimate goal is 80–90% design efficiency improvement for standard pages, with ongoing optimization. However, model capability ceilings and hallucination variance mean designers must still perform quality control; AI cannot yet fully replace the designer's oversight role.