Aligncn
Aligncn is the design system we built for our own work — and now sell to other teams. Add it to your codebase and point your AI code tool at it: instead of inventing new buttons, colors and spacing on every prompt, it builds from the same components and tokens every time. Every Figma component has a matching React component built on shadcn/ui, Tailwind and TypeScript, so design, code and AI output never drift apart.
- Client
- ProductBloom product
- Role
- Design, build & brand
- Timeline
- Core launched Q3 2025 · ongoing
- Platform
- Figma + React / Next.js
Overview
Services: Design tokens, Component library, Dashboard templates, Documentation, Marketing site, Brand.
AI code tools can build a page in seconds, but every prompt invents its own buttons, colors and spacing. Ask for a second page and it looks like a different product. Meanwhile teams still rebuild the same components — tables, forms, charts, navigation — and fight to keep Figma, code and AI output in sync.
Aligncn gives the AI something to build from. It’s made with auto-layout, variables and design tokens in Figma, and a matching library of production-ready React components in code, on shadcn/ui, Tailwind and TypeScript — the same stack AI code tools commonly write. It ships with complete templates — dashboards, AI chat, AI image generation, crypto, finance, music, projects, email, calendar and point of sale — plus login, sign-up and checkout flows.
What if every prompt came back looking like the same product?
The problem
Every prompt looks different
The problem: AI code tools invent new buttons, colors and spacing on every prompt. Page two never matches page one, and teams spend their time fixing what the AI made.
What we did: 50+ components with variants, states and dark mode, plus design tokens for color, type and spacing. Your AI code tool builds from these instead of making up its own.
For users: Pages built weeks and many prompts apart still look like one product.
Design and code drift apart
The problem: Figma files and React components diverge within weeks, and handoff turns into redlines and rework.
What we did: A 1:1 mapping between Figma components and React components, with developer-friendly tokens that match exactly.
For users: Developers build exactly what was designed, with no guesswork at handoff.
Prompts make parts, not products
The problem: A kit of parts still leaves teams — and their AI tools — to work out whole screens and flows.
What we did: Ten complete templates across industries show the system composed into real products: ready to customize and ship, or to hand your AI code tool as the example to follow.
For users: Teams see how the pieces fit together before writing a single prompt.
Kits go stale
The problem: One-time kits fall behind the frameworks they’re built on.
What we did: Buy once, get lifetime updates — with a public roadmap covering onboarding flows, marketplaces, mobile templates, a Figma plugin and AI Figma↔code sync.
For users: The kit keeps working as React, Tailwind and shadcn/ui evolve.
Outcomes: A foundation we — and our customers — ship on
- 50+ components in Figma and React
- 10 complete dashboard templates
- 1:1 Figma-to-code parity
Built with React, TypeScript, Next.js, Tailwind CSS, shadcn/ui and Motion. Lifetime updates included.