ASCIIwire — frogworks404

これは何か

ASCIIwireは、テキストでUIのワイヤーフレーム（画面設計）を書けるツールです。

マークダウン風の記法で「ここにボタン」「ここにリスト」と書くと、ASCIIアートのワイヤーフレームが出力されます。FigmaみたいなGUIツールを開かなくても、エディタだけで画面設計ができます。

AIと一緒にUIを設計している時に、課題がありました。FigmaのスクリーンショットをAIに見せるとトークンを大量に消費するし、AIからの修正提案も「左のボタンを少し下に」みたいな文章での説明になってしまう。お互いに何を指しているのかが伝わりにくいんです。

テキストベースのワイヤーフレームなら、AIが直接編集できるし、少ないトークンで画面構成を伝えられる。AIと人間が同じフォーマットを共有してUIを設計できるツールが欲しくて作りました。

HTMLではなくマークダウン風の記法なので、人間が手で書いても読みやすいです。AI（LLM）にとってもマークダウンは最も出力しやすいフォーマットで、生成の安定性が高いです。

厳格なインデントルールがないので、AIが出力しても崩れにくいです。人間が適当に書いても動きます。

npmでインストールしてコマンドラインから使えます。パイプで入出力もできるので、他のツールとの組み合わせも簡単です。

CLIはnpmに公開済みで、日常的に使っています。今はVSCode拡張を開発中で、エディタ内でワイヤーフレームのプレビューが見られるようにする予定です。将来的にはMCPサーバー化して、AIアシスタントから直接呼べるようにしたいです。