skills.rest
Gdm0714
Gdm0714COMMUNITY
Explore all skills by this author →
GitHub

frontend-design-kr

Guide frontend designers to create bold, distinctive interfaces with typography, color, and motion requirements.

Updated Jan 23, 2026
Search Tags:#typography#aesthetics#motion#ui-patterns#color-palette#frontend-design
One-click install
npx skills add https://github.com/Gdm0714/claude-code-resource --skill frontend-design-kr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-kr
Source: https://github.com/Gdm0714/claude-code-resource/tree/main/skills/frontend-design-kr
Command: npx skills add https://github.com/Gdm0714/claude-code-resource --skill frontend-design-kr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

이 스킬은 AI가 생성하는 안전한 디자인 패턴에 국한되지 않고 창의적이고 독특한 프론트엔드 디자인을 가이드합니다. 폰트 선택, 색상 팔레트, 애니메이션 및 배경 처리에서 차별화를 추구하는 디자이너를 돕습니다.

Core Features & Use Cases

  • 창의적 프론트엔드 디자인 원칙: AI 슬롭을 피하고 차별화된 UI를 구성하는 핵심 원칙을 제시합니다.
  • 타이포그래피, 색상, 모션 가이드: 고유하고 강렬한 미학을 달성하기 위한 구체적 지침을 제공합니다.
  • 사용 사례: 랜딩 페이지, 대시보드, 웹 UI 컴포넌트 스타일링에 적용하여 독창적 UI를 구현합니다.

Quick Start

Experiment with bold typography, color, and motion to create a distinctive frontend UI.

Frequently Asked Questions about frontend-design-kr

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

FAQPage Schema
How do I stop generating generic AI-slop frontend UI designs?▼

To avoid AI-slop frontend UI designs, enforce concrete restrictions on typography, color contrast, animation usage, and background layering to ensure a cohesive, differentiated aesthetic rather than safe defaults.

What are the best principles for bold typography and color palettes in web UI?▼

Bold typography and color palettes require strict limitations on font choices and precise color contrast rules to achieve a distinctive aesthetic, moving beyond standard safety-driven design patterns.

How do I apply distinctive motion cues and UI patterns to React components?▼

Applying distinctive motion cues and UI patterns to React components involves enforcing specific animation usage rules that impact user experience and create a unique visual identity.

Can I use these frontend design guidelines for dashboards and landing pages?▼

Yes, these frontend design guidelines scope covers landing pages, dashboards, React components, and general web UI styling where typography, color systems, and motion cues impact user experience.

Why does my current web UI styling lack a unique aesthetic?▼

Web UI styling often lacks a unique aesthetic because it relies on AI-safety-driven design patterns, which can be resolved by enforcing concrete background layering and typography restrictions.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
zizhenchen47-osszizhenchen47-oss

frontend-design

Create distinctive frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
ProtagonistssProtagonistss

ui-design-core

Generate production-grade frontend UI designs with specified style directions and anti-pattern guardrails.

Community
Advanced