playground

Playground Builder

コントロール、ライブプレビュー、コピー可能な自然言語のプロンプトを備えた、自己完結型のインタラクティブな HTML エクスプローラーを作成します。

ワークフロー

1. プロダクトのコンテキスト、対象ユーザー、検討する判断事項、必要な状態を推測します。既存のデザインシステムや明示されたユーザー要件は、このスキルのビジュアル上のデフォルトより優先されます。
2. 最も近いテンプレートを1つだけ読み、適用します。
   • templates/design-playground.md
   • templates/data-explorer.md
   • templates/concept-map.md
   • templates/document-critique.md
   • templates/diff-review.md
   • templates/code-map.md
3. インライン CSS と JavaScript を含み、外部のランタイム依存関係を持たない HTML ファイルを1つ作成します。
4. ブラウザーで開き、すべてのコントロールとプリセットを操作し、代表的なビューポートサイズを確認します。ライブプレビュー、プロンプトの出力、コピー時のフィードバック、空およびエラー状態、キーボード操作性を検証します。完了前に、レンダリング上の不具合を修正します。

既定の方針

プロダクトのコンテキストから別の方針が示されていない場合は、以下を使用します。

• コントロールをライブプレビューの隣に配置し、その下にプロンプト出力を配置します。
• 洗練されたライトテーマ、システム UI フォント、コードや値には等幅フォント、最小限の装飾を使用します。
• 適切な初期状態を設定し、一貫性のある名前付きプリセットを3～5個用意します。
• 単一の状態オブジェクト、単一の更新経路を使用し、プレビューとプロンプトを即時に更新します。
• コントロールは用途ごとにまとめ、高度なコントロールは折りたたんでおきます。
• 望ましい結果を自然言語で説明し、デフォルト以外の選択肢のみを含むプロンプトテキストを作成します。

不変条件

• 「適用」ボタンは設けません。関連する変更は即時に反映します。
• プロンプトは、Playground を見なくても実行できる内容とし、状態をそのまま羅列したものにはしません。
• コピー時には一時的なフィードバックを表示し、Clipboard API が失敗した場合も使用可能な代替手段を用意します。
• プリセットを適用すると、コントロール、プレビュー、プロンプトが一貫して更新されます。
• プレビューまたは生成されるプロンプトのどちらにも影響しないコントロールは追加しません。

完了するには、自己完結型のファイルに加え、レンダリングと操作を検査した証拠が必要です。ファイルを開くだけで操作を試さない場合は不十分です。