muhammad-ahmed-ghani/ai-website-builder

AIウェブサイトビルダー

あるアプリがワールドクラスになるのは、5つのことが同時に満たされたときです。それは、ユーザーが本当に欲しかったものに答えていること。他のどのアプリとも似ておらず、それでいてコンバージョンするもの。真実だけを語っていること。すべての機能が動作すること。そして、実際のブラウザで誰かが確認してから「完了した」と言われたことです。このスキルは、あらゆるスタックで、単独でもヘルパーエージェントと一緒でも、これら5つすべてを達成するための方法です。

ここから始めましょう：人々はその中で何をするのでしょうか？

ツールを呼び出す前に、自分が構築しているものを判断します。明確でない場合は references/01-read-the-request.md を読んでください。

ユーザーが尋ねるもの...	構築するもの	読むもの
企業、人物、場所、または販売するものについてのアプリ	読むためのアプリ：ストーリー、ユーザーが提供した実際の証拠、連絡手段	01, 02, 03, 09, 04, 10
使うためのもの：ダッシュボード、ツール、ポータル、「Slackのようなもの...」、既存ツールの再設計	動作するアプリ：/は動作する画面であり、デモデータと、サインイン機能がある場合は可視のデモ認証情報を備える	01, 05 first, then 03, 09, 04
アクティビティ（語学学習、模擬試験、計画、追跡）で、オーディエンスがいて特定のビジネスがないもの	動作するアプリ。学習用：セクションがあるデザインされたホーム、次にレッスン、練習、進捗。架空の学校のパンフレットではありません	01, 05, 09
既存の製品を紹介するページ	その製品についての読むためのアプリ	01, 02, 03, 09, 04, 10

リクエスト内の「ウェブサイト」という言葉は判断材料になりません。それを決定するのは、所有者の言葉（「私のアカデミー」「私たちのショップ」）と、人々がその中で何をするかです。迷った場合は、動作するアプリとして解釈し、最初のメッセージでその旨を伝えます。

ループ（詳細は references/00-operating-loop.md を参照）

1. リクエストを読む。 .app-notes/brief.json（ユーザー自身の言葉による事実、不明点、想定）と .app-notes/requirements.json（ユーザーが今述べたこと、後で述べたことすべて）を作成します。誤った推測がビルドを変える場合にのみ、最大1つのグループ化された質問をします。
2. リサーチと戦略（ステップ3と並行）。実際のカテゴリーを調査し、9つの戦略的答えとデザイン仮説を書きます。references/02-research-and-strategy.md
3. インスピレーションボード（ステップ2と並行）。ラウンドごとに6つのボード。各ボードは、同じアプリの4つの画面として示される1つのデザインで、約2048 x 1280ピクセル。ユーザーは満足するまで追加のラウンドを要求できます。6つのボードは、オーディエンスの文化における6つの候補となる世界から選ばれ、6つの形容詞ではありません（references/09-design-craft.md セクション2）。references/03-design-direction.md
4. コンセプト、プルーフ、パネル。 ボードごとに1つのコンセプトで、構造的に異なるもの。それぞれを実際のページとしてレンダリングし、スコアリングし、選択します。
5. 方向性を確定する。 DESIGN.md、tokens.css、fonts.css、コントラストチェック、ページごとのブループリント。
6. 計画。 1行のジョブを持つページとセクション、実行可能な受け入れステップを持つ機能、ジョブを持つ画像。
7. 構築。 まず基盤、次にページビルダーを並行して、最後にインテグレーター。トークンのみ、実際のコピー、実際の画像、動作するコントロール。references/04-build-system.md および動作するアプリについては 05-working-apps.md。
8. 検証 プロダクションビルドに対して scripts/check-app.mjs を使用：3つのサイズで、訪問者のようにスクロールし、画像、測定された事実、デザインスキャン（コントラスト、タイポグラフィ、階層、隠蔽テキスト、生成AIの兆候）、機能フロー、録画されたツアーを実行。references/06-qa-and-repair.md
9. 批評、そして修復。 まずデザインをアンカーなしで評価し、次にスキャンを読み、次に名前付きパス（レイアウト、タイプセット、カラーライズ、ボールダー、ハーデン、ポリッシュ...）を1つずつ、それぞれスコープを限定し、それぞれ証拠で終了するように実行します。原因を修正し、再確認し、悪化させたものをロールバックします。references/09-design-craft.md
10. 選択した画像に合わせて磨き上げ、 次に測定値のみから正直に報告する。

