Components AI logo

Components AI

認証する

Components AIは、コード不要でパラメトリック/ジェネレーティブなデザインシステムを構築できるオープンソースのWebデザインツール。デザイントークン連動のテーマ、複数形式への書き出し、公開、テーマ取り込みや形式変換の実験的APIを搭載。

Components AI preview

概要

Components AI は、パラメトリックおよびジェネレーティブなデザインシステムを作成するためのオープンソースのデザインツールです。コードを書かずに、クリエイターがレスポンシブなコンポーネント、ページ、サイト、ビジュアルデザインツールを構築できるよう支援することに重点を置いています。

この製品は、デザインと公開のためのスタジオに、成長中のジェネレーティブ UI とグラフィックコンポーネントのライブラリ、テーマ取り込みツール、テーマ、コード書式設定、Web 形式変換を扱うための API を組み合わせています。デザイントークン、レスポンシブシステム、エクスポートまたは共有可能な編集可能な出力を中心に位置づけられています。

機能

ノーコードのジェネレーティブデザイン

コードを書かずに、カスタムのデザインツール、レスポンシブなコンポーネント、ページ、サイトを作成し、Web プロジェクトで利用できます。

テーマとトークン主導のデザイン

デザイントークンを取り込むか定義して、それらを使ってテーマ、カラーシステム、タイポグラフィのスケール、シャドウ、余白、レスポンシブブレークポイントを制御できます。

反復的な生成コントロール

生成されたデザインを順に切り替え、保持したい入力をロックし、イテレーションを賛成・反対で評価して出力を選別できます。

マルチフォーマット書き出し

React、JS、JSON、JSX、SVG、PNG、HTML、CSS、CSS カスタムプロパティ、Sass など、複数形式で書き出せます。

ワンクリック公開

デザインをホストされた Web ページとして公開し、JS、JSON、CSS のスタイル用ホスト資産を利用できます。

開発者向け API

テーマやパレットの取り込み、コードの書式設定、HTML、JSX、Markdown、PNG のワークフロー間の変換に、実験的な API を利用できます。

利用シーン

  • UI コンポーネントのプロトタイプ作成

    レイアウトを手動で作り直す代わりに、パラメータを調整してレスポンシブなカード、ページ、その他のインターフェース要素を作成します。

  • デザインシステムの構築と拡張

    ブランドのトークンや CSS 由来の値を取り込み、アクセシブルなカラー、 টাইポグラフィ、シャドウ、余白のシステム用テーマに変換します。

  • レビューと共同作業のための共有

    デザインアセットを生成して公開し、ホストされたページやスタイルを同僚やクライアントと共有してレビューします。

  • ツールへのデザインワークフロー統合

    API を使ってテーマやパレットを取り込み、コードを書式設定し、HTML、JSX、Markdown、PNG コンテンツをビルドパイプラインの一部として変換します。

Pros and Cons

Pros

  • 無料でずっと使える Creator プランがあるオープンソースのデザインツールです。
  • カラー、タイポグラフィ、シャドウ、余白、ブレークポイントにわたるレスポンシブでトークン主導のデザインをサポートします。
  • React、HTML、CSS、SVG、PNG、JSON、Sass など、多くの実用的な形式に書き出せます。
  • デザインとアセットのホスト型公開を提供します。
  • テーマやパレットの取り込みに加え、書式設定や変換タスク用の API を備えています。

Cons

  • API のドキュメントでは、API は実験的であり、変更される可能性があると記載されています。
  • ソースページには、統合、チーム権限、対応ワークフローの完全な詳細が記載されていません。

FAQ

Components AI は無料で使えますか?

Components AI は、オープンソースのデザインツールで、無料の Creator プランを提供しています。有料の Pro プランでは、コンポーネントの差し替え、フォルダー、無制限のテーマ、無制限のサイト、無制限のプロジェクト、非公開プロジェクト、プロジェクトテンプレート、メール/チャットサポートが追加されます。Enterprise は個別見積もりです。

API では何ができますか?

サイトでは、API は実験的で、変更される可能性があると説明されています。API ドキュメントには、テーマとパレットの取り込みエンドポイント、書式設定ツール、HTML、JSX、Markdown、PNG のワークフロー向け変換エンドポイントが含まれています。

Components AI はどのような出力をサポートしていますか?

ホームページでは、このツールはコードを書かずにレスポンシブなコンポーネント、ページ、サイトを構築するためのものだと説明されています。API ドキュメントではコードの書式設定や変換ワークフローもサポートされており、変更履歴には Web コンポーネントやその他の形式向けの公開・書き出し機能が記載されています。

チームでの共同作業をサポートしていますか?

ソースページでは、チームの席管理やコラボレーション権限について詳しくは明記されていません。ただし、ワンクリック公開、共有されたホストページ、カスタムソリューション向けの Enterprise オンボーディングフローは確認できます。

Quick Facts

カテゴリ
デザインツール
プラットフォーム
Web
主な利用者
クリエイター、デザイナー、開発者
ソースドメイン
components.ai
価格
無料の Creator プラン;Pro は月額 24 ドルから;Enterprise は個別見積もり
注目のワークフロー
ジェネレーティブデザイン資産のデザイン、書き出し、公開、変換