概要

Controlled Chaos は「エージェントが生成する即戦力のHTMLテンプレートを提供する」ことを目指したデザインシステム／スキル集です。五つの美的モード、九つのムードパレット、五つのタイポグラフィ声（voices）といったプリセットを組み合わせることで、短時間で落ち着きのある、または破調のある表現まで幅広いビジュアルを作れます。実体は Claude Code 用のスキルで、入力プロンプトに応じて完全なHTMLページを出力。CSSカスタムプロパティ（トークン）で配色やタイポ、レイアウトの律動を制御するため、フロントエンドの環境依存が少なく、すぐに配布・公開できることが利点です。

リポジトリの統計情報

スター数: 6
フォーク数: 1
ウォッチャー数: 6
コミット数: 2
ファイル数: 7
メインの言語: HTML

主な特徴

Claude Code スキルとして動作し、プロンプトから完全なHTML/CSSページを生成
CSSカスタムプロパティ（トークン）で配色・タイポ・モジュールを一元管理
五つのエステティックモード、九つのムードパレット、五つのタイポ声で多様な見た目を即構築
ビルドツール不要・フレームワーク不要で配布とデプロイが容易

技術的なポイント

Controlled Chaos の肝は「トークン駆動のスタイル設計」と「エージェント生成ワークフロー」にあります。DESIGN.md や README に見られる設計方針は、色・スペーシング・タイポグラフィを CSS カスタムプロパティで定義し、それらを組み合わせることで複数のビジュアルモードを実現するというものです。これにより、デザイナー視点ではプリセットを選ぶだけで一貫した見た目が出せ、開発者視点では余計なビルドステップやランタイム依存を減らせます。

Claude Code スキルとしての実装は、エージェントに渡すプロンプト（CLAUDE.md 内に指示がある想定）で「ページ構成」「モード」「ムード」「タイポ声」「コンテンツ」を指定すると、完全な HTML ドキュメント（head/meta、スタイル、主要なセクション）を返す設計です。出力される HTML はプレーンで、JS フレームワークを使わないため静的ホスティングに最適。CSS はカスタムプロパティで変数化されているため、テーマ切替や微調整が容易です。

さらに、デザイン原則（AXIOMS.md）や設計意図（DESIGN.md）を文書化している点は、生成結果の一貫性を保つ上で重要です。エージェントはそれらの規約に従って要素の階層、視覚的アクセント、タイポグラフィのリズムを決定します。実用面では、アクセシビリティの基本（セマンティックなマークアップ、色のコントラスト配慮）を守ることが期待される一方、最終出力はケースによって微調整が必要です。トークンベースのアプローチはデザインシステムとの親和性が高く、他のプロジェクトへ移植する際にも恩恵が得られます。

一方で注意点として、エージェント依存の生成ワークフローはプロンプト設計の最適化が必要であり、複雑なインタラクション（クライアントサイド動的処理）や高度なパフォーマンスチューニングは想定外です。静的なランディングやポートフォリオ、キャンペーンページのような用途に最適化された設計と言えます。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
AXIOMS.md: file
CLAUDE.md: file
DESIGN.md: file
README.md: file

…他 2 ファイル

（各ファイルの想定役割）

README.md: クイックスタートとプロジェクト概要、使用例（Agent向けプロンプト例を含む）
CLAUDE.md: Claude Code スキルの具体的な指示と出力フォーマット要件
DESIGN.md: カラーパレット、タイポグラフィ、トークン命名規則などの設計ドキュメント
AXIOMS.md: デザイン哲学や制作上の原則（視覚的一貫性、コントラスト、余白など）
.gitignore: バージョン管理から除外するファイル指定

まとめ

静的HTML×トークン化CSSで即戦力のビジュアルをAIエージェントが生成する実用的なデザインスキル集です。（約50字）

リポジトリ情報：

名前: controlledchaos
説明: 説明なし
スター数: 6
言語: HTML
URL: https://github.com/RayyanZahid/controlledchaos
オーナー: RayyanZahid
アバター: https://avatars.githubusercontent.com/u/38790991?v=4

READMEの抜粋：

Controlled Chaos

A creative design system skill for building award-level web pages. Five aesthetic modes, nine mood palettes, five typographic voices, and a creative force framework — inspired by Awwwards SOTD winners and Cargo graphic templates.

Agent Instructions

This is a Claude Code skill. When invoked, it generates complete HTML pages styled through CSS custom properties. No build tools, no JavaScript frameworks — pure HTML + CSS tokens.

Quick Start (Agent)

Generate a pag…

Controlled Chaos — クリエイティブデザインシステム