生成ボタンも提供している「Mockdown」
デザイナー兼エンジニアとしてAI領域で活動するMike Bespalov氏は2026年2月16日、AIエージェントへの指示用にアスキーワイヤーフレームエディタ「Mockdown」をWebアプリとして公開した。Mockdownは、キャンバス上に視覚的にコンポーネントを配置し、プレーンテキストのワイヤーフレームを生成するツール。迅速にレイアウト案を作成し、AIエージェントに機能するコードを生成させるために設計されている。なお、このツールは後述の「Wiretext」にインスパイアされて開発されたもの。
AI agents read markdown better than they read your mind
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
— Mike Bespalov (@bbssppllvv) February 16, 2026
コーディングエージェントにレイアウトを言葉で説明する代わりに、ワイヤーフレームを1つ貼り付けるだけで1ページ分の指示の代わりとなる。そこでMockdownでは、AIツールが理解しやすいMarkdown形式のように、テキストのみのワイヤーフレームを出力するようになっている。そして、エージェントにワイヤーフレームの構造を把握させて、そのUIに関するコードを生成することを目的としている。また、テキストベースの低忠実度なワイヤーフレームであれば、その構造に集中させられるという。つまり、デザインを磨き上げる色などの要素がないためフィードバックがより迅速になり、短時間で複数のレイアウトを検討できることにつながるとのこと。
Mockdownの基本的な使い方は、画面左側のパネルから各コンポーネントをクリックし、キャンバスにドラッグしてサイズを調整しながら配置する。そしてワイヤーフレームができたら、画面左下にある「Copy Markdown」を押すことで、Markdown形式のコードブロックで囲まれた状態でテキスト形式のワイヤーフレームがコピーできる。
さらに画面左側パネルの一番上にはGenerateボタンがある。キャンバス上の特定の範囲を選択してこの機能を呼び出すと、選択領域のサイズが示されたダイアログが表示される。ここでAIを使って、ワイヤーフレームの生成指示を出すことが可能になっている。なお、ダイアログ内のメニューには「Fast」と「Quality」の2つのモードを切り替えるタブがある。また入力欄の直下には「Fix spacing inside boxes」「Center text and align labels」「Add title」「Add labels」「Wrap in a box」「Redesign from scratch」といったアクションも並んでいる。
以下の図は、ニュースページを簡単な言葉で生成してみたもの。Fastだと即座に描かれた。
画面左側のパネルには、20以上のコンポーネントが「BASICS」「UI ELEMENTS」「DRAW」のカテゴリに分類されて用意されている。「UI ELEMENTS」にはボタンや入力欄のほか、フォームコントロール、ナビゲーション要素、カードやダイアログなどのコンテナなどが含まれている。また「BASICS」や「DRAW」には、テキスト、ボックス、線、矢印、フリーハンドの鉛筆、消しゴムなどが用意されている。
なお、一度配置したコンポーネントのサイズを手動で変更するには、現在のところSelectを選んでから、コンポーネントに表示されるハンドルをドラッグする必要があるようだ。
以下の図は、ローカルからGPT-5.2を使ってChrome DevTools MCP経由で[1]、Mockdown上で「ニュース記事を一覧でき、右側で詳細を確認し、状態更新できるページ」を簡単なプロンプトで描いてみたもの。
[1] 最初、Generateボタンに気づいていませんでした…。
その出力は以下のようになった。
┌──────────────────────────────────────────────────────────────────────────────┐
│ 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ワイヤーフレームデザインツール「Wiretext」をWebアプリとして公開した。Wiretextはコンポーネントの配置やサイズ変更しやすいGUIのインターフェースを備えており、マウス操作でワイヤーフレームをデザインし、テキスト形式で出力できるツール。Howells氏はWiretextを「すべてがテキストであるFigma」と表現しており、同氏によれば、レイアウトの意図を伝える際には画像よりもテキスト（Markdown）のほうが速く、かつ正確に伝わるという。
I made @figma, but everything is text. Create a quick wireframe, export as markdown, and chuck it into @claudeai. Try it out at https://t.co/G8hdmuQQbJ pic.twitter.com/SopxvKyI5q
— Daniel Howells (@howells) February 13, 2026
Wiretextの画面は、画面左側にツールおよびレイヤーメニュー、中央にグリッドキャンバス、右側にプロパティなどを確認するインスペクター用のパネルが配置されている。また画面右上にはキャンバスの操作用として、Clear All、Export、Shareの各ボタンがある。Exportボタンを押すと、Markdownのコードブロックで囲まれた、テキストのワイヤーフレームなどがコピーできる。
画面左側のツールバーでは、Unicodeの記号を用いて表現されている各コンポーネントが「Draw」「Input」「Layout」「Display」の4つのカテゴリに整理されている。
Draw：基本図形がまとまっており、ボックス、テキスト、線、矢印が配置されている。
Input：フォーム要素として、ボタン、入力欄、ドロップダウン選択、チェックボックス、ラジオボタン、トグルが並ぶ。
Layout：ページ構造を成すテーブル、モーダル、ブラウザ、カードが格納されている。
Display：ナビゲーションバー、タブ、プログレスバー、アイコン、画像、区切り線、アラート、パンくずリスト、アバター、リスト、ステッパー、評価、スケルトンが含まれている。
またWiretextはFigmaのようなレイヤー機能にも対応していて、画面左上部の「Layers」の項目にある「+ Layer」ボタンからレイヤーを追加することで、コンポーネントをレイヤー単位で管理できる。
さらにWiretextは、ローカルMCPサーバーも提供している。このMCPサーバーを使うことで、AIツールのプロンプト入力欄で、ワイヤーフレームを作成できるようになる。編集可能なWiretextのURLを返すcreate_wireframe、アスキーアートを直接レンダリングするrender_wireframe機能を備えている。詳しい使い方は公式ドキュメントを参照のこと。ただ、Howells氏は、MCP経由だと扱いにくく面倒なので、わざわざ使うものではないとも述べている。
以下は、先に紹介したMockdownの出力と同様の要件で、GPT-5.2がWiretextで描いてみたもの（ただし、Wiretextはチェックボックスの最小幅制約に引っかかり、完全に同じ要件では進まなかった）。
その出力は以下のようになった。
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ = 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 > │
│ │
└──────────────────────────────────────────────────────────────────────────────┘