--- name: dashboard description: | Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen. triggers: - "dashboard" - "admin panel" - "analytics" - "control panel" - "后台" - "管理后台" od: mode: prototype platform: desktop scenario: operations preview: type: html entry: index.html design_system: requires: true sections: [color, typography, layout, components] --- # Dashboard Skill Produce a single-screen admin / analytics dashboard. ## Workflow 1. **Read the active DESIGN.md** (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens. 2. **Classify** what the dashboard monitors (sales, traffic, usage, incidents, ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders. 3. **Lay out** the required regions: - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with icons, active state uses the DS accent. - **Top bar**: page title on the left, search input + user avatar / status on the right. - **Main**: - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period). - Row 2: one primary chart (full width or 2/3) — render as an inline SVG line / bar / area chart drawn from real-looking numbers. - Row 3: one secondary chart or table (recent events, top items, etc.). 4. **Write** one self-contained HTML document: - `` through ``, CSS in one inline `