G2 design system ui kit mqgbmh2w

Skill nexu-io/open-design/plugins/community/g2-design-system-ui-kit-mqgbmh2w

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install

npx -y skills add nexu-io/open-design --skill g2-design-system-ui-kit-mqgbmh2w

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.0 KB, as published. Nobody here has run it

G2 Design System UI Kit

Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.

Structure

index.html - Browser-reviewable entry that loads ./colors_and_type.css, React, ReactDOM, Babel, and the component files.
colors_and_type.css - Source-backed G2 token CSS for dark HUD color, type, spacing, radius, icon, stroke, and compact/regular display modes.
components/App.jsx - App shell that composes the G2 HUD surface.
components/Sidebar.jsx - Compact system rail for mode, call, messages, AI, and device controls.
components/AssistantsList.jsx - AI card and quick status pattern.
components/ChatArea.jsx - Primary message, call, and teleprompter workspace.
components/InputBar.jsx - Bottom command-entry surface.
components/MessageBubble.jsx - Message, note, and assistant response unit.
README.md - Human-readable package guide and validation notes.

Usage

Open index.html directly for visual review. Copy component files into a React prototype when building product-like artifacts. Keep colors_and_type.css loaded before the components so color, type, spacing, radius, stroke, and mode variables resolve through the G2 token contract.

Design Notes

Use G2 as a dark AR glasses control interface, not a generic mobile app, SaaS dashboard, or marketing page. Preserve these source-backed cues:

Black optical canvas.
White, secondary gray, and tertiary gray text.
#333333 controls, borders, and disabled surfaces.
#0D76FF selected state.
#0D76FFA6 focus and touch feedback.
Noto Sans Medium/Bold typography.
data-g2-mode="regular" for 640 mode and data-g2-mode="compact" for 320 mode.

Do not invent off-token accent colors, glassmorphism, or landing-page hero compositions.

Provenance