niwashi-03-wireframe

Convert narrative specifications into ASCII wireframes with four mandatory zones.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/datorresb/niwashi-studio --skill niwashi-03-wireframe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: niwashi-03-wireframe
Source: https://github.com/datorresb/niwashi-studio/tree/main/skills/narrative/niwashi-03-wireframe
Command: npx skills add https://github.com/datorresb/niwashi-studio --skill niwashi-03-wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Generates ASCII wireframes from narrative specifications to plan sections before coding, reducing guesswork and drift.

Core Features & Use Cases

  • ASCII wireframe generation: from narrative-spec.md to per-section wireframes with the four zones.
  • 4-zone wireframe contract enforcement: ensures HEADER, INTERACTIVE, COPY, TRANSITION in each section.
  • Iterative review workflow: enables user feedback and revisions before finalizing wireframes.
  • Use Case: Plan a multi-section narrative by mapping sections to wireframe layouts and transitions.

Quick Start

Run /niwashi-03-wireframe to generate ASCII wireframes from narrative-spec.md and begin the iterative review workflow.

Frequently Asked Questions about niwashi-03-wireframe

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

FAQPage Schema
How do I generate ASCII wireframes from narrative specifications?

To generate ASCII wireframes from narrative specifications, run the tool against your narrative-spec.md file. It extracts the narrative structure and converts each section into a standardized ASCII wireframe layout suitable for planning and review.

What is the four-zone wireframe contract for UX design planning?

The four-zone wireframe contract enforces HEADER, INTERACTIVE, COPY, and TRANSITION zones in each generated wireframe section. This structure ensures consistent layout planning and reduces guesswork when mapping narrative specifications to actionable designs.

Can I iterate on ASCII wireframe drafts before finalizing the layout?

Yes, you can iterate on ASCII wireframe drafts through an interactive review workflow. The tool generates per-section drafts that you can review and revise based on feedback before finalizing the wireframes for your narrative-spec document.

Do I need any dependencies to convert narrative specs into box-drawing wireframes?

No external dependencies are required to convert narrative specs into box-drawing wireframes. The tool operates independently to parse narrative-spec.md files and outputs ASCII wireframes using a standardized box-drawing style.

What's the best way to plan multi-section narratives using ASCII wireframes?

The best way to plan multi-section narratives is mapping each narrative section to a wireframe layout with defined transitions. This approach analyzes the narrative structure and produces per-section drafts, preventing drift between the narrative and final design.

Why use ASCII wireframes for UX design instead of visual prototyping tools?

ASCII wireframes provide a fast, text-based method to plan sections before coding, reducing guesswork and drift. They enforce a standardized four-zone layout within the narrative-spec document, keeping design planning lightweight and iteration-friendly.