skills.rest
tillysoso
tillysosoCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Standardize web UI visual language and design tokens for dashboards and marketing sites.

Updated Sep 10, 2025
Search Tags:#typography#layout#ui-design#design-tokens#visual-language#design-systems#color-palette
One-click install
npx skills add https://github.com/tillysoso/mv1 --skill ui-design-tillysoso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/tillysoso/mv1/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/tillysoso/mv1 --skill ui-design-tillysoso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web products often suffer from inconsistent visual language across dashboards and marketing pages. This Skill standardizes visual systems, color palettes, typography scales, and layout patterns, enabling cohesive interfaces and scalable design tokens.

Core Features & Use Cases

  • Visual system and design language definition for web UI
  • Color palettes, typography scales, and layout patterns that can be tokenized for consistency
  • Design-token generation and component styling guidance for product dashboards (SaaS/admin/data-heavy) or marketing/brand pages
  • Use Case: creating a new design system for a SaaS product or refreshing a landing page to achieve a premium look

Quick Start

Define a cohesive visual system for a SaaS dashboard and marketing site by selecting color, typography, and layout patterns.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I standardize visual language for a web UI design system?▼

Standardizing visual language for a web UI design system is achieved by defining cohesive color palettes, typography scales, and layout patterns that generate scalable design tokens for consistent component styling.

What is the best way to generate design tokens for a SaaS product dashboard?▼

Generating design tokens for a SaaS product dashboard requires standardizing your visual system into actionable styling instructions for color, typography, and layout patterns to ensure interface consistency.

Can I use this approach to refresh a marketing site for a premium look?▼

Yes, this visual system approach applies to marketing and brand pages, allowing you to refresh a landing page by standardizing visual language and design tokens to achieve a premium look.

How do I set up typography scales and color palettes for consistent web interfaces?▼

Setting up typography scales and color palettes for consistent web interfaces involves tokenizing these visual elements into actionable styling instructions that guide component patterns across dashboards.

Why does my web UI look inconsistent across different product pages?▼

Web UI often looks inconsistent across product pages when visual language is not standardized; applying cohesive design tokens for layout, typography, and color resolves these inconsistencies.

Do I need frontmatter configuration to define component styling patterns?▼

Yes, defining actionable component styling patterns and design tokens requires clear frontmatter-driven tracks to guide the visual system setup for your web UI.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
Markson22Markson22

reversa-design-system

Extract design tokens and documentation from CSS, theme files, and screenshots.

Community
Intermediate
Kevin-Liu-01Kevin-Liu-01
16

reticle-design-system

Organize UI design tokens, layout primitives, and components into a cohesive system.

Community
Intermediate
beyondkmpbeyondkmp
1

theme-factory

Apply preset color palettes and typography from themes/*.md to artifacts.

Community
Basic