Project
DesignRail
Open source
A working reference implementation for the missing review layer between design intent and AI-assisted code generation.
- Developer Tools
- React
- TypeScript
- GraphQL
- Design Systems
Problem
AI coding agents can turn a mockup into code quickly, but speed does not preserve design intent. Component semantics get flattened into markup, accessibility and token problems surface late, and the reasoning behind a generated mapping disappears. DesignRail puts a review gate at that boundary. A developer can inspect, edit, accept, or reject the proposal before it becomes exportable code.
Review Before Export
Public mock fixtures for Button, Input, and Card normalize into typed component intent. A deterministic mapper proposes Shoelace components with explicit props, slots, confidence, and rationale. Compliance findings sit beside the proposal with severity and remediation. Rejections require a reason, edits retain a field-level diff, and only accepted or edited mappings can produce HTML, React, or an Agent Brief.
The Contract
GraphQL owns the boundary between the React review console, the Fastify API, and SQLite persistence. Shared Zod schemas keep component intent, decisions, exports, and UI instrumentation aligned across packages. The selected example and workspace view also live in the URL, so a review state can be refreshed, shared, and restored without introducing client-side global state.
Deliberate Boundary
The demo runs locally without a Figma token or external model. Mock mode keeps the full workflow public and repeatable, while the normalized intent contract leaves a clean seam for a live Figma adapter. SQLite is appropriate for the reference implementation. Authentication, multi-user ownership, hosted storage, and CI enforcement remain explicit production work rather than implied capabilities.
Stack
React · Vite · Fastify · Apollo GraphQL · Drizzle + SQLite · Zod · Shoelace Web Components · Astro Starlight · pnpm