web-artifacts-builder-v2

Web Artefacts Builder

フロントエンドの claude.ai アーティファクトを作成するには、次の手順に従います。

1. scripts/init-artifact.sh でフロントエンドのリポジトリを初期化します
2. resources/themes.css からテーマを選び、適用します（下記の「テーマ」を参照）
3. 生成されたコードを編集して、アーティファクトを作成します
4. scripts/bundle-artifact.sh で単一の HTML ファイルにバンドルします
5. バンドルしたアーティファクトをユーザーと共有します
6. （任意）アーティファクトをテストします

スタック：React 19 + TypeScript + Vite 8 + Tailwind CSS v4 + shadcn/ui（new-york スタイル）+ lucide-react。バンドルには vite-plugin-singlefile を使用します。Node 20.19+ または 22.12+ が必要です。

デザイン原則

これらの原則は html-design-examples スキルをもとにしています。ステータスレポート、コードレビュー、PR の説明、デザインシステムのページ、エディターなど、特定のアーティファクトの用途に応じたパターンが必要な場合は、このスキルと併せて読み込んでください。resources/index.html にあるレンダリング済みカタログには、20 個の単一ファイルの参考例が掲載されています。

• 落ち着いたエディトリアルな美しさ。 アクセントカラーは控えめにし、余白を十分に取り、コンテンツそのものを主役にします。アーティファクトがダッシュボードでない限り、ヒーローグラデーションやマーケティング風の光沢、ダッシュボード風の装飾は避けてください。
• 装飾よりタイポグラフィ。 枠線、背景、色付きのバーに頼る前に、ウェイト、サイズ、行送りで階層を作ります。参考例では、セリフ体の見出しとサンセリフ体の本文を組み合わせるパターンが繰り返し使われており、ほかに手がかりがない場合にも信頼できる選択肢です。Inter だけを唯一の書体として使うのは、AI 生成の出力だと見抜かれる要因になります。選んだテーマのフォントに関する説明を参考に、書体を組み合わせてください。
• アクセントカラーは使う価値のある場所に。 ほとんどのテーマで、アクセントカラーは 1 色だけ用意されています。貴重なものとして扱いましょう。ページ上で注意を引く必要があるもの（主要なアクション、リンク、フォーカス状態）に使い、それ以外ではほとんど使わないようにしてください。
• 必要に応じて横幅を十分に使う。 表形式、比較形式、空間的なコンテンツを狭いカラムの中央に配置しないでください。長文の文章でない限り、720px 幅の細長いテキスト領域よりも、構造化されたカラムを持つ広いレイアウトのほうが読みやすくなります。
• 操作状態をエクスポートできるようにする。 アーティファクトがエディターやボードなど、ユーザーが作業する画面である場合は、「copy as JSON」または「copy as prompt」ボタンを用意し、結果をエージェントのループに戻せるようにしてください。パターンについては、html-design-examples の 18-editor-triage-board.html の例を参照してください。

AI らしさを避けるルール

色付きの境界線、色付き背景のコールアウトボックス、カード上のアクセントバーなどの視覚的なアクセントは、明示的に定義されたステータス、カテゴリ、重大度、優先度といった具体的な情報を色や装飾で表す場合にのみ使用してください。装飾目的で視覚的なアクセントを付けたり、変化を出すために同じ階層の項目ごとにパレットの色を使い分けたり、余談を示すための標準的な手法として、色付きのバーを付けた色付きコールアウトを使ったりしないでください。アクセントを追加しようとしているときは、それを取り除くと情報が失われるかどうかを考えてください。失われないなら、アクセントを外し、シンプルなタイポグラフィの階層に頼ってください。

AI の標準出力のように見えるため避けるべき要素はほかにもあります。過度に中央揃えしたレイアウト、紫のグラデーション、あらゆる要素に一律に付けた角丸、グラスモーフィズム、絵文字の箇条書き、アイコンがすべて同じ 3 枚カードのヒーローセクションです。状態が変わらないステータスバッジや点滅するドット（「Active」「Verified」など）、プロンプトやスタックをそのまま繰り返す文言（「Built with...」など）、システム風の偽装的な命名（// 区切り、大文字のスネークケースラベル、バージョンのピル、文字間を空けたモノスペースの小見出し）、作業画面にランディングページ風の装飾（誇張したサブタイトル、見栄えだけの統計表示、見出しの一語だけをアクセントカラーにすること）も同様です。計算されたボックスを測定し、SVG、ASCII アート、タイムラインのマーカーの位置が揃っているか確認してください。

