components.ai
verifiedFreeOpen-source no-code design tool for building generative design systems and exporting responsive components to React, SVG and CSS.
What it does
Components AI is an open-source design tool for creating custom, generative design tools without code. Users define design tokens and themes, generate responsive components and pages with parametric controls, and export in many formats including React, JSX, SVG, CSS and Sass. It emphasizes constraint-based, accessible design.
How to use: Use the visual studio to design custom tools, import or define design tokens for themes, explore generative components, and export designs in various formats. You can also publish designs instantly to share with others.
Core features
- ✦No-code generative component and page design
- ✦Design-token and theme management
- ✦Parametric controls with locking and curation
- ✦Multi-format export (React, SVG, PNG, CSS, Sass)
- ✦Accessibility and contrast checks
- ✦Variable-font and 1000+ Google Fonts support
Use cases
- →Build custom generative design tools
- →Create responsive, token-driven components
- →Export design assets to code
- →Audit color accessibility