skills.rest
chicongst
chicongstCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

2|Updated Mar 16, 2026
Search Tags:#typography#ui-design#seo#dark-mode#design-tokens#color-palette#ux-principles
One-click install
npx skills add https://github.com/chicongst/agent-skills-installer --skill ui-design-chicongst
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/chicongst/agent-skills-installer/tree/main/skills/ui-design
Command: npx skills add https://github.com/chicongst/agent-skills-installer --skill ui-design-chicongst

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates UI design execution by applying design tokens, color palettes (light/dark), typography, spacing, UX principles, and SEO best practices across frameworks, ensuring consistent visuals with minimal manual effort.

Core Features & Use Cases

  • Token-driven design: automatically apply tokens for surfaces, typography, and spacing across components.
  • Theme management: switch between light and dark palettes and adapt to design system requirements.
  • Framework-agnostic: works with React, Vue, HTML/CSS, SwiftUI, and other tech stacks to enforce consistency in production apps and component libraries.
  • SEO & accessibility nudges: aligns markup and accessibility considerations with SEO best practices.

Quick Start

Provide a UI project with a design system and let the skill automatically apply tokens and themes across components.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I apply design tokens for consistent UI typography and spacing?▼

To apply design tokens for consistent UI typography and spacing, provide your UI project with a design system and let the skill automatically enforce typography scales, spacing tokens, and color palettes across components.

Can I switch between light and dark mode palettes in React and Vue?▼

You can switch between light and dark mode palettes across frameworks like React, Vue, HTML/CSS, and SwiftUI; the skill manages theme adaptations to align with your design system requirements.

What is the best way to enforce accessibility and SEO best practices in a design system?▼

The best way to enforce accessibility and SEO best practices in a design system is to automate UI design execution, aligning markup and accessibility considerations with SEO rules during component generation.

Does this UI design tool work with SwiftUI and HTML/CSS production apps?▼

Yes, this UI design tool works with SwiftUI, HTML/CSS, React, and Vue to enforce visual consistency in production apps, component libraries, and marketing sites without manual effort.

How do I automate color palette and typography scale application across a component library?▼

You can automate color palette and typography scale application by using token-driven design, which automatically applies tokens for surfaces, typography, and spacing across your component library.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
m-salauddinm-salauddin

frontend-design

Design accessible, responsive HTML/CSS/JS frontend interfaces with cohesive typography and color systems.

Community
Advanced
dformosodformoso

ui-taste

Provides visual and usability design rules for frontend interfaces.

Community
Intermediate
venom9833venom9833

design-audit

Audit UI/UX design and generate phased implementation plans.

Community
Advanced