ui-design-system
The Design System, Theme, and UX rules for the Physical AI Hub.
Best use case
ui-design-system is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. The Design System, Theme, and UX rules for the Physical AI Hub.
The Design System, Theme, and UX rules for the Physical AI Hub.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "ui-design-system" skill to help with this workflow task. Context: The Design System, Theme, and UX rules for the Physical AI Hub.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-design-system/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-design-system Compares
| Feature / Agent | ui-design-system | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
The Design System, Theme, and UX rules for the Physical AI Hub.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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).
Related Skills
ui-design
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
design-exploration
新功能设计探索流程。当用户有模糊想法要做新功能/新模块时使用。通过"需求收敛 → 技术调研 → ASCII 批量探索 → HTML 设计稿 → 全状态覆盖 → 需求总结"的结构化流程，从模糊想法产出可交付的设计参考文档，作为 PRD 阶段的输入。
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
visual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
react-native-design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
python-design-patterns
Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use when making architecture decisions, refactoring code structure, or evaluating when abstractions are appropriate.
postgresql-table-design
Design a PostgreSQL-specific schema. Covers best-practices, data types, indexing, constraints, performance patterns, and advanced features
mobile-ios-design
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
mobile-android-design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
system-environment-setup
Configure development and production environments for consistent and reproducible setups. Use when setting up new projects, Docker environments, or development tooling. Handles Docker Compose, .env configuration, dev containers, and infrastructure as code.