wangjia
5a1e185b1a
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>
51 lines
6.1 KiB
Markdown
51 lines
6.1 KiB
Markdown
---
|
||
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 `<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.
|