skills.rest
SergeiGolos
SergeiGolosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guide frontend design with UX psychology, color, typography, and layout principles.

1|Updated Dec 21, 2024
Search Tags:#typography#design system#color theory#animation#ui design#ux principles
One-click install
npx skills add https://github.com/SergeiGolos/wod-wiki --skill frontend-design-sergeigolos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/SergeiGolos/wod-wiki/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/SergeiGolos/wod-wiki --skill frontend-design-sergeigolos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill guides the creation of aesthetically pleasing, user-friendly, and psychologically resonant web interfaces, moving beyond generic AI defaults.

Core Features & Use Cases

  • Design Principles: Teaches core UX psychology, layout, color, typography, and animation principles.
  • Constraint Analysis: Helps define project requirements (audience, brand, tech) before design.
  • Anti-Pattern Avoidance: Actively steers away from common AI design clichés and dark patterns.
  • Use Case: When designing a new landing page, use this Skill to ensure the color palette evokes trust, the typography is readable, and the layout guides the user towards the call-to-action effectively.

Quick Start

Use the frontend-design skill to analyze the user's request for design constraints and audience.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
What are common UI design anti-patterns to avoid in web development?▼

Common UI design anti-patterns include generic AI defaults and dark patterns. This Skill guides you to avoid these clichés by adhering to UX laws, ensuring interfaces are aesthetically pleasing, user-friendly, and psychologically resonant.

How do I choose the right color theory and typography for a web layout?▼

To choose the right color theory and typography, you must analyze design constraints like audience and brand context first. This Skill provides comprehensive guidance on aesthetic decision-making for readable, user-centric component design.

Can I use this for designing a new landing page layout and animation?▼

Yes, you can use this for designing a new landing page layout and animation. It helps define project requirements and ensures visual effects, color palettes, and typography guide users effectively towards the call-to-action.

What's the best way to apply UX psychology principles to frontend development?▼

The best way to apply UX psychology principles is by actively steering design decisions with user-centric constraints. This Skill teaches core UX psychology to ensure your web UI development evokes trust and resonates psychologically.

Why does my web interface look like a generic AI design?▼

Your web interface looks like a generic AI design if it lacks defined constraints and uses common anti-patterns. This Skill helps you move beyond defaults by enforcing adherence to UX laws and specific brand context.

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
Hey-ViswaHey-Viswa

airtable-design-skill

Translate Airtable design-system patterns into implementation-ready UI guidance for React/Next.js projects.

Community
Intermediate
jabez4jcjabez4jc

frontend-design

Guide frontend design with layout, color, typography, and UX psychology.

Community
Intermediate
marcusagmmarcusagm
4

frontend-design

Apply principled front-end design frameworks to UI components, layouts, color systems, and typography.

Community
Basic