Also provides a generate button“Mockdown”

On February 16, 2026, Mike Bespalov, a designer and engineer working in the AI ​​field, created an ASCII wireframe editor for instructions to an AI agent.“Mockdown”Mockdown is a tool that visually arranges components on a canvas and quickly generates plain text wireframes. It is designed to create a layout proposal and have the AI ​​agent function generate the code to do it.“Wire Text”Developed and inspired by.

Instead of explaining your layout in words to insert agents, you can simply paste a single wireframe instead of a page of instructions. Therefore, with Mockdown, AI tools output text-only wireframes in an easy-to-understand Markdown format. The purpose is to understand the structure of a system and generate code related to its UI. Additionally, text-based, low-fidelity wireframes allow you to focus on the structure.

The basic way to use Mockdown is to click on each component from the screen judgment panel and place it while adjusting the size according to the canvas.“Copy Markdown”By proceeding, you can copy a text-format wireframe surrounded by Markdown-format code blocks.

Additionally, there is a generate button at the top of the panel opposite the screen. When you select a specific area on the canvas and call this function, a dialog will appear showing the size of the selected area. Using AI, it is now possible to issue instructions to generate wireframes.“fast”and“quality”There is a tab that holds two modes. Also, directly below the input field is“Fix the spacing within the box”““⁠Center text and align labels”“⁠Add title”““⁠Add label”“⁠Please wrap it in a box.”“⁠Redesigned from scratch”There are also actions like this.

The figure below shows a news page generated using simple words.

The screen panel has over 20 components.“basic”“⁠UI elements”“⁠Draw”It has been prepared and classified into categories.“⁠UI elements”contains buttons and input fields, as well as form controls, navigation elements, and containers such as cards and dialogs.“basic”or“draw”Includes text, boxes, lines, arrows, freehand pencils, erasers, and more.

Note that to manually change the size of a configured component, you will need to select the latest one and then use the handles displayed on the component again.

The figure below shows the local to GPT-5.2 via Chrome DevTools MCP using[1]on the mockdown“A page where you can list news articles, check details by rights, and update status.”I drew this using a simple prompt.

The output looked like this:

┌──────────────────────────────────────────────────────────────────────────────┐
│ 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 >                             │                        │
│ └─────────────────────────────────────────────┴────────────────────────┴─────┐
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Layer function and MCP server can be used“Wire Text”

Designer and engineer Daniel Howells introduced the Unicode wireframe design tool on February 13th.“Wire Text”Wiretext is a tool that has a GUI interface that makes it easy to configure and resize components, and allows you to design wireframes using the mouse and output them in text format. Howells uses Wiretext“Figma where everything is text”According to him, text is more important than images when conveying the intent of a layout.(markdown)is said to be faster and more accurate.

In addition to the screen, the Wiretext screen consists of a tool and layer menu, a grid in the center, and an inspector panel on the right to check properties. There are also buttons at the top of the screen for canvas operations: Clear All, Export, and Share. When you press the export button, you can copy the text wireframe etc. surrounded by Markdown code blocks.

On the screen toolbar, each component expressed using Unicode symbols is“draw”“⁠Input”“⁠Layout”“⁠Display”are organized into four categories.

• draw: Basic shapes are grouped together, and boxes, text, lines, and arrows are arranged.
• input: Form elements include buttons, input fields, dropdown selections, checkboxes, radio buttons, and toggles.
• layout: Tables, modals, browsers, and cards that make up the page structure are organized into folders.
• screen: Contains navigation bar, tabs, progress bar, icons, images, separators, alerts, breadcrumbs, avatars, lists, steppers, ratings, skeletons.

Wiretext also supports layer functions like Figma, and the upper left corner of the screen“layer”It is in the section of“+layer”By adding layers from the button, you can manage components by layer.

Additionally, Wiretext also offers a local MCP server. By using this MCP server, you can edit the prompt input field of the AI ​​tool to create wireframes.create_wireframedo ASCII art directlyrender_wireframeIt has functions. Detailed usage informationofficial documentationHowever, Mr. Howells said that since it is troublesome to handle MCP, there is no need to use it.switching.

The following is a requirement similar to the Mockdown output introduced earlier, and GPT-5.2 drew with Wiretext(By the way, Wiretext has a limit on the minimum width of the checkbox, so I couldn’t proceed with the exact same requirements⁠)⁠.

The output looked like this:

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ =  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 >                                                              │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