---
title: 'UI2Codeⁿ: UI Generation & Narayana Coding'
url: https://www.emergentmind.com/topics/ui2code-text-n
type: topic
---

# UI2Codeⁿ: UI Generation & Narayana Coding

UI2Code$^\text{N}$ is a unified term designating two rigorously specified, entirely unrelated schemes: a contemporary visual language model for interactive UI-to-code generation [2511.08195], and a universal binary integer code governed by the Narayana sequence [1601.07110]. The dual usage reflects both modern AI system design and mathematical coding theory, each with distinct formalisms, objectives, and operational mechanics. Only the connection in nomenclature links these topics.

## 1. Visual Language Model for Interactive UI-to-Code Generation

The first and currently prominent usage of UI2Code$^\text{N}$ designates an open-source visual language model (VLM) architecture tailored for automatic, interactive, and test-time scalable user interface generation from rendered screenshots. UI2Code$^\text{N}$ introduces foundational advances in multimodal UI coding by unifying three core capabilities: direct UI-to-code synthesis, UI editing via natural language instruction, and iterative UI code polishing. This system explicitly addresses the limitations of underdeveloped multimodal reasoning and non-interactive paradigms found in prior work.

### 1.1 Model Architecture

UI2Code$^\text{N}$ utilizes a multimodal encoder–decoder Transformer with the following building blocks:

- **Visual Encoder:** A ViT-style backbone employing patch embedding, positional encoding, and self-attention, operating on UI screenshots or renders.
- **Language Decoder:** A causal Transformer generating structured code tokens (typically HTML, CSS, JS).
- **Cross-modal Fusion:** Decoder layers incorporate cross-attention to visual encoder outputs:
  $$
  H_{\text{cross}} = \mathrm{softmax}\left(\frac{Q_{\text{dec}}K_{\text{vis}}^{\top}}{\sqrt{d}}\right)V_{\text{vis}},
  $$
  where $Q_{\text{dec}} \in \mathbb{R}^{T \times d}$ are the decoder queries, $(K_{\text{vis}}, V_{\text{vis}}) \in \mathbb{R}^{N_{\text{patch}} \times d}$ are keys/values.
  
Inputs and decoding prompts distinguish among three tasks:
- **UI-to-code:** Screenshot $\rightarrow$ code, with special <think>…</think><answer>…</answer> scaffolding.
- **UI polishing:** Target screenshot, initial code tokens, and the rendered output $\rightarrow$ refined code.
- **UI editing:** Reference screenshot, prior code, and text instruction $\rightarrow$ revised code.

The same model core is reused, altering only modality subcomponents and task-specific input templates.

### 1.2 Training Methodology

The UI2Code$^\text{N}$ training pipeline consists of three stages:

1. **Continual Pre-training:** Approximately $10^7$ real webpage pairs (screenshot + HTML) and $2 \times 10^6$ synthetic pairs are used, interleaved with general VLM objectives (captioning, VQA, OCR, video QA). Primary objectives are:
   - Masked Language Modeling (MLM) on code tokens:
     $$
     \mathcal{L}_{\mathrm{MLM}} = -\sum_{t \in M} \log p(x_t | x_{<t}, I)
     $$
   - GUI referring, predicting HTML spans from screenshots and DOM locations:
     $$
     \mathcal{L}_{\mathrm{span}} = -\sum_{i=1}^L \log p(h_i | h_{<i}, I, \mathrm{bbox})
     $$
   - Image–Text Contrastive Learning:
     $$
     \mathcal{L}_{\mathrm{CTR}} = -\sum_{i}\log \frac{\exp(\mathrm{sim}(I_i, T_i) / \tau)}{\sum_j \exp(\mathrm{sim}(I_i, T_j)/\tau)}
     $$

2. **Supervised Fine-tuning (SFT):** Uses $80,000$ curated examples with scaffolding for all three tasks; optimizes cross-entropy on canonical target outputs for each task.

