skills.rest
yibozhong
yibozhongCOMMUNITY
Explore all skills by this author →
𝕏@tmux_1GitHub

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS or React/Vue components.

Updated Apr 6, 2026
Search Tags:#design#ui#frontend#react#css#components#aesthetics
One-click install
npx skills add https://github.com/yibozhong/skills --skill frontend-design-yibozhong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yibozhong/skills/tree/main/frontend-design
Command: npx skills add https://github.com/yibozhong/skills --skill frontend-design-yibozhong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Replaces generic, uninspired UI work by guiding the creation of distinctive, production-grade frontend interfaces with deliberate aesthetics and polished code.

Core Features & Use Cases

  • Aesthetic-led design: defines a bold conceptual direction (typography, color, motion) and translates it into actual UI components.
  • Production-grade implementation: delivers ready-to-use HTML/CSS/JS or framework-based components (React/Vue) with accessibility and performance considerations.
  • Use Case: build a brand-aligned dashboard, marketing site, or component library that stands out from templated AI-generated designs.

Quick Start

Implement a complete frontend design spec and starter code for a target interface.

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 distinctive frontend interface that avoids generic UI templates?▼

Production-grade frontend interfaces ensure accessibility, performance, and maintainability by implementing semantic HTML, optimized CSS, and efficient JavaScript within framework components. This approach guarantees web pages meet technical standards while maintaining bold aesthetic direction.

Can I generate reusable design tokens for a React component library?▼

To create a brand-aligned dashboard, establish a bold conceptual aesthetic direction and translate it into actual UI components with reusable design tokens. This ensures the dashboard stands out from templated designs while meeting accessibility and performance requirements.

Does this approach work with both HTML/CSS/JS and framework implementations like React?▼

Yes, this approach works with both HTML/CSS/JS and framework implementations like React or Vue. It delivers ready-to-use components with accessibility and performance considerations, ensuring your web pages, dashboards, or full applications maintain a distinctive aesthetic.

What's the best way to replace templated AI-generated frontend designs?▼

The best way to replace templated AI-generated frontend designs is to apply deliberate aesthetics with polished code, creating distinctive, production-grade frontend interfaces. This involves defining a bold conceptual direction for typography, color, and motion, then translating it into reusable UI components.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
kuse-aikuse-ai
6

ui-component-builder

Build reusable UI components for React, Vue, and vanilla JavaScript.

Official
Basic
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
GoBeromsuGoBeromsu

frontend-design

Designs production-grade frontend interfaces from a bold aesthetic direction into HTML/CSS/JS and design tokens.

Community
Advanced