skills.rest
ousiass
ousiassCOMMUNITY
Explore all skills by this author →
GitHub

design-spec

Generate and update UI/UX design specifications with screens, components, tokens, and interactions.

Updated May 3, 2026
Search Tags:#documentation#mermaid#github#product design#ui-ux#design-spec#component specs
One-click install
npx skills add https://github.com/ousiass/dotfiles --skill design-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-spec
Source: https://github.com/ousiass/dotfiles/tree/main/.claude/skills/design-spec
Command: npx skills add https://github.com/ousiass/dotfiles --skill design-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams avoid vague UI direction by producing structured design specifications that align screens, components, tokens, and interactions from a shared understanding.

Core Features & Use Cases

  • Interactive spec drafting & updates: Create a full design spec from scratch or append/update an existing one by following the current project’s document structure.
  • Four-part documentation output: Generate screen design, component specs, design tokens, and interaction specs with consistent diagrams and revision history.
  • Workflow integration: Optionally drive GitHub Issue/branch/PR creation and ensure cross-document consistency checks before completion.

Quick Start

Ask the AI to generate a new design specification for your app and output it under the default docs/design/ paths.

Frequently Asked Questions about design-spec

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

FAQPage Schema
How do I generate a UI/UX design specification for a new product idea?▼

You can update existing design specifications by having the Skill discover, read, and update files in-place according to your repository structure. It ensures cross-document consistency and appends revision history during iterative redesigns.

Can I create a GitHub branch and PR directly from my design spec output?▼

Yes, you can drive GitHub Issue, branch, and PR creation directly from your design spec output. The Skill optionally integrates commit-based workflows to submit your structured screen, component, and interaction documents to your repository.

Does this design spec tool format diagrams using Mermaid and ASCII?▼

Yes, the design spec tool formats diagrams using Mermaid and ASCII guidance. It embeds these diagrams directly within your generated screen design, component specs, design tokens, and interaction documents for clear visualization.

What is the best way to document design tokens and component specs for a redesign?▼

The best way to document design tokens and component specs is generating a four-part documentation output that maintains cross-document consistency. The Skill appends revision history and updates existing files in-place according to your project structure.

Related Skills

Explore More Design & Creative Skills→
fluxforgeaifluxforgeai
3

genesis

Guide project inception to produce discovery notes, a PRD, and an architecture specification.

Community
Advanced
avvaleavvale

commit-pr

Commit changes, push to a feature branch, and create a GitHub Pull Request.

Official
Advanced
Yukine5377Yukine5377

ba-feature-analyzer-spec

Generate a User Story document with Mermaid Sequence Diagram, API spec, and Rule mapping from screen mockups and data models.

Community
Advanced
tiankong0101-bytetiankong0101-byte

ui-ux-pro-max

Create design systems, component specifications, and interactive prototypes for software products.

Community
Advanced