--- name: maestro-design description: Generate well-branded interfaces, components, and assets for Maestro (多项目任务调度平台) — production code or throwaway prototypes/mocks. Contains the full design language (colors, type, fonts, motion, iconography), reusable React components, and two pixel-accurate UI kits (desktop console + mobile). Invoke for any Maestro UI, screen, slide, or asset work. user-invocable: true --- # Maestro Design Skill Maestro is a local-first multi-project task-orchestration daemon. Its one product surface is the **Web 调度台 (console)** — a three-column board: project rail · approval-gates + task tree · event stream, refreshed over WebSocket, with in-page accept/reject of agent work. The brand metaphor is a **phosphor console**: a carbon-green CRT scheduling terminal, not a SaaS dashboard. ## How to use this skill 1. **Read `README.md` first** — it carries the full CONTENT, VISUAL, and ICONOGRAPHY foundations plus the file index. Treat it as the source of truth; this file is the quick-start. 2. **Reuse, don't reinvent.** Components live in `components/{core,forms,surfaces}/` and compile into `_ds_bundle.js` under namespace `window.MaestroDesignSystem_a6a290`. The two UI kits in `ui_kits/` show exactly how to compose them. 3. **Match the language exactly** — fonts, colors, motion, copy tone below. When unsure, open the matching `guidelines/*.card.html` specimen. 4. For **throwaway artifacts** (slides, mocks, one-off prototypes): copy the assets/tokens you need and emit standalone HTML the user can open. For **production code**: read the rules here and the component `.prompt.md` / `.d.ts` files to become an expert, then write against the real tokens. 5. If invoked with no brief, **ask what to build**, ask a few scoping questions, then act as an expert Maestro designer. ## Non-negotiable rules (the "do / don't") - **One type family only:** `--mono` = IBM Plex Mono + Noto Sans SC fallback. There is no heading font. Build hierarchy from size (10–20px, body 13px), weight (400/500/600/700), and letter-spacing (.04em–.35em). Uppercase + wide tracking is the strongest hierarchy signal. - **Five signal colors, fixed meanings:** green = runnable/success/brand · **violet** = approval gate / awaiting decision · amber = warning / MED complexity / waiting-on-deps · red = failed/reject/Hard · cyan = executing/agent/link. Each has a `-dim` companion for borders and 5–8% tint fills. Never repurpose a signal color. (Approval was amber pre-v1.1 — it is violet now, to separate it from MED.) - **Glow, not shadow.** Ambient emphasis is a same-color `0 0 8–18px` glow (brand word, status dots, running chips, button hover). Black drop-shadows are reserved for floating layers only (popovers / modals / toasts). No inner shadows. - **Small, restrained radii:** badge/chip 3px, button/input 4px, panel/card 6px, modal/popover 10px (`--radius-xs/sm/md/lg`). True circles are status dots ONLY. - **Borders carry structure:** 1px `--line` / `--line-soft`; dashed = empty/placeholder/weak-group; 2px left solid = current/active/doc-block. - **Motion is fast and hard:** transitions .1–.12s; entrances use `rise` (5px up + fade, .18–.25s); attention via `blink` (steps(1) cursor) and `pulse` (.8–2.2s, for awaiting/executing). No bounce, no easing flourishes. Honor `prefers-reduced-motion`. - **No emoji.** Icons are the double-tone SVG set in `assets/icons/` (24×24, 2px round-cap, `currentColor` + `--icon-accent`). Brand glyphs `▍ ▮ → ↳ · — « »` stay as mono characters. Never pull in lucide/heroicons. - **Copy:** Chinese-first, terse telegraphic 2–4-char labels, `·` interpunct as the lead separator, English terms kept verbatim (HARD/MED/EASY, plan/spec/operations, agent, worktree, accept/reject). Address the user as 「你」; the system has no self-name. Required fields use a red `*`; placeholders give real examples (`/path/to/repo`, `npm test（可空）`). - **Full-screen surfaces** get the `body::before` ambience layer (1px scanlines + vignette, opacity .5 dark / .12 light) and `::selection` green-on-white. ## Theming & i18n (build these in from the start) - **Dark is default; light via ``.** Every color flows through CSS variables, so components adapt automatically — never hardcode a hex; use `var(--…)`. - **UI chrome is bilingual+ (zh/en/es/ja/fr)** in `ui_kits/console/i18n.js`. Status/gate/event labels are injected through component `label`/`kindLabel` props. User content (task titles, paths) is never translated. ## Components (namespace `window.MaestroDesignSystem_a6a290`) - **core:** `Button` (variants default/solid/ghost/accept/reject, size xs) · `StatusChip` (16 状态机状态) · `ComplexityBadge` (hard/medium/easy) · `ComplexitySeg` (segmented picker, optional cyan `auto`/「智能」 = model-decides) · `CountBadge` (gate/ready/run/blocked, hover-expands) · `QuotaMeter` (LED bar, ≤80 cyan / >80 amber / >95 red) · `SectionHead` (▍ + uppercase title + action) - **forms:** `Input` · `Select` · `Textarea` (danger variant for reject reasons) - **surfaces:** `Panel` · `GateCard` (collapsible, double-click → fullscreen, accept/reject footer) · `Toast` (ok/err/warn) · `EventItem` (square color-coded marker) · `Timeline` Each component has a sibling `.prompt.md` (what/when + JSX example) and `.d.ts` (props contract). Read them before using. ## UI kits (copy these patterns) - `ui_kits/console/` — full desktop console: resizable collapsible rails, project status dots + pending badges, global Agents/Settings/user flyouts, approval gates, filterable task tree with dependency jump + complexity re-pick, archive with paging + detail modal, quota meters, 5-language + light/dark toggles. `data.js` = mock, `i18n.js` = strings. - `ui_kits/console_mobile/` — 390px single column + bottom tab bar (tasks/gates/events/projects), ≥44px touch targets. ## Files `styles.css` (entry, @import only) → `tokens/{colors,typography,effects,fonts}.css` · `guidelines/*.card.html` (specimens) · `assets/icons/*.svg` · component dirs · `ui_kits/*`. Fonts load from Google Fonts CDN (IBM Plex Mono + Noto Sans SC); no binaries shipped — supply woff2 for offline use.