aiChemist
Multi-project orchestration system for design systems, token pipelines, and CMS-driven frontends — powered by agentic AI.
Pipeline
How It Works
Design decisions flow from Penpot through a token pipeline into shared components that power every surface.
Penpot
Design variables defined in Penpot, exported as DTCG JSON tokens
Tokens
Python build script transforms DTCG JSON into CSS custom properties
Components
Shared React components consume tokens — Button, Card, Tabs, Alert, PricingTable, TestimonialWall, MetricsPanel, AuthorBioCard, FeatureComparisonTable, Timeline, FormWizard, ScoreGauge, RadarChart, Pagination, ReadingTime, AiAvatarTooltip, LiveReadouts, WellnessMatrix
Surfaces
Next.js and Astro apps render the same components with the same tokens
Capabilities
Platform Features
Design Tokens
Full DTCG-format token pipeline covering colors, typography, spacing, shadows, gradients, and component-level tokens.
983Shared Components
Token-driven React components — Button, Card, Tabs, Alert, PricingTable, TestimonialWall, MetricsPanel, AuthorBioCard, FeatureComparisonTable, Timeline, FormWizard, ScoreGauge, RadarChart, Pagination, ReadingTime, AiAvatarTooltip, and LiveReadouts, WellnessMatrix — shared across every surface in the monorepo.
66Multi-Surface
Two consumer applications — Next.js with App Router and Astro with islands architecture — running from one component library.
2AI Orchestration
Claude Code agents orchestrated through NotebookLM brain, ADW pipeline, and GitHub Issues for fully agentic delivery.
12Components
Live Component Showcase
Every component below is rendered from the shared UI package, consuming design tokens in real time.
Interactive Components
Button Variants
Interactive Tabs
983 design tokens generated from Penpot via the DTCG pipeline. Colors, typography, spacing, shadows, gradients, and component tokens — all available as CSS custom properties.
Alert Variants
Nested Card
Nested Component
Cards can be nested inside other cards. Each renders its own header, body, background, border, shadow, and padding from component tokens.
Get Started
Choose Your Path
Whether you are evaluating the platform, starting a new project, or building with an existing design system — we have you covered.
New Project
Step-by-step onboarding: set up tokens, import components, and deploy your first surface.
Browse Components
Explore all 66 shared components organized by category — forms, data display, feedback, navigation, and more.
Documentation
Architecture docs, decision records, token reference, and operational guides.
Existing Projects
Track status, tokens, and components across all managed projects from the dashboard.
983
Design Tokens
66
Shared Components
2
Surfaces
12
Foundation Items