frontend-design

Create production-grade frontend interfaces with defined aesthetic direction.

5|Updated Feb 4, 2026

Search Tags:#typography #design #accessibility #frontend #aesthetics #responsive-design #ui-components

Ready to run

npx skills add https://github.com/szeyu/open-ssyok-finance --skill frontend-design-szeyu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/szeyu/open-ssyok-finance/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/szeyu/open-ssyok-finance --skill frontend-design-szeyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement at scale; this skill guides crafting polished UIs with a clear aesthetic direction.

Core Features & Use Cases

Aesthetic-led design: Develop visually striking interfaces with a strong point of view and accessible typography.
End-to-end delivery: Produce code-ready components, layouts, and pages across frameworks (React, Vue, HTML/CSS/JS).
Use Case: Create a landing page, dashboard, or component library that stands out and meets accessibility guidelines.

Quick Start

Describe your frontend requirements (framework, pages or components, and aesthetic direction) and I'll produce production-grade, ready-to-ship code.

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 production-grade frontend UI that meets accessibility guidelines?▼

Building production-grade frontend UI requires defining an aesthetic direction, accessible typography, color systems, and responsive behavior to generate ready-to-ship components. You receive end-to-end design-to-code workflows across HTML/CSS/JS or modern frameworks like React and Vue.

What's the best way to create a distinctive landing page with a strong aesthetic direction?▼

Creating a distinctive landing page involves specifying your aesthetic requirements and framework to produce visually striking, code-ready interfaces. You get production-grade layouts with a clear design point of view and accessible typography that stand out immediately.

Can I generate responsive UI components for React or Vue using this approach?▼

Yes, you can generate responsive UI components for React or Vue by specifying your framework and component requirements. This approach produces code-ready, ready-to-deploy components with defined responsive behavior and accessible typography across modern frameworks.

How do I design a dashboard interface that is both visually striking and accessible?▼

Designing a visually striking, accessible dashboard requires defining your color systems, typography, and layout requirements to produce production-grade code. You receive ready-to-ship dashboard pages with strong aesthetic direction that meet accessibility guidelines.

Does this approach work for building an entire component library from scratch?▼

Yes, this approach works for building an entire component library by defining your aesthetic direction, framework, and component specifications. You receive production-grade, ready-to-deploy components with consistent color systems, typography, and responsive behavior across your library.

Why does my frontend design lack a clear aesthetic direction and accessible typography?▼

Frontend design lacks a clear aesthetic direction and accessible typography when color systems and responsive behavior are not systematically defined. Defining these requirements upfront produces distinctive, production-grade interfaces with a strong point of view that meets accessibility guidelines.