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

Ready to run

npx skills add https://github.com/tillysoso/mv1 --skill ui-design-tillysoso

💬 Prompt for ChatGPT / Claude Chat▼

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.