Wireframing

What it does

This skill enables AI agents to generate text-based or ASCII wireframes for user interfaces, allowing for rapid prototyping of layout structures without needing graphical design software. It helps visualize page elements, navigation flows, and component placement directly within a chat interface.

When to use it

• Quickly sketching out the structure of a new dashboard or landing page during early brainstorming sessions.
• Validating information architecture and user flow before committing to high-fidelity designs in tools like Figma.
• Creating low-cost, shareable mockups for stakeholders who need to understand spatial relationships without visual polish.
• Iterating on UI layouts rapidly by generating multiple variations of a screen structure in seconds.

Key capabilities

• Generates ASCII art representations of web pages and mobile screens.
• Maps out navigation menus, headers, footers, and content blocks.
• Visualizes the relative positioning of buttons, forms, and text areas.
• Supports rapid iteration by adjusting layout descriptions to produce new wireframe versions.

Example prompts

• "Create a wireframe for a SaaS pricing page with three tiers, a comparison table, and a call-to-action button at the bottom."
• "Sketch an ASCII layout for a mobile banking app showing the home screen with balance, recent transactions, and quick transfer buttons."
• "Generate a wireframe for a blog post template that includes a hero image placeholder, author bio sidebar, and comment section."

Tips & gotchas

• This skill is best suited for structural planning rather than visual design; it lacks color, typography, and precise pixel-perfect spacing.
• For complex layouts with many overlapping elements, the ASCII output may become cluttered, so keep initial requests focused on core components.