COCO is an open source design orchestration engine that transforms ideas into production-ready design tokens, Figma components, and Tailwind code. Ship pixel-perfect products faster.
$ coco "Dashboard for fintech app, dark mode, minimal"
[STATUS: ANALYZING]
◉ COCO_THOUGHT: Detected product type: FINTECH
└─ Applying trust-blue palette + geometric typography
[STATUS: DRAFTING]
{
"tokens": {
"colors.primary": "#0052FF",
"colors.background": "#18181B",
"spacing.unit": 8,
"radius.default": 12
}
}
✓ tailwind.config.js generated
✓ design-tokens.css generated
✓ figma-variables.json generated
Accessibility: WCAG AA | Contrast: 8.2:1 | Consistency: 100%A complete toolkit for design-to-code workflows
Describe your product in natural language. COCO understands context, industry verticals, and design psychology to generate informed decisions.
Automatic generation of colors, spacing, typography, and shadows. Exports to Tailwind, CSS Variables, Style Dictionary, and Figma Variables.
Generate Figma plugin code and export designs directly. Visual regression testing ensures your code matches the design.
Compare Figma designs against rendered code. Pixel-perfect validation with AI-powered semantic analysis.
Webhooks for GitHub, Figma, Notion, and Slack. COCO watches your workflow and catches design inconsistencies.
Power user experience with a terminal interface. No GUI needed. Works in your existing workflow.
Three layers of intelligence working together
Ingests context from Figma files, existing codebase, user feedback, and analytics data.
State machine with design heuristics, psychology patterns, and WCAG accessibility rules.
Generates production-ready files, creates PRs, and updates Figma designs automatically.
Pre-built token libraries for different industries
Fashion, jewelry, premium brands
IncludedBanking, payments, investment
IncludedGaming, crypto, developer tools
IncludedCOCO is built in the open. Contributions welcome.
COCO is free and open source. If it saves you time, consider supporting continued development. Every contribution helps keep the project alive.
Name in CREDITS.md
Logo on GitHub README + priority support
Logo on landing page + feature requests