Components AIは、クリエイティブな人々のためのオープンソースデザインツールです。このツールを使用すると、コードを一切書かずにカスタムデザインツールを構築し、あらゆる種類のウェブプロジェクトで使用できるレスポンシブなコンポーネント、ページ、サイトを作成できます。キュレートされたテーマや独自のデザイントークンを使用して、マークアップテンプレートをスタイリングします。
Studioでは、カスタムデザインツール、生成コンポーネント、ページ、サイトを視覚的にデザインできます。テーマをインポートまたは定義し、すべてのデザインで使用するデザイントークンを設定します。アクセシブルなカラーシステム、レスポンシブなタイプスケール、レイヤードボックスシャドウなどを作成するための専用ツールも提供されています。
Markdown Publisherでは、生成スタイルとマークダウン構文のハイライトをカスタマイズできます。カラースケールベースのパレットジェネレータを使用して、カラープレビューを表示し、一般的なUIに対して色を確認できます。
製品セクションでは、UIやグラフィックデザインのための生成コンポーネントのセットが増え続けています。生成されたデザインを探索したり、パラメトリックコントロールの容易さを活かして独自のデザインを作成したりできます。パラメータを操作してデザインを調整し、気に入ったプロパティやプロパティの組み合わせをロックして、視覚的な言語を見つけます。生成されたデザインを投票して、将来の出力をキュレートし、必要なだけイテレーションを保存できます。
マルチフォーマットエクスポート機能により、React、JS、JSON、JSX、SVG、PNG、HTML、CSS、CSSカスタムプロパティ、Sassなど、さまざまな形式でデザインをエクスポートできます。ワンクリックでデザインを同僚やクライアントと共有し、プレゼンテーションやコラボレーションを行うことができます。ホストされたウェブページとスタイルのアセットをJS、JSON、CSSとして公開します。
制約ベースのデザインでは、スケールとシステムを使用してデザインします。コンポーネントは自動的に定義されたブランドガイドラインを使用し、いつでもカスタム値でオーバーライドする機能を保持します。テーマをインポートして、視覚的なブランドをすぐに使用できます。監査と編集を行ったり、生成コンポーネントの制約を駆動するために使用したりできます。自動化されたアクセシビリティドキュメントにより、コントラストスコアやアクセシブルな組み合わせの迅速な視覚的フィードバックループが利用可能です。
レスポンシブテーマでは、単一の画面サイズだけでなく、定義されたブレークポイント全体で値を簡単にターゲットにできます。レスポンシブなタイポグラフィ、レイアウト、スペーシングを管理します。1000以上のフォントがサポートされており、Google Font Libraryの全フォントとローカルにインストールされたフォントを完全にサポートしています。変数フォントのサポートも提供されており、カスタム軸を自動的に公開し、変数フォントが可能にする細かい制御を実現します。
キュレートされたデザインアセットを閲覧し、デザインをカスタマイズしたり、使用したりできます。数千人のクリエイティブな人々が使用しており、レスポンシブなコンポーネントのギャラリーを探索できます。