For Engineers

Stop hand-
translating
designs.

Spektral's agent writes real components — typed props, BEM CSS wired to tokens, and Storybook stories — then runs its own accessibility audit and fixes violations before you ever open the PR. You review code, not transcribe it.

Download Spektral →Read the docs
Button.tsx · generated✓ typed
// forwardRef + named export
export const Button = forwardRef<
  HTMLButtonElement, ButtonProps
>(({ variant, ...rest }, ref) => {
  return <button ref={ref}
    className={cx('button', variant)} />
})
eslint0 errors
axe-coreAA pass
Built for your stack

Real code. Your
conventions. No glue.

Spektral doesn't hand you a spec to implement — it implements it, in your repo, following the patterns your platform config declares.

Code, not specs

forwardRef components, typed props interfaces, BEM CSS wired to custom properties — written to disk, ready to drop straight in.

A11y that self-heals

The agent runs axe-core against rendered stories, reads the violations, and rewrites the CSS until contrast and roles pass — before you review.

Scripts in the loop

Whitelist lint, build, and test in platform.yml and the agent runs them itself — gated commands prompt for approval first.

Tokens as source of truth

Change a primitive, recompile everything

Style Dictionary builds your three-layer DTCG tokens intovariables.csswith references preserved — so DevTools showsvar(--color-primary), not a resolved hex.

  • Primitive → semantic → component cascade
  • No hardcoded colors or sizes in generated CSS
  • One value changes, the whole system follows
primitive.red.50→#FF6F59
semantic.brand→{red.50}
button.bg→{brand}
Framework-agnostic

One spec, any framework

Components are defined as framework-agnostic YAML specs, then generated into platform-specific code. React today — Vue, Lit, and Svelte are on the runway.

  • API, structure, behaviour, and keyboard captured in the spec
  • Platform conventions declared in platform.yml
  • Whitelisted scripts declared per platform for lint, build, and test
ReactVueLitSvelte

ONE FRAMEWORK-AGNOSTIC SPEC → MANY TARGETS

Collaboration · Pro + Enterprise

Merge conflicts that don't hand you markers

Two people edit the same component; both changes matter. A line-based merge doesn't understand either one, so Spektral doesn't attempt it. Components are versioned whole — a stale push is refused, not silently applied — and you choose keep theirs, keep mine, or let the agent re-apply your change on top of their current version. You get one coherent component that compiles and still passes the token and axe-core checks.

  • Design tokens use a conflict-free merge — no prompts, ever
  • Change requests open with a "For Developers" section: affected files, version bumps, and removed tokens your code may still reference
  • Branch, open a change request, review the diff in the browser
  • The same AI rebase runs at the merge boundary, not just live
  • Cut immutable semver releases and publish them to npm
# push Button.tsx
parent: v7  server: v8
409 — refused, not overwritten

→ rebase with AI
→ their v8 + your intent
✓ v9 · compiles · 0 violations
The best handoff is no handoff. The agent plans, generates, audits, and fixes its own work — then opens code you'd be happy to merge.
— The Spektral principle
0.
Hardcoded values — every style references a token
AA.
axe-core contrast and role audits, run by the agent
250×
Spec-bound tool-calling turns per generation
MCP.
Components, specs, and tokens served to coding agents
Explore

Spektral for every team

For Teams

Teams

Cloud sync, real-time editing, branches, review, and versioned releases.

For Design

Design

Describe intent in plain English — get the real, tokenized component back.

For Leaders

Leaders

Multiply output and make consistency a property of the system, not a process.

For Early Stage

Early Stage

Your first design system in an afternoon — no dedicated team required.

For Scaling

Scaling

One token source, every framework, guardrails the agent enforces for you.

Describe it.
Spektral ships it.

Get product updates as we ship turnkey, spec-first design engineering.

Get Product Updates →Read the docs