ui-design

Guide UI design covering design systems, typography, color, layout, and Figma handoff.

2|Updated Jun 2, 2025

Search Tags:#typography #handoff #color #ui-design #visual-design #design-tokens

One-click install

npx skills add https://github.com/PetriLahdelma/digitaltableteur --skill ui-design-petrilahdelma

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/PetriLahdelma/digitaltableteur/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/PetriLahdelma/digitaltableteur --skill ui-design-petrilahdelma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill offers expert UI design guidance covering design systems, typography, color theory, layout, iconography, and design-to-dev handoff.

Core Features & Use Cases

Design Tokens & Color Systems: Establish tokens for a cohesive visual language.
Typography & Layout: Scales, rhythm, and spatial composition.
Iconography & Motion: Consistent icon grammar and motion guidelines.
Design-to-Dev Handoff: Figma-to-code handoff practices and documentation.

Quick Start

Describe a plan to create a cohesive visual system for a new product, including tokens and typography scales.