frontend-design

Create distinctive frontend interfaces with cohesive visual design and working code.

7|1|Updated May 16, 2026

Search Tags:#typography #frontend #ui design #react components #micro-interactions #html css #mdx style

Ready to run

npx skills add https://github.com/ethan-krich/plannar --skill frontend-design-ethan-krich

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ethan-krich/plannar/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/ethan-krich/plannar --skill frontend-design-ethan-krich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps turn vague frontend requests into distinctive, production-grade user interfaces that avoid generic “AI slop” and instead deliver cohesive, memorable design with working code.

Core Features & Use Cases

Bold design direction: Establishes a clear aesthetic concept (from refined minimalism to maximalist chaos) before implementation.
Production-grade UI builds: Produces functional frontend code (HTML/CSS/JS or frameworks like React/Vue) aligned to the chosen design point-of-view.
High-impact craftsmanship: Improves typography, color systems, motion/micro-interactions, and visual composition to create an interface people actually enjoy using.

Quick Start

Ask the AI to create a distinctive, production-ready React page for a landing dashboard with a bold editorial aesthetic, refined typography, tasteful motion, and fully working UI components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build React components that avoid generic AI styling?▼

To build React components that avoid generic AI styling, establish a bold aesthetic direction before implementation. Apply cohesive visual design, refined typography, and tasteful micro-interactions to produce distinctive, production-grade frontend code.

What is the best way to design a frontend dashboard with editorial typography?▼

The best way to design a frontend dashboard with editorial typography is to apply an intentional aesthetic direction. This approach refines spatial composition, color systems, and motion to create high-impact, functional UI components.

Can I generate production-grade HTML and CSS for a complete web application?▼

Yes, you can generate production-grade HTML and CSS for a complete web application. It provides functional working code aligned to your chosen design point-of-view, ensuring high-impact craftsmanship and cohesive visual composition.

Does this approach work for creating micro-interactions in UI design?▼

Yes, this approach works for creating micro-interactions in UI design. It improves motion and interaction quality across your frontend builds, ensuring interfaces feel real and people actually enjoy using them.

How do I turn vague frontend requests into working web components?▼

Turn vague frontend requests into working web components by defining a clear aesthetic concept first. This method translates minimal input into cohesive, memorable design with functional frontend code, avoiding generic AI slop.

Are there limitations when designing maximalist frontends with HTML and CSS?▼

There are no strict limitations when designing maximalist frontends with HTML and CSS, provided the implementation follows an intentional aesthetic direction. It supports ranges from refined minimalism to maximalist chaos with careful refinement.