trading-ui-design
CommunityProfessional UI design for trading dashboards
Design & Creative#ui-design#design-system#responsive-design#color-tokens#dark-theme#trading-ui#kline-chart
Authorzhu637882-stack
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Provide a cohesive design system and practical patterns for building finance-trading user interfaces, ensuring visual consistency, accessible contrast, and efficient collaboration across teams.
Core Features & Use Cases
- Dark-theme color tokens for backgrounds, surfaces, text, and semantic indicators (up/down, warning, info).
- Standardized UI components: cards, glass panels, data tables, and badges tailored for trading workflows.
- Layout and chart guidance for trading dashboards (three-column desktop layout, mobile stacking, K-line charts, order books, and depth panels).
Quick Start
Apply the design system tokens and component patterns to create a consistent trading UI for a new dashboard prototype.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: trading-ui-design Download link: https://github.com/zhu637882-stack/jiaoyi/archive/main.zip#trading-ui-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.