skills.rest
lucaspedrozaem
lucaspedrozaemCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

1|Updated Apr 3, 2026
Search Tags:#typography#accessibility#responsive#ui-design#design-system#visual-design#design-tokens
One-click install
npx skills add https://github.com/lucaspedrozaem/saasskills --skill ui-design-lucaspedrozaem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/lucaspedrozaem/saasskills/tree/main/skills/ui-design
Command: npx skills add https://github.com/lucaspedrozaem/saasskills --skill ui-design-lucaspedrozaem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams translate wireframes, brand constraints, and product requirements into polished, consistent, and accessible visual designs so interfaces are production-ready and developer-friendly.

Core Features & Use Cases

  • Visual hierarchy & layout: Establish clear hierarchy, spacing systems, and responsive breakpoints for pages and components.
  • Typography & tokens: Provide type scales, line heights, and token examples for easy implementation.
  • Color systems & dark mode: Define brand, neutral, semantic, and surface color tokens with accessibility guidance for light and dark themes.
  • Component specs & states: Deliver sizes, states (default/hover/active/disabled/error/loading), and implementation notes for buttons, inputs, cards, tables, and empty/loading/error patterns.
  • Accessibility & responsive behavior: WCAG contrast targets, focus management, touch targets, and adaptive layouts for mobile, tablet, and desktop.
  • Use Case: Turn a product brief for a dashboard or billing settings page into token-level specs, component definitions, and responsive behavior rules.

Quick Start

Ask the agent to design a responsive, accessible dashboard page and produce token-level color, typography, spacing, component specs, and implementation notes.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I translate wireframes into accessible UI design specifications for a SaaS dashboard?▼

To translate wireframes into accessible UI design specifications, you define visual hierarchy, spacing systems, and responsive breakpoints, then output token-level colors, typography, and component states for developers to implement.

What are design tokens and how do they apply to SaaS visual design?▼

Design tokens in SaaS visual design are centralized variables for colors, typography scales, and spacing that ensure consistent component specs and accessible theming across light and dark mode interfaces.

How do I design responsive layouts that meet WCAG accessibility goals?▼

Designing responsive layouts to meet WCAG accessibility goals involves setting contrast targets, focus management, and touch target sizes across mobile, tablet, and desktop breakpoints for adaptive component behavior.

Can I generate component states and specs for SaaS billing flows and onboarding pages?▼

Yes, you can generate component states and specs for SaaS billing flows and onboarding pages by defining default, hover, active, disabled, error, and loading states with implementation notes for inputs, cards, and tables.

What is the best way to structure a dark mode color system for SaaS interfaces?▼

The best way to structure a dark mode color system for SaaS interfaces is to define brand, neutral, semantic, and surface color tokens with accessibility guidance for light and dark themes.

Related Skills

Explore More Design & Creative Skills→
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic
AkaraChenAkaraChen
270

normalize

Normalize UI features to align with design system standards.

Community
Intermediate
IsKenKenYaIsKenKenYa

design-system-starter

Create a design system foundation with tokens, atomic components, and WCAG 2.1 AA documentation.

Community
Intermediate
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate