This overview shows the end-to-end platform flow: design assets are extracted from Figma and standardized into JSON/DSL (with tags and descriptions), forming a Component Index. The left-side pipeline (inside the blue dashed line) runs per iteration: Product Function Spec → HMI Brief → UX structure → WireFrame → UI details, each step producing JSON intermediary artifacts. The WireFrame determines 'what we have and where to place it.' The UI stage adds visual details, then renders to a Figma design file (handed to HMI Staff for polishing). Simultaneously, results are written to the Standard Frame (cumulative state) and a runnable React prototype is generated. Prototype feedback feeds into the next iteration, completing the loop.

Figma is the single source of truth for the design system. Designers organize assets in Figma following a page convention (_Tokens, _Components, _Icons, _Layouts, _Screens). Extractors read these pages via the Figma API, parse @-tag metadata (e.g. @tags, @interaction, @domain), and convert design data into structured JSON for the Knowledge Base. This ensures the designer's latest changes automatically sync into the AI pipeline — no manual maintenance required.

The Knowledge Base is a collection of structured JSON files extracted from Figma, with query indexes. It contains: component library (with semantic tags and interaction types), icons (organized by function domain), design tokens (colors/typography/spacing with day/night mode support), layout templates (with slot definitions), and screen specifications (with derived values like PPI and minimum font sizes). It also includes HMI style definitions (a layered decision model inspired by the ui-ux-pro-max project), reasoning rules (that automatically recommend design atmosphere based on vehicle segment + function domain), and safety/ergonomic constraints (ISO touch target sizes, NHTSA glance time limits, etc.). All query methods (findByTags, findByInteraction, match) support efficient retrieval across pipeline stages.

Two inputs feed the pipeline: (1) Product Function Spec — generated by the upstream AI platform, defining project info, vehicle screen configurations, a function tree (with interaction types, safety levels, data ranges), and user flows; (2) Standard Frame — the cumulative state of previously designed features, with version incrementing on each iteration. After each feature passes through the pipeline, its results merge into the Standard Frame for the next iteration. This progressive design approach ensures new features remain consistent with existing ones in layout and interaction.

The Pipeline is the core processing engine, running once per feature iteration. It has two pre-processing steps and four main stages:

Pre-step A — Auto-generates a 9-section HMI design guidelines document from the Knowledge Base (inspired by awesome-design-md), covering visual theme, color roles, typography hierarchy, component usage, spacing, elevation, Do's/Don'ts, and more. This serves as LLM context.
Pre-step B — Matches reasoning rules by vehicle segment and function domain to produce design recommendations (atmosphere, layout preference, display prominence), giving the LLM evidence-based guidance.

Stage 1 (HMI Brief) — LLM generates design intent: visual priorities, spatial grouping, cross-screen strategy. Receives 7 context blocks and must follow reasoning recommendations.
Stage 2 (UX Map) — Deterministic solver: assigns functions to screens and pages based on affinity scoring, frequency weights, and hard constraints (safety, touch, dependencies).
Stage 3 (Blueprint) — Deterministic solver: selects layout templates, binds components (via tag-overlap scoring), maps properties, and validates all 10 constraints.
Stage 4 (UI Spec) — LLM adds visual polish (animations, track styles, label copy) but must NOT modify the blueprint structure.

Validator — Compares UI Spec output against Blueprint for structural consistency (7 violation types). On failure, automatically retries the LLM (up to 3 times).

Renderers transform the abstract Blueprint + UI Spec into concrete deliverables:

React Renderer — Three steps: (1) scaffold.ts deterministically generates a Vite project scaffold (package.json, routing, page components with auto-imports from the swp-ui-kit component library); (2) state-wiring.ts auto-generates useState declarations and event handlers from the function spec; (3) generate.ts optionally uses LLM to enhance page components with visual polish (animations, value formatting, labels) while strictly preserving the scaffold structure. The output is a fully runnable interactive prototype (npm install && npm run dev).

Figma Renderer — Fully deterministic (no LLM): converts Blueprint layout skeletons into Figma Auto Layout nodes, inserts component instances, applies token fills, and overlays an annotation layer (component names, token references, spacing indicators, color swatches). Outputs JSON for a Figma plugin to consume — HMI designers polish the details before handing off to development.

Each iteration produces 5 types of deliverables: (1) React Prototype — a fully interactive, runnable web application for rapid experience validation; (2) Figma Design — structured nodes with annotation overlays, for HMI designers to polish before dev handoff; (3) HMI-DESIGN.md — 9-section design guidelines document ensuring team alignment on design language; (4) 4 JSON intermediary artifacts (brief, ux-map, blueprint, ui-spec) — a complete, traceable, auditable record of all design decisions; (5) Updated Standard Frame — version +1, containing the new feature's layout and component info, feeding into the next feature iteration.

This table summarizes the prompts and data types used at each pipeline stage. Key design principle: LLMs are only involved where creative judgment is needed (Stage 1 design intent, Stage 4 visual details, React enhancement), while structural decisions (screen assignment, component binding, constraint validation) are handled by deterministic solvers — ensuring repeatability and auditability. Each LLM stage has a System Prompt (defining role and constraints) and User Prompt (injecting dynamic context), with all outputs validated against JSON Schema or structural checks, auto-retrying on failure.

These 8 tuning points form the HMI expert's 'control panel.' Core philosophy: AI executes, experts decide. By editing these files rather than code, HMI experts can precisely control output quality without touching pipeline source code. Recommended workflow: (1) Run the pipeline once with default config and observe the output; (2) Identify which tuning file corresponds to the unsatisfactory aspect; (3) Edit and re-run, comparing the differences. Reasoning rules and style definitions have the broadest impact (they flow through the entire pipeline), Guidelines modifications are the most direct (they change LLM context immediately), and constraint modifications are the strictest (they act as hard quality gates).