skills.rest
PouriaRouzrokh
PouriaRouzrokhCOMMUNITY
Explore all skills by this author →
Website𝕏@PRouzrokhGitHub

frontend-design

Define and implement production-grade frontend interfaces with typography, color tokens, spacing, and accessibility.

Updated Jan 27, 2026
Search Tags:#typography#ui#accessibility#frontend#design-system#color-tokens
One-click install
npx skills add https://github.com/PouriaRouzrokh/pr-claude-plugins --skill frontend-design-pouriarouzrokh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/PouriaRouzrokh/pr-claude-plugins/tree/main/pr/skills/frontend-design
Command: npx skills add https://github.com/PouriaRouzrokh/pr-claude-plugins --skill frontend-design-pouriarouzrokh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics and deliver polished, usable code.

Core Features & Use Cases

  • Define bold visual direction and translate it into web components, pages, artifacts, posters, or applications.
  • Align designs with a design system including typography, color tokens, spacing, and accessibility considerations.
  • Produce production-ready code that is cohesive with a clear aesthetic point of view and meticulous design details.

Quick Start

Design a bold, distinctive frontend interface by selecting an aesthetic direction and generating a ready-to-run UI scaffold.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create distinctive frontend interfaces that avoid generic AI aesthetics?▼

To create distinctive frontend interfaces, define a bold visual direction and translate it into web components using structured design systems. Apply specific typography, color tokens, and spacing rules to deliver polished, production-grade UI assets with a cohesive aesthetic point of view.

What is the best way to build production-ready UI components with proper accessibility?▼

Building production-ready UI components with accessibility requires applying design-system-driven guidance. Define color tokens, implement proper typography, and calculate spacing meticulously to ensure the final frontend assets are both polished and accessible.

Can I use design system tokens to generate a complete web page scaffold?▼

Yes, you can use design system tokens to generate a complete web page scaffold. By selecting an aesthetic direction, the system translates typography, spacing, and color tokens into ready-to-run UI scaffolds for web pages, posters, or applications.

How do I apply typography and color tokens to ensure cohesive frontend design?▼

Applying typography and color tokens ensures cohesive frontend design by standardizing visual elements across components. Aligning these tokens with a clear aesthetic direction delivers meticulous design details and maintains consistency across all generated UI assets.

Does this approach work for designing both web pages and digital posters?▼

Yes, this approach works for designing both web pages and digital posters. The method translates a bold visual direction into various frontend artifacts, including web components, pages, applications, and posters, using consistent design system principles.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
muhammadwaheedairimuhammadwaheedairi

frontend-design

Design production-ready frontend interfaces with HTML, CSS, and JavaScript.

Community
Intermediate
angelgarciasolorzanoangelgarciasolorzano

shadcn

Generate design system guidelines for Shadcn UI components with WCAG 2.2 AA compliance.

Community
Advanced
SirPedrSirPedr

bencium-innovative-ux-designer

Design distinctive frontend interfaces with unique visual expression and production-grade code.

Community
Advanced