frontend-design

Guide frontend design decisions with UX psychology, typography, and color theory.

42|3|Updated Feb 13, 2026

Search Tags:#typography #accessibility #ui-design #design-system #design-thinking #color-system #ux psychology

Ready to run

npx skills add https://github.com/pratikrath126/ai-image-detector --skill frontend-design-pratikrath126

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pratikrath126/ai-image-detector/tree/main/.agent/kit-skills/frontend-design
Command: npx skills add https://github.com/pratikrath126/ai-image-detector --skill frontend-design-pratikrath126

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a structured approach to designing web user interfaces by applying design-thinking, UX psychology, typography, color theory, and visual systems to decisions rather than following trendy visuals.

Core Features & Use Cases

Thoughtful UI decision framework for components, layouts, and interactions based on fundamental design principles.
Color, typography, and accessibility guidance to create cohesive, inclusive interfaces across a range of projects.
Design-system alignment: ensures consistency, reusability, and scalable patterns across teams.

Quick Start

Begin by examining the UX psychology and typography resources in the provided guides and start applying them to your current UI task.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I apply UX psychology to UI components and layouts?▼

Build a cohesive color system for web interfaces by applying structured color theory alongside accessibility guidance. This ensures inclusive visual designs that maintain consistency and scalability across real-world frontend workflows.

How do I align my typography decisions with a design system?▼

Align typography with a design system by following established typography resources and visual system rules. This ensures text scalability, structural consistency, and reusability across UI components and team workflows.

What is the best way to structure frontend design decisions for accessibility?▼

Structure frontend design decisions for accessibility by integrating inclusive color and typography checks into your design-thinking workflow. This approach systematically addresses accessibility considerations alongside visual layout planning.

Can I ensure design-system alignment when building new web layouts?▼

Yes, you can ensure design-system alignment by applying structured reasoning to UI components and layouts. This enforces consistency, reusability, and scalable patterns across your web projects and team workflows.

Why does my UI design lack cohesion across different components?▼

Your UI design lacks cohesion because decisions are likely based on trendy visuals rather than fundamental principles. Applying structured UX psychology, color theory, and typography rules creates cohesive, inclusive interfaces.