epic-wireframes

Name: epic-wireframes
Availability: InStock
Author: Telum

Generate ASCII wireframes for epic screens and states from design systems.

2|Updated Dec 21, 2025

Search Tags:#ui #design system #user journey #wireframes #ascii art #epic

Ready to run

npx skills add https://github.com/telum-ai/speck --skill epic-wireframes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: epic-wireframes
Source: https://github.com/telum-ai/speck/tree/main/.cursor/skills/epic-wireframes
Command: npx skills add https://github.com/telum-ai/speck --skill epic-wireframes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of wireframes for all screens and states within a given epic, ensuring visual consistency and comprehensive coverage of user interface elements.

Core Features & Use Cases

Automated Wireframe Generation: Creates ASCII wireframes based on project design systems and epic specifications.
Screen Discovery: Identifies necessary screens and states (e.g., empty, error) from user journeys.
Context Loading: Integrates design tokens, UX principles, user journeys, and epic specs.
Use Case: When starting a new feature within an epic, use this Skill to quickly generate visual layouts for all user interactions and states, facilitating early feedback and design alignment.

Quick Start

Use the epic-wireframes skill to create wireframes for the 'user-profile' epic in the 'customer-app' project.

Frequently Asked Questions about epic-wireframes

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

FAQPage Schema

How do I generate wireframes for all screens within an epic?▼

To generate wireframes for an epic, this Skill loads your project design systems, UX strategies, and user journeys to systematically discover necessary screens and states, then creates layout decisions and ASCII wireframes documenting interactions and responsive versions.

What is ASCII wireframe generation for user journeys?▼

ASCII wireframe generation for user journeys is the process of identifying necessary screens and states, such as empty or error states, from journey maps and rendering them as text-based layouts. This Skill automates that process using your design tokens and epic specifications.

Can I use my existing design system tokens to create epic wireframes?▼

Yes, you can use existing design system tokens to create epic wireframes. The Skill integrates your loaded design tokens, UX principles, and epic specs to ensure visual consistency and comprehensive coverage of user interface elements across all generated layouts.

What's the best way to visualize UI states for a new feature?▼

The best way to visualize UI states for a new feature is to automate wireframe generation from epic specifications. This approach systematically discovers required states like empty and error screens, rendering them as ASCII art to facilitate early feedback and design alignment.

Do I need user journey maps to generate screen wireframes?▼

Yes, user journey maps are needed to generate screen wireframes effectively. The Skill relies on loading user journeys alongside UX strategies and epic specs to systematically discover all necessary screens and states before making layout decisions.

Why generate ASCII wireframes instead of high-fidelity designs for epic screens?▼

Generating ASCII wireframes for epic screens provides a lightweight, template-based format for documenting interactions and responsive versions. This approach facilitates early feedback and design alignment before committing to high-fidelity visual production.