📐 AIに図を描かせると、なぜかいつもボックス文字だらけの読みにくい出力になる問題、これで解決できそうです。
タイトル: nicobailon/visual-explainer
URL:
🧩 概要
visual-explainerは、ターミナル出力をアスキーアートではなく、ちゃんとしたHTMLとしてブラウザに描画するエージェントスキルです。テーマ・フォント選択にも対応した、実用的な見た目に仕上げてくれます。
⚙️ 解決する課題
AIに図解や比較表を頼むと、複雑になった途端に崩れて読めなくなるボックス描画のテキスト出力になりがちでした。これを本物のHTMLに置き換えることで解消します。
🛠 方法論と提案手法
図はMermaid、アーキテクチャ概観はCSS Grid、データはHTMLテーブル、ダッシュボードはChart.jsと、内容に応じて最適な技術に自動で振り分けてレンダリングします。LLMを介さないQuickモードやスライド生成、PPTXエクスポートにも対応。
🎯 ユースケース
・「認証フローの図を描いて」のような自然言語での図生成
・/diff-reviewによるコード差分の視覚的レビュー
・/plan-reviewによる実装計画とコードベースの整合性チェック
📊 実績
GitHubで9.8kスター・648フォークを獲得。Claude Code、Cursor、Codex CLI、VS Code Copilotなど幅広いハーネスに対応しています。
#
AIエージェント# #
開発ツール#