skills.rest
ZiadNagar
ZiadNagarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Apply visual design systems to produce UI guidelines and design tokens.

Updated Mar 8, 2026
Search Tags:#ui-design#ux-design#polish#dark-mode#design-tokens#component-library#visual-system
One-click install
npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-designer-ziadnagar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/ui-designer
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-designer-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI teams struggle to maintain visual consistency and polish across platforms; this Skill provides a structured visual design system, patterns, and best practices to produce pixel-perfect interfaces quickly.

Core Features & Use Cases

  • Establishes a cohesive design token set, typography scale, color palette, and spacing grid for reliable UI implementation.
  • Provides methodology for design-system audits, component libraries, and cross-platform styling consistency.
  • Use Case: When auditing a design system, apply the Skill to generate tokens and validation rules for rapid polish across pages.

Quick Start

Provide a design brief and a sample UI; the Skill will apply the visual system to produce polished components and guidelines.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I maintain visual consistency across a component library?▼

Maintain visual consistency by applying a structured design system with design tokens, typography scales, color palettes, and spacing grids to generate polished UI guidelines and validate component styling across platforms.

How do I audit an existing design system for UI polish?▼

Audit a design system by validating its design tokens and visual rules against a structured methodology, generating corrected tokens and validation guidelines to achieve consistent, pixel-perfect interfaces rapidly.

What do I need to provide to generate pixel-perfect UI guidelines?▼

You need to provide a design brief and a sample UI. The system requires a defined design token set, typography scale, color palette, and spacing grid to output ready-to-use prompt packs and styling guidance.

Can I use this for both web and mobile interface design reviews?▼

Yes, you can use this for interface design reviews across web and mobile projects. It applies a cohesive visual system to ensure cross-platform styling consistency and polished component libraries.

What's the best way to establish dark mode using design tokens?▼

Establish dark mode by defining and validating a cohesive design token set within the visual system. This ensures cross-platform styling consistency and reliable UI implementation for dark theme components.

Does this method work without a predefined spacing grid and color palette?▼

No, this method requires a predefined spacing grid and color palette as baseline inputs. Without these foundational design tokens, the system cannot generate consistent visual guidelines or validate the interface.

Related Skills

Explore More Design & Creative Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
elihuvillarauselihuvillaraus
2

ui-designer

Create design systems, component libraries, and interface specifications for developer handoff.

Community
Advanced
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
vrcmsvrcms
1

design-system

Analyze codebase styling patterns to generate design tokens and audit visual consistency.

Community
Advanced