frontend-design

Guide frontend UI design decisions through UX psychology, layout, color, and typography.

6|Updated Feb 6, 2026
One-click install
npx skills add https://github.com/paulojalowyj/openkit --skill frontend-design-paulojalowyj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/paulojalowyj/openkit/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/paulojalowyj/openkit --skill frontend-design-paulojalowyj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework for making informed, intentional design decisions for web UIs, moving beyond default patterns to create truly effective and aesthetic interfaces.

Core Features & Use Cases

  • Design Principles: Learn and apply UX psychology, layout, color, and typography best practices.
  • Contextual Decision-Making: Guides you through constraint analysis, audience considerations, and emotional design.
  • Avoids AI Anti-Patterns: Actively helps you steer clear of common, overused AI design defaults.
  • Use Case: When tasked with designing a new e-commerce product page, use this Skill to understand the target audience's psychology, choose an appropriate color palette that builds trust, and select typography that enhances readability and brand perception.

Quick Start

Use the frontend-design skill to analyze the design constraints for a new mobile app onboarding flow.

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 principles to web design without relying on default templates?

Apply UX psychology principles to web design by using a structured framework that guides you through constraint analysis, audience targeting, and intentional decision-making to actively avoid common AI design anti-patterns. This ensures interfaces remain user-centric and effective.

What is the best way to choose a color palette and typography for a new e-commerce product page?

Choosing a color palette and typography for a new e-commerce product page involves analyzing your target audience's psychology and design constraints to select combinations that build trust, enhance readability, and strengthen brand perception.

How do I design a mobile app onboarding flow that follows good UI design practices?

Design a mobile app onboarding flow by analyzing specific design constraints and applying UX principles, layout best practices, and visual effects to create an intentional, accessible, and engaging user experience.

Can I use this approach to improve web interface accessibility and avoid common design anti-patterns?

Yes, you can use this approach to improve web interface accessibility and avoid common design anti-patterns because it emphasizes accessible design decisions and actively guides you away from overused AI defaults.

When do I need to perform constraint analysis and audience targeting for frontend UI design?

Perform constraint analysis and audience targeting for frontend UI design whenever you start a new project, such as crafting an e-commerce page or onboarding flow, to ensure your layout, color theory, and typography choices are intentional.

Why does my web interface design look generic, and how can visual effects and animation help?

Your web interface design looks generic due to overused default patterns, but integrating intentional visual effects and animation alongside foundational color theory and typography helps create a distinct, aesthetic, and user-centric experience.