Skip to content

Three Modes Explained

Jump to bottom
Laith0003 edited this page May 28, 2026 · 1 revision

Three Modes Explained

The synthesizer auto-dispatches between three modes based on what's in the brief. No mode flag to set manually — the brief decides.

Decision logic

if brief.reference_brands and brief.strict:
    mode = "strict_brand"
elif brief.reference_brands:
    mode = "brand_anchor"
else:
    mode = "pure_synthesis"

Mode 1: strict_brand

Trigger: reference_brands=[stripe] + strict=True

Behavior: Emit the named brand's tokens verbatim. No synthesis. No axis adaptation. The output IS the brand spec.

Speed: Fastest path. Single dict lookup. Single-digit milliseconds.

Use case:

  • "I just need a clone-quality reference for Stripe."
  • Prototyping an internal demo against a specific brand.
  • Building a brand-faithful test fixture.

Example:

uxskill synthesize --brand stripe --strict

Output palette = Stripe's actual canvas + ink + primary + body + muted hex codes from data/brands/stripe.json. Output type pair = Stripe's actual display + body + mono families. No axis math runs.

Limit: Output looks IDENTICAL to Stripe. No customization. If the brief includes industry/tone/density signals, they're ignored.

Mode 2: brand_anchor (70/30)

Trigger: reference_brands=[stripe] + (no strict flag, default)

Behavior: The named brand is the anchor. Its vocabulary gets ~70% weight in the distillation pool. The other ~30% comes from 4 sibling brands whose category-seed axes match the brief.

Speed: Fast. ~10ms.

Use case:

  • "Stripe-like, but for healthcare."
  • "Linear-style, but warmer."
  • "Vercel-grade developer-tools UI, but for our trading platform."

Example:

uxskill synthesize \
  --brand stripe \
  --industry healthcare \
  --tone warm --tone trustworthy

The synthesizer:

  1. Pulls the Stripe spec, double-counts it in the vocab pool (gets ~70% weight).
  2. Computes axes from industry=healthcare, tone=[warm, trustworthy].
  3. Pulls 4 other brand specs whose category-seed axes are closest to the healthcare brief.
  4. Distills the combined vocabulary.
  5. Mixes — Stripe's palette dominates but gets warmed up to healthcare register. Stripe's type pair influences but adapts to "trustworthy" formality.

Output: visibly Stripe-flavored, demonstrably customized.

Limit: Not a pure clone. If you wanted pixel-fidelity to Stripe, use --strict.

Mode 3: pure_synthesis

Trigger: No reference_brands at all.

Behavior: No brand dominates. The synthesizer pulls 8 brand specs whose category-seed axes are closest to the brief in 7-D Euclidean space. All 8 weigh equally in the vocabulary distillation. Output is novel.

Speed: Slower than the brand modes. ~30-50ms. Vocabulary distillation is more work when 8 brands contribute equally.

Use case:

  • "Build me a fintech dashboard." (no specific brand)
  • "I want a developer-tools landing." (no brand)
  • "Design something for a wellness app." (no brand)

Example:

uxskill synthesize \
  --industry fintech-payments \
  --tone bold --tone serious

The synthesizer:

  1. Computes axes: warmth=0.35, contrast=0.80, density=0.6, geometry=0.4, formality=0.95, motion=0.55, type_personality=0.4
  2. Sorts all 160 brand specs by 7-D distance to these axes.
  3. Picks the 8 nearest (typically: Stripe, Linear, Datadog, Snowflake, ClickHouse, Brex, Mercury, dbt — but depends on brief).
  4. Distills palette anchors, type stacks, motion timings, radius signals.
  5. Mixes weighted by axis position — no single brand wins. Output emerges from the combination.

Output: looks like NO specific brand. Looks like a confident fintech product. Distinct from any input.

Strength: Infinity space. Same brief → same output, but the output is unique compared to anything Pro Max or other catalogue tools could produce.

Which to use when

Situation Mode Why
Want exact brand fidelity strict_brand Fastest, no surprises
Want brand taste applied to YOUR domain brand_anchor Familiar yet customized
Want something that doesn't look like anyone pure_synthesis Novel + grounded
Have no specific brand in mind pure_synthesis Default — let the brief drive
Need to ship a clone (internal demo) strict_brand Single call, deterministic
Iterating on a brand library brand_anchor Anchor is fixed, brief varies
Sharing screenshots with a team for review pure_synthesis Maximize originality

Speed comparison

Measured locally on M2 MacBook Air, 160-brand catalogue, 8 exemplar pool:

Mode Median latency
strict_brand 0.4 ms
brand_anchor 8.2 ms
pure_synthesis 28.5 ms

For comparison, a single LLM API call to Anthropic Sonnet for the same brief takes ~1,800ms. Our slowest mode is 63× faster than the LLM baseline.

What stays constant across modes

  • Axes computation — same brief always produces the same axes regardless of mode.
  • Layout primitives — the same responsive-by-construction CSS is bundled for all 3 modes.
  • Typography ratio — picked from contrast axis, same logic across modes.
  • Anti-pattern linter — runs against output regardless of mode.
  • Quality gate — /ux-evolve applies the 65 threshold in all 3 modes.

What varies across modes

  • Palette mixing weights — strict = 100% brand, anchor = 70/30 weighted toward anchor, synthesis = equal across 8.
  • Vocabulary pool size — strict = 1 brand, anchor = 5, synthesis = 8.
  • Output novelty — strict = 0% (identical to brand), anchor = ~30% adaptation, synthesis = ~100% novel.

Try all three

# Same brief, three modes — see how output diverges
uxskill synthesize --brand stripe --strict --industry healthcare > out_strict.json
uxskill synthesize --brand stripe --industry healthcare > out_anchor.json
uxskill synthesize --industry healthcare > out_synthesis.json

diff out_strict.json out_anchor.json | head
diff out_anchor.json out_synthesis.json | head

Related

Clone this wiki locally