skills.rest
yuanyuekejiJN
yuanyuekejiJNCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generates production-grade HTML/CSS/JS or framework UI code with a specified aesthetic.

18|2|Updated Mar 14, 2026
Search Tags:#typography#frontend#ui design#web components#production code#aesthetic systems#motion ui
One-click install
npx skills add https://github.com/yuanyuekejiJN/AivoClaw --skill frontend-design-yuanyuekejijn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yuanyuekejiJN/AivoClaw/tree/main/extraSkills/frontend-design-3-0.1.0
Command: npx skills add https://github.com/yuanyuekejiJN/AivoClaw --skill frontend-design-yuanyuekejijn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create frontend interfaces that look genuinely high-quality and cohesive, instead of generic “AI slop,” by guiding both design intent and production-grade implementation details.

Core Features & Use Cases

  • Production-grade UI generation: Produces working HTML/CSS/JS or framework code for real web components, pages, or applications with refined visual execution.
  • Bold, intentional design direction: Forces a clear aesthetic concept (typography, color systems, layout composition, and motion) and then implements it precisely.
  • Anti-generic safeguards: Avoids overused fonts and predictable palettes/layout patterns, ensuring each output has an identifiable creative point-of-view.
  • Use case: Generate a landing page or product dashboard UI that feels uniquely branded (e.g., editorial magazine style or art-deco geometry), with accessible typography, consistent theming, and tasteful motion.

Quick Start

Use the frontend-design skill to design and implement a production-ready UI for your web app page that matches a specific bold aesthetic direction and includes working, polished code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready web UI that avoids generic AI aesthetics?▼

Generating production-ready web UI that avoids generic aesthetics requires defining a bold design direction with specific typography, color systems, and motion. This enforces cohesive visual execution and replaces predictable layouts.

What makes frontend UI design look like generic AI slop and how to prevent it?▼

Frontend UI design feels generic when relying on overused fonts and predictable palettes. Prevent this by applying anti-pattern avoidance rules to enforce an identifiable creative point-of-view across layout, typography, and motion.

Can I use this approach to create working HTML, CSS, and JS code for a specific theme?▼

Yes, you can create working HTML, CSS, and JS code for a specific theme like editorial magazine or art-deco. It produces real web components and pages with accessible typography, consistent theming, and tasteful motion.

Do I need a predefined design direction to generate polished web components?▼

A predefined design direction is required to generate polished web components. It forces a clear aesthetic concept for typography and layout composition, ensuring the final output has an identifiable creative point-of-view.

What's the best way to build a product dashboard UI with cohesive typography and motion?▼

The best way to build a product dashboard UI with cohesive typography and motion is to implement a unified aesthetic system. This ensures accessible text, consistent theming, and tasteful animations across all application pages.

Related Skills

Explore More Design & Creative Skills→
gitcomit8gitcomit8
1

frontend-design

Design and implement distinctive frontend interfaces with custom typography and color palettes.

Community
Advanced
nghiahsgsnghiahsgs
32

frontend-design

Implement HTML/CSS/JS or framework components with a cohesive aesthetic direction.

Community
Advanced
juspayjuspay
47

frontend-design

Transform UI briefs into production-ready HTML/CSS/JS frontend interfaces.

Official
Advanced
jean-sotiljean-sotil

bolder

Amplify UI designs with stronger hierarchy, contrast, typography, and motion.

Community
Advanced