skills.rest
XCmiaow
XCmiaowCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translates web UI requirements into distinctive, production-grade HTML/CSS/JS frontend code.

Updated May 5, 2026
Search Tags:#typography#frontend#react#ui design#micro-interactions#visual composition#html css
One-click install
npx skills add https://github.com/XCmiaow/cc-deploy --skill frontend-design-xcmiaow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/XCmiaow/cc-deploy/tree/main/skills/frontend-design
Command: npx skills add https://github.com/XCmiaow/cc-deploy --skill frontend-design-xcmiaow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you turn frontend requirements into distinctive, production-grade interfaces that look intentionally designed rather than generic.

Core Features & Use Cases

  • Bold design direction: Chooses a clear aesthetic “lane” (e.g., editorial, luxury, brutalist, retro-futuristic) before implementation to ensure coherence.
  • Production-quality UI code: Generates functional HTML/CSS/JS (or framework code) with refined typography, spacing, composition, and micro-interactions.
  • Anti-generic aesthetics: Avoids common AI-look patterns (overused fonts, predictable layouts, cliché purple gradients), using cohesive themes, textures, and purposeful motion.

Use case examples: build a landing page, design a dashboard, create a React/Vue component library’s visual system, or style/beautify an existing UI with a memorable aesthetic.

Quick Start

Ask for a production-ready React page with a bold editorial/magazine aesthetic, including distinctive typography, cohesive colors using CSS variables, subtle motion, and a polished responsive layout.

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 web UI that avoids generic AI aesthetics?▼

To build web UI that avoids generic AI aesthetics, choose a clear design direction like editorial or brutalist before implementation. This ensures refined typography, cohesive color systems, and purposeful motion instead of cookie-cutter styling.

How do I generate production-ready React components with distinctive typography?▼

Generate production-ready React components with distinctive typography by applying a cohesive visual theme using CSS variables. Define intentional spacing, font pairings, and refined micro-interactions to achieve a polished, memorable aesthetic.

What is the best way to style a dashboard without using cliché purple gradients?▼

The best way to style a dashboard without cliché purple gradients is to select a bold aesthetic lane like retro-futurism. Translate this direction into functional HTML/CSS/JS with cohesive textures and purposeful layout composition.

Can I use this approach to create a visual system for an existing HTML CSS interface?▼

Yes, you can apply this approach to existing HTML CSS interfaces. It translates web UI requirements into visually refined code, beautifying current components by applying a cohesive design direction, refined typography, and subtle motion.

Does frontend UI design require a specific framework to implement micro-interactions?▼

Frontend UI design does not require a specific framework for micro-interactions. You can implement production-ready interfaces using standard HTML/CSS/JS or a frontend framework like React, depending on your project requirements.

Why does my generated web component layout look predictable and poorly composed?▼

Your generated web component layout looks predictable because it lacks an intentional design direction. Establishing a clear aesthetic lane ensures cohesive visual composition, refined spacing, and distinctive micro-interactions instead of generic patterns.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
OneWave-AIOneWave-AI
245

screenshot-to-code

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

Official
Advanced
christofferbergjchristofferbergj
5

frontend-design

Translate vague frontend briefs into distinctive UI components for React, Vue, or HTML/CSS/JS.

Community
Advanced
outcomeengineeringoutcomeengineering
1

designing-frontend

Design and build distinctive frontend web interfaces with bold aesthetics.

Official
Advanced