3. **Reinforcement Learning (RL):** Policy gradient (GRPO) on $12,000$ real + $30,000$ synthetic rollouts. Reward signals are derived from a VLM-based verifier (GLM-4.5V), scoring image similarity. Enhanced by a human-aligned “comparator” and round-robin ranking:
   $$
   J(\theta) = \mathbb{E}_{a_{1:T} \sim \pi_\theta}\Bigl[\sum_{t=1}^T r_t\Bigr],\quad
   \nabla_\theta J(\theta)=\mathbb{E}\left[r_t \nabla_\theta\log\pi_\theta(a_t|s_t)\right]
   $$

### 1.3 Multi-Turn Interactive Workflow

A hallmark of UI2Code$^\text{N}$ is test-time scaling, leveraging iterative visual feedback:

```pseudo
procedure INTERACTIVE_UI2CODE(I_image, N_rounds):
  C⁰ ← GenerateCode(I_image)
  R⁰ ← Render(C⁰)
  for t in 1..N_rounds−1:
    Input ← (I_image, Cᵗ⁻¹, Rᵗ⁻¹)
    Cᵗ ← PolishingModel(Input)
    Rᵗ ← Render(Cᵗ)
  return C^{N_rounds−1}, R^{N_rounds−1}
```
Each round typically improves CLIP/VLM score by 2–4%.

## 2. Evaluation and Empirical Performance

Evaluation on several public and proprietary UI-to-code and UI-polishing benchmarks demonstrates state-of-the-art open-source performance and competitiveness with leading closed-source models (Claude-4-Sonnet, GPT-5).

| Model               | Design2 Acc | Flame Acc | Web2 Acc | UI-Polish Synth | UI-Polish Real |
|---------------------|-------------|-----------|----------|-----------------|----------------|
| InternVL3-78B       | 30.0        | 51.3      | 45.5     | 15%             | 10%            |
| Qwen2.5-VL-72B      | 41.9        | 46.3      | 64.1     | 38%             | 23%            |
| GLM-4.1V-9B         | 64.7        | 72.5      | 71.3     | 46%             | 42%            |
| Claude-4-Sonnet     | 81.2        | 76.3      | 85.1     | 65%             | 78%            |
| Gemini-2.5-Pro      | 89.5        | 87.5      | 90.6     | 68%             | 74%            |
| GPT-5               | *89.7*      | 91.3      | *93.7*   | 68%             | 85%            |
| **UI2Code$^\text{N}$-9B-RL** | *88.6*      | *95.0*    | 92.5     | **94%**           | **80%**        |

*Underlined values = best overall; bold = best open-source.*

Test-time scaling reveals that UI2Code$^\text{N}$ achieves further gains as polish rounds increase (real data: 66% [1], 68% [2], 70% [3], 73% [4], 74% [5]), and ablation shows RL reward tuning and real data have strong positive effects on real-world benchmarks.

## 3. Practical Applications and Limitations

UI2Code$^\text{N}$ is immediately applicable to automated code generation from UI screens, iterative UI refinement, and natural language-driven editing of preexisting UIs. Representative qualitative behaviors include:

- Correction of style-level errors (e.g., button padding, typographical exactness after polishing).
- Restoration of complex layouts initially misrepresented in draft code.
- Language-driven edits, such as changing navigation bar color or repositioning UI elements by code injection.

Limitations include inability to handle dynamic/interactive JavaScript widgets (such as carousels and modals), code truncation on inputs exceeding 32k tokens, and occasional pixel-level inaccuracies in sub-pixel rendering scenarios.

## 4. Universal Coding with the Narayana Sequence

The second sense of UI2Code$^\text{N}$ refers to a mathematically rigorous, prefix-free, universal integer code with codeword lengths and enumeration determined by the Narayana sequence [1601.07110].

### 4.1 Narayana Sequence and Coding Basis

The classical Narayana sequence $\{N_k\}_{k\ge 0}$ is recursively defined by $N_0=N_1=N_2=1,\ N_{k+1}=N_k+N_{k-2}$. Shifting by two gives a basis sequence $\{J_i\}_{i\ge 0}$ with $J_{i}=N_{i+2}$, i.e. $J_0 = 1, J_1 = 2, J_2 = 3, J_3 = 4,\ldots$, and $J_i = J_{i-1} + J_{i-3}$.

The dominant Narayana ratio $L \approx 1.46557$ satisfies $L^3-L^2-1=0$ and controls the exponential growth rate of $J_i$.

