design-style

Apply brand design systems to UI projects by reading DESIGN.md guidelines.

Updated Mar 23, 2026

Search Tags:#ui-design #design-system #design-guidelines #design-token #design-style #brand-style

Ready to run

npx skills add https://github.com/binfen1/my-skills --skill design-style-binfen1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-style
Source: https://github.com/binfen1/my-skills/tree/main/claude-code/design-style
Command: npx skills add https://github.com/binfen1/my-skills --skill design-style-binfen1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the process of achieving visual consistency across UI projects by reusing established design guidelines from 58 popular brands.

Core Features & Use Cases

Brand-driven styling: Apply color, typography, and component guidelines from a selected brand design system to your UI.
Design index navigation: Read references/design_index.md to explore and pick the most suitable design style.
Code generation options: Produce design tokens, CSS variables, Tailwind configurations, or ready-made React/Vue components that align with the chosen brand.

Quick Start

Specify the target UI component and brand, then apply the corresponding design system.

Frequently Asked Questions about design-style

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

FAQPage Schema

How do I apply a brand design system to my web or mobile UI?▼

To apply a brand design system to your UI, specify the target component and brand. The Skill reads established DESIGN.md guidelines to output matching design tokens, CSS, or component code.

Can I generate Tailwind configurations and React components from brand design guidelines?▼

Yes, you can generate Tailwind configurations, CSS variables, design tokens, and ready-made React or Vue components that align with your chosen brand's design guidelines.

What is the best way to ensure visual consistency across multiple UI projects?▼

The best way to ensure visual consistency is to reuse established design guidelines from popular brands, streamlining the process of achieving unified visuals across web and mobile UI projects.

How do I select a suitable design style for my UI project?▼

To select a suitable design style, read the references/design_index.md file to explore available options and pick the most appropriate brand design system for your UI project.

Does this work for both web and mobile UI design?▼

Yes, this works for both web and mobile UI design when designers need to reference a specific brand style or apply an established design system to their visual components.