wtf.design-task

Generate a Design Reference from Gherkin scenarios and update the Task issue.

7|2|Updated Apr 8, 2026
One-click install
npx skills add https://github.com/xiduzo/wtf --skill wtf-design-task
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wtf.design-task
Source: https://github.com/xiduzo/wtf/tree/main/skills/wtf.design-task
Command: npx skills add https://github.com/xiduzo/wtf --skill wtf-design-task

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often spend time gathering context and documenting UI coverage for a Task. This Skill helps automatically derive the required Design Reference from Gherkin scenarios and the project's steering inputs, then writes the structured design notes back into the issue.

Core Features & Use Cases

  • Identify UI states from Gherkin scenarios and link them to design artifacts.
  • Explore the design system, tokens, and patterns to ensure consistent design coverage.
  • Scaffold a component spec when no Figma frames exist, or draft a Design Reference that points to Figma frames when available.
  • Update the Task issue with a complete Design Reference while preserving all existing sections.

Quick Start

Identify the Task to design, load its Gherkin scenarios, map UI states to a Design Reference, and write it back to the Task issue.

Frequently Asked Questions about wtf.design-task

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

FAQPage Schema
How do I generate UI design references from Gherkin scenarios?

You can generate UI design references from Gherkin scenarios by using a task automation tool to extract UI states, map them to design system components, and write structured design notes back into the issue.

What is the best way to document UI coverage for a Figma design task?

Documenting UI coverage for a Figma design task is best handled by deriving a structured Design Reference from acceptance criteria, exploring design tokens, and linking existing Figma frames or scaffolding new component specs.

Can I scaffold a component spec automatically when no Figma frames exist?

Yes, you can scaffold a component spec automatically when no Figma frames exist by deriving the required UI states and structural design notes directly from the task's Gherkin scenarios and acceptance criteria.

How do I map UI states to design system tokens for a task?

Mapping UI states to design system tokens requires exploring the project's steering docs and component patterns, then linking extracted scenario states to existing tokens to ensure consistent design coverage across features.

Does generating a design reference preserve existing sections in a task issue?

Generating a design reference preserves existing sections in a task issue by appending the newly extracted UI states and component mappings while keeping the original acceptance criteria and scenario descriptions intact.