skills.rest
zhuxining
zhuxiningCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React and HTML/CSS frontend interfaces with design tokens and accessibility considerations.

Updated Jan 21, 2026
Search Tags:#design#React#frontend#UI#CSS#aesthetics#design-system
One-click install
npx skills add https://github.com/zhuxining/skills --skill frontend-design-zhuxining
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/zhuxining/skills/tree/main/frontend-design
Command: npx skills add https://github.com/zhuxining/skills --skill frontend-design-zhuxining

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often struggle to translate briefs into production-grade frontend code with cohesive aesthetics and reliable UI patterns. This Skill provides a structured approach to deliver distinctive, ready-to-run frontend interfaces that align with brand and usability goals.

Core Features & Use Cases

  • Design system & typography: Establishes a coherent visual system with tokens, fonts, colors, and spacing.
  • Component & page scaffolding: Generates reusable React components, HTML/CSS layouts, and page structures ready for integration.
  • Aesthetic direction & polish: Applies a bold, intentional aesthetic direction (color, motion, typography) across the UI for memorable experiences.
  • Use Case: Build a marketing dashboard, product landing page, or admin panel with production-grade quality.

Quick Start

Design and implement a bold React dashboard with polished CSS for a marketing analytics app.

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-grade React components with a cohesive design system?▼

Generate production-grade React components by establishing a coherent visual system with design tokens, fonts, colors, and spacing. This produces reusable components, HTML/CSS layouts, and clear aesthetic direction for immediate integration into your application.

What is the best way to build a bold UI for a marketing dashboard?▼

Build a bold UI for a marketing dashboard by applying an intentional aesthetic direction across color, motion, and typography. This creates memorable, production-grade frontend interfaces with cohesive visual systems and reliable UI patterns aligned with usability goals.

Can I use plain HTML and CSS instead of React for frontend design scaffolding?▼

Yes, you can use plain HTML and CSS for frontend design scaffolding. The process supports building components, pages, and full applications across React, HTML/CSS, or other modern stacks, producing working code artifacts and design guidelines.

Does generating frontend interfaces include accessibility considerations?▼

Generating frontend interfaces includes accessibility considerations directly in the output. Alongside working code artifacts and design tokens, the process delivers accessibility guidance to ensure the cohesive visual system meets usability goals.

How do I translate design briefs into working frontend code?▼

Translate design briefs into working frontend code by automating the creation of distinctive interfaces from user requirements. This structured approach delivers ready-to-run code aligned with brand and usability goals, replacing manual UI pattern coding.

Related Skills

Explore More Design & Creative Skills→
Adelie-SquadAdelie-Squad
17

Brand Marketer Agent

Generate brand strategy, naming, tone, and visual guidelines from business inputs.

Official
Advanced
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
garfield-bbgarfield-bb
27

hap-frontend-project

Fetch HAP data via API V3 and render it live in a frontend project.

Community
Advanced
paradox123paradox123

frontend-design

Generate production-grade frontend interfaces with bold aesthetic and strict design constraints.

Community
Advanced