No-code generative design
Build custom design tools, responsive components, pages, and sites without writing code, then use them in web projects.
Components AI
ReivindicarComponents AI is an open-source web design tool for no-code parametric and generative design systems, with token-driven themes, export, publishing, and APIs.
Overview
Components AI is an open-source design tool for creating parametric and generative design systems. It focuses on helping creatives build responsive components, pages, sites, and visual design tools without writing code.
The product combines a studio for designing and publishing with a growing library of generative UI and graphic components, theme import tools, and APIs for working with themes, code formatting, and web-format conversion. It is positioned around design tokens, responsive systems, and editable outputs that can be exported or shared.
Features
Theme and token-driven design
Import or define design tokens and use them to drive themes, color systems, typography scales, shadows, spacing, and responsive breakpoints.
Iterative generation controls
Cycle through generated designs, lock inputs you want to preserve, and curate output by voting iterations up or down.
Multi-format export
Export work in multiple formats including React, JS, JSON, JSX, SVG, PNG, HTML, CSS, CSS custom properties, and Sass.
One-click publishing
Publish designs as hosted web pages with hosted assets for styles in JS, JSON, and CSS.
Developer APIs
Use experimental APIs for importing themes and palettes, formatting code, and converting between HTML, JSX, Markdown, and PNG workflows.
Use Cases
Prototype UI components
Create responsive cards, pages, and other interface pieces by adjusting parameters instead of rebuilding layouts manually.
Build and extend design systems
Import a brand’s tokens or CSS-derived values and turn them into themes for accessible color, type, shadow, and spacing systems.
Share work for review and collaboration
Generate and publish design assets, then share hosted pages and styles with colleagues or clients for review.
Integrate design workflows into tooling
Use the APIs to import themes or palettes, format code, and convert HTML, JSX, Markdown, or PNG content as part of a build pipeline.
Pros and Cons
Pros
- Open-source design tool with a free forever Creator plan.
- Supports responsive, token-driven design across colors, typography, shadows, spacing, and breakpoints.
- Exports to many practical formats, including React, HTML, CSS, SVG, PNG, JSON, and Sass.
- Offers hosted publishing for designs and assets.
- Includes APIs for importing themes and palettes plus formatting and conversion tasks.
Cons
- The API documentation says the APIs are experimental and subject to change.
- The source pages do not provide complete details on integrations, team permissions, or supported workflows.
FAQ
Is Components AI free to use?
Components AI provides an open-source design tool with a free Creator plan. The paid Pro plan adds component swapping, folders, unlimited themes, unlimited sites, unlimited projects, private projects, project templates, and email/chat support, while Enterprise uses custom pricing.
What can I do with the API?
The site describes APIs as experimental and subject to change. The API docs include theme and palette import endpoints, formatting tools, and conversion endpoints for HTML, JSX, Markdown, and PNG workflows.
What kinds of outputs does Components AI support?
The homepage says the tool is for building responsive components, pages, and sites without writing code. The API docs also support code formatting and conversion workflows, and the changelog notes publishing and export features for web components and other formats.
Does it support team collaboration?
The source pages do not spell out team-seat controls or collaboration permissions in detail. They do show one-click publishing, shared hosted pages, and an Enterprise onboarding flow for custom solutions.
Quick Facts
- Category
- Design Tool
- Platform
- Web
- Primary users
- Creatives, designers, and developers
- Source domain
- components.ai
- Pricing
- Free Creator plan; Pro from $24/month; Enterprise custom pricing
- Notable workflow
- Design, export, publish, and convert generative design assets