Artifact（アーティファクト）

ビジュアル & UI生成

Artifact（アーティファクト）とは？

Artifact（アーティファクト）は、Reactコンポーネント、HTMLコード、Mermaidダイアグラムを即座に生成できるジェネレーティブUIツールです。DoraverseではAIエージェントのワークフローに直接統合されており、選択したAIモデルによってWeb UI要素やビジュアライゼーションを手軽に作成・改良できます。

Doraverseにおけるアーティファクトの主な特徴

即時プロトタイピング ジェネレーティブAIを活用し、Webサイトやユーザーインターフェース、レイアウトコンポーネントを素早く生成。フロントエンド開発を効率化します。
ジェネレーティブUI Reactコンポーネント、クリーンなHTMLコード、高度なダイアグラムをその場で作成し、複雑なアイデアも明確に可視化できます。
反復的なデザイン 生成物をAIのサポートで段階的に改良でき、ユーザー中心のデザイン改善が容易です。
専用UIウィンドウでの表示 アーティファクトで生成したビジュアルコンテンツは専用のUIウィンドウに表示され、視認性が高く、直感的な操作が可能です。

アーティファクトがもたらすメリット

レイアウト設計に時間をかけず、コードやダイアグラムを即時生成することでUI/UX設計・開発を加速できます。
ダイアグラムでワークフローやサイトマップ、インタラクション図を明確に可視化できます。
デザイン案を手軽に検討し、AIの提案を活用してUIを洗練できます。
コーディング経験が少ない関係者もプロトタイピングやフィードバックに参加しやすくなります。
ビジュアルは専用ウィンドウで表示されるため、集中して確認・操作できます。

主なユースケース

ウェブサイトの迅速なプロトタイピング

ランディングページやダッシュボード、機能モックアップ用のReactコンポーネントやHTMLスニペットを数分で作成できます。

UIコンポーネント設計

再利用可能でレスポンシブなUI要素を自動生成します。

ダイアグラム作成・ドキュメント化

ダイアグラムでプロセスや関係性、システム構成を即座に可視化できます。

学習・実験

AIのサポートでReactやHTMLの基礎をインタラクティブに学べます。

アーティファクトの追加オプション

アーティファクトの柔軟性とパワーを最大限に活用するため、AIによるUIコンポーネント生成や管理方法を調整できる2つの重要なオプションを有効化できます。

shadcn/ui用インストラクションの有効化

AIがshadcn/uiコンポーネント（Radix UIとTailwind CSSで構築された、再利用可能で洗練されたUIコンポーネント群）をどのように活用するかを理解できるよう、特別な指示を追加します。

これにより、AIはデザインシステムに準拠した、統一感のある高品質なReactコンポーネントを生成できるため、作業時間を短縮し、プロフェッショナルな見た目を実現できます。

提案: プロジェクトや企業でshadcn/uiを利用している場合や、保守性・カスタマイズ性の高いモジュール型UIコードを求める場合は、この機能を有効にしてください。

例

あなたはshadcn/uiライブラリ（Radix UIを基盤とし、Tailwind CSSでスタイリングされた）を使ってReactコンポーネントを生成します。以下のガイドラインに従ってください。

1. 可能な限り、shadcn/uiのコンポーネント（例：「Button」「Input」「Dialog」「Checkbox」など）をビルディングブロックとして使用してください。
2. shadcn/uiに含まれるTailwind CSSクラスを活用し、デザインシステムの一貫したスタイルパターンを守ってください。
3. コンポーネントは再利用可能かつモジュール化し、責務を明確に分離してください。
4. shadcn/uiに統合されたRadix UI標準に従い、アクセシブルかつセマンティックなHTML要素を使用してください。
5. Reactに適した形で、適切なpropsやイベントハンドリングを実装してください。
6. インデントや必要なコメントを含め、読みやすくクリーンなコードを生成してください。
7. インラインスタイルは避け、Tailwindのユーティリティクラスのみを使用してください。
8. レイアウトには、shadcn/uiのレイアウト用プリミティブや、TailwindのFlex/Gridユーティリティを活用してください。
9. さまざまな画面サイズに柔軟に対応できるレスポンシブなコンポーネントを作成してください。

shadcn/uiのButtonコンポーネントを使った例:

```jsx
import { Button } from "@/components/ui/button"

export function SubmitButton() {
  return (
    <Button type="submit" className="w-full">
      Submit
    </Button>
  )
}

カスタムプロンプトモード

デフォルトの「アーティファクトシステムプロンプト（Artifact system prompt）」を無効化し、お客様独自のカスタムインストラクションでAIの挙動を制御できます。

このモードを利用することで、「UIアーティファクト（UI Artifacts）」の生成方法を完全にコントロールできます。「コーディングスタイル」「フレームワーク」「命名規則」「ファイル構成」など、チームの開発基準やワークフローに合わせて細かく指示できます。

提案: 特定の要件がある場合や、チーム独自の開発基準に厳密に合わせたい場合は、このモードのご利用をおすすめします。

PreviousCode Interpreter Nextプロジェクト

Last updated 4 days ago