skills.rest
tcfialho
tcfialhoCOMMUNITY
Explore all skills by this author →
GitHub

nexus_proto

Generates SVG wireframes and records layout decisions from spec.json files.

Updated Mar 10, 2026
Search Tags:#ui#layout#visual design#prototyping#wireframing#user interface
One-click install
npx skills add https://github.com/tcfialho/Herald.Ai.Skills --skill nexus-proto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nexus_proto
Source: https://github.com/tcfialho/Herald.Ai.Skills/tree/main/skills/nexus/nexus_proto
Command: npx skills add https://github.com/tcfialho/Herald.Ai.Skills --skill nexus-proto

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of visualizing and refining user interface layouts through systematic wireframe exploration and decision recording.

Core Features & Use Cases

  • Wireframe Variants Creation: Generates SVG or canvas-based wireframes to compare different UI layout options based on user flows.
  • Layout Decision Recording: Stores finalized layout decisions and component specifications for each screen.
  • Use Case: For a project designing a new dashboard, generate multiple wireframe options for layout placement, select the best fit, and document component details for development.

Quick Start

Use the nexus_proto skill to create initial visual decisions from your current spec.json, then add screens and components based on wireframe explorations.

Frequently Asked Questions about nexus_proto

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

FAQPage Schema
How do I generate UI wireframes to compare different layout options?▼

To generate UI wireframes for layout comparison, you can create SVG or canvas-based wireframe variants based on user flows. The output supports iterative A/B testing and produces documented component details for development.

Can I use a spec.json file to document UI layout decisions?▼

Yes, you can use a spec.json file to document UI layout decisions. The skill reads your spec.json to produce a visual.json file and generates SVG wireframes, storing finalized layout decisions and component specifications for each screen.

What's the best way to record user decisions during visual design exploration?▼

Record user decisions during visual design exploration by storing finalized layout decisions and component specifications for each screen. This produces a visual.json file and SVG wireframes that document the final layout validation.

Does this UI prototyping approach support iterative A/B testing for wireframes?▼

Yes, this UI prototyping approach supports iterative A/B testing for wireframes. It facilitates generating multiple wireframe options to compare different UI layout placements, allowing you to select the best fit and document the component details for development.

What format are the wireframing outputs saved in?▼

Wireframing outputs are saved in visual.json files and as SVG wireframes. These outputs store the finalized layout decisions and component specifications, providing visual documentation for software development teams constructing or refining interfaces.

Related Skills

Explore More Software Engineering Skills→
BellaBeBellaBe
37

product-design-wireframes

Convert user flows into wireframe specifications using atomic design hierarchy.

Community
Advanced
TasiTechTasiTech
9

diagram-generator-1.1.1

Generate editable Draw.io diagrams from structured specifications and natural-language requirements.

Community
Advanced
kollaboraikollaborai
1

architecture-mapping

Reverse-engineer undocumented Python, JavaScript, and Java systems into architecture documentation.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate