テンプレートなしでAIエージェントにデザインを教え、ビデオプレゼンテーションを組み立てる方法

ClaudeやCursorにランディングページを作成するよう依頼したことのある人なら、この結果をよく知っているでしょう。生成されたコードは技術的には動作しますが、ビジュアル的には青いボタンと角丸カード典型的な2018年風のページに見えます。モデルはCSSやReactの構文を知っていますが、組み込みのデザイン感覚とプロジェクト構造の理解が欠けています。

中国のデベロッパーConardLiによるgarden-skillsリポジトリは、Agent Skillsフォーマットを通じてこの問題を解決します。これは仕様書SKILL.mdに従ったモジュール群で、Claude Code、Cursor、Codex、その他のターミナルエージェントを специализированные инженерыに変えます。

Agent Skillsとは何か、そしてどのように動作するか

Anthropicは最近、エージェントの機能を拡張するためのオープン標準を提案しました。本質的に、スキルとはプロジェクトまたはホームディレクトリ内の отдельная папкаで、マニフェストSKILL.md（YAMLヘッダー、テキスト指示、 готовые скрипты、参照ガイドを含む）を 含みます。

エージェントはマニフェストのdescriptionフィールドをスキャンします。ユーザーのタスクが説明と一致すると、モデルは会話中に直接関連するコンテキストを読み込みます。これにより、すべてのチャットに長いシステムプロンプトをコピーする必要がなくなります。

garden-skillsリポジトリには、実世界の作業タスク用の5つの готовыеモジュールが含まれています。

リポジトリ内の готовыеスキル

各スキルは特定のシナリオに合わせて調整されており、エージェントが幻觉を生成したり、ステージ承認をスキップしたりすることを防ぐための厳格な相互作用ルールが含まれています。

1. web-design-engineer

このモジュールは、ページ、ダッシュボード、プロトタイプ、インタラクティブコンポーネントのレイアウトに焦点を当てています。汎用的なテンプレートの代わりに、25の готовыеビジュアルスタイルのデータベースを使用します。これらには、Linearの美学、Bloombergのターミナル、スイススタイル、ニューモーフィズム、レトロフューチュリズム、そして日本のデザイナー原研哉（MUJI）にインスパイアされたミニマリズムが含まれます。

このスキルは、5つのパラメータでモデルを動作させます：要素密度、アニメーションダイナミクス、アセット依存性、ブランド整合性、変動性です。エージェントはまずコンセプトとパレットをoklch()で検証し、早期のv0プロトタイプを構築し、承認後にのみ最終的なReactコードを書き込みます。

2. web-video-presentation

このスキルは、ソーステキスト、技術記事、またはレッスン資料を受け取り、Vite、React、TypeScriptスタックを使用して固定の1920×1080解像度でインタラクティブなWebプレゼンテーションを組み立てます。

プレゼンテーションはステップとキーボードクリックで制御されるため、各セマンティックな強調が画面上のビジュアルステップと同期します。UI要素はホバー時に非表示になるため、ビデオ用のクリーンな画面を記録できます。

このモジュールは23の組み込みテーマをサポートし、MiniMax CLI、OpenAI TTS、ElevenLabs、またはmacOSシステムユーティリティsayによる音声生成と統合しています。

3. beautiful-article

このツールは、生データ（リンク、PDF、DOCX、メモ、またはチャットダンプ）を読みやすい記事レイアウトに変換します。このスキルは、Reacticleコンポーネントライブラリと11のデザイナープロファイル（Tufte、Bodoni、Vignelli、Knuth）に依存しています。

このモジュールは、元のテキストを90%保持する詳細なチュートリアルから、深いコンテンツリワークを伴うインタラクティブな説明記事まで、10の出版フォーマットを提供します。 assembly中、エージェント обязательно делает паузы для подтверждения темы, структуры и стратегии иллюстраций.

4. gpt-image-2およびkb-retriever

他の2つのスキルは、より狭いタスクをカバーしています：

• gpt-image-2には、OpenAI互換APIを通じてダイアグラム、アーキテクチャダイアグラム、バナー、UIモックアップを生成するための79の構造化プロンプトテンプレートが含まれています。コード生成モードで動作したり、プロンプト作成のアドバイザーとして単に動作したりできます。
• kb-retrieverは、ドキュメント、PDF、Excelテーブルを含む構造化されたフォルダでのローカル検索を整理します。重いファイルをエージェント全体に送信してコンテキストウィンドウを詰まらせる代わりに、スキルはツリーインデックスdata_structure.mdを読み取り、grepやpdftotextなどのユーティリティを使用して、最大5回の反復で正確な抽出物を見つけます。

プロジェクトへのインストール方法

スキルを動作環境に追加する最も 빠른方法は、パッケージマネージャーnpx skillsを使用することです。このユーティリティはディレクトリで実行されているAIアシスタントを自動的に検出し、ファイルを正しいフォルダに配置します。

すべてのモジュールを一度にインストール：

npx skills add ConardLi/garden-skills

特定のスキルをグローバル設定にインストール：

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Claude Codeを使用している場合、組み込みマーケットプレイスから直接プラグインを接続できます：

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

CI/CDでの固定バージョンや、リリースで厳格な依存関係要件があるプロジェクトの場合、リポジトリはSHA-256チェックサム付きの署名付き.zipアーカイブを提供しています。単にアーカイブを.claude/skills/または.agents/skills/に展開してください。

エージェントとの互換性

フォーマットはオープンであるため、スキルはAnthropicエコシステムだけでなく動作します。このプロジェクトは以下のツールでテストされています：

• Claude CodeおよびClaude.ai Webインターフェース（Capabilitiesセクション経由）
• Cursor（フォルダ.agents/skills/<name>/）
• Codex CLI
• Gemini CLI
• OpenCode

このプロジェクトが役立つ人

ConardLiのコレクションは、ターミナルまたはコードエディタで毎日AIエージェントを使用している人の時間を節約します。手動でコンテキストを設定したり、子供じみたレイアウトエラーを修正したりする代わりに、チェックポイントと高品質なデザイントークンを備えた予測可能なパイプラインが得られます。

始める 가장簡単な方法は、web-design-engineerまたはbeautiful-articleを使用することです。これらは最初のリクエストで目に見える結果を返し、仕様書SKILL.md用の独自の指示を適切に構成する方法を説明します。