ステップ3、4、8、9はスキップしないでください。これらはアプリが単なるテンプレートでなくなり、「完了」が単なる主張でなくなるプロセスです。独立したステップは一緒に実行してください。

非交渉条件

1. 正直さがすべてに優先します。 お客様の声、ロゴ、プレス、評価、統計、賞、チームメンバー、住所、メールアドレス、電話番号、価格、営業時間、返信時間、ポリシー、保証、資格を決して作り出さないでください。不足している事実は省略する（デフォルト）か、招待状に変えるか、所有者向けに一度だけ可視の <Draft> でマークします。ユーザーがリストしていないものを数えることは、作り出すことです。動作するアプリ内のサンプルデータは、画面上に「デモデータ」と表示されている場合にのみ許可されます。
2. 動作するふりをしない。 href="#"、行き先のないフォーム、無効な「まだ接続されていません」ボタン、ユーザーが選択していないサードパーティのフォームサービス、何でも受け入れるログインは禁止です。実際に配線するか、そのままにしておいて、その旨を伝えます。
3. 測定していないことを決して主張しない。 その主張を正確に裏付ける証拠なしに「テスト済み」「検証済み」「アクセシブル」「洗練された」「レスポンシブ」とは言わない。「見えなかった」は決して「クリーン」ではありません。作業を開始する呼び出しを行わない限り、作業が開始されたとは決して言わない。
4. コードの前に、画像から見た目を決定し、 選択した画像に合わせて構築する。ストックな見た目は禁止。このクライアントの世界がそれらを必要としない限り、AI生成特有の第一級および第二級の兆候を拒否する（09 はQAスクリプトが測定するルールとしてリストしています；review の指摘は理由がある場合のみ保持されます）。
5. 1つのデザインシステム。 色、フォント、角丸、シャドウ、イージングはトークンからのみ取得します。最大2つのフォントファミリー。1つの特徴的な瞬間と1つの意図的な不完全さ。アクセントカラーは控えめに使用します。
6. 画像は豊かで、アートディレクションされ、決して偽物ではありません。 スクロール1画面につき約1枚、1つの共有スタイル、画像マニフェストを通して、実際の代替テキスト。物体や人物の手書きSVG画像、画像内の文字、実際のイベントとしてキャプションされたAI画像は禁止。
7. 正しい言語、正しいスクリプト。 lang と dir を設定。実際のスクリプト（その代わりとなる翻字は決して使用しない）。論理的なCSSプロパティ。自分で検証できない翻訳は、所有者向けにフラグを立てます。
8. ユーザーが言ったことはすべて記録され、使用されます。 フォローアップ、指示、回答は要件台帳に記録され、後続のすべてのステップで読み取られます。フォローアップは同じプロジェクトを継続します。
9. 証拠はコードに勝ります。 すべての視覚的な主張は、この実行中に390、768、1440で確認した画像から得られます。
10. 原因を修正し、最小の変更で行う。 再現し、原因を修正し、再確認する。2回の修正パッチが失敗した場合：コンポーネントを書き直す。生成された画像内の欠陥には、CSSではなく新しい画像が必要です。

スターターとスクリプト

<skill> はこのSKILL.mdがあるフォルダ（例：~/.claude/skills/ai-website-builder）です。スクリプトはプロジェクトフォルダから実行します。

bash <skill>/scripts/scaffold.sh ./my-app [--app]           # スターターをコピー、インストール、lint、ビルド（--app は動作するアプリ用に src/app/ を追加）
node <skill>/scripts/contrast.mjs --tokens src/styles/tokens.css   # コンポーネントが使用するすべての色の組み合わせ（ライト/ダーク）
node <skill>/scripts/optimize-images.mjs --src .app-notes/originals --alt .app-notes/alt.json   # avif + webp セットとマニフェスト
pnpm build && pnpm preview                                  # PRODUCTION ビルドを提供（起動したままにする）
node <skill>/scripts/check-app.mjs --url http://localhost:4173 --flows .app-notes/flows.json --tour [--extremes]
                                                            # 画像、測定された事実、デザインスキャン、機能フロー、録画された訪問、レポート
                                                            # --extremes は 320x640 と 1920x1080 を追加；--no-design はスキャンをスキップ

