localhost:9400/preview
Component Preview
148
Specs
72
Tokens
36
Pages
891
Syncs
Button atom -- 6 variants, final
SearchInput molecule -- 2 variants, final
Modal organism -- 3 variants, draft
Connects to Figma. Pulls your design system. Generates production React code. Runs autonomously with Claude.
Connect your Figma file to pull tokens, components, and styles automatically. Auto-discovers the plugin on ports 9223-9232.
About
Memoire is an AI-native design intelligence engine. It bridges Figma, user research, and code generation into a spec-driven system. Auto-discovers and connects to the Figma plugin, generates shadcn/ui components from structured specs, and supports multiple Claude instances natively via box widgets. Every component follows Atomic Design: atom, molecule, organism, template, page.
Specs
Structured component, page, and data visualization specs validated with Zod schemas. Every component starts as a spec before code generation.
Codegen
Generates production React components using shadcn/ui and Tailwind exclusively. Outputs to atomic folders: atoms, molecules, organisms, templates.
Research
Synthesizes user research from Excel files, web sources, and Figma stickies into actionable insights, themes, and personas.
Tokens
Extracts design tokens from Figma -- colors, typography, spacing, and effects -- and maps them to your codebase's token system.
Preview
Live component gallery served on localhost. Browse specs, research data, design system tokens, and generated components in one place.
Agents
Autonomous design agents powered by Claude. Classify intent, plan execution, generate artifacts, and self-heal after every canvas operation.