skills.rest
XIYBHK
XIYBHKCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design 前端设计

Generate HTML/CSS/JS prototypes with typography, color tokens, and accessibility guidance.

1|Updated Jan 15, 2026
Search Tags:#design#ui#frontend#prototype#guidelines#aesthetics
One-click install
npx skills add https://github.com/XIYBHK/claude-skills --skill frontend-design-xiybhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design 前端设计
Source: https://github.com/XIYBHK/claude-skills/tree/main/frontend-design
Command: npx skills add https://github.com/XIYBHK/claude-skills --skill frontend-design-xiybhk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate abstract requirements into visually compelling, production-grade interfaces that balance aesthetics and usability.

Core Features & Use Cases

  • Design thinking guidance to establish a bold, distinctive visual direction for web interfaces.
  • Guidelines for typography, color, motion, layout, and spatial composition to craft memorable, accessible UIs.
  • Quick-start workflow to generate a ready-to-implement frontend prototype from user requirements across websites, dashboards, landing pages, or component libraries.

Quick Start

Provide a bold, production-grade frontend design plan and deliver a working HTML/CSS/JS prototype that matches the requested 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 generate a production-grade UI prototype from abstract web design requirements?▼

To generate a production-grade UI prototype, you translate abstract requirements into a distinctive visual direction using design thinking, then output working HTML/CSS/JS assets alongside typography and color token rules.

What is the best way to establish a bold visual identity for a frontend dashboard?▼

The best way to establish a bold visual identity for a frontend dashboard is to apply guidelines for typography, color, motion, and spatial composition, ensuring the interface is both memorable and accessible.

Can I use this approach to build component libraries across different frameworks?▼

Yes, you can build component libraries across different frameworks by generating framework-agnostic UI concepts, layout guidance, and accessibility considerations that maintain a strong visual identity.

How do I create accessible color tokens and typography rules for a landing page?▼

You create accessible color tokens and typography rules by following established design guidelines that balance aesthetics and usability, ensuring the landing page maintains a distinctive aesthetic without sacrificing accessibility.

What design guidelines are needed to craft memorable interfaces for websites?▼

Crafting memorable interfaces for websites requires design guidelines covering typography, color, motion, layout, and spatial composition to balance visual aesthetics with practical usability and accessibility.

Related Skills

Explore More Design & Creative Skills→
guiledoguiledo

frontend-design

Design and implement distinctive frontend interfaces with polished interactions.

Community
Advanced
loadinglucianloadinglucian
1

frontend-design

Transform vague frontend requirements into production-ready HTML/CSS/JS components.

Community
Advanced
JetBrainsJetBrains
302

frontend-design

Plan and implement distinctive frontend interfaces for React, Vue, or HTML/CSS projects.

Official
Advanced
quranquran
1.9k

frontend-design

Translate bold aesthetics into production-grade HTML/CSS/JS or React UI components.

Official
Advanced