frontend-design

Build a frontend design system covering typography, color, layout, motion, and accessibility.

7|2|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/celanthe/clarion --skill frontend-design-celanthe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/celanthe/clarion/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/celanthe/clarion --skill frontend-design-celanthe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create distinctive, production-grade frontend interfaces with a clear aesthetic direction and high-quality implementation, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Establishes a bold design direction and a cohesive frontend design system covering typography, color, layout, motion, and accessibility.
  • Provides guidance for building a polished UI kit and component library aligned with brand identity for web apps.
  • Use case: teams needing a unique, production-ready frontend aesthetic for marketing sites, dashboards, and apps.

Quick Start

Describe a bold frontend design direction and deliver a ready-to-implement UI package.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a frontend design system that avoids generic AI aesthetics?▼

To avoid generic AI aesthetics in your frontend design system, establish a bold aesthetic direction covering typography, color, layout, motion, and accessibility. Use token-based design foundations and reusable components to ensure scalable, consistent implementations across products.

How do I ensure accessibility is integrated into my UI component library?▼

To ensure accessibility is integrated into your UI component library, apply accessibility guarantees alongside token-based design foundations during the build process. This approach ensures cohesive, accessible UI outcomes for web apps, dashboards, and marketing sites.

What is the best way to scale a cohesive UI kit across multiple web apps?▼

The best way to scale a cohesive UI kit across multiple web apps is to establish a token-based design foundation aligned with your brand identity. This provides reusable components and guarantees consistent implementations across different products.

Can I use a token-based design system for both marketing sites and dashboards?▼

Yes, you can use a token-based design system for both marketing sites and dashboards. The system guides typography, color, layout, and motion to deliver a distinctive, production-ready frontend aesthetic suitable for various product types.

Does frontend design cover color theory and typography for brand identity?▼

Yes, frontend design covers color theory and typography to establish a bold aesthetic direction aligned with brand identity. It builds a cohesive design system that guides UI outcomes for web apps and marketing sites.

Why does my current UI component library look generic across different products?▼

Your current UI component library looks generic because it lacks a distinctive, production-grade design direction. Establishing token-based design foundations with cohesive typography, color, and motion guidance prevents generic AI aesthetics and ensures unique, consistent implementations.