skills.rest
Shaarav4795
Shaarav4795COMMUNITY
Explore all skills by this author →
GitHub

frontend-design-system

Generate a frontend design system with tokens, typography, layout, motion, and accessibility checks.

Updated Mar 25, 2026
Search Tags:#typography#accessibility#frontend#motion#design-tokens#ui-design-system
One-click install
npx skills add https://github.com/Shaarav4795/ScholarFlow --skill frontend-design-system-shaarav4795
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-system
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/frontend-design-system
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill frontend-design-system-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured design system blueprint to unify frontend UI design across products, reducing design drift and development overhead.

Core Features & Use Cases

  • Token-driven design: colors, typography, spacing, radii, and shadows to ensure a consistent visual language
  • Accessibility integration: contrast checks, keyboard navigation, and semantic structure guidance
  • Reusable components: layout rules and patterns for scalable dashboards, apps, and marketing sites
  • Use Case: teams can generate a cohesive design system ready for handoff to design and engineering, accelerating delivery.

Quick Start

Generate a production-grade UI design system for a given product brief by applying tokens, typography scales, layout rules, motion guidance, and accessibility checks.

Frequently Asked Questions about frontend-design-system

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

FAQPage Schema
How do I generate a frontend design system from a product brief?▼

To generate a frontend design system, input your product brief to produce token-driven rules for typography, spacing, and color, alongside layout patterns and accessibility checks for immediate engineering handoff.

What is a design token system and how does it unify UI design?▼

A design token system centralizes visual attributes like colors, typography scales, radii, and shadows into reusable variables, ensuring a consistent visual language and reducing design drift across products.

Can I use this to add accessibility checks to my UI design system?▼

Yes, you can integrate accessibility checks directly into your UI design system, applying guidance for contrast validation, keyboard navigation, and semantic structure to meet compliance standards.

Does this design system generator work for scalable dashboards and marketing sites?▼

This design system generator applies reusable layout rules and component patterns suitable for building scalable dashboards, applications, and marketing sites with consistent motion guidance.

What's the best way to standardize typography scales and motion guidance for development handoff?▼

Standardize typography scales and motion guidance by generating a structured design system blueprint that defines tokens and layout rules, accelerating cohesive delivery to engineering teams.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

illustration-style

Define unified illustration style rules for product communication assets.

Official
Intermediate
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
Fantasia1999Fantasia1999

ui-design-system

Generate design tokens and export them as CSS variables.

Community
Advanced