web-design-studio

Web デザインスタジオ

明確なビジュアルコンセプト、完成度の高いコンテンツ、オリジナルのラスター画像、ブラウザーで検証済みの表示を備えた、静的 Web サイトを一式制作します。アートディレクションとインターフェースの品質には frontend-design を使用します。新たに作成するラスター素材にはすべて imagegen を使用します。

運用上の境界

• スタンドアロンの HTML、CSS、JavaScript のみを制作します。
• 既存の静的サイトの構造と規約を維持します。
• 空のプロジェクトでは、index.html、styles.css、script.js、images/ を標準とします。
• React、Vue、Next.js、Svelte、その他のフレームワークプロジェクトを移行、初期化、または書き換えないでください。そのような依頼は適切なフロントエンドスキルに振り分けてください。
• .openai/hosting.json が存在する場合は、このスタンドアロンのワークフローではなく、Sites のスキルに従ってください。
• ユーザーから別途依頼されない限り、デプロイ、公開、ホスティング設定の追加は行わないでください。
• ユーザーから明示的に依頼されない限り、デザイン引き継ぎ用ドキュメントは作成しないでください。

ワークフロー

1. プロジェクトを調査する

編集を始める前に、以下を確認します。

• 既存のエントリーページ、スタイルシート、スクリプト、アセットディレクトリ
• プロジェクトの指示と、ユーザーが作成した変更
• 提供されたブランド素材、コピー、参考資料、必須コンテンツ
• 現在のナビゲーション、インタラクション、メタデータ、レスポンシブ動作

依頼で別途指定されない限り、既存のコンテンツと素材は意図されたものとして扱います。標準のファイル構成を適用するためだけに、機能している構成を置き換えてはいけません。

2. プロダクトとコンテンツを定義する

ビジュアル実装の前に、以下を確定します。

• ページの目的と、ユーザーに促す主なアクション
• 対象ユーザーと意思決定の背景
• 情報の階層とセクションの順序
• 必要なインタラクションとコンバージョンポイント
• コンテンツ上の制約、事実に関する主張、法務またはブランド要件

具体的で、プロダクトに即したコピーを作成します。Lorem Ipsum、プレースホルダーのラベル、創作した推薦文、捏造した数値、裏付けのない主張、内容のない「機能カード」の穴埋めは使用しないでください。事実が不足している場合は、事実に基づかない中立的な表現を使うか、ユーザーが編集できるコピーであることを明確に示してください。

3. ひとつのアートディレクションを貫く

テーマに合った明確なコンセプトを選びます。エディトリアル、洗練されたラグジュアリー、インダストリアル、遊び心のあるもの、オーガニック、ブルータリスト、レトロフューチャー、ミニマル、マキシマル、またはほかの意図的な方向性が考えられます。コーディングの前に、印象に残るビジュアルのアイデアを定義します。

コンパクトなデザインシステムを作成します。

• 確実なフォールバックを備えた、見出し用と本文用のタイポグラフィ
• CSS 変数として定義した、基調色、補助色、アクセント色、サーフェス色、テキスト色
• 余白のリズム、グリッド、コンテナ幅、角丸、ボーダー、シャドウ
• レスポンシブな構成と画像のトリミング動作
• 表示、ホバー、フォーカス、スクロール状態に合わせた控えめなモーション表現

ブランドに真に適している場合を除き、ありきたりな AI 風の表現は避けてください。デフォルトのシステムフォント、白地に紫のグラデーション、反復的な角丸カード、予測どおりの中央揃えのヒーロー、過剰な発光、根拠のないグラスモーフィズム、目的のない装飾的なアニメーションなどが該当します。実装の複雑さはコンセプトに合わせてください。

4. すべてのビジュアル素材を計画する

コンテンツ構成とアートディレクションが固まったら、明確なアセット概要を作成します。新たに作成するラスター画像は、ヒーロー画像、プロダクト画像、エディトリアル写真、イラスト、テクスチャを含め、すべて Codex で生成する必要があります。

ユーザーから提供されたロゴ、ブランドマーク、写真、参考素材は維持します。精密なインターフェースアイコン、ベクター形式を維持する必要があるロゴ、単純な図形、図表、構造的な装飾には HTML、CSS、SVG を使用します。

各ラスター素材について、以下を定義します。

• 目的、配置場所、最終ファイル名
• アスペクト比、トリミング、被写体の配置、レスポンシブ動作
• 周囲のコンテンツに必要なセーフエリアとネガティブスペース
• 被写体、環境、表現媒体、ライティング、配色、素材
• 画像内にテキストを含める必要がある場合は、その正確な文言
• 変更してはならない要素、禁止事項、生成上のリスク

5. Codex で生成する

imagegen スキルを通じて、組み込みの image_gen ツールを使用します。

• ストック画像検索、外部の生成サービス、プロジェクト内の生成スクリプトは使用しないでください。
• アセットまたはバリエーションごとに、生成呼び出しを1回行います。
• アイデンティティ、スタイル、構図、製品の詳細を実質的に制約する場合に限り、参照画像を使用します。
• すべての出力について、主題の正確さ、トリミング、安全領域、テキストの忠実度、解剖学的な正確さ、オブジェクトの重複、透かし、視覚的なアーティファクトを確認します。
• 出力が使用できない場合は、的を絞った修正を1回行って繰り返します。
• 編集、透明な背景、フォールバック方針については imagegen に従ってください。

