ClawHub

gld_ue_template

Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specification documentation.

Audits

Pass
ClawScanPass

Agentic behavior and permission review.

Static analysisPass

Pattern checks against bundled files.

VirusTotalPass

Multi-engine malware detections and file reputation.

Install

openclaw skills install 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:

  1. Initialize Project: Copy the contents of the template directory to the target project folder.
  2. Install Dependencies: Run npm install (React 18, Ant Design 5.x, React Router v6, Chart.js).
  3. Follow Navigation Rules: Ensure "首页" has no sidebar, and other sections use the nested sidebar structure.
  4. Use Provided Components: Utilize the pre-built layout and UI components to maintain 100% design consistency.
  5. 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.