Boosting End-to-End Efficiency with AI: From Single-Point Gains to Full Process Integration

Background & Goal

The team used the YoyoMan Drama app as a reference to run a deep AI experiment covering the entire product chain—from requirements to design, development, and testing—to shift from a labor‑driven to an AI‑driven paradigm.

Full‑Process Overview

End‑to‑end intelligent loop (see diagram).

Product Phase – Prompt‑Friendly PRD

A standardized requirement template extracts keywords from the PRD and matches them against a prompt library, turning repetitive information‑gathering into a quick, structured input for deeper analysis.

AI helps create a "feasible requirement" template; it does not write requirements automatically but acts as a collaborator that reminds PMs of necessary dimensions.

Design Phase – Design‑as‑Code & Prompt Templates

Product and design co‑define a "requirement paradigm". AI then generates prototype drafts based on this paradigm. Three fill‑in‑the‑blank templates (single‑page 0‑1, single‑page 1‑2, multi‑page flow) ensure logical, complete documents.

Development Phase – AI Coding Practices (Q4 2025)

Single‑Point Gains

Style assembly & repetitive logic: AI generates layout code and utility functions far faster than manual coding.

Code completion & continuation: AI can continue existing code blocks with high acceptance rates.

Assistive debugging & refactoring suggestions: AI acts as a second pair of eyes for optimization.

These gains are strongest when the task has clear context and high standardisation; complex business logic still requires human oversight.

F2C – Design‑to‑Code

For well‑structured, modular pages, F2C reproduces code with high fidelity. For intricate layouts or multi‑state components, substantial manual correction is still needed. Quality depends on completeness of underlying Rules and clarity of design files (layer hierarchy, AutoLayout, naming).

AI CR & AI Unit‑Testing

AI‑driven code review initially suffered high false‑positive rates; after analysing errors and tailoring language‑specific rules, effectiveness improved. AI unit‑testing focuses on complex branches and regression paths, raising branch coverage for new modules while requiring custom Rules to align with the team’s proprietary framework.

Infrastructure – Rules, MCP, Skills

To make AI understand the custom cross‑platform framework, the team created ~25 Rules files covering project structure, component APIs, coding conventions, and migration paths. They are loaded via a single entry start.mdr following a three‑step load order: base rules → scenario‑specific rules → generation.

# Component usage rule
# Component: img / list / swiper / video / pagview / refresh
# Include attribute table, events, warnings, positive/negative examples

The MCP tool bridges frontend and native capabilities, allowing the coding agent to query available device APIs directly instead of asking a teammate.

Skills encapsulate repeatable workflows (e.g., automated test generation) by combining Rules knowledge with fixed execution steps, turning AI from a "knows" to a "does" agent.

Collaboration Model – Code as the Middle State

In a pilot on the official website, UI designers used Figma Make to generate runnable code, while frontend engineers performed engineering‑level adjustments. This eliminated the traditional hand‑off of design files and made code the single artifact shared across roles.

Key Lessons Learned

Infrastructure is the bridge: Rules, MCP, and Skills are required to move from isolated single‑point improvements to system‑wide AI adoption.

Start with high‑closure tasks: Choose highly standardised, short‑feedback loops (style assembly, unit‑test generation) to build trust.

Cross‑role alignment: Designers think bottom‑up, engineers top‑down; pre‑alignment of architecture reduces rework.

Recognise boundaries: AI excels in new, interaction‑rich projects; legacy codebases benefit from gradual, module‑level integration.

Future Directions

Continue expanding Rules and Skills to cover more frameworks and business standards.

Explore pipelines such as Figma → Mermaid → code to structure interaction data for better controllability.

Run multi‑role pilots on 1‑2 complex modules to validate the approach in less‑ideal conditions.

Detailed AI Coding Experience

Single‑Point Improvements

Style assembly & repetitive logic: Layout code and utility functions generated quickly.

Code continuation: High acceptance when clear surrounding context is provided.

Debugging & refactoring suggestions: Useful as a secondary reviewer.

F2C – Design‑to‑Code

Effective for pages with clear module boundaries and well‑organized design files (layer hierarchy, AutoLayout, naming). Complex multi‑state components still require substantial manual fixes.

AI Code Review (AI CR)

Initial high false‑positive rate; after analysing error patterns and adding language‑specific Rules, false positives decreased and review usefulness increased.

AI Unit‑Testing

Targets complex branches and regression paths, improving branch coverage for new modules. Requires custom Rules to reflect the proprietary framework’s component lifecycle and mock strategy.

Rules System

~25 rule files organized into four categories:

Base rules: Project structure, component syntax, style whitelist, best‑practice layouts.

Component & ability rules (on‑demand): Covers six built‑in components (img, list, swiper, video, pagview, refresh) and three ability groups (DOM‑BOM‑router, native API calls, CSS animation), each with attribute tables, events, examples.

Engineering rules: Project configuration, CLI scaffolding, unit‑test (vitest) conventions, AI code‑review standards.

Migration rules: Full migration chain (project structure, API replacement, component tags, style conversion, directory optimisation) for legacy projects.

All rules are loaded via start.mdr in the order: base → scenario → generation, ensuring AI always has the latest framework knowledge before code generation.

MCP Tool

Provides a query interface for native device capabilities (e.g., system APIs, custom native components). This removes the information asymmetry where frontend developers previously had to ask client teammates for API details.

Skills

Encapsulate repeatable, multi‑step workflows. Example: a front‑end unit‑test Skill that analyses a module’s branch structure, generates framework‑compliant test cases, and injects them into the project automatically.

Collaboration Shift

Code becomes the shared middle artifact: designers generate runnable code directly from design tools; developers refine and integrate it, eliminating the traditional design‑to‑code hand‑off. This model works best for new, interaction‑heavy projects; legacy projects should adopt a modular, incremental approach.

Overall Insight

AI tools are easy to adopt, but sustainable productivity requires infrastructure that makes team knowledge explicit and consumable by AI—namely Rules, MCP, and Skills. With this foundation, AI can move from isolated assistance to a core collaborator across the product lifecycle.