skills.rest
jieni777
jieni777COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Designs responsive, accessible frontend interfaces with cohesive typography, color, and motion.

1|Updated Jan 30, 2026
Search Tags:#typography#design#accessibility#frontend#aesthetics#ui-components#color-system
One-click install
npx skills add https://github.com/jieni777/opencode-config-backup --skill frontend-design-jieni777
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jieni777/opencode-config-backup/tree/main/skills/frontend-design
Command: npx skills add https://github.com/jieni777/opencode-config-backup --skill frontend-design-jieni777

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create production-grade frontend interfaces with distinctive aesthetics that avoid common AI-generated visuals, improving user perception and usability.

Core Features & Use Cases

  • Distinctive, production-grade frontend interfaces across HTML/CSS/JS or modern frameworks (React, Vue) with a cohesive design system.
  • Emphasis on typography, color systems, motion, and spatial composition to achieve a deliberate aesthetic direction.
  • Use cases include websites, dashboards, landing pages, and UI component libraries that are accessible, responsive, and visually polished.

Quick Start

Design and deliver a production-ready frontend component or page that embodies the selected 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 design frontend interfaces that avoid generic AI-generated visuals?▼

To design frontend interfaces that avoid generic AI-generated visuals, apply a cohesive design system emphasizing distinctive typography, deliberate color systems, and motion. This approach ensures production-grade aesthetics that improve user perception and usability.

What is the best way to build a cohesive UI component library with accessible typography?▼

The best way to build an accessible UI component library is to establish a consistent design system covering typography, color, and spatial composition. This ensures responsive, visually polished frontend components across your application.

Can I use this frontend design approach with modern frameworks like React and Vue?▼

Yes, you can apply this frontend design approach with modern frameworks like React and Vue. It supports delivering production-ready components and pages across HTML, CSS, JavaScript, and these frameworks while maintaining a deliberate aesthetic direction.

How do I create a responsive and accessible design system for a web dashboard?▼

To create a responsive and accessible design system for a web dashboard, implement deliberate aesthetic choices across typography, color schemes, and motion. This eliminates generic UI design and provides a distinctive, production-grade interface.

Does this approach work for designing landing pages with strong aesthetics?▼

Yes, this approach works for designing landing pages with strong aesthetics. It targets websites, dashboards, and component libraries by applying spatial composition and cohesive UI systems to deliver visually polished, production-ready results.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

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

Official
Advanced
yuribodoyuribodo
2

frontend-design

Generate production-ready React frontend interfaces with cohesive design systems.

Community
Basic
teegin-gteegin-g

bolder

Identify design weaknesses and propose bold, accessible improvements.

Community
Advanced
vuminhieuvuminhieu

frontend-design

Design production-grade frontend interfaces with cohesive typography, color, motion, and design tokens.

Community
Advanced