skills.rest
majiayu000
majiayu000COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend interface creation with typography, color, motion, and accessibility.

258|26|Updated Dec 9, 2025
Search Tags:#typography#design#ui#accessibility#frontend#ux#aesthetics
One-click install
npx skills add https://github.com/majiayu000/spellbook --skill frontend-design-majiayu000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/majiayu000/spellbook/tree/main/skills/frontend-design
Command: npx skills add https://github.com/majiayu000/spellbook --skill frontend-design-majiayu000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces without sacrificing performance, accessibility, or coherence with brand aesthetics.

Core Features & Use Cases

  • Establishes a clear aesthetic direction for web components, pages, or applications.
  • Provides guidance on typography, color theory, motion, spatial composition, and accessibility to avoid generic AI aesthetics.
  • Use Case: design and implement a polished admin dashboard or marketing site with a cohesive design system.

Quick Start

Describe your target frontend project (framework, typography, color direction) to generate a distinctive, production-grade UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend interfaces without generic AI aesthetics?▼

To create production-grade frontend interfaces, define your target project's framework, typography, and color direction. This establishes a clear aesthetic direction to avoid generic AI aesthetics and ensure cohesive UI.

Can I use this approach for both admin dashboards and marketing sites?▼

Yes, you can use this approach for both admin dashboards and marketing sites. It applies to web components, pages, or applications to deliver bold, cohesive UI across modern frameworks.

What is the best way to establish a cohesive design system for web components?▼

The best way to establish a cohesive design system is to follow explicit aesthetic guidelines covering typography, color theory, motion, spatial composition, and accessibility to guide your distinct UI development.

Does frontend interface design guidance cover accessibility and motion?▼

Yes, frontend interface design guidance covers both accessibility and motion. It provides specific instructions on spatial composition and visual movement to ensure your application remains accessible and dynamic.

How do I start prototyping a UI with a design-first workflow?▼

To start prototyping a UI with a design-first workflow, describe your target frontend project including the framework, typography, and color direction. This one-sentence instruction accelerates initial UI prototyping.

Related Skills

Explore More Design & Creative Skills→
kkingsbekkingsbe

frontend-design

Create production-grade frontend interfaces in HTML/CSS/JS or framework components.

Community
Advanced
kewangkewang
44

frontend-design

Generate frontend interfaces with unique aesthetics and functional code.

Community
Advanced
KYRIE66nbKYRIE66nb

frontend-design

Create production-grade frontend interfaces with HTML, CSS, JS, or React.

Community
Advanced
abeldotamabeldotam
13

frontend-design

Create production-grade frontend interfaces from design concepts.

Community
Advanced