wangjia/maestro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
wangjia
2026-06-13 14:29:07 +08:00
parent 0b3ebbd569
commit 5a1e185b1a
102 changed files with 10323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/guidelines/colors-tints.card.html
+13
View File
@@ -0,0 +1,13 @@
<!-- @dsCard group="Colors" viewable="true" viewport="700x140" subtitle="信号色 7–8% 透明底 + dim 边框的 chip 配方" name="信号底 · Tints" -->
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
<link rel="stylesheet" href="../styles.css">
<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-content:center}
.tile{flex:1;min-width:140px;height:96px;border:1px solid;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.lab{font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:3px}
.f{font-size:10px;color:var(--muted)}</style></head><body>
<div class="tile" style="background:rgba(95,221,125,.07);border-color:var(--green-dim)"><span class="lab" style="color:var(--green);border-color:var(--green-dim)">EASY</span><span class="f">rgba(green,.07)</span></div>
<div class="tile" style="background:rgba(240,180,41,.07);border-color:var(--amber-dim)"><span class="lab" style="color:var(--amber);border-color:var(--amber-dim)">MED</span><span class="f">rgba(amber,.07)</span></div>
<div class="tile" style="background:rgba(255,93,93,.07);border-color:var(--red-dim)"><span class="lab" style="color:var(--red);border-color:var(--red-dim)">HARD</span><span class="f">rgba(red,.07)</span></div>
<div class="tile" style="background:rgba(184,142,245,.08);border-color:var(--violet-dim)"><span class="lab" style="color:var(--violet);border-color:var(--violet-dim)">GATE</span><span class="f">rgba(violet,.08)</span></div>
<div class="tile" style="background:rgba(89,200,216,.07);border-color:var(--cyan-dim)"><span class="lab" style="color:var(--cyan);border-color:var(--cyan-dim)">RUN</span><span class="f">rgba(cyan,.07)</span></div>
</body></html>