21st.dev Magic

デザイン

OpenClaw上のNeotaskを通じて洗練されたUIコンポーネントを即座に生成

できること

Neotaskは、OpenClawを通じて21st.dev Magicに接続し、プロダクションレディなUIコンポーネントの大規模なライブラリとAI搭載のコンポーネント生成に会話を通じて即座にアクセスできます。

コンポーネント生成

  • 説明から生成 — 必要なUIを平易な日本語で説明すると、Tailwind CSS、shadcn/ui、またはお好みのライブラリを使用した完全なスタイル付きReactコンポーネントが得られます
  • フィードバックで反復改善 — 「もっとコンパクトにして」や「ローディング状態を追加して」と言うだけで、Neotaskがすぐにフィードバックを適用し、新しいコード出力を生成します
  • 複数バリエーション生成 — 複数のデザインバリエーションを一度にリクエストして、プロジェクトに最適なものを選べます
  • アクセシビリティ組み込み — 生成されたコンポーネントは、最初からARIAベストプラクティスとキーボードナビゲーションパターンに従っています

    • コンポーネントライブラリ検索

  • パターンで検索 — ユースケースに合ったコンポーネントを見つけます：「月額/年額切り替え付きの料金表」や「未読数付きの通知ドロワー」など
  • カテゴリで閲覧 — タイプ別にコンポーネントを探索：ナビバー、モーダル、フォーム、カード、データテーブル、ダッシュボードなど
  • スタックでフィルタリング — 使用している技術スタック（React、Vue、Tailwind、shadcn、Radix UI）に特化したコンポーネントを検索
  • コピー可能なスニペット — ライブラリのすべてのコンポーネントは、コードベースですぐに使用できるフォーマットです

    • デザインシステム統合

  • 既存のスタイルに合わせる — カラートークンやTailwind設定を提供すると、Neotaskがデザインシステムに合ったコンポーネントを生成します
  • コンポーネントの構成 — 複数のコンポーネントスニペットを組み合わせてフルページレイアウトを依頼できます
  • ダークモードバリエーション — 一貫したトークン使用でどのコンポーネントのダークモードバージョンもリクエストできます

    • 試しに聞いてみてください

  • 「Tailwindを使って、人気バッジ、機能リスト、CTAボタン付きの料金カードコンポーネントを生成して」
  • 「左にロゴ、中央にナビリンク、右にサインインボタンのあるレスポンシブナビゲーションバーが必要です」
  • 「ソート、フィルタリング、ページネーション付きのデータテーブルコンポーネントを21st.devで検索して」
  • 「大きな見出し、サブタイトル、2つのCTAボタン、右側にモックアップ画像のあるヒーローセクションを作成して」
  • 「コンポーネントをもっとコンパクトにして、スケルトンローディング状態を追加して」
  • 「右からスライドインするドロワー形式のモーダルダイアログコンポーネントを見つけて」
  • 「4つのステップとプログレスインジケーター付きのオンボーディングステッパーを生成して」
  • 「右下隅に通知をスタックするトースト通知システムが必要です」

    • プロのヒント

  • デザインの意図を具体的に伝えてください。「控えめなボーダーのエンタープライズSaaSスタイル」と「角丸とソフトシャドウのコンシューマーアプリ」では、劇的に異なる結果が生成されます
  • プライマリ/セカンダリのカラー値を提供して、見つけた21st.devコンポーネントを既存のカラーパレットに合わせるようNeotaskに依頼してみてください
  • 完全なデザインシステムにコミットする前に、レイアウトを素早くプロトタイプするために、デザインプロセスの早い段階でコンポーネント生成を活用してください
  • OpenClawを通じてコードエディターのワークフローと組み合わせることができます。コンポーネントを生成し、会話で改良し、最終ファイルをプロジェクトに直接出力できます

    • Works Well With