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.