frontend-design

Guide frontend UI design through constraint analysis, color theory, and typography systems.

Updated Jan 20, 2026
One-click install
npx skills add https://github.com/yunaamelia/mcp-agent-memory-pro --skill frontend-design-yunaamelia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yunaamelia/mcp-agent-memory-pro/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/yunaamelia/mcp-agent-memory-pro --skill frontend-design-yunaamelia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for making informed, user-centered design decisions, moving beyond generic AI defaults to create truly unique and effective interfaces.

Core Features & Use Cases

  • Design Principles: Covers layout, color, typography, and animation based on psychological laws and best practices.
  • Constraint Analysis: Guides you to ask critical questions about timeline, brand, audience, and tech stack before designing.
  • Anti-Pattern Avoidance: Explicitly lists and explains common AI design clichés and dark patterns to avoid.
  • Use Case: When asked to design a new landing page, use this Skill to first analyze the target audience (e.g., Gen Z vs. Boomers), then select appropriate colors and typography that align with the brand and user psychology, ensuring a cohesive and effective design.

Quick Start

Use the frontend-design skill to audit the existing design of the user interface for the 'mcp-agent-memory-pro' project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a UI design system that aligns with user psychology and brand consistency?

To create a UI design system aligned with user psychology, conduct constraint analysis on your audience and brand first. Then apply targeted color theory, typography systems, and animation principles to ensure cohesive, high-impact interfaces.

What's the best way to avoid common AI design clichés when generating frontend interfaces?

The best way to avoid AI design clichés is to use a structured methodology that explicitly lists visual anti-patterns. Guide the design process through constraint analysis and bespoke typography selections rather than accepting default generic outputs.

How do I choose the right color theory and typography for a specific target audience?

Choosing the right color theory and typography requires analyzing your target audience demographics. Apply psychological laws and best practices to select visual effects and font systems that match user expectations and brand requirements.

Can I use this methodology to audit an existing project's user interface design?

Yes, you can audit an existing user interface by applying the framework to evaluate current layout, color, typography, and animation choices against user psychology principles and brand consistency requirements to identify areas for improvement.

What constraints should I analyze before starting a frontend UI design project?

Before starting frontend UI design, analyze constraints including the project timeline, brand guidelines, target audience characteristics, and the technology stack to ensure your design decisions are feasible and user-centered.

When do I need to apply animation principles in frontend UI design?

You need to apply animation principles in frontend UI design when creating interactive elements that require visual effects based on psychological laws. Use them to enhance user experience while avoiding dark patterns and unnecessary distractions.