skills.rest
docaohieu2808
docaohieu2808COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

1|Updated Mar 9, 2026
Search Tags:#consistency#design system#brand guidelines#shadcn/ui#tailwind#tokens#ui styling
One-click install
npx skills add https://github.com/docaohieu2808/claude-skills --skill design-docaohieu2808
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/docaohieu2808/claude-skills/tree/main/design
Command: npx skills add https://github.com/docaohieu2808/claude-skills --skill design-docaohieu2808

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines design workflows by providing a unified approach to brand identity, design system tokens, and UI implementation, ensuring visual consistency and efficient development.

Core Features & Use Cases

  • Brand Consistency: Manages brand guidelines, including logos, colors, and voice.
  • Design System Management: Defines and enforces token architecture (primitives, semantics, components).
  • UI Implementation: Facilitates the creation of user interfaces using tools like Tailwind CSS and shadcn/ui.
  • Use Case: When starting a new project, use this skill to establish brand identity, define design tokens, and set up the UI component library, ensuring a cohesive and scalable design from the outset.

Quick Start

Use the design skill to set up a new project's design system, starting with brand guidelines.

Frequently Asked Questions about design

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

FAQPage Schema
How do I set up a design system for a new project using Tailwind and shadcn/ui?▼

To set up a design system for a new project, establish brand guidelines, define token architecture across primitives and semantics, and implement UI components using Tailwind and shadcn/ui to ensure visual consistency.

What is design system tokenization and how does it manage brand consistency?▼

Design system tokenization manages brand consistency by defining a structured token architecture that translates brand guidelines into primitives, semantics, and component-level styling tokens for unified UI implementation.

How do I audit visual consistency across existing UI components?▼

Auditing visual consistency involves evaluating current UI components against established brand guidelines and semantic design tokens to identify deviations and enforce a unified design system architecture.

Can I use this approach to manage brand guidelines without an existing token architecture?▼

Yes, you can manage brand guidelines without an existing token architecture by starting with brand identity setup to define logos, colors, and voice, then generating the corresponding design tokens.

What is the best way to structure design tokens for scalable UI styling?▼

The best way to structure design tokens for scalable UI styling is to divide them into a three-tier architecture consisting of primitive tokens, semantic tokens, and component-specific tokens.

Related Skills

Explore More Design & Creative Skills→
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
thienty1207thienty1207

ui-styling

Standardize UI components and styling in Next.js projects using Tailwind CSS v4 and shadcn/ui.

Community
Advanced
NammDevNammDev
2

design

Coordinate brand guidelines, design tokens, and UI styling across design sub-skills.

Community
Intermediate
bipinksbipinks
3

design-systems

Create token-based design systems with CSS variables and theming.

Community
Advanced