skills.rest
tuyenht
tuyenhtCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend UI/UX design using psychological principles and systematic decision-making.

Updated Jan 31, 2026
Search Tags:#visual design#design principles#ux design#frontend development#ui design#user psychology
One-click install
npx skills add https://github.com/tuyenht/Antigravity-Core --skill frontend-design-tuyenht
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tuyenht/Antigravity-Core/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/tuyenht/Antigravity-Core --skill frontend-design-tuyenht

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating visually appealing, user-centric frontend designs that go beyond generic templates and resonate with target audiences.

Core Features & Use Cases

  • UI/UX Design Principles: Applies psychological laws (Hick's, Fitts', Miller's) and emotional design levels.
  • Systematic Design Process: Guides through constraint analysis, color theory, typography, layout, and animation.
  • Anti-Pattern Avoidance: Actively steers away from common AI design clichés (e.g., Bento Grids, Mesh Gradients, excessive purple).
  • Use Case: Designing a new e-commerce website's homepage to maximize user engagement and conversion rates by applying principles of trust, visual hierarchy, and emotional appeal.

Quick Start

Use the frontend-design skill to create a modern, user-friendly interface for a new SaaS product, focusing on a clean aesthetic and intuitive navigation.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply user psychology to frontend UI design?▼

Frontend UI design applies psychological laws like Hick's, Fitts', and Miller's to guide visual hierarchy, emotional engagement, and navigation. This systematic approach ensures interfaces resonate with target audiences and maximize conversion rates.

What is the best way to avoid common AI-generated design anti-patterns?▼

Avoiding AI-generated design anti-patterns requires actively steering away from clichés like Bento Grids, Mesh Gradients, and excessive purple. A systematic design process focusing on constraint analysis, color theory, and typography ensures clean, user-centric aesthetics.

How do I build a systematic UI design process for a SaaS product?▼

Building a systematic UI design process involves analyzing constraints, then applying color theory, typography, layout, and animation principles. This guides the creation of modern, user-friendly interfaces with clean aesthetics and intuitive navigation for SaaS products.

Can I use frontend design principles to increase e-commerce conversion rates?▼

Frontend design principles can increase e-commerce conversion rates by applying visual hierarchy, trust signals, and emotional appeal. This user-centric approach optimizes the homepage experience to maximize engagement and effectively drive target audience actions.

When should I not use generic templates for frontend development?▼

You should not use generic templates for frontend development when creating visually appealing, user-centric interfaces that need to resonate with target audiences. Moving beyond templates allows for psychological precision and higher user engagement.

Related Skills

Explore More Design & Creative Skills→
Daiwik-ChilukuriDaiwik-Chilukuri

colorize

Introduce color to monochromatic UI with OKLCH values and WCAG contrast.

Community
Intermediate
mintuzmintuz
21

web-design

Guide UI design decisions with principles for layout, typography, color, and spacing.

Community
Basic
manutejmanutej
61

ux-principles

Codify UX principles for designing and evaluating user-centered interfaces.

Community
Advanced
dnkrowdnkrow
1

high-end-visual-design

Enforce high-end visual design constraints for React and Tailwind UI layouts.

Community
Advanced