Skip to content

feat(design): voice tokens — copy style for the agent#4

Merged
BaruchEric merged 1 commit into
mainfrom
claude/design-voice-tokens
Apr 23, 2026
Merged

feat(design): voice tokens — copy style for the agent#4
BaruchEric merged 1 commit into
mainfrom
claude/design-voice-tokens

Conversation

@BaruchEric
Copy link
Copy Markdown
Owner

Summary

Adds voice: to DESIGN.md — a namespaced extension that guides the agent's copy, not just its colors. stream-ui streams UI from model output, so button labels, alert text, empty-state prose and error messages are part of the design system.

Six tokens:

  • formality: conversational — contractions ok, second person ok, no "please click here"
  • density: concise — one sentence where one sentence works, no preamble
  • capitalization: sentence-caseSave changes, not Save Changes
  • emoji: sparingly — status ticks only; never in errors or CTAs
  • errorTone: matter-of-factCouldn't save — name is required, not Oops! 😔
  • ctaStyle: short-verbSave, Add item, never Click here to save your profile

Each has a prose block with do/don't examples. The agent reads DESIGN.md verbatim at cold start, so these flow into streamed specs automatically.

Test plan

Live probe against the running agent:

  • bun run lint:design → 0/0/1 (voice is preserved as unknown-but-valid)
  • bun run lint · typecheck · test (97/97) · build all green
  • Prompt: "primary CTA for saving, plus error alert if save fails"
    • Button label: "Save" (short-verb ✓)
    • Alert content: "Couldn't save — name is required." (matter-of-fact ✓)
    • Agent narration cited "matter-of-fact copy", "short-verb CTA", "sentence-case labels"
  • CI gate (lint:design) passes

stream-ui is rendered by an agent, so component copy is part of the design
system alongside colors/typography. Adds a `voice:` section to DESIGN.md
with six tokens: formality, density, capitalization, emoji, errorTone,
ctaStyle. Each has a prose entry with a concrete do/don't example.

Voice is a namespaced extension (unknown-but-preserved per the spec — linter
accepts it, emits no CSS vars). The agent reads DESIGN.md at cold start and
honors the guidance in streamed copy.

Verified with a live probe:
  prompt: "primary CTA for saving, plus error alert if save fails"
  →  button: "Save"                           (short-verb CTA ✓)
  →  alert:  "Couldn't save — name is required."  (matter-of-fact ✓)
Agent's own narration cited "matter-of-fact copy", "short-verb CTA",
"sentence-case labels" — the voice tokens are reaching the system prompt
and shaping output.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
stream-ui Ready Ready Preview, Comment Apr 23, 2026 1:42am

Request Review

@BaruchEric BaruchEric merged commit e64de08 into main Apr 23, 2026
3 checks passed
@BaruchEric BaruchEric deleted the claude/design-voice-tokens branch April 23, 2026 01:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant