生成ボタンも提供している「Mockdown」
デザイナー兼エンジニアとしてAI領域で活動するMike Bespalov氏は2026年2月16日、AIエージェントへの指示用にアスキーワイヤーフレームエディタ
AI agents read markdown better than they read your mind
— Mike Bespalov (@bbssppllvv) February 16, 2026
Built an ascii wireframe editor. Draw a page in 30 seconds, copy/paste into Claude Code and get a full working page back pic. twitter. com/ NHXkXa4idp
コーディングエージェントにレイアウトを言葉で説明する代わりに、ワイヤーフレームを1つ貼り付けるだけで1ページ分の指示の代わりとなる。そこでMockdownでは、AIツールが理解しやすいMarkdown形式のように、テキストのみのワイヤーフレームを出力するようになっている。そして、エージェントにワイヤーフレームの構造を把握させて、そのUIに関するコードを生成することを目的としている。また、テキストベースの低忠実度なワイヤーフレームであれば、その構造に集中させられるという。つまり、デザインを磨き上げる色などの要素がないためフィードバックがより迅速になり、短時間で複数のレイアウトを検討できることにつながるとのこと。
Mockdownの基本的な使い方は、画面左側のパネルから各コンポーネントをクリックし、キャンバスにドラッグしてサイズを調整しながら配置する。そしてワイヤーフレームができたら、画面左下にある
さらに画面左側パネルの一番上にはGenerateボタンがある。キャンバス上の特定の範囲を選択してこの機能を呼び出すと、選択領域のサイズが示されたダイアログが表示される。ここでAIを使って、ワイヤーフレームの生成指示を出すことが可能になっている。なお、ダイアログ内のメニューには
以下の図は、ニュースページを簡単な言葉で生成してみたもの。Fastだと即座に描かれた。
画面左側のパネルには、20以上のコンポーネントが
なお、一度配置したコンポーネントのサイズを手動で変更するには、現在のところSelectを選んでから、コンポーネントに表示されるハンドルをドラッグする必要があるようだ。
以下の図は、ローカルからGPT-5.
その出力は以下のようになった。
┌──────────────────────────────────────────────────────────────────────────────┐
│ Logo News Portal Settings Logout │
├──────────────────────────────────────────────────────────────────────────────┤
│ / Search... [▾ Last 7 days ] ☐ Only unread [ Search ] │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────┬────────────────────────┤
│ │ Articles │ Article Details │
│ ├─────────┬─────────┬───────────────────┬─────────┬─┴──────────────────────┐
│ │ Date │ Source │ Title │ Status │ Title │
│ ├─────────┼─────────┼───────────────────┼─────────┤ Meta │
│ │ │ │ │ │ Summary │
│ │ │ │ │ │ Tags │
│ │ │ │ │ │ │
│ │ │ │ │ │ [ Open ] [ Mark as ] │
│ │ │ │ │ │ [ read ] │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ ├─────────┴─────────┴───────────────────┴─────┬───┘ │
│ │ < 1 2 [3] 4 5 > │ │
│ └─────────────────────────────────────────────┴────────────────────────┴─────┐
│ │
└──────────────────────────────────────────────────────────────────────────────┘
レイヤー機能とMCPサーバーが使える「Wiretext」
デザイナー兼エンジニアであるDaniel Howells氏は2月13日、Unicodeワイヤーフレームデザインツール
I made @figma, but everything is text. Create a quick wireframe, export as markdown, and chuck it into @claudeai. Try it out at https://
— Daniel Howells (@howells) February 13, 2026t. pic.co/ G8hdmuQQbJ twitter. com/ SopxvKyI5q
Wiretextの画面は、画面左側にツールおよびレイヤーメニュー、中央にグリッドキャンバス、右側にプロパティなどを確認するインスペクター用のパネルが配置されている。また画面右上にはキャンバスの操作用として、Clear All、Export、Shareの各ボタンがある。Exportボタンを押すと、Markdownのコードブロックで囲まれた、テキストのワイヤーフレームなどがコピーできる。
画面左側のツールバーでは、Unicodeの記号を用いて表現されている各コンポーネントが
- Draw：基本図形がまとまっており、ボックス、テキスト、線、矢印が配置されている。
- Input：フォーム要素として、ボタン、入力欄、ドロップダウン選択、チェックボックス、ラジオボタン、トグルが並ぶ。
- Layout：ページ構造を成すテーブル、モーダル、ブラウザ、カードが格納されている。
- Display：ナビゲーションバー、タブ、プログレスバー、アイコン、画像、区切り線、アラート、パンくずリスト、アバター、リスト、ステッパー、評価、スケルトンが含まれている。
またWiretextはFigmaのようなレイヤー機能にも対応していて、画面左上部の
さらにWiretextは、ローカルMCPサーバーも提供している。このMCPサーバーを使うことで、AIツールのプロンプト入力欄で、ワイヤーフレームを作成できるようになる。編集可能なWiretextのURLを返すcreate_、アスキーアートを直接レンダリングするrender_機能を備えている。詳しい使い方は公式ドキュメントを参照のこと。ただ、Howells氏は、MCP経由だと扱いにくく面倒なので、わざわざ使うものではないとも述べている。
以下は、先に紹介したMockdownの出力と同様の要件で、GPT-5.
その出力は以下のようになった。
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ = Settings Logout │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────┐ ┌──────────────┐ ┌──────────────────┐┌────────┐ │
│ │ / Search... │ │ Last 7 da… ▾ │ │ [ ] Unread only ││ Search │ │
│ └────────────────────────┘ └──────────────┘ └──────────────────┘└────────┘ │
│ │
│ ┌───────────┬───────────┬───────────┬────────────┐ ┌──────────────────────┐ │
│ │ Date │ Source │ Title │ Status │ │ Article Details │ │
│ │───────────┼───────────┼───────────┼────────────│ ├─Title:───────────────┤ │
│ │ 2026-02-… │ RSS │ Example … │ Unread │ │ │ │
│ │ 2026-02-… │ Web │ Another … │ Read │ │ Meta: 2026-02-18 │ │
│ │ 2026-02-… │ API │ Somethin… │ Unread │ │ │ │
│ │ │ │ │ │ │ Source: RSS │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ Summary: │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ News│Portal │ │ - ... │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ Tags: #ai #news │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ ┌────────┐ │ │
│ │ │ │ │ │ │ │ Open │ │ │
│ │ │ │ │ │ │ └────────┘ │ │
│ │ │ │ │ │ │ ┌──────────────────┐ │ │
│ │ │ │ │ │ │ │ Mark as read │ │ │
│ │ │ │ │ │ │ └──────────────────┘ │ │
│ │ │ │ │ │ │ │ │
│ (Select─a─row─to─view─details)──────┴────────────┘ └──────────────────────┘ │
│ │
│ < 1 2 [3] 4 5 > │
│ │
└──────────────────────────────────────────────────────────────────────────────┘