Generate structural ASCII wireframes from concept directions with iterative refinement.
npx skills add https://github.com/rodh/QuickFlow --skill wireframing-rodh
Please help me install this Agent Skill. Skill: wireframing Source: https://github.com/rodh/QuickFlow/tree/main/skills/wireframing Command: npx skills add https://github.com/rodh/QuickFlow --skill wireframing-rodh
This Skill transforms abstract design concepts into concrete, structural wireframes, bridging the gap between ideas and tangible visual representations.
Use the wireframing skill to create ASCII wireframes for the concept described in concept.md.
High-intent search queries and answers about installing and using this skill.
Structural wireframes are generated from a concept direction by translating abstract ideas into concrete ASCII format layouts using box-drawing characters. This bridges the gap between initial product concepts and tangible visual representations for UI design.
Iterative refinement of UI layouts is fully supported. You can facilitate multiple rounds of feedback and adjustment to perfect the wireframe layout, with specific conventions maintained for alignment, spacing, and interactive elements throughout the process.
ASCII wireframing is the generation of detailed structural layouts using box-drawing characters. You need it during early product design to quickly visualize UI structure and alignment without high-fidelity graphics, bridging concepts to visual layouts.
Versioning and archiving of wireframe outputs are managed directly by the workflow. It ensures that iterative refinements to your structural layouts are tracked and preserved, allowing you to retrieve previous versions of your UI designs.
The best way is to generate structural ASCII wireframes for each component, such as the notification banner, topic screen with mute toggles, and notification center. This ensures consistent alignment and spacing across the UI design.
KazmerMaximilianoGenerate lo-fi ASCII wireframes for UI layout validation.
jngong-collabGenerate high-fidelity UI design instructions for web and mini-program interfaces.
truchotDesign UX/UI experiences from user research through interactive prototypes.
jeffwweeeGenerate HTML wireframes, React/MUI mockups, and design specifications.
