swiss-creative-mode-template

スイス・クリエイティブモードのテンプレート

力強い視覚的なリズムと意味のあるインタラクションを備えた、プレミアムなスイス／エディトリアルスタイルの HTML テンプレートを作成し、単一ファイルの成果物として出力します。

リソースマップ

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

ワークフロー

1. 有効な DESIGN.md を読み、配色・タイポグラフィ・レイアウトの決定事項をルート CSS 変数に反映します。
2. assets/template.html を index.html にコピーします。
3. 次の構成を維持します。
   • 大胆なタイトルと幾何学的なフレームを備えたヒーローシーン。
   • 4 ステップのプロセスカードの列。
   • スタック／アーキテクチャ図のシーン。
4. 次のインタラクションが動作する状態に保ちます。
   • 前／次のスライドナビゲーションとドットナビゲーション。
   • テーマ切り替え（ペーパー／ダーク）。
   • パレット切り替えボタン（テンプレート全体のアクセントカラーを変更）。
   • ホットスポット切り替え（注釈／詳細）。
5. 出力は自己完結型にします（<!doctype html>、インライン CSS／JS、外部ランタイム依存なし）。
6. 出力前に references/checklist.md に照らして検証します。

出力仕様

成果物の前に短い一文を添えてから、次の形式で出力します。

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>