skills.rest
pirras-torres
pirras-torresCOMMUNITY
Explore all skills by this author →
GitHub

ui-spec

Generates a UI specification document covering components, typography, colors, spacing, and design tokens.

Updated May 24, 2026
Search Tags:#typography#visual design#design tokens#design documentation#color system#component states#ui specification
One-click install
npx skills add https://github.com/pirras-torres/pirras-marketplace --skill ui-spec-pirras-torres
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-spec
Source: https://github.com/pirras-torres/pirras-marketplace/tree/main/plugins/pi-dev/skills/ui-spec
Command: npx skills add https://github.com/pirras-torres/pirras-marketplace --skill ui-spec-pirras-torres

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions like colors, fonts, spacing, and component states often live scattered across conversations or remain undocumented, causing inconsistent interfaces. This Skill turns those decisions into a single structured UI specification document at docs/03_design/ui_spec.md. ## Core Features & Use Cases - Guided Interview Process: Walks through design language, color system, typography, spacing, component inventory, and iconography with structured questions. - Design Token Documentation: Produces token tables for colors, type scale, and spacing so every value has a defined role and usage. - Component Specs with States: Documents each component's variants and states (default, hover, active, disabled, error) rather than just listing names. - Use Case: After finishing a UX spec for a mobile app, run this Skill to capture the visual system — primary color palette, Inter type scale, 8px spacing grid, and button/card/modal specs — in one referenceable document. ## Quick Start Ask the assistant to create a UI specification for your project using the ui-spec skill, then answer the guided questions about colors, fonts, and components.

Frequently Asked Questions about ui-spec

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

FAQPage Schema
How do I create a UI specification document for my project?▼

Run the ui-spec skill and answer its guided questions about design language, colors, typography, spacing, and components. It writes a complete specification to docs/03_design/ui_spec.md with token tables and per-component state definitions.

What should a UI specification include?▼

A UI specification should include a color system with hex values and roles, a typography scale, a spacing scale with a base unit, a layout grid, component variants with states (default, hover, active, disabled, error), and iconography guidelines.

What is the difference between a UX spec and a UI spec?▼

A UX spec covers user flows, task sequences, navigation logic, and interaction decisions. A UI spec covers only visual design: components, colors, typography, spacing, and design tokens. This skill explicitly excludes flows and business rules.

Does the UI spec skill work with design systems like Tailwind or Material Design?▼

Yes, the skill asks which base system you use, including Tailwind CSS, Material Design, Apple HIG, Shadcn/ui, or a fully custom approach, and records it in the design language section of the generated document.

What if I have not decided on exact colors or fonts yet?▼

The skill accepts undecided values and documents them as TBD with an intent description, such as a warm green primary color with the exact hex to be determined later.

Related Skills

Explore More Design & Creative Skills→
tddworkstddworks
38

ios-ux-prototype

Generate interactive HTML prototypes with iPhone mockups and flow arrows for iOS app UX flows.

Official
Intermediate
wuji-technologywuji-technology

design-handoff

Extract design tokens, component specs, and interaction annotations from Figma prototypes.

Official
Advanced
oborchersoborchers
28

visual-interest-expression

Calibrate visual expression in digital design to align with brand personality.

Community
Intermediate
pyronaurpyronaur

hig-project-context

Generate an Apple design context document from project files and assets.

Community
Intermediate