# アーティファクト

## アーティファクトとは？

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

***

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

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

***

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

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

***

## 主なユースケース

<details>

<summary><strong>ウェブサイトの迅速なプロトタイピング</strong></summary>

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

</details>

<details>

<summary><strong>UIコンポーネント設計</strong></summary>

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

</details>

<details>

<summary><strong>ダイアグラム作成・ドキュメント化</strong></summary>

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

</details>

<details>

<summary><strong>学習・実験</strong></summary>

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

</details>

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

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

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

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

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

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

<details>

<summary><em><strong>例</strong></em></summary>

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

1. 可能な限り、shadcn/uiのコンポーネント（例：ボタン、入力、ダイアログ、チェックボックスなど）をビルディングブロックとして使用してください。
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>
  )
}
````

</details>

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

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

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

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