Eluan Agent
A design system maintenance agent that generates themes, audits tokens, enforces contrast compliance, and scaffolds components.
Eluan Agent is an eve-based agent that carries the design system's rules as context — the OKLCH color engine, the semantic token layer, the 11-step scales, and the naming conventions. Rather than a set of scripts you invoke by hand, it's a conversational surface over the same primitives the Figma plugin and the CSS pipeline use.
Setup
Requires Node 24 or newer. npx eve dev starts an interactive session; npx eve build produces a deployable bundle. The agent runs on anthropic/claude-sonnet-4-6 by default — change model in agent/agent.ts to use a different one.
Tools
Eight tools are available to the agent:
| Tool | What it does |
|---|---|
generate_theme | Builds a full theme from 1–3 accent hex colors — scales, semantic map, and CSS output. |
check_contrast | Runs WCAG checks across every semantic foreground/background pairing and reports failures. |
audit_tokens | Scans a project for hardcoded colors that should be tokens, with the recommended variable for each. |
lint_token_usage | Flags primitives used where semantics belong, deprecated tokens, and wrong-context usage. |
scaffold_component | Generates a component, CSS module, Storybook story, and test skeleton using semantic tokens only. |
sync_figma_tokens | Diffs a W3C design tokens export from Figma against the canonical token list. |
migrate_version | Produces an upgrade checklist, scanning for deprecated API and token usage. |
publish_package | Handles npm publishing with patch/minor/major bumps, dist-tags, and a dry-run mode. |
Generating themes
Ask for a theme in plain language. The agent validates the accents first — warning on near-achromatic colors and extreme lightness — then generates scales, applies contrast auto-correction, and reports every correction it made.
Pass an outputDir to write CSS files to disk; omit it and the generated CSS comes back inline. Two other knobs are worth knowing: minContrast (default 4.5) raises or lowers the correction threshold, and the neutral hue-bleed amount (default 0.08) controls how much accent hue tints the neutral scale.
Auditing a project
Two tools cover project hygiene. audit_tokens finds hardcoded colors — hex, rgb(), hsl(), and CSS named colors — and maps each to the token that should replace it. lint_token_usage catches the subtler problems: a primitive like --color-primary-500 used directly in a component where a semantic token belongs, tokens removed or renamed in the current version, and tokens applied in the wrong semantic context.
Both take a projectPath and a limit on findings returned (50 and 100 respectively).
Scaffolding components
scaffold_component accepts a name in PascalCase or kebab-case, an optional prop list, and an output directory, and writes four files:
The agent checks for an existing similar component before scaffolding, to avoid creating a near-duplicate of something already in the library.
Figma token sync
sync_figma_tokens takes a W3C design tokens JSON export and a mode to compare (light or dark), then reports three categories: tokens present in Figma but missing from the canonical list, tokens in the canonical list missing from Figma, and tokens present in both whose values disagree.
This is a read-only comparison — it reports drift but never writes back to Figma. To push tokens the other way, use the Figma plugin.
Version migration
migrate_version scans a project for deprecated API and token usage between two versions and returns a checklist ordered by breaking change. It knows the renames that came with semantic naming — for example --primary-bg → --action-primary-bg, --error-* → --destructive-*, --warning-* → --cautionary-*, and --success-* → --positive-* — along with removals like --action-primary-border, which was dropped in favor of box-shadow focus rings.
Scheduled jobs
Two jobs ship with the agent:
- Daily contrast audit (
0 9 * * *) — runs a WCAG check across every active theme's semantic pairings and reports failures. - Weekly health report (
0 9 * * 1) — a Monday morning summary covering token health, dependencies, and drift.
Skills and subagents
Five skill files give the agent task-specific procedure — theme generation, component authoring, publishing, migration, and troubleshooting — and load when the matching kind of work comes up.
A reviewer subagent handles pull request review, checking design token correctness, contrast compliance, component patterns, and breaking changes.
What it won't do
- Modify Figma files — the sync is read-only.
- Push to git without explicit confirmation.
- Publish without confirming the version bump and changelog entry first.
- Guess at token names. It works from the canonical semantic map, and uses primitives only outside component CSS.