cathrynlavery/diagram-design
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
Claude Code、Codex、Pi用の38種類の編集図タイプ。自己完結型のHTML + SVG。影なし。マーメイドの雑音なし。
概要
14種類。クロードコードスキル1つ。60秒でブランドを読む — スキルはウェブサイトを読み取り、すべての図に色+フォントを割り当てます。 フィグマもなし。ありきたりな丸みを帯びた箱もなし。30分の色選びセッションもなし。 私は littlemight.com に執筆し(同時に BestSelf.co も運営しています)。図が必要なときはいつも、アーキテクチャのスケッチやフローチャート、最も重要なもののピラミッドなど、クロードに頼んで、サイトの他の部分とは全く違う一般的な丸みを帯びた箱のものが返ってきました。Figmaと30分も戦うか、図を飛ばすかのどちらかでした。 そこで、クロードコードのスキルを作りました。14種類、編集品質、ウェブサイトを読むだけで60秒でブランドにマッチします。 最も高品質な動きは通常削除です。すべてのノードがその位置を勝ち取っています。アクセントカラーは読者が最初に注目すべき1〜2点に割り当てられています。ターゲット密度:4/10。 14枚の図はすべて、ミニマルライト、ミニマルダーク、フルエディトリアルの3つのバリエーションで出荷されます。
概要（AI 翻訳）
あなたのブランド内で、1つの独立したHTML+SVGファイルとして図を描くエージェントスキル。45種類の図。影なし。マーメイドの雑なものなし。
ウェブサイト ·ギャラリー ·チェンジログ
インストール ·何を作るか ·クイックスタート ·ブランドに合わせる ·インポート ·エクスポート ·貢献
NPXスキルの追加:キャスリンラベリー/図面設計
エージェントに率直に尋ねてください:
- 「私のアプリのアーキテクチャ図を作成してください:フロントエンド、バックエンド、データベース、Redisキャッシュ。」
- 「第2四半期プロジェクトのインパクトと努力の比較を示す四分円が必要です。」
- 「401でトークン更新付きのベアラーコールのシーケンスを教えてください。」
- *“オンボード図式デザインをhttps://yoursite.com”*に(パレットとフォントを引き出し、以降のすべての図がサイトに一致するように)
エージェントはタイプを選び、計画を述べ、ダブルクリックで開ける.htmlファイルを1つ書きます。
インストール
Cursor、Claude Code、Codex、Qoder、GitHub Copilot、Gemini CLI、Cline、Windsurf、Ampなど、エージェントスキルを読み込むあらゆるホストに対応しています。
Claude Codeでは、プラグインマーケットプレイスでアップデートやスラッシュコマンドが表示されます:
公式ビルドはこのリポジトリからのみ提供されます。
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Ask your agent in plain words:
- “Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
- “I need a quadrant showing Q2 projects by impact vs effort.”
- “Give me a sequence of a bearer call with token refresh on 401.”
- “Onboard diagram-design to https://yoursite.com” (pulls your palette and fonts so every diagram after this one matches your site)
The agent picks the type, states its plan, and writes one .html file you can open by double-clicking.
Install
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add cathrynlavery/diagram-design