QAスクリプトにはPlaywright（pnpm add -D playwright && npx playwright install chromium）または --chrome /path/to/chrome が必要です。最適化ツールには sharp が必要です。

assets/template/ は、Vite + React 19 + TypeScript + Tailwind v4 による、ルートごとのプリレンダリング、トークンコントラクト、18のUIプリミティブ、モーションキット、イマーシブキット、アプリキット、および通常のミスに対してビルドを失敗させるlintを備えたテンプレートです。AGENTS.md が信頼できるファイルマップです。STANDALONE.md は、ホスティングプラットフォームなしで手動で行うこと（認証トークン、画像作成、フォームエンドポイントの設定）を説明しています。動作するアプリには scaffold.sh --app を使用します（src/app/{accounts,db,seed}.ts を作成します。誰もサインインしないアプリは demoAccounts を空のままにします）。ユーザーのプロジェクトにすでに別のスタックがある場合は、そのスタックを使用します。メソッド、ルール、スクリプトはテンプレートに依存しません。

ヘルパーの使用

サブエージェントツールを使用する場合、references/08-role-briefs.md に従って役割を分割し、各ヘルパーに重複しない書き込みスコープ（基盤：共有ファイル；ページビルダー：それぞれ1つのページフォルダ；インテグレーターは最後）を与えます。単独の場合は、同じ順序に従います。1つの共有TODOリストを維持します。ユーザーのアイテムはユーザーが変更するものです。自分の担当部分に適合するアイテムが未完了の間は、引き継ぎを行いません。最後に、すべてのアイテムが完了しているか、メモ付きでブロックされているか、理由付きで未完了であるかのいずれかです。

クロージングレポート（測定値からのみ）

構築したもの（ページ、機能）。動作するアプリの場合、何が本物で何がモックか。ユーザーが提供しなければならないもの。検証されたもの（評決）と検証されなかったもの。平易な言葉でまだ未解決のもの。要件ごとに：構築され検証済み、構築されたが未検証、または未完了とその理由。簡潔で、平易で、マーケティングトーンは使用しません。送信する前に assets/checklists/done.md を使用してください。

リファレンスマップ

ファイル	いつ読むか
references/00-operating-loop.md	実行計画、作業分割、台帳とTODOリストの管理時
references/01-read-the-request.md	すべてのジョブの最初の10分間。読むアプリか動作するアプリか。言語。主張。フォローアップ。
references/02-research-and-strategy.md	カテゴリーの調査、戦略とデザイン仮説の作成、ページスケルトンの選択時
references/03-design-direction.md	ボード、コンセプト、動き、タイポグラフィ、クラフトの法則、AI生成の兆候、プルーフ、パネル、忠実度
references/04-build-system.md	コード作成時：トークン、ページ、コピー、フォーム、画像、モーション、SEO、アクセシビリティ、予算
references/05-working-apps.md	人々が使用するものすべて：デモバックエンド、サインイン、リージョン、フロー、学習アプリ
references/06-qa-and-repair.md	検証、評価、修復、批評、クロージングレポート
references/07-failure-catalogue.md	開始前と報告前：過去に何が問題だったかとその解決策
references/08-role-briefs.md	ヘルパーエージェントへの指示、ツール名のマッピング
references/09-design-craft.md	どの程度までデザインを追求するか（ビジュアルモード）、世界観の構築、色とタイポグラフィの最低基準、ルールとしてのAI生成の兆候、洗練パス、2つの評価、スコアリング
references/10-copy-and-voice.md	アプリ上の文章の作成またはレビュー時：事実に基づくトーン、スロットルール、生成散文の兆候
references/11-listening-to-the-audience.md	リサーチステップ：オーディエンスの懸念や言葉を聞くが、彼らの主張を借用しない
references/12-diagrams.md	仕組み、プロセス、フロー、アーキテクチャ図。トークンからマークアップで構築
references/13-reference-teardown.md	リサーチ中に、クラフトと構造について最大3つのリファレンスアプリを測定する
references/14-scripts-and-app-jobs.md	非ラテンスクリプト用フォント。各アプリ種類で訪問者が行うこと。アクセシビリティの追加事項
references/15-redesign-and-extension.md	アプリがすでに存在する場合：記録、ポリッシュ・リスタイル・フルの選択、何も失われていないことの証明
references/NOTICE.md	このスキルが学習した公開プロジェクトのクレジットとライセンス
assets/checklists/brief.md, done.md	台帳の形式、最終確認