必要に応じて、配置を考慮したプロンプトを使用します。

Use case: <product-mockup | ads-marketing | photorealistic-natural | illustration-story | stylized-concept>
Asset type: <hero | product image | editorial image | illustration | texture>
Primary request: <essential visual>
Scene/backdrop: <environment>
Subject: <main subject>
Style/medium: <photography | illustration | 3D | collage>
Composition/framing: <aspect ratio, crop, subject placement, safe areas, negative space>
Lighting/mood: <lighting and emotional tone>
Color palette: <interface-aligned palette>
Text (verbatim): "<exact text only when required>"
Constraints: <must preserve or include>
Avoid: watermarks, unintended text, logos, clutter, malformed details, generic stock styling

Codex の組み込み出力は、デフォルトで $CODEX_HOME/generated_images/ に保存されます。プロジェクト用のアセットについては、次の手順に従います。

1. プロジェクトに既定のアセットディレクトリがない場合は、images/ を作成します。
2. 選択した出力をプロジェクトにコピーまたは移動します。
3. ceramic-mug-hero.png のような、内容を表すケバブケースのファイル名を付けます。
4. 明示的に依頼されていない限り、既存のアセットを上書きしないでください。代わりに、ceramic-mug-hero-v2.png のような別ファイルを作成します。
5. 参照されているサイトのアセットを $CODEX_HOME 内にのみ残さないでください。

6. サイト全体を実装する

• セマンティックなランドマークと論理的な見出し階層を使用します。
• 正確なドキュメント言語、タイトル、メタディスクリプション、ビューポート、関連するソーシャルメタデータを設定します。
• 横方向にはみ出さずに動作するレスポンシブレイアウトを構築します。
• キーボードで操作でき、フォーカスが視認でき、ラベルが明確で、状態が正しく示される実際のリンクとコントロールを使用します。
• 有用な alt テキストを追加し、装飾のみを目的とする画像には空の alt テキストを使用します。
• レイアウトシフトを防ぐため、画像の寸法またはアスペクト比を指定します。
• メインのヒーロー画像を優先し、スクロールせずに見える範囲より下の画像は遅延読み込みします。
• JavaScript がなくても、重要なコンテンツとナビゲーションを利用できるプログレッシブエンハンスメントを実装します。
• prefers-reduced-motion に対応し、ホバーだけに依存する操作は避けます。
• JavaScript は実際の動作に必要な範囲に絞り、推測に基づく状態や不要なライブラリは避けます。
• プレースホルダー、リンク切れ、コメントアウトされたモックセクション、意図しない外部画像への依存を残さないでください。

7. プレビューと検証

SKILL_DIR を、この SKILL.md が含まれるディレクトリとして解決します。ローカルの視覚的アセットを検証します。

python3 "$SKILL_DIR/scripts/verify_images.py" \
  --html-dir . \
  --images-dir images

配信前に、参照切れをすべて修正します。ブラウザーを操作できる場合は、サイトをローカルで配信し、390 px、768 px、1440 px 前後の代表的な幅で確認します。次の項目をチェックします。

• 最初のビューポートの構成とコンテンツの階層
• ナビゲーション、ボタン、フォーム、キーボード操作の順序
• フォーカス状態、動きの軽減、タッチ操作
• テキストの折り返し、はみ出し、画像のトリミング、読み込み
• コンソールエラーとローカルリクエストの失敗

ブラウザーを操作できない場合は、静的チェックを実施し、ブラウザーでの視覚的な QA は実施できなかったことを報告します。

8. 依頼がある場合に限り、中国語の引き継ぎ資料を作成する

ユーザーがデザイン仕様書またはクライアント向けの引き継ぎ資料を明示的に依頼した場合は、サイトとアセットの検証後に作成します。

python3 "$SKILL_DIR/scripts/generate_design_doc.py" \
  --project-name "Project Name" \
  --output "design-doc-project.html" \
  --html-file "index.html"

このドキュメントでは、固定の見出し、ラベル、デフォルトのガイダンス、説明文に簡体字中国語を使用します。プロジェクト名とソースコンテンツは、提供されたとおりに保持します。--design-concept、--target-audience、--design-goals、--features などの手動で記入する説明値は、ユーザーが別の言語を指定しない限り、簡体字中国語で記述します。

9. 納品する

次の項目を確認します。

• 静的サイトが完成し、機能すること
• 新たに作成したラスター画像がすべて Codex で生成され、プロジェクト内に保存されていること
• すべてのローカルの視覚的参照先が解決されること
• アクセシビリティ、レスポンシブ動作、メタデータ、動きの軽減が実装されていること
• 利用可能な場合はブラウザー QA が完了していること
• 依頼がない限り、デザインドキュメントが生成されていないこと

エントリーページ、生成したアセットのパス、実施した検証、明示的に依頼された中国語の引き継ぎ資料を報告します。