skills.rest
qazuor
qazuorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

Updated Feb 5, 2026
Search Tags:#typography#design#layout#design system#UI#design tokens#color theory
One-click install
npx skills add https://github.com/qazuor/claude-code-knowledge --skill frontend-design-qazuor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/qazuor/claude-code-knowledge/tree/main/skills/frontend-design
Command: npx skills add https://github.com/qazuor/claude-code-knowledge --skill frontend-design-qazuor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pre-coding design decisions can stall development and lead to inconsistent UI aesthetics. This Skill provides a structured process for defining typography, color, spacing, and design tokens before implementation.

Core Features & Use Cases

  • Establish typography scales and font pairings to ensure readability across components.
  • Create color palettes and token systems to support accessible, cohesive UI across products.
  • Define spacing, borders, motion guidelines, and design system thinking to maintain visual cohesion.
  • Use Case: When designing a new dashboard, outline typography, color tokens, spacing grid, and tokens before coding begins.

Quick Start

Begin by outlining the design intent for a UI, draft a typography scale (base size and heading sizes), derive a color palette with primary tokens and neutral tones, and set a consistent spacing grid. Apply these tokens to a sample component to validate cohesion.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish typography scales and color palettes before coding a UI?▼

A pre-coding design process establishes typography scales, color palettes, and spacing tokens before implementation. This structured approach prevents stalled development and ensures cohesive UI aesthetics across all product surfaces.

What is a design token system and when do I need it for frontend design?▼

Design tokens are variables that store UI design decisions like typography scales, color palettes, and spacing grids. You need them before coding begins to maintain accessible and visually cohesive UI across product surfaces.

How do I create a consistent spacing grid and layout foundation for a new dashboard?▼

To create a consistent spacing grid for a dashboard, define a base spacing unit and derive token rules for borders and motion. Validate the layout foundation by applying these tokens to a sample component before coding begins.

Can I use this pre-coding design process for responsive rules and motion guidelines?▼

Yes, the pre-coding design process specifies requirements for responsive rules and motion guidelines alongside typography scales and color tokens. This ensures teams define all foundational design elements before implementation begins.

Why does my UI design lack visual cohesion across different components?▼

UI design lacks visual cohesion when typography, color, and spacing decisions are made inconsistently during implementation. Defining a structured design system with derived tokens for these elements before coding solves this fragmentation.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
The13thNodeThe13thNode
3

design-reference-scraper

Extract design system patterns from reference websites into structured design tokens.

Community
Intermediate
marcustamarcusta

contrast-validator

Validate WCAG AA contrast ratios in React, Vue, or HTML/CSS code.

Community
Intermediate
guideopsguideops

minimal

Implement a minimalist design system with color palettes, typography scales, and spacing scales.

Community
Basic