frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Updated Dec 26, 2025

Search Tags:#typescript #accessibility #tailwind #design-system #ui-components #design-tokens #frontend-design

Ready to run

npx skills add https://github.com/yutaoshao/agent-skills --skill frontend-design-yutaoshao

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yutaoshao/agent-skills/tree/main/glm-skills/frontend-design
Command: npx skills add https://github.com/yutaoshao/agent-skills --skill frontend-design-yutaoshao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing consistent, accessible UIs from vague briefs is time-consuming and error-prone. This skill provides a token-first methodology to turn concepts into production-ready design systems, ensuring scalable tokens, components, and templates.

Core Features & Use Cases

Token-driven design: Define semantic tokens (colors, typography, spacing) and derive all visuals from a single source of truth.
Production-ready components: Generate accessible, responsive UI primitives (buttons, inputs, cards, modals) with consistent states.
Framework-agnostic templates: Output TypeScript types, CSS variables, and Tailwind-ready configs for React, Vue, Svelte, or vanilla HTML.

Quick Start

Create a UI brief and let the system output a token-based design system ready for integration.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I convert a UI brief into a production-ready design system?▼

To convert a UI brief into a production-ready design system, you define semantic tokens for colors, typography, and spacing, then derive scalable visual assets and responsive components from this single source of truth.

Can I generate Tailwind-compatible design tokens for React and Vue?▼

Yes, you can generate Tailwind-compatible design tokens for React and Vue. The skill outputs CSS variables, Tailwind-ready configs, and TypeScript types to ensure framework-agnostic integration across your web stack.

What is token-driven frontend design and when do I need it?▼

Token-driven frontend design is a methodology that establishes a single source of truth for visual properties like colors and spacing. You need it to ensure scalable, consistent UIs across web apps, dashboards, and component libraries.

Does this approach output accessible and responsive UI components?▼

Yes, this approach outputs accessible and responsive UI components. It generates production-ready UI primitives like buttons, inputs, and modals with consistent states and built-in accessibility behavior.

What is the best way to build a scalable component library from scratch?▼

The best way to build a scalable component library is using a token-first methodology. This ensures all visual primitives and templates derive consistently from semantic design tokens, reducing errors from vague briefs.

Do I need TypeScript to use this frontend design methodology?▼

You do not need TypeScript exclusively, as the methodology outputs framework-agnostic templates for vanilla HTML too. However, it generates TypeScript types to provide type safety for React, Vue, and Svelte stacks.