skills.rest
navapbc
navapbcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-wireframe

Coordinate design artifacts to enforce ID linkage and design token usage.

6|1|Updated Mar 16, 2026
Search Tags:#automation#design#ui#design-system#wireframe#artifact-triad
One-click install
npx skills add https://github.com/navapbc/digital-service-orchestra --skill design-wireframe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-wireframe
Source: https://github.com/navapbc/digital-service-orchestra/tree/main/plugins/dso/skills/design-wireframe
Command: npx skills add https://github.com/navapbc/digital-service-orchestra --skill design-wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinates and preserves the triad of design artifacts (Spatial Layout JSON, SVG wireframe, and Design Token Overlay) to enable consistent UI wireframe planning, validation, and handoff within Claude Code-driven workflows.

Core Features & Use Cases

  • Artifact triad coordination: Ties spatial layout, wireframe visualization, and tokens into a single design narrative for implementation.
  • Cross-artifact integrity: Enforces matching IDs and mapping across JSON, SVG, and token overlays to minimize drift.
  • Use Case: A design team designs a new workflow epics and wants to produce a verifiable wireframe package for development and QA.

Quick Start

Invoke the /dso:design-wireframe workflow to generate the wireframe artifacts for a target epic/story.

Frequently Asked Questions about design-wireframe

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

FAQPage Schema
How do I coordinate UI wireframes and design tokens for development handoff?▼

Coordinate UI wireframes by linking a Spatial Layout Tree JSON, a wireframe SVG, and a Design Token Overlay into a single verifiable package. This enforces matching IDs and design-token constraints to minimize drift during epic and story implementation.

What is artifact triad alignment in UI wireframe planning?▼

Artifact triad alignment ties spatial layout JSON, SVG wireframe visualization, and design token overlays into a cohesive design narrative. It enforces cross-artifact integrity through matching IDs and mapping to ensure consistent UI wireframe validation and handoff.

How do I generate a wireframe package for a new epic in Claude Code workflows?▼

Invoke the design-wireframe workflow to generate wireframe artifacts for a target epic or story. The workflow processes your spatial layout and tokens to produce a verifiable wireframe package for development and QA teams.

Do I need a Spatial Layout Tree JSON to use this wireframe workflow?▼

Yes, a Spatial Layout Tree JSON is required alongside a wireframe SVG and a Design Token Overlay. These three artifacts form the triad necessary to enforce ID linkage, accessibility annotations, and design system token usage.

Why does my wireframe SVG show ID mismatches with the design tokens?▼

ID mismatches occur when wireframe SVG elements lack proper cross-reference linkage to the Spatial Layout Tree JSON and Design Token Overlay. The workflow enforces matching IDs across all three artifacts to prevent drift and ensure mapping integrity.

Can I enforce design system token usage across multiple UI wireframes?▼

Yes, the workflow applies Design Token Overlay constraints across epics and stories where UI flows require triad alignment. It enforces design-token usage and accessibility annotations to maintain consistency across multiple wireframe artifacts.

Related Skills

Explore More Design & Creative Skills→
letta-ailetta-ai
134

circuit-fibsqrt

Guide construction of gate-level circuits for integer square root and Fibonacci sequences.

Official
Advanced
aj-geddesaj-geddes
472

UX Designer

Design user flows and ASCII wireframes with WCAG 2.1 AA accessibility specifications.

Community
Basic
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced
zm2231zm2231

handoff-manager

Generate design handoff specifications with component specs, design tokens, and accessibility notes.

Community
Advanced