skills.rest
BrunoAlpezdev
BrunoAlpezdevCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Creates distinctive, production-ready frontend interfaces with HTML/CSS/JS or React, including typography, color themes, motion, and spatial composition.

Updated Apr 11, 2026
Search Tags:#typography#frontend#react#css#ui design#web components#motion
One-click install
npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill frontend-design-brunoalpezdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/BrunoAlpezdev/lluvia-de-ideas/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill frontend-design-brunoalpezdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of generic, low-quality user interfaces by guiding the creation of distinctive, polished frontend experiences that feel intentionally designed rather than templated.

Core Features & Use Cases

  • Bold, cohesive aesthetic direction: Choose a clear visual tone and execute it consistently across typography, color, layout, and motion.
  • Production-grade working UI: Produce functional HTML/CSS/JS or framework code (e.g., React/Next.js) that is refined in details and accessibility-aware.
  • Anti-generic design enforcement: Avoid common “AI slop” patterns like overly standard fonts, cliché gradient palettes, and predictable layouts, while encouraging memorable differentiation.
  • Use Case: Turn product requirements for a landing page, dashboard, poster-like marketing page, or reusable UI component into a cohesive interface with deliberate motion, texture, and spatial composition.

Quick Start

Use the frontend-design skill to build a production-grade, visually distinctive web interface from my UI requirements for a [landing page/dashboard/component] and include a clear aesthetic direction, refined typography, coherent color variables, and working interactive or animated states.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a React UI that avoids generic AI design patterns?▼

To build a React UI that avoids generic AI design patterns, you need a cohesive aesthetic system covering typography, color theming, motion, and spatial composition. This approach replaces predictable layouts and cliché gradients with intentional visual design.

What is the best way to create cohesive web components with refined typography and motion?▼

The best way to create cohesive web components is to enforce a clear visual tone across typography, color, layout, and motion. This produces functional HTML, CSS, and JavaScript that is refined in details and accessibility-aware.

Can I use this approach to build production-grade landing pages and dashboards?▼

Yes, you can use this approach to build production-grade landing pages and dashboards. It turns product requirements into functional interfaces with deliberate motion, texture, and coherent color variables for modern frameworks.

Does frontend design work with standard HTML, CSS, and JavaScript or only modern frameworks like React?▼

Frontend design supports both standard HTML, CSS, and JavaScript and modern frameworks like React. It produces functional, production-grade code that is refined in details and accessibility-aware across these environments.

Why does my generated web interface look like a predictable cookie-cutter template?▼

Your generated web interface looks like a predictable cookie-cutter template because it lacks a cohesive aesthetic direction. Anti-generic design enforcement avoids standard fonts and cliché palettes to encourage memorable differentiation.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

frontend-design

Define and craft distinctive frontend interfaces across HTML/CSS, React, or Next.js.

Community
Advanced
skillcreatoraiskillcreatorai
1.1k

frontend-design

Create production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
RelicWare-CoRelicWare-Co

animate

Analyze UI and implement CSS transitions and JavaScript animations for micro-interactions.

Official
Intermediate
SunshineMahiruSunshineMahiru

frontend-design

Create custom frontend interfaces with distinctive typography and color themes.

Community
Advanced