skills.rest
eykd
eykdCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-language

Describe UI screens using a structured vocabulary for design documentation.

Updated Feb 8, 2026
Search Tags:#ui design#design language#vocabulary-driven#screen description#interface vocabulary
One-click install
npx skills add https://github.com/eykd/vance-ts --skill ui-design-language
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-language
Source: https://github.com/eykd/vance-ts/tree/main/.claude/skills/ui-design-language
Command: npx skills add https://github.com/eykd/vance-ts --skill ui-design-language

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the process of describing and designing UI screens by providing a vocabulary-driven design language that abstracts away pixel values and raw design decisions.

Core Features & Use Cases

  • Structured Vocabulary: Use a predefined set of terms to describe UI elements and their properties.
  • Platform-Agnostic: Design descriptions are not tied to specific platforms or tools.
  • Use Case: When you need to communicate UI layouts or review designs, this Skill helps you create clear, consistent descriptions.

Quick Start

Describe the main screen of your app using the ui-design-language skill. For example: "Screen: Dashboard, navbar: chrome, horizontal stack, pad medium, logo, primary solid button size small 'Sign Up', main: vertical stack, gap large, pad extra-large, heading extra-large bold, horizontal wrap, gap medium, chrome outline card, pad large, stat: 'Users' / '1,204', chrome outline card, pad large, stat: 'Revenue' / '$48k', dock: chrome, size medium, icon 'home' (active: primary), icon 'profile'."

Frequently Asked Questions about ui-design-language

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

FAQPage Schema
How do I describe UI design screens without using pixel values?▼

Use a vocabulary-driven design language to describe UI design screens, abstracting away raw pixel values. It provides a structured vocabulary for UI elements and properties, enabling clear, platform-agnostic design descriptions for documentation and reviews.

What is a structured vocabulary for interface design documentation?▼

A structured vocabulary for interface design documentation provides predefined terms to describe UI elements. It simplifies communicating layouts by replacing raw design decisions with consistent, platform-agnostic terminology for collaborative design reviews.

How do I write codeless UI design descriptions for collaborative reviews?▼

Write codeless UI design descriptions using a structured vocabulary to define screen elements like navbars, stacks, cards, and buttons. This platform-agnostic approach ensures clear communication of layouts during collaborative design reviews.

Do I need to understand design principles to use a vocabulary-driven UI language?▼

Yes, you need an understanding of design principles and UI components to use a vocabulary-driven UI language effectively. This knowledge ensures you accurately map structural terms like stacks, padding, and chrome to your interface layouts.

Can I use a structured UI vocabulary across different platforms and tools?▼

Yes, a structured UI vocabulary is platform-agnostic, meaning design descriptions are not tied to specific platforms or tools. You can consistently apply the vocabulary to describe interface elements across various environments.

How do I structure a dashboard screen description using a UI design language?▼

Structure a dashboard screen description by defining regions like navbar, main, and dock using terms like horizontal stack, pad medium, and chrome outline card. This vocabulary-driven approach abstracts pixel values into clear layout properties.

Related Skills

Explore More Design & Creative Skills→
neuron-oneneuron-one
25

components

Standardize UI component names for design-to-development handoffs.

Community
Basic
MatheusrlrMatheusrlr
1

frontend-blueprint

Guide frontend discovery to collect design tokens and generate UI code.

Community
Advanced
iliasjennaneiliasjennane

napkin

Capture and interpret visual whiteboard data from browser-based napkin sessions.

Community
Advanced
DevXojeDevXoje

frontend-ui-ux

Translate designer intent into front-end UI/UX components without mockups.

Community
Basic