skills.rest
YehudaFrankel
YehudaFrankelCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate design tokens, typography rules, color systems, and component guidelines.

16|3|Updated Mar 15, 2026
Search Tags:#typography#tokens#design-system#ui-patterns#frontend-design#color-system
One-click install
npx skills add https://github.com/YehudaFrankel/clankbrain --skill frontend-design-yehudafrankel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/YehudaFrankel/clankbrain/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/YehudaFrankel/clankbrain --skill frontend-design-yehudafrankel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Design helps teams commit to a bold design direction before writing a single line of CSS, and it generates a complete design system including a color palette, typography pairings, style direction, and UX rules for a product.

Core Features & Use Cases

  • Step 1 — Commit to a Direction: Define the product purpose, audience, archetype, a distinctive visual identity, and anti-goals.
  • Step 2 — Choose an Archetype: Align the design language with predefined archetypes such as Editorial, Swiss, Brutalist, Minimalist, Maximalist, Retro-Futuristic, Organic, Industrial, Art Deco, or Lo-Fi.
  • Step 3 — Generate Design Tokens: Create a tokenized system for colors, typography, spacing, borders, shadows, and motion.
  • Step 4 — Typography Rules: Establish distinctive font pairings and typographic scale with weight contrast and line heights.
  • Step 5 — Color System: Apply a 60-30-10 color distribution and accessible contrast principles.
  • Step 6 — Component Standards: Define states (Default, Hover, Active, Focus, Disabled, Loading) and responsive breakpoints (375px, 768px, 1024px).
  • Step 7 — Quality Checklist: Ensure archetype consistency, token usage, accessibility, and responsive behavior.

Quick Start

Describe your product context and let frontend-design generate a complete design system with tokens, typography, and color guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate a design system with typography and color tokens?▼

Generating a design system requires defining your product context and archetype. This produces a complete tokenized structure for colors, typography, spacing, borders, shadows, and motion guidelines.

What is a 60-30-10 color distribution in frontend design?▼

A 60-30-10 color distribution is a frontend design system approach that allocates proportions across a palette to ensure visual balance. It applies accessible contrast principles to maintain consistency across UI components.

How do I establish typography rules and font pairings for a UI build?▼

Establishing typography rules for a UI build involves selecting distinctive font pairings and defining a typographic scale. This ensures weight contrast and appropriate line heights are applied consistently across the design system.

Can I use predefined archetypes like Brutalist or Swiss for a design-system refactor?▼

Yes, you can align your design language with predefined archetypes including Brutalist, Swiss, Minimalist, or Editorial. Choosing an archetype guides archetype selection to ensure consistency during new UI builds or design-system refactors.

What component states and breakpoints should a frontend design system include?▼

A frontend design system should include component states like Default, Hover, Active, Focus, Disabled, and Loading. It must also define responsive breakpoints at 375px, 768px, and 1024px to standardize UI patterns.

When do I need design tokens for early product planning?▼

You need design tokens for early product planning when committing to a bold design direction before writing CSS. Tokens structure colors, typography, and spacing to ensure consistency across pages and components.

Related Skills

Explore More Design & Creative Skills→
nexscope-ainexscope-ai
632

ecommerce-branding

Develop e-commerce brand positioning, messaging, and visual identity guidelines.

Official
Intermediate
xcrrrxcrrr
4

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

Community
Advanced
AnvinX1AnvinX1

frontend-design

Systematize frontend design decisions for consistent, accessible web interfaces.

Community
Advanced
sotono-046sotono-046
1

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

Community
Basic