SpecStack

Inspiration

Every AI coding tool wastes tokens on ambiguity. A prompt like "Build me a SaaS dashboard with user metrics, a data table showing recent signups, and an export button" would traditionally require ~2,000+ tokens of back-and-forth to fully specify in text.

But what if the representation itself was the compression?

Natural language is the least efficient encoding for UI specifications. We were inspired by how different media found their optimal encodings – SVG for vector graphics, MIDI for music, JSON for data interchange. We wanted to create the equivalent for AI-assisted app development: a structured intermediate representation that's more token-efficient than prompt.

What it does

SpecPack transforms vague natural language prompts into structured JSON wireframes through a constrained component vocabulary. Instead of describing UI in prose, the AI outputs a compact JSON tree that renders as an interactive, high-fidelity wireframe.

Users can then visually iterate on the wireframe, making changes that propagate as minimal JSON diffs rather than requiring complete re-specification. This makes the entire prompt-to-UI workflow more token-efficient.

How we built it

Frontend: Next.js with App Router for streaming support
Wireframe Rendering: @json-render/react for real-time progressive rendering
Component Catalog: Custom catalog definition using @json-render/core with Zod schemas
AI Generation: Claude API with structured output
Streaming: Server-sent events for progressive wireframe rendering as JSON streams from the model
Arize AI: Traceability and evals for UI generation, A/B testing of system prompt to merge 3-variant UI generation
Elevenlabs: Speech-to-text prompting
LeanMCP: Our MCP server can be prompted via Claude Code for further action

The Pipeline:

User enters natural language prompt
Claude generates JSON constrained to our catalog schema
json-render streams and renders the wireframe in real-time
User can visually iterate; changes are tracked as minimal diffs
Final wireframe serves as unambiguous spec for downstream code generation

Challenges we ran into

Catalog Design Tradeoffs: Too few components and the system can't express complex UIs; too many and we lose compression benefits. We iterated extensively to find the sweet spot, enough expressiveness for real applications while maintaining meaningful entropy reduction.

Streaming JSON Parsing: JSON isn't inherently streamable – you can't render a partial object. json-render handles this elegantly, but we had to carefully structure our prompts to encourage the AI to generate components in a top-down order that enables progressive rendering.

Proving "Compression": Our approach is novel, which means we had to develop our own metrics and not just cite existing benchmarks. We built visualization of the token compression along the pipeline to illuttrate this.

Accomplishments that we're proud of

New Compression Model: We're not removing tokens from text. We're transforming to a fundamentally more efficient representation, which we believe is a genuinely novel contribution to how we think about LLM input optimization.

Troubleshooting of Vercel's JSON rendering docs:

Measurable Results: Our real-time streaming of token metrics shows real compression on realistic prompts and UI generation.

Visual + Efficient: Most compression is invisible. Ours renders as interactive wireframes that users can see and refine.

What we learned

What's next for SpecStack

Differential Iteration: Track wireframe changes as diffs, so iterations send only what changed – potentially 20-50x more efficient than regenerating full context.

Domain Expansion: Our principle, constrained vocabularies as compression, can apply well beyond UI. API specifications, database schemas, workflow definitions could all benefit from domain-specific intermediate representations.