skills.rest
Kwondongkyun
KwondongkyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Apply frontend design guidelines to UI projects for consistency and accessibility.

Updated Aug 23, 2026
Search Tags:#typography#design#ui#frontend#color#design-system#motion
One-click install
npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-design-kwondongkyun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-design-kwondongkyun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI projects often diverge in typography, color, and motion, leading to inconsistent experiences. This Skill provides a framework to enforce intentional design thinking and guard against generic AI aesthetics.

Core Features & Use Cases

  • Enforce design thinking before implementation to align stakeholders and outcomes.
  • Provide typography, color, and motion guidelines to maintain visual consistency.
  • Preserve brand identity across web pages, dashboards, and landing pages.

Quick Start

Provide a project brief (purpose, audience, constraints) to generate an initial frontend design system and guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I enforce frontend design consistency across web pages and dashboards?▼

You enforce frontend design consistency by applying structured typography, color, and motion guidelines to your UI projects. This framework prevents visual divergence and maintains brand identity across web pages and dashboards.

What's the best way to prevent generic AI aesthetics in UI design?▼

Prevent generic AI aesthetics by enforcing intentional design thinking before implementation. Applying strict typography, color, and motion guidelines guards against default outputs and preserves brand identity.

Do I need a design brief to generate a frontend design system?▼

Yes, you need a project brief detailing purpose, audience, and constraints to generate an initial frontend design system. This brief informs the specific typography, color, and motion guidelines applied to your UI.

Can I use frontend design guidelines for component libraries and landing pages?▼

Yes, frontend design guidelines apply to component libraries and landing pages. The framework enforces typography, color, motion, and layout rules to maintain visual consistency across these diverse UI formats.

What typography and color rules should I apply to maintain brand identity in a UI?▼

Apply intentional typography and color rules derived from your design brief to maintain brand identity in a UI. These guidelines ensure visual consistency and accessibility while preventing generic AI aesthetics.

Related Skills

Explore More Design & Creative Skills→
adminsairolotech-bitadminsairolotech-bit

design-exploration

Generate a structured design brief and delegate to the design subagent.

Community
Advanced
AnvinX1AnvinX1

frontend-design

Systematize frontend design decisions for consistent, accessible web interfaces.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

normalize

Normalize UI components and styles to match a project's design system.

Community
Intermediate
luanzebaluanzeba

normalize

Enforces design tokens and accessibility across UI elements and layouts.

Community
Advanced