Phase 1 | Yui Lines v0

Playground

The agent never writes UI code. It sends one short line per component, and the app renders a prebuilt preset. Pick a screen, edit the line, or press Stream to watch it render as the model types. Grammar: Yui Lines spec.

YL the agent sends (1 line, 20 chars). Edit it, the phone updates live.

timer 40/20x8 Tabata

Stream speed

Wire log (what the agent receives back)

Tap something on the phone.

Arnold

screen 1

Tabata

Round 1 of 8

0:40

WORK

Token benchmark: YL vs JSON

The same 10 screens as the dropdown above, counted with real tokenizers. The JSON is generated from the parsed YL, so both sides say exactly the same thing with the same defaults. min is minified JSON (the cheapest JSON can get), pretty is how models usually emit it, and tree is the usual generative-UI component tree.

Screen (o200k_base)	YL	JSON min	JSON pretty	JSON tree	min / YL	tree / YL
1. Tabata timer	9	25	43	75	2.8x	8.3x
2. Log a set	24	36	54	93	1.5x	3.9x
3. Pick a split	16	29	50	82	1.8x	5.1x
4. Gear check	25	39	64	96	1.6x	3.8x
5. Onboarding	47	86	151	197	1.8x	4.2x
6. Today's workout	50	69	108	158	1.4x	3.2x
7. Meal photo log	8	22	41	80	2.8x	10.0x
8. Macros so far	57	82	163	202	1.4x	3.5x
9. Book a client call	46	65	111	157	1.4x	3.4x
10. Leg day card + voice log	56	77	119	165	1.4x	2.9x
Total	338	530	904	1305	1.6x	3.9x

Tokenizer (totals)	YL	JSON min	JSON pretty	JSON tree	pretty / YL	tree / YL
o200k_base via js-tiktoken	338	530	904	1305	2.7x	3.9x
cl100k_base via js-tiktoken	345	529	912	1313	2.6x	3.8x
@anthropic-ai/tokenizer	341	522	882	1284	2.6x	3.8x

Read it straight: against the leanest possible JSON, YL saves about a third of the tokens. Against JSON as models actually write it, 2.6x to 3.9x. The win is biggest on short control screens (a timer, a camera) and smallest where the screen is mostly the user's own text, which costs the same in any format. The Claude column uses Anthropic's legacy published tokenizer, since current Claude tokenizers are not available offline. Generated 2026-09-23 by bench/bench.mjs.

Screen 1 as a JSON component tree (75 tokens) vs YL (9 tokens)

{
  "screens": [
    {
      "id": "1",
      "children": [
        {
          "type": "Timer",
          "props": {
            "work": 40,
            "rest": 20,
            "rounds": 8,
            "label": "Tabata"
          }
        }
      ]
    }
  ]
}

timer 40/20x8 Tabata