skills.rest
ntdev204
ntdev204COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Teach frontend design principles for UI components, color, typography, and layout.

Updated Aug 27, 2026
Search Tags:#typography#design system#web design#color theory#ui design#ux principles
One-click install
npx skills add https://github.com/ntdev204/rai_ws --skill frontend-design-ntdev204
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ntdev204/rai_ws/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/ntdev204/rai_ws --skill frontend-design-ntdev204

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating aesthetically pleasing, user-friendly, and psychologically resonant web interfaces by providing a comprehensive framework for design thinking and decision-making.

Core Features & Use Cases

  • Design Principles: Teaches core concepts of UX psychology, color theory, typography, layout, and animation.
  • Constraint Analysis: Guides users through identifying critical project constraints before design begins.
  • Anti-Pattern Avoidance: Actively steers users away from common AI design clichés and dark patterns.
  • Use Case: When tasked with designing a new e-commerce product page, use this Skill to understand the principles of color psychology for trust, typography for readability, and layout for conversion, ensuring the final design is both beautiful and effective.

Quick Start

Use the frontend-design skill to analyze the design constraints for a new mobile app landing page.

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 and color theory to web UI design?▼

Apply UX psychology and color theory to web UI design by using this skill to learn decision-making principles for creating user-centric interfaces, ensuring visual aesthetics align with psychological resonance and user behavior.

What is the best way to choose typography and color schemes for a web interface?▼

The best way to choose typography and color schemes for a web interface is to follow established design principles that teach readability, visual hierarchy, and user trust rather than applying fixed, arbitrary values.

How do I analyze design constraints before building a web layout?▼

Analyze design constraints before building a web layout by identifying critical project requirements early, allowing you to make informed decisions about layout structure, visual effects, and animation within your specific context.

Why does my generated UI design look like a cliché and how can I avoid it?▼

Your generated UI design looks like a cliché due to common AI design anti-patterns; avoid it by actively steering away from these dark patterns and overused visual effects through informed design thinking.

Can I use this approach for designing a mobile app landing page?▼

Yes, you can use this approach for a mobile app landing page by applying its framework for design thinking, constraint analysis, and layout to ensure the final interface is aesthetically pleasing and effective.

Do I need a specific framework to implement these UX principles?▼

No, you do not need a specific framework to implement these UX principles because the skill teaches underlying design concepts and constraint analysis for web UI components rather than relying on fixed values or dependencies.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
VSF-QC-TTSVSF-QC-TTS

redesign-existing-projects

Analyze and enhance web application design patterns, typography, color schemes, and layout.

Official
Advanced
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
guillermoscriptguillermoscript
21

normalize

Analyze and refactor UI components, styles, and layout to align with a specified design system.

Community
Advanced