skills.rest
xu-mengnan
xu-mengnanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide creation of distinctive web interfaces with custom typography and cohesive color themes.

Updated Nov 9, 2025
Search Tags:#react#vue#ui-design#landing-pages#frontend-design#dashboard-design#web-aesthetics
One-click install
npx skills add https://github.com/xu-mengnan/bilibili --skill frontend-design-xu-mengnan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/xu-mengnan/bilibili/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/xu-mengnan/bilibili --skill frontend-design-xu-mengnan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Most AI-generated frontend interfaces have generic, indistinguishable aesthetics: overused fonts, cliched color schemes, and predictable layouts that fail to stand out or align with a project's unique context. This Skill eliminates that problem by guiding you to create intentionally designed, memorable frontend interfaces that feel custom-built for their purpose and audience.

Core Features & Use Cases

  • Intentional Design Thinking: Guides you to define a bold, context-specific aesthetic direction (e.g., brutalist, retro-futuristic, luxury refined) aligned with your project's goals and target users.
  • Comprehensive Aesthetics Guidelines: Provides detailed rules for typography, color themes, motion design, spatial composition, and visual details to avoid generic AI design tropes.
  • Cross-Scenario Support: Works for any web UI project, including React components, Vue apps, plain HTML/CSS layouts, landing pages, dashboards, and full web applications.

Quick Start

Use the frontend-design skill to build a unique, polished landing page for your new sustainable fashion brand with an organic, natural aesthetic and custom scroll animations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated frontend interfaces look less generic and indistinguishable?▼

To make AI-generated frontend interfaces less generic, apply intentional aesthetic directions like brutalist or luxury refined, using custom typography, cohesive color themes, and unique spatial composition to avoid overused design tropes.

Can I use this approach to build landing pages and dashboard designs in React and Vue?▼

Yes, you can build landing pages and dashboard designs in React, Vue, or plain HTML/CSS/JS. The approach supports cross-scenario web UI projects by providing comprehensive rules for motion design and visual details across these frameworks.

What is the best way to define a bold aesthetic direction for a new web application?▼

The best way to define a bold aesthetic direction for a web application is aligning context-specific styles with project goals and target users, establishing comprehensive guidelines for typography, color themes, and motion design before building components.

Does this frontend design method work with plain HTML and CSS or do I need a specific framework?▼

This frontend design method works with plain HTML, CSS, and JavaScript without requiring a specific framework. It applies cross-scenario support to guide styled web UI creation, including full web applications and individual web components.

Why do my AI-generated web components have predictable layouts and cliched color schemes?▼

AI-generated web components have predictable layouts and cliched color schemes due to overused fonts and default generation tropes. You can eliminate this by applying intentional design thinking with custom typography and cohesive color themes.

How do I add unique scroll animations and organic aesthetics to a sustainable fashion landing page?▼

To add unique scroll animations and organic aesthetics to a sustainable fashion landing page, define an intentional aesthetic direction with custom motion design rules and cohesive color themes, ensuring the web UI feels custom-built for its audience.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
kollaboraikollaborai
1

frontend-design

Guide creation of distinctive frontend interfaces with custom typography and motion design.

Community
Intermediate
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic
SeifBenayedSeifBenayed
114

frontend-design

Generate distinctive frontend interfaces with intentional typography and cohesive color themes.

Community
Intermediate