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

Ready to run

npx skills add https://github.com/navapbc/digital-service-orchestra --skill design-wireframe

💬 Prompt for ChatGPT / Claude Chat▼

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.