skills.rest
mxyhi
mxyhiCOMMUNITY
Explore all skills by this author →
Website𝕏@mxy252GitHub

frontend-design

Generate frontend interfaces with guidelines for typography, color, layout, and motion.

467|42|Updated Feb 2, 2026
Search Tags:#design#ui#frontend#web components#ux#aesthetics
One-click install
npx skills add https://github.com/mxyhi/ok-skills --skill frontend-design-mxyhi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mxyhi/ok-skills/tree/main/impeccable/frontend-design
Command: npx skills add https://github.com/mxyhi/ok-skills --skill frontend-design-mxyhi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating unique and high-quality frontend interfaces that avoid generic AI aesthetics, ensuring your web components, pages, or applications stand out with a clear design vision.

Core Features & Use Cases

  • Aesthetic Direction: Guides the user in defining a bold, intentional design direction (purpose, tone, constraints, differentiation).
  • Detailed Guidelines: Provides specific, actionable advice on typography, color, layout, visual details, motion, interaction, responsiveness, and UX writing, referencing companion documentation for deeper dives.
  • AI Slop Test: Encourages critical self-assessment to avoid common AI-generated design pitfalls.
  • Use Case: A user wants to design a landing page for a new SaaS product. They can use this Skill to establish a "brutalist-minimalist" aesthetic, select unique fonts and a striking color palette, and implement responsive layouts and interactions that feel deliberately crafted and memorable.

Quick Start

Use the frontend-design skill to create a landing page with a playful, maximalist aesthetic, focusing on vibrant colors and unexpected typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create distinctive frontend web components that avoid generic AI aesthetics?▼

To create distinctive frontend web components, establish a bold aesthetic direction covering typography, color, and layout. This approach ensures your UI design avoids generic AI outputs by enforcing intentional, memorable visual decisions.

What guidelines should I follow for production-grade UI design?▼

Production-grade UI design requires detailed guidelines on motion, interaction, and responsiveness. Defining these specific aesthetic rules ensures your web components achieve high design quality and a deliberately crafted user experience.

How can I define a clear aesthetic direction for a SaaS landing page?▼

Define a clear aesthetic direction for a SaaS landing page by setting constraints around tone, purpose, and differentiation. This guides your typography and color choices to create a memorable, intentional design.

What is the best way to avoid common pitfalls when generating web component layouts?▼

The best way to avoid common design pitfalls in web component layouts is applying a critical self-assessment test. This process identifies and corrects generic AI-generated patterns during the frontend design workflow.

Does this frontend design approach work for responsive interactions and UX writing?▼

Yes, this frontend design approach works for responsive interactions and UX writing. It provides actionable advice covering both visual details and interaction behaviors to ensure cohesive, production-grade interfaces.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
JetaofgakJetaofgak

frontend-design

Generate production-grade frontend interfaces from user requirements.

Community
Advanced
qqrusqqrus

ux-designer

Provide UX design guidelines for user research, wireframing, prototyping, and information architecture.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced