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.
The Design System, Theme, and UX rules for the Physical AI Hub.
Teams using ui-design-system should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
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
vpc-network-designer
Vpc Network Designer - Auto-activating skill for AWS Skills. Triggers on: vpc network designer, vpc network designer Part of the AWS Skills skill category.
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", or "brand experience". Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography. Trigger with 'top', 'design'.
analyzing-system-throughput
This skill enables Claude to analyze and optimize system throughput. It is triggered when the user requests throughput analysis, performance improvements, or bottleneck identification. The skill uses the `throughput-analyzer` plugin to assess request throughput, data throughput, concurrency limits, queue processing, and resource saturation. Use this skill when the user mentions "analyze throughput", "optimize performance", "identify bottlenecks", or asks about system capacity. It helps determine limiting factors and evaluate scaling strategies.
rest-endpoint-designer
Rest Endpoint Designer - Auto-activating skill for API Development. Triggers on: rest endpoint designer, rest endpoint designer Part of the API Development skill category.
reminder-system-creator
Reminder System Creator - Auto-activating skill for Business Automation. Triggers on: reminder system creator, reminder system creator Part of the Business Automation skill category.
building-recommendation-systems
This skill empowers Claude to construct recommendation systems using collaborative filtering, content-based filtering, or hybrid approaches. It analyzes user preferences, item features, and interaction data to generate personalized recommendations. Use this skill when the user requests to build a recommendation engine, needs help with collaborative filtering, wants to implement content-based filtering, or seeks to rank items based on relevance for a specific user or group of users. It is triggered by requests involving "recommendations", "collaborative filtering", "content-based filtering", "ranking items", or "building a recommender".
orchestrating-multi-agent-systems
Execute orchestrate multi-agent systems with handoffs, routing, and workflows across AI providers. Use when building complex AI systems requiring agent collaboration, task delegation, or workflow coordination. Trigger with phrases like "create multi-agent system", "orchestrate agents", or "coordinate agent workflows".
ios-hig-design
Build native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", or "HIG compliance". Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things. Trigger with 'ios', 'hig', 'design'.
dynamodb-table-designer
Dynamodb Table Designer - Auto-activating skill for AWS Skills. Triggers on: dynamodb table designer, dynamodb table designer Part of the AWS Skills skill category.
designing-database-schemas
Process use when you need to work with database schema design. This skill provides schema design and migrations with comprehensive guidance and automation. Trigger with phrases like "design schema", "create migration", or "model database".
design-sprint
Run a structured 5-day process to prototype, test, and validate product ideas with real users. Use when the user mentions "design sprint", "validate in a week", "rapid prototype", "test with users", or "de-risk before building". Covers mapping, sketching, deciding, prototyping, and testing. For ongoing experimentation, see lean-startup. For customer job analysis, see jobs-to-be-done. Trigger with 'design', 'sprint'.
design-everyday-things
Analyze and apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", or "fault tolerance". Covers the gulfs of execution and evaluation. For usability scoring, see ux-heuristics. For iOS-specific patterns, see ios-hig-design. Trigger with 'design', 'everyday', 'things'.