• Top
• Category
• Contact
• About

サイト構築 -CSS

30

sponsorsr

Tailwind CSSを使用してUIコンポーネントを実装するのは、慣れていないと時間がかかります。Tailwind CSSのユーティリティファーストのフレームワークを使用してUIコンポーネントを生成するために設計されたAIツールを紹介します。

ボタンのさまざまなアニメーションをはじめ、ヘッダ、フッタ、ログインフォーム、ナビゲーションバー、スライダーなど、日本語でプロンプトに入力するだけでさまざまなUIコンポーネントをすぐに生成できます。

TailwindGenAI

TailwindGenAIの使い方は、簡単です。

1. 生成したいUIコンポーネントの説明を入力します。
2. 「Generate」ボタンをクリック。
3. 数秒で生成されます。

TailwindGenAIでボタンを生成

上の画像は静止画ですが、ホバー時にアニメーションのエフェクトがあります。

TailwindGenAIは、Tailwind CSSで実装したいUIコンポーネントの説明をプロンプトに入力するだけで、簡単にそのUIコンポーネントを実装するコードが生成されるオンラインツールです。

TailwindGenAIの特徴

• 即時にコードを生成

  簡単なプロンプトからTailwind CSSのコードを瞬時に生成し、レスポンシブデザインの構築にかかる時間と労力を節約します。

• リアルタイムのプレビュー

  生成されたコードはリアルタイムでビューでき、結果を視覚化してその場で調整できます。

• AIによる提案

  UIコンポーネントに関するAIを活用したスマートな提案を受けるｋとおで、より優れたデザインをより迅速に作成できます。

ということで、実際にTailwindGenAIを使用してみました。
まずは、プロンプトに「アニメーションで開閉するアコーディオン」と入力しました。

プロンプトにUIコンポーネントの説明を入力

本当に、数秒でアコーディオンのコードが生成されました！

Tailwind CSSで実装されたアコーディオンのコードをAIで生成

指定していなかったので、アイテムが一つでした。これは後述で修正します。

ここまでは、ログインも必要のないお試し版で試しましましたが、なかなか面白いのでアカウントを作成（無料）してフリー版で使用してみました。

アカウントを作成すると、インターフェイスも変化しました。

アカウントを作成してフリー版で登録

フリー版では、3,000トークンまで無料で利用できます。

まずは、「ログインページを作成してください」と頼みました。

Tailwind CSSで実装されたログインページのコードをAIで生成

続いては「アニメーションで開閉するアコーディオン、アイテムは3個で」さきほどのリベンジです。これもほんの数秒で生成されました。

Tailwind CSSで実装されたアコーディオンのコードをAIで生成

もちろん、3個のアイテムはアニメーションで開閉します。

Tailwind CSSで実装されたアコーディオンのコードをAIで生成

3,000トークンが終了してしまったので、今日はここまでです。
それ以上に使いたいときは、さまざまなプランが用意されています。

TailwindGenAIのプラン一覧

Related Posts

coliss