Ui design system

Skill bg-szy/TOP-SKILLS/skills/marketplace/ui-design-system

全球最大的 Claude Code 技能聚合库 · 收录 3900+ 来自 12+ 来源的技能，提供在线搜索与趋势分析看板 / The world's largest Claude Code skill aggregation hub — 3900+ skills from 12+ sources with online search and trend dashboard

Install

npx -y skills add bg-szy/TOP-SKILLS --skill ui-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

The Design System, Theme, and UX rules for the Physical AI Hub.

SKILL.md

1.4 KB, as published. Nobody here has run it

UI Design System & Theme

Core Philosophy

Aesthetic: Premium, Modern, "Physical AI" (Dark, Sleek, Futuristic).
Feel: Smooth, Responsive, High-End.

Typography

Font: Poppins (Geometric Sans-Serif).
Weights: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold).
Usage: Clean, legible, widely spaced.

Color Palette (Dark Mode - Primary)

Background: linear-gradient(135deg, #1a1f28 0%, #161b23 50%, #0f1419 100%)
Primary Accent: #2d7d6c (Teal/Greenish) used in buttons and highlights.
Text: #ededed (Off-white for readability).
Borders: Subtle, often rgba(255, 255, 255, 0.1).

Components

Buttons: Rounded corners, smooth hover transitions, subtle shadows.
Cards: Glassmorphism effect (blur + transparency), rounded corners (12px or 16px).
Inputs: Rounded (24px), borderless or subtle border, focus rings.
Dropdowns: Floating, animated slide-in, shadow depth.

Animations

Transitions: all 0.2s ease or cubic-bezier for premium feel.
Keyframes: fadeIn, slideIn, dropdownSlideIn.

CSS Structure

Global: app/globals.css (Tailwind + Variables).
Docusaurus: textbook/src/css/custom.css (Overrides).
Modules: styles.module.css for complex components (like Chatbot, Dropdown).