| name | gld_ue_template |
| description | Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specification documentation. |
| version | 1.0.0 |
| metadata | {"openclaw":{"emoji":"🎨","requires":{"bins":["node","npm"],"install":["npm install"]},"homepage":"https://github.com/your-org/gld_ue_template"}} |
gld_ue_template
Unified Design and Interaction Standard Template for EPC Management System.
This SKILL provides a complete React + Ant Design (JavaScript) project template and interactive specification documentation.
1. Design System Specifications
1.1 Color System
Primary Colors (主色)
- Primary Blue:
#3c83f8 (Brand color, active states, primary buttons)
- Blue Hover:
#5995f9
- Blue Active/Click:
#2b6bd9
- Blue Soft:
#ecf3ff (Backgrounds for active items)
Functional Colors (功能色)
- Success Green:
#46bc46 (Success states, positive metrics)
- Warning Orange:
#f7c03e (Warning states, medium risk)
- Danger Red:
#ef5f59 (Error states, high risk, negative metrics)
- Purple:
#a855f7 (Categorization, special items)
Neutral Colors (中性色)
- Page Background:
#E9F2FB
- Surface (Cards/Panels):
#ffffff
- Surface Soft:
#fafafa
- Line/Border:
#dfdfdf
- Line Soft:
#e5e5e5
- Text Main:
#262626
- Text Sub:
#595959
- Text Faint:
#8c8c8c
1.2 Typography System
Font Family
"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Font Sizes & Weights
- Base Size:
14px (Regular 400)
- Page Title:
24px (Bold 700)
- Section Title:
16px (Medium 450/500)
- Metric Value:
34px (Medium 450/500)
- Small Text/Meta:
12px (Regular 400)
Line Heights
- Tight:
1.2
- Normal:
1.5
- Relaxed:
1.8
1.3 Spacing & Layout System
Spacing Scale
- xs:
4px
- sm:
8px
- md:
16px
- lg:
24px
- xl:
32px
- 2xl:
48px
Border Radius
- sm:
2px
- md:
4px
- lg:
8px
- Cards/Panels:
12px or 14px
- Pills/Badges:
16px or 50%
Shadows
- sm:
0 1px 2px rgba(0, 0, 0, 0.05)
- md:
0 4px 6px rgba(0, 0, 0, 0.1)
- lg:
0 10px 15px rgba(0, 0, 0, 0.15)
- hover:
0 8px 25px rgba(0, 0, 0, 0.2)
2. Navigation System Standards
2.1 Global Navigation (Top Header)
- Represents first-level menus.
- Default first item is "首页" (Home).
- Header height:
54px, rounded corners (30px), gradient background (linear-gradient(90deg, #ffffff 0%, #eef5ff 76%, #dcecff 100%)).
2.2 Secondary Navigation (Left Sidebar)
- "首页" (Home) has NO secondary left sidebar menu. The content area takes full width.
- All other first-level menus have 2/3 level nested left sidebar menus.
- Parent items in the sidebar are only navigation groups (click to expand/collapse).
- Only final level navigation items correspond to actual page routes.
- Active state styling: Background
#fff3e6, Text #f0932b, Font Weight 450.
2.3 Breadcrumb Navigation
- Component: Located in
src/components/Breadcrumb.jsx.
- Functionality: Automatically generates breadcrumbs by parsing the current route path.
- Mapping: Uses a
breadcrumbMap object to map URL segments to their display names.
- Styling:
- Container (
.crumb-row): Flex layout with a 6px gap and 10px bottom padding.
- Items (
.breadcrumb): Uses text-faint color. Hovering changes the color to the brand primary blue.
- Current Page: Marked with the
current class, uses text-main color, 600 font weight, and is not a link.
- Separators: Displays a
/ character between items.
- Integration: Included by default in
SidebarLayout.
3. Component Specifications
3.1 Buttons
- Primary Button: Background
#3c83f8, Text #fff, Border Radius 4px, Height 32px.
- Ghost Button: Background
#fff, Text #595959, Border #dfdfdf, Height 32px. Hover: Border #5995f9, Text #5995f9.
3.2 Tags & Badges
- Blue Tag: Color
#3c83f8, Background #ecf3ff.
- Orange Tag: Color
#f7c03e, Background #fff9f2.
- Green Tag: Color
#46bc46, Background #f7fff2.
- Red Tag: Color
#ef5f59, Background #fff2f4.
- Gray Tag: Color
#8c8c8c, Background #f2f2f2.
3.3 Metric Cards
- White background,
12px border radius, 1px solid #e5e5e5 border.
- Header with label and icon tile (
32x32px, 10px radius).
- Large value text (
34px, #0f348c or status color).
- Footer with muted description text.
3.4 Tables
- Header: Background
#f6faff, Text #595959, Font Weight 600, Border Bottom #e5e5e5.
- Body: Text
#595959, Border Bottom #e5e5e5. Hover Background #ecf3ff.
- Category Rows: Background
#f3f7ff, Font Weight 450, Left border indicating category color.
3.5 Modals
- Overlay:
rgba(0,0,0,0.45).
- Content: Background
#fff, Border Radius 12px, Max Width 800px.
- Header: Title
16px Medium, Close button.
- Animation:
modalIn 0.2s ease-out (scale 0.95 to 1, opacity 0 to 1).
4. How to Use This Template
When a user requests to create or modify a frontend project using this standard:
- Initialize Project: Copy the contents of the
template directory to the target project folder.
- Install Dependencies: Run
npm install (React 18, Ant Design 5.x, React Router v6, Chart.js).
- Follow Navigation Rules: Ensure "首页" has no sidebar, and other sections use the nested sidebar structure.
- Use Provided Components: Utilize the pre-built layout and UI components to maintain 100% design consistency.
- No TypeScript: Write all code in JavaScript (
.js / .jsx).
5. Template Structure
The template directory contains a complete React application:
src/App.jsx: Routing configuration.src/layouts/: GlobalLayout, SidebarLayout.src/pages/: Home, ListManagement (Demo pages).src/components/: Reusable UI components (MetricCard, Tag, etc.).src/styles/: Global CSS variables and overrides.