テーマ

resources/themes.cssには、名前付きのテーマが5種類用意されています。コンポーネントを書き始める前にテーマを1つ選んでください。最初に選んでおくほうが、あとから配色を置き換えるよりもずっと手間がかかりません。

テーマ	雰囲気	おすすめの用途
エディトリアルペーパー	温かみのある紙、インク、黄土色のアクセント	長文の解説、計画、レポート、事後検証
テクニカルモノ	ほぼモノクロ、グリーンの単色アクセント	コードレビュー、システム図、ステータスページ、デバッグ
暖色系の低彩度	砂色、粘土色の茶色、落ち着いたテラコッタ	ブランドに寄せた成果物、デザインページ、派手すぎず温かみを出したいもの
寒色系の落ち着いた配色	控えめなスレート、彩度を抑えたティール	ダッシュボード、ステータスレポート、技術文書
ノルディックダーク	極夜を思わせるグレー、フロストブルー	インシデントの解説、デバッグログ、ダークモードを優先した開発者向けツール

テーマを適用するには：

1. resources/themes.cssを読み、選んだテーマの:root { ... }ブロックと.dark { ... }ブロックをコピーします。
2. プロジェクトのsrc/index.cssにある既存の:rootブロックと.darkブロックを置き換えます。変数をTailwindのユーティリティに結び付けるため、@theme inlineブロックと@layer baseブロックはそのままにします。
3. 推奨されているフォントスタックを追加します（各テーマの上にあるコメントブロックに記載されています）。index.htmlにGoogle Fontsへの<link rel="stylesheet">タグを追加するか、src/index.cssでbody { font-family: ... }を設定します。

ユーザーに既存のブランドやデザインシステムがある場合は、テーマ一覧から選ぶのではなく、そちらを優先してください。

クイックスタート

ステップ1：プロジェクトを初期化する

bash scripts/init-artifact.sh <project-name>
cd <project-name>

これにより、次の内容を備えた設定済みプロジェクトが作成されます：

• Vite 8経由のReact 19 + TypeScript
• Tailwind CSS v4（src/index.cssでCSSファーストの設定を使用し、tailwind.config.jsは不要）
• src/components/ui/に40種類以上のshadcn/uiコンポーネント
• radix-ui統合パッケージとlucide-react
• tsconfig.jsonとvite.config.tsの両方に設定されたパスエイリアス@/
• 編集を始められる状態の最小限のApp.tsxプレースホルダー

ステップ2：テーマを適用する

上記の「テーマ」を参照してください。

ステップ3：成果物を開発する

src/App.tsxを編集し、必要に応じてコンポーネントを追加します。コンポーネントは@/components/ui/<name>からインポートします。cn()ヘルパーは@/lib/utilsにあります。

開発中にプレビューするには：

pnpm dev

ステップ4：単一のHTMLファイルにバンドルする

bash scripts/bundle-artifact.sh

これにより、すべてのJS、CSS、アセットがインライン化された、自己完結型の単一ファイルbundle.htmlが生成されます。このスクリプトでは次の処理を行います：

• vite-plugin-singlefileを開発依存関係として追加します
• シングルファイルプラグインとインライン化オプションを使って設定を拡張するvite.config.bundle.tsを作成します
• vite build --config vite.config.bundle.tsを実行します
• dist/index.htmlをbundle.htmlに名前変更します

成果物は実行時に何も必要としません。そのままユーザーに渡してください。

ステップ5：ユーザーと共有する

成果物としてbundle.htmlをユーザーに渡します。

ステップ6：テストする（任意）

ユーザーから依頼された場合、または成果物に壊れた状態で公開したくないインタラクティブなロジックが含まれる場合にのみ、共有前にテストしてください。Playwrightを使うか、ファイルをローカルで開いてください。それ以外の場合は、まず迅速に公開し、フィードバックをもとに改善することを優先してください。

参考資料

• shadcn/uiコンポーネント：https://ui.shadcn.com/docs/components
• Tailwind CSS v4のドキュメント：https://tailwindcss.com/docs
• デザインパターンの関連スキル：html-design-examples