skills.rest
josipjelic
josipjelicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design

Generate implementation-ready design specifications grounded in user personas and design-system tokens.

94|49|Updated Mar 25, 2026
Search Tags:#design#accessibility#specifications#wireframes#ux#design-system
One-click install
npx skills add https://github.com/josipjelic/orchestrated-project-template --skill design-josipjelic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/josipjelic/orchestrated-project-template/tree/main/.claude/skills/design
Command: npx skills add https://github.com/josipjelic/orchestrated-project-template --skill design-josipjelic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps design teams produce thorough, implementation-ready design specifications that ground decisions in user personas, align with the existing design system, and document accessibility considerations before engineering begins.

Core Features & Use Cases

  • Ground in user personas from PRD.md before decisions to ensure design choices are user-centered.
  • Start from the user goal and map to flows, interactions, and components; review and reuse existing tokens from DESIGN_SYSTEM.md.
  • Asset discovery and documentation: follow the Assets Discovery Protocol to inventory and reference files inside the assets directory when present; record outcomes in the handoff.
  • Document additions or changes in DESIGN_SYSTEM.md to keep design tokens, components, and patterns up to date.
  • Accessibility review: verify keyboard navigability, color contrast, and ARIA patterns for complex widgets.

Quick Start

Provide a design brief and persona to generate a complete design specification.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate implementation-ready design specifications before development?▼

To generate implementation-ready design specifications, you provide a design brief and user persona. The skill maps user goals to flows, interactions, and components while reusing existing design system tokens to ensure alignment.

How do I ensure my wireframes and UX flows align with an existing design system?▼

Wireframes and UX flows align with your design system by reviewing and reusing existing tokens from DESIGN_SYSTEM.md. Any additions or changes are documented directly within the file to keep components and patterns updated.

What is the best way to include accessibility checks in UX design specifications?▼

Accessibility checks are included in UX specifications by verifying keyboard navigability, color contrast, and ARIA patterns for complex widgets. This ensures documented design decisions meet WCAG compliance requirements.

Can I ground design decisions in user personas from an existing PRD?▼

Yes, design decisions can be grounded in user personas from PRD.md. Grounding choices in these personas ensures the generated user flows and component specifications remain strictly user-centered before engineering begins.

How do I document and inventory assets for design handoff?▼

You document assets for design handoff by following the Assets Discovery Protocol to inventory and reference files inside the assets directory. The outcomes are recorded directly within the final handoff documentation.

Do I need a user persona to create precise UX design specs?▼

Yes, a user persona is required to create precise UX design specs. Providing a persona alongside a design brief ensures the generated user flows and interactions are properly grounded in user needs.

Related Skills

Explore More Design & Creative Skills→
hdtinh57hdtinh57
1

design

Design user flows and interaction specs grounded in PRD personas and design system.

Community
Advanced
glwrglwr
1

frontend

Build UI components from feature specs across React, Vue, or Svelte projects.

Community
Advanced
ilove323ilove323

design-system

Audit UI component naming, token usage, and documentation coverage.

Community
Intermediate
oakossoakoss
14

ux-designer

Designs user experiences and interfaces with WCAG 2.2 AA compliance.

Official
Intermediate