skills.rest
Jaylaelike
JaylaelikeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces across React, HTML/CSS, and layouts from user prompts.

Updated Sep 6, 2024
Search Tags:#typography#design#React#frontend#UI#CSS#aesthetics
One-click install
npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill frontend-design-jaylaelike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Jaylaelike/pm25-interactive-thaipbs-app/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill frontend-design-jaylaelike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams transform vague frontend requests into distinctive, production-grade interfaces and UI code that stand out from generic AI aesthetics.

Core Features & Use Cases

  • Bold aesthetic direction and a cohesive design system that translates to production-ready code.
  • End-to-end UI implementation guidance including components, pages, dashboards, and layouts across React/HTML/CSS.
  • Design critique and refinement workflow to ensure typography, color systems, accessibility, and performance.

Quick Start

Design a bold, responsive React component with accessible typography and a cohesive CSS variable system.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design production-grade frontend interfaces from a vague prompt?▼

To design production-grade frontend interfaces from a vague prompt, this Skill translates your requests into distinctive UI code, covering components, pages, and dashboards across React or HTML/CSS with cohesive design systems.

What's the best way to build a bold aesthetic direction and typography system in React?▼

Building a bold aesthetic direction and typography system in React involves enforcing cohesive color systems, accessible design, and concrete CSS variable implementation to transform generic AI aesthetics into production-ready code.

Can I use this to create responsive dashboards and framework-agnostic layouts?▼

Yes, you can create responsive dashboards and framework-agnostic layouts. The Skill provides end-to-end UI implementation guidance for responsive layouts across React, HTML/CSS, or framework-agnostic setups.

Does this workflow include design critique and refinement for accessibility and performance?▼

Yes, the workflow includes design critique and refinement to ensure your frontend interface meets accessibility, typography, color system, and performance constraints before finalizing the UI implementation.

Why does my AI-generated frontend UI look generic and lack a cohesive design system?▼

AI-generated frontend UI looks generic when it lacks a bold aesthetic direction and coherent CSS variable system. This Skill solves that by guiding concrete implementation details for distinctive, production-grade interfaces.

How to generate accessible React components with a cohesive CSS variable system?▼

To generate accessible React components with a cohesive CSS variable system, the Skill applies a design critique workflow that enforces typography, color systems, motion, and accessibility constraints into your implementation.

Related Skills

Explore More Design & Creative Skills→
SatangThevalueSatangThevalue

popular-web-designs

Catalog 54 real-world design systems as HTML/CSS templates.

Community
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
juanelojgajuanelojga

quieter

Refine bold UI designs with calmer color, typography, and motion alternatives.

Community
Intermediate
paradox123paradox123

frontend-design

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

Community
Advanced