skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guide frontend UI design using UX psychology and structured layout principles.

Updated May 19, 2026
Search Tags:#typography#design system#color theory#ux psychology#animation principles#frontend ui#layout grid
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill frontend-design-timekast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill frontend-design-timekast

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design web frontends consistently and effectively by grounding choices in UX psychology, hierarchy, spacing, color, typography, and animation principles—so you don’t default to generic AI-looking layouts.

Core Features & Use Cases

  • UX-psychology driven UI: Applies principles like Hick’s Law, Fitts’ Law, and serial-position memory to improve decision speed, clickability, and information recall.
  • Practical layout & spacing systems: Uses Golden Ratio proportions and an 8-point grid to create disciplined, readable layout structures.
  • Color, typography, and animation guardrails: Enforces the 60-30-10 color rule, readability targets (line length/line height), and performance-aware motion guidance.
  • Decision-first workflow: Prompts for constraints (color/style/layout) and actively prevents common AI anti-patterns (bento grids, hero splits, “purple ban,” glassmorphism-by-default).

Quick Start

Ask the AI to design your UI and explicitly request it to follow the frontend-design principles by first asking for your palette, style, and layout preferences.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design web interfaces that don't look like generic AI layouts?▼

To design web interfaces that avoid generic AI layouts, apply UX psychology principles like Hick’s Law and Fitts’s Law alongside disciplined 8-point grid spacing and the 60-30-10 color rule to guide user-centered visual decisions.

What UX psychology principles improve frontend UI decision speed and clickability?▼

UX psychology principles like Hick’s Law, Fitts’s Law, and serial-position memory improve frontend UI decision speed, clickability, and information recall by structuring content hierarchy and interaction patterns around human cognitive behaviors.

How do I calculate layout spacing and typography for a production-like web application?▼

Calculate layout spacing and typography for web applications using Golden Ratio proportions and an 8-point grid system, enforcing readability targets for line length and line height to create disciplined, readable visual structures.

What are common frontend UI anti-patterns to avoid when building web screens?▼

Common frontend UI anti-patterns to avoid include default bento grids, hero splits, the “purple ban,” and glassmorphism-by-default, which a constraint-first questioning workflow actively prevents during interface design and refactoring.

What color and animation rules should I follow for consistent frontend design?▼

For consistent frontend design, follow the 60-30-10 color rule for palettes and apply performance-aware motion guidance for animations, ensuring visual consistency and readable interaction patterns across web interface screens.

Related Skills

Explore More Design & Creative Skills→
PiaoxuemoliPiaoxuemoli

sketch

Generate disposable HTML mockup variants from user design preferences.

Community
Intermediate
uesleinaschuesleinasch

frontend-design

Analyze frontend design decisions for color, typography, and accessibility.

Community
Advanced
lehoangphuc747lehoangphuc747

frontend-design

Apply design-thinking, psychology, and accessibility frameworks to frontend interfaces.

Community
Advanced
capaas2capaas2

frontend-design

Guide frontend design decisions for web interfaces using UX psychology and accessibility principles.

Community
Advanced