### 4.2 Encoding and Decoding Procedures

The UI2Code$^\text{N}$ integer code is based on a Zeckendorf-type, nonconsecutive sum expansion in the $J$-basis.

#### Encoding

For integer $n\in \mathbb{N}^+$:

1. Compute maximal $d$ with $J_d \le n < J_{d+1}$.
2. Find binary $B \in \{0,1\}^{d+1}$ such that:
   - $\sum_{i=0}^d B_i J_i = n$
   - $B_d=1$
   - $B_i B_{i+1} = 0$ for $0\le i<d$.
3. The codeword $c=B_0 B_1 ... B_d\,1$.

#### Decoding

Given binary string $c$ (ending in ‘1’):

1. Discard terminating ‘1’, let length $\ell=c$.
2. Set $d = \ell-2$, and compute $\{J_0, ... , J_d\}$.
3. $n = \sum_{i=0}^d c_i J_i$.

Both representations are unique because no two consecutive ‘1’s are present, and all codewords end with the signature “…11” that cannot appear elsewhere.

### 4.3 Theoretical Properties

- **Prefix Property:** No codeword is a prefix of another due to unique “…11” ending and the no-consecutive-1s constraint.
- **Universality:** Every $n\ge 1$ can be represented (see Theorem 2 in [1601.07110]).
- **Length formula:** $\ell(n) = d(n) + 2$ with $d(n) = \max\{i: J_i \le n\}$.
- **Asymptotics:** $\ell(n) \simeq \log_L n + O(1)$, so growth is logarithmic, with base $L$.
- **Enumeration:** Number of codewords of length $\ell$ is $J_{\ell-2}$.
- **Redundancy:** Tends to zero; the scheme encodes every $n$ deterministically and prefix-free without prior distributional knowledge.
- **Optimality:** Alternative bases (e.g., shifted Narayana) either omit some $n$ or lose uniqueness.

### 4.4 Algorithmic Realizations and Examples

**Encoding pseudocode:**
```pseudo
function ENCODE_UI2Coden(n):
  Compute J_i until J_d <= n < J_{d+1}
  r ← n
  for i = d downto 0:
    if J_i <= r:
      B_i ← 1
      r ← r - J_i
    else:
      B_i ← 0
  c ← concat(B_0 ... B_d, '1')
  return c
```
**Decoding is the reverse**: sum the $J_i$'s at index $i$ where $c_i=1$ after dropping the last bit.

**Examples:**

| $n$ | $J$-expansion       | Vector $B$    | Codeword  $c$         |
|-----|---------------------|---------------|-----------------------|
| 1   | $1 \cdot J_0$       | (1)           | 11                    |
| 2   | $1 \cdot J_1$       | (0, 1)        | 0 1 1                 |
| 3   | $1 \cdot J_2$       | (0, 0, 1)     | 0 0 1 1               |
| 5   | $1\cdot J_3+1\cdot J_0$| (1,0,0,1) | 1 0 0 1 1             |

### 4.5 Comparative Remarks

The UI2Code$^\text{N}$ code grows faster than codes based on Fibonacci sequences but more slowly than binary, with an exponent determined by the Narayana ratio. It is a “universal” code in the Elias sense.

## 5. Significance and Context

The VLM UI2Code$^\text{N}$ sets a new state-of-the-art in open-source visual UI coding, matched closely only by proprietary VLMs. The test-time scalable, multi-turn interaction paradigm allows for systematic improvements leveraging visual feedback, closing the gap between automated and human-in-the-loop design workflows. The code was released publicly, enabling further research.

The UI2Code$^\text{N}$ universal integer code constitutes an independent advance in prefix coding theory, extending the family of Fibonacci- and Lucas-based codes by employing the Narayana basis. Its optimality is tied to the combinatorial properties of the sequence, and no alternative shift or variant achieves the same universality and uniqueness guarantees.

A plausible implication is that the dual manifestation of the UI2Code$^\text{N}$ term—concurrent in AI systems and in coding theory—reflects the broader interplay between semantic representation learning and rigorous symbolic codification. However, there is currently no technical connection beyond naming and adherence to strict formalism.

Source: https://www.emergentmind.com/topics/ui2code-text-n