skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

wiretext

Generate ASCII wireframes from terminal primitives and components via an MCP server.

2|Updated Apr 15, 2026
Search Tags:#layout#claude code#mcp#prototyping#ascii#wireframe#low fidelity
One-click install
npx skills add https://github.com/tommylower/cortex --skill wiretext-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wiretext
Source: https://github.com/tommylower/cortex/tree/main/design/tools/wiretext
Command: npx skills add https://github.com/tommylower/cortex --skill wiretext-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wiretext/mcp.

What problem does it solve? It lets you sketch page layouts and content hierarchy as ASCII wireframes before committing to code or Figma, so you can iterate on structure quickly from the terminal. ## Core Features & Use Cases - MCP Server Integration: Connects to Claude Code via the @wiretext/mcp server with create_wireframe and render_wireframe tools. - Primitives and Components: Compose layouts from box, text, line, and arrow primitives plus components like button, input, table, modal, navbar, tabs, and card. - Editable Browser URL: Each generated wireframe returns an editable URL for fine-tuning layout in the browser. - Use Case: Before building a new landing page, ask the agent to wireframe the hero, pricing, and footer sections, review the ASCII layout, adjust it in the browser, then use it as a reference for the code build. ## Quick Start Ask Claude Code to wireframe a page section using the wiretext MCP server and open the returned editable URL to refine the layout.

Frequently Asked Questions about wiretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an ASCII wireframe from the terminal?▼

Register the wiretext MCP server in Claude Code with claude mcp add wiretext -- npx -y @wiretext/mcp, then ask the agent to wireframe a page or section. The create_wireframe tool returns an editable URL and render_wireframe shows ASCII art inline.

What components are available for ASCII wireframing?▼

Wiretext provides primitives (box, text, line, arrow) and components including button, input, select, checkbox, table, modal, card, navbar, tabs, progress, alert, avatar, breadcrumb, stepper, rating, and skeleton.

Can I edit a wiretext wireframe in the browser?▼

Yes. The create_wireframe MCP tool generates an editable wiretext URL. Open it in a browser to fine-tune layout and components, then use the result as a reference for building in code.

When should I use ASCII wireframes instead of Figma?▼

Use ASCII wireframes for rapid low-fidelity iteration on content hierarchy and structure before committing to detailed design. They are not suited for pixel precision, visual styling, or stakeholder-ready mockups, where Figma fits better.

Related Skills

Explore More Design & Creative Skills→
BenAIOSBenAIOS

youtube-outline

Generate a structured video outline from a video brief.

Official
Intermediate
yonetim258852yonetim258852

image-to-code

Translate visual design images into modular HTML, CSS, and JavaScript code.

Community
Advanced
alexzhang1030alexzhang1030

i-polish

Review frontend interfaces for visual, copy, and interaction issues before release.

Community
Advanced
HarshodaiHarshodai

huashu-design

Generate high-fidelity visual designs and interactive prototypes using HTML and CSS.

Community
Advanced