skills.rest
liangmiQwQ
liangmiQwQCOMMUNITY
Explore all skills by this author β†’
Website𝕏@liangmiQwQGitHub

frontend-design

Create production-grade frontend interfaces with design-system-based typography, color, spacing, and accessibility.

Updated Apr 12, 2026
Search Tags:#typography#ui#react#aesthetics#design-systems#frontend-design
One-click install
npx skills add https://github.com/liangmiQwQ/skills --skill frontend-design-liangmiqwq
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/liangmiQwQ/skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/liangmiQwQ/skills --skill frontend-design-liangmiqwq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams avoid generic AI aesthetics and deliver polished, production-grade frontend interfaces with a strong design language.

Core Features & Use Cases

  • Production-grade HTML/CSS/JS implementations (and framework-agnostic patterns) aligned to a bold aesthetic direction.
  • Cohesive design systems: typography, color, spacing, motion and accessibility guidelines for consistent UI.
  • Use Case: Convert a product brief into a ready-to-ship frontend component or page with clear visual identity.

Quick Start

Implement a production-grade frontend component following a bold aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI aesthetics in frontend design?β–Ό

To avoid generic AI aesthetics in frontend design, enforce a workflow utilizing typography, color, spacing, and bold visual direction. This process yields distinctive, production-grade interfaces with a cohesive design language rather than generic outputs.

Can I use this to build a production-grade React UI component?β–Ό

Yes, you can generate production-grade React UI components. It provides framework-agnostic patterns and HTML/CSS/JS implementations aligned to a bold aesthetic direction, yielding ready-to-ship components with clear visual identity.

What's the best way to convert a product brief into a frontend landing page?β–Ό

The best way to convert a product brief into a frontend landing page is by applying cohesive design systems. This defines typography, color, spacing, motion, and accessibility guidelines, producing a ready-to-ship page with clear visual identity.

Does this frontend design workflow include accessibility and responsiveness guidelines?β–Ό

Yes, the frontend design workflow includes accessibility and responsiveness guidelines. It enforces a design-system-based approach integrating typography, color, spacing, and motion to deliver consistent, accessible UI across brands and products.

How do I establish a cohesive design system for a website dashboard?β–Ό

To establish a cohesive design system for a website dashboard, define typography, color, spacing, motion, and accessibility guidelines. This workflow produces consistent UI components and enforces a bold visual direction across the dashboard.

Related Skills

Explore More Design & Creative Skills→
2389-research2389-research
90

landing-page-design

Generate landing-page concepts with brand context and design briefs.

Official
Advanced
iamjpsinghiamjpsingh

fullstack-design

Integrate a Django backend with a React/TypeScript frontend using a service-layer pattern.

Community
Advanced
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
RussianRoulette84RussianRoulette84
1

frontend-design

Generates production-grade frontend interfaces with typography, color, motion, and accessibility guidance.

Community
Advanced