Files

T

wangjia 5a1e185b1a docs(design): 解压 Maestro Design System 到 design/（重构参照材料）

phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/
typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile)
+ assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-13 14:29:07 +08:00

6.1 KiB

Raw Permalink Blame History

name, description, user-invocable

name	description	user-invocable
maestro-design	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.	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

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.
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.
Match the language exactly — fonts, colors, motion, copy tone below. When unsure, open the matching guidelines/*.card.html specimen.
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.
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 <html data-theme="light">. 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.

6.1 KiB Raw Permalink Blame History Unescape Escape