plannotator/effective-html

何を解決するか

AIエージェントが高品質で自己完結型のHTMLアーティファクトを作成できるようにする専門的なスキルのセットを提供します。これにより、エージェントはテキストベースの応答にとどまらず、開発者やデザイナーにとってより明確な文脈と理解を提供するワイヤーフレーム、プロトタイプ、図表などの視覚的ツールを生成できるようになります。

仕組み

このプロジェクトは、創造的な方向性と技術的な信頼性を分離する6つの異なるスキルに機能を整理しています。一般的な html スキルがルーティングと広範なリクエストを処理し、専門的なスキルが特定の忠実度レベルを管理します：html-wireframe は低忠実度のレイアウト、html-prototype はインタラクティブな動作、html-diagram はシステムの可視化、html-plan はロードマップ用です。別途 design-artifact スキルは特定の視覚スタイルを強制せずにデザインプロセスを提供します。

対象ユーザー

Claude Code や Codex などのAIコーディングエージェントのユーザーで、コードやテキストだけでなく、視覚的ドキュメント、インタラクティブプロトタイプ、アーキテクチャ図を生成したい方を対象としています。

特徴

• 専門的なアーティファクト：低忠実度のワイヤーフレームから完全にインタラクティブなプロトタイプまで、さまざまな出力をサポートします。
• 自己完結型：生成されたすべてのアーティファクトは、レスポンシブでアクセシブルであり、ブラウザで検証されています。
• モジュールインストール：CLIツールを介して、一括または個別にスキルをインストールできます。
• エージェント統合：Claude Code および Codex へのネイティブプラグインサポートがあります。