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>

design/components/core/SectionHead.jsx

@@ -0,0 +1,17 @@
+export function SectionHead({ mark = 'green', title, action, sticky, style }) {
+  const markColor = { green: 'var(--green)', amber: 'var(--amber)', cyan: 'var(--cyan)', violet: 'var(--violet)' }[mark] || 'var(--green)';
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 6,
+      fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em',
+      color: 'var(--muted)', textTransform: 'uppercase',
+      padding: '18px 0 10px',
+      ...(sticky ? { position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg) 75%, transparent)' } : {}),
+      ...style,
+    }}>
+      <span style={{ color: markColor, flex: 'none' }}>▍</span>
+      <span style={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', minWidth: 0 }}>{title}</span>
+      {action ? <span style={{ marginLeft: 'auto', flex: 'none' }}>{action}</span> : null}
+    </div>
+  );
+}