skills.rest
bernardohaha
bernardohahaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated Mar 26, 2026
Search Tags:#creative coding#web development#frontend#design principles#aesthetic#user interface#UI/UX design
One-click install
npx skills add https://github.com/bernardohaha/Daylyou --skill frontend-design-bernardohaha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bernardohaha/Daylyou/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/bernardohaha/Daylyou --skill frontend-design-bernardohaha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill empowers the creation of distinctive, production-grade frontend interfaces, moving beyond generic "AI slop" to deliver visually striking and memorable user experiences. It solves the challenge of generating truly creative and polished UI code, saving you from bland, uninspired designs.

Core Features & Use Cases

  • Aesthetic Direction: Guides the AI to commit to a bold conceptual design direction (e.g., brutalist, retro-futuristic, minimalist) before coding, ensuring intentional and cohesive aesthetics.
  • High-Quality Code Generation: Focuses on meticulous refinement in typography, color, motion, spatial composition, and background details to produce unique, production-ready UIs.
  • Anti-Generic Design: Explicitly avoids common, overused AI aesthetics, ensuring every design is fresh, context-specific, and unforgettable.
  • Use Case: When asked to build a new dashboard component, this Skill will generate code that features a unique font pairing, a cohesive color theme with sharp accents, and subtle, impactful animations, making the dashboard visually engaging and distinct.

Quick Start

Design a new landing page for a sustainable tech startup. Use the frontend-design skill to create a visually striking, minimalist interface with a focus on organic textures and subtle animations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a distinctive frontend design instead of generic AI-generated UI?▼

Distinctive frontend design requires committing to a bold aesthetic direction—brutalist, retro-futuristic, minimalist—before coding, then executing with intentional typography, color, motion, and spatial composition. This Skill guides you through that process to produce unique, production-ready HTML/CSS/JS or React/Vue interfaces that avoid overused AI aesthetics.

What makes production-grade UI code different from standard web development?▼

Production-grade UI code balances functional requirements with meticulous attention to typography, color palettes, motion effects, spatial hierarchy, and accessibility. This approach ensures your components, pages, or full applications are not only functional but visually cohesive, performant, and memorable.

Can I use frontend design principles with React or Vue frameworks?▼

Yes. This Skill generates production-ready implementations in React, Vue, or vanilla HTML/CSS/JS. The aesthetic direction and design principles apply across all these technologies, ensuring your framework choice doesn't compromise visual distinction or code quality.

How do I avoid bland, uninspired aesthetics when building new UI components?▼

Start by defining a conceptual design direction and commit to it before writing code. Then refine typography, color accents, subtle animations, and spatial details intentionally. This deliberate process replaces generic defaults with context-specific, visually striking interfaces that feel intentional.

What design elements should I focus on for a cohesive, polished interface?▼

Prioritize font pairings, a sharp color theme with strategic accents, subtle but impactful motion, spatial composition, and background details. Together, these elements create visual coherence and make your interface feel complete, distinctive, and professionally crafted.

Does this approach work for dashboards, landing pages, and full applications?▼

Yes. Whether building a dashboard component, landing page, or complete application, this Skill applies the same design principles—bold aesthetic direction, refined typography, cohesive color, and intentional motion—to create production-grade interfaces at any scale.

Related Skills

Explore More Design & Creative Skills→
kazdenckazdenc
42

design-brief

Explore codebases and ask user-centric questions to synthesize design context.

Community
Intermediate
keremtoker468-dotcomkeremtoker468-dotcom

web-ui-review

Audit web interfaces for accessibility, performance, and code quality.

Community
Advanced
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic