Building an AI Design Assistant from Scratch: The R2D Workflow

Background

Interaction designers spend a large portion of their time on repetitive tasks such as repeated communication and component filling, which limits the time available for true design judgment. As generative UI (GenUI) becomes an industry trend, this inefficiency is amplified.

Goal

Build a full‑chain AI‑assisted workflow that covers the entire process from PRD to interaction draft and ensures the final draft is production‑ready.

Three‑Stage Process

STEP 1: Enable AI to “draw correctly” by producing designs that follow interaction logic.

STEP 2: Make AI output delivery‑grade drafts that align with components and design specifications.

STEP 3: Solidify the workflow’s reusability by standardizing processes and enabling scalable calls.

Action Sequence and Labeling

The designers’ daily workflow from receiving a PRD to delivering an interaction draft was broken down into concrete actions. Each action was labeled with two dimensions: standardization level and design‑judgment density . Most steps showed “high standardization + low judgment density”, indicating they are suitable for conversion into SKILLs.

Read PRD and extract key points – Standardization: High, Judgment density: Low, Skill fit: Very suitable

Derive interaction flow – Standardization: Medium‑high, Judgment density: Medium, Skill fit: Suitable

Draw layout skeleton – Standardization: Medium, Judgment density: Medium‑high, Skill fit: Suitable

Fill content and select components – Standardization: High, Judgment density: Low, Skill fit: Very suitable

Write abnormal‑state explanations – Standardization: High, Judgment density: Low, Skill fit: Very suitable

AB方案 + 埋点 – Standardization: Medium‑high, Judgment density: Medium, Skill fit: Suitable

Skill Design

PRD Understanding SKILL: Extract business goals, scenarios, and feature list from the PRD.

Interaction Flow Derivation SKILL: Map the full user journey from search to purchase, identifying key branches such as minimum order price.

Page Framework SKILL: Generate multiple layout schemes based on behavior analysis (category grouping vs intelligent deduplication).

Component Mapping SKILL: Use the .design repository to generate a list of components and fields for filling.

Interaction Logic Completion SKILL: Complete missing results, timeouts, and other edge cases in the interaction chain.

First‑Phase Results

Using the five skills, the AI reliably generated interaction logic and page structures that matched the online product. Component choices and visual specifications still deviated from production standards.

Improving Visual Fidelity

Google’s Stitch uses a design.md file to define colors, typography, spacing, and component specs, forcing AI to follow it. The approach failed in our scenario because its component constraints were too generic. We discovered the stitch‑kit project on GitHub, which also maintains a global.css file to store style variables for consistency.

Besides design.md, provide AI with additional references such as global.css and component patterns.

Change the AI’s reading order: first present the concrete assets (components and CSS), then the abstract design rules ( design.md), analogous to showing ingredients before the recipe.

Second‑Phase Iteration

After adjusting the reading order, component usage rates and overall output quality improved significantly, aligning with online delivery requirements.

Stability and Hallucination Mitigation

To guard against AI hallucinations that could break the workflow, a two‑layer protection was added:

AI Self‑Check: Each skill embeds example references and an integrity‑check script; if the output fails the check, regeneration is triggered.

Designer Review: After AI self‑check passes, the system requests a designer’s secondary confirmation to ensure critical nodes are not missed.

Closed‑Loop Integration with MasterGo

The generated UI (HTML) can be converted into an editable MasterGo file. Designers refine the draft in MasterGo, and the changes are synced back to the agent via MCP, forming an “AI generate → manual polish → feedback loop”.

Iteration Review

From “one‑click generation” to “step‑by‑step collaboration” – recognizing that AI feedback should be incremental.

From “structurally correct but visually wrong” to “design.md‑driven” – emphasizing data‑source quality over model size.

From “feeding all rules to AI at once” to “ordered and coupled feeding” – presenting concrete assets before abstract constraints yields better results.

Asset Accumulation

Long‑term sustainability requires building core assets: design.md – internal design specifications (colors, typography, spacing, components, motion).

Layout pattern library – common page layout patterns and their applicable scenarios.

Component mapping rules – AI‑consumable descriptions of the component library.

Historical project references – validated exemplary design cases.

Interaction pattern library – standard interaction patterns (navigation, modal, loading, error handling).

As these assets grow, the AI agent can cover broader interaction scenarios, from single‑button updates to full‑page redesigns and cross‑link multi‑screen flows, providing a sustainable path forward.