iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
f8c5a76ce6930f85770c91f141d5930f91624597
zclaw_openfang/.superpowers/brainstorm/1446-1774933084/design-direction.html
iven d8e2954d73 docs: stabilization directive + TRUTH document + AI session prompts + dockerignore 
- STABILIZATION_DIRECTIVE.md: feature freeze rules, banned actions, priorities
- TRUTH.md: single source of truth for system state (crate counts, store counts)
- AI_SESSION_PROMPTS.md: three-layer prompt system for AI sessions
- Industry agent delivery design spec
- Stabilization test suite for regression prevention
- Delete stale ISSUE-TRACKER.md
- Add .dockerignore for container builds
- Add brainstorm session artifacts
2026-04-03 00:29:16 +08:00

151 lines
9.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h2>Admin 管理后台的设计方向</h2>
<p class="subtitle">选择一个整体设计风格方向，后续所有页面都将基于此展开</p>
<div class="cards">
<div class="card" data-choice="modern-minimal" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 24px; min-height: 180px; display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 12px; align-items: center;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: #6366f1;"></div>
<div>
<div style="font-weight: 700; color: #1e293b; font-size: 14px;">ZCLAW Admin</div>
<div style="color: #94a3b8; font-size: 12px;">现代极简</div>
</div>
</div>
<div style="display: flex; gap: 8px;">
<div style="flex: 1; height: 8px; border-radius: 4px; background: #6366f1; opacity: 0.2;"></div>
<div style="flex: 2; height: 8px; border-radius: 4px; background: #6366f1; opacity: 0.1;"></div>
<div style="flex: 1; height: 8px; border-radius: 4px; background: #6366f1; opacity: 0.15;"></div>
</div>
<div style="display: flex; gap: 8px; margin-top: 4px;">
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e2e8f0;"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e2e8f0;"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e2e8f0;"></div>
</div>
<div style="display: flex; gap: 4px; margin-top: auto;">
<div style="width: 20px; height: 20px; border-radius: 4px; background: #6366f1;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #8b5cf6;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #a78bfa;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #c4b5fd;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #e0e7ff;"></div>
</div>
</div>
</div>
<div class="card-body">
<h3>A. 现代极简 (Modern Minimal)</h3>
<p>大量留白，Indigo/Purple 主色调，圆角卡片，轻量阴影。类似 Linear、Vercel Dashboard 风格。</p>
</div>
</div>
<div class="card" data-choice="tech-dark" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 24px; min-height: 180px; display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 12px; align-items: center;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #06b6d4, #3b82f6);"></div>
<div>
<div style="font-weight: 700; color: #f1f5f9; font-size: 14px;">ZCLAW Admin</div>
<div style="color: #64748b; font-size: 12px;">科技暗色</div>
</div>
</div>
<div style="display: flex; gap: 8px;">
<div style="flex: 1; height: 8px; border-radius: 4px; background: #06b6d4; opacity: 0.3;"></div>
<div style="flex: 2; height: 8px; border-radius: 4px; background: #06b6d4; opacity: 0.15;"></div>
<div style="flex: 1; height: 8px; border-radius: 4px; background: #06b6d4; opacity: 0.2;"></div>
</div>
<div style="display: flex; gap: 8px; margin-top: 4px;">
<div style="flex: 1; height: 60px; border-radius: 8px; background: #1e293b; border: 1px solid #334155;"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: #1e293b; border: 1px solid #334155;"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: #1e293b; border: 1px solid #334155;"></div>
</div>
<div style="display: flex; gap: 4px; margin-top: auto;">
<div style="width: 20px; height: 20px; border-radius: 4px; background: #06b6d4;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #3b82f6;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #8b5cf6;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #22d3ee;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #1e293b; border: 1px solid #334155;"></div>
</div>
</div>
</div>
<div class="card-body">
<h3>B. 科技暗色 (Tech Dark)</h3>
<p>深色基底，Cyan/Blue 渐变高亮，发光边框，数据密集感。类似 Grafana、DataDog 风格。</p>
</div>
</div>
<div class="card" data-choice="warm-professional" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #f5f5f4 100%); padding: 24px; min-height: 180px; display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 12px; align-items: center;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #f59e0b, #ef4444);"></div>
<div>
<div style="font-weight: 700; color: #292524; font-size: 14px;">ZCLAW Admin</div>
<div style="color: #a8a29e; font-size: 12px;">温暖专业</div>
</div>
</div>
<div style="display: flex; gap: 8px;">
<div style="flex: 1; height: 8px; border-radius: 4px; background: #f59e0b; opacity: 0.3;"></div>
<div style="flex: 2; height: 8px; border-radius: 4px; background: #f59e0b; opacity: 0.15;"></div>
<div style="flex: 1; height: 8px; border-radius: 4px; background: #f59e0b; opacity: 0.2;"></div>
</div>
<div style="display: flex; gap: 8px; margin-top: 4px;">
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05);"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05);"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05);"></div>
</div>
<div style="display: flex; gap: 4px; margin-top: auto;">
<div style="width: 20px; height: 20px; border-radius: 4px; background: #f59e0b;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #ef4444;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #f97316;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #d97706;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #fef3c7;"></div>
</div>
</div>
</div>
<div class="card-body">
<h3>C. 温暖专业 (Warm Professional)</h3>
<p>暖白底色，Amber/Orange 主色调，圆润设计，亲切感。类似 Notion、Stripe Dashboard 风格。</p>
</div>
</div>
<div class="card" data-choice="brand-zclaw" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 50%, #f5f3ff 100%); padding: 24px; min-height: 180px; display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 12px; align-items: center;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #863bff, #47bfff);"></div>
<div>
<div style="font-weight: 700; color: #1e1b4b; font-size: 14px;">ZCLAW Admin</div>
<div style="color: #a78bfa; font-size: 12px;">品牌紫蓝</div>
</div>
</div>
<div style="display: flex; gap: 8px;">
<div style="flex: 1; height: 8px; border-radius: 4px; background: #863bff; opacity: 0.3;"></div>
<div style="flex: 2; height: 8px; border-radius: 4px; background: #863bff; opacity: 0.15;"></div>
<div style="flex: 1; height: 8px; border-radius: 4px; background: #47bfff; opacity: 0.2;"></div>
</div>
<div style="display: flex; gap: 8px; margin-top: 4px;">
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e9d5ff; box-shadow: 0 1px 3px rgba(134,59,255,0.08);"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e9d5ff; box-shadow: 0 1px 3px rgba(134,59,255,0.08);"></div>
<div style="flex: 1; height: 60px; border-radius: 8px; background: white; border: 1px solid #e9d5ff; box-shadow: 0 1px 3px rgba(134,59,255,0.08);"></div>
</div>
<div style="display: flex; gap: 4px; margin-top: auto;">
<div style="width: 20px; height: 20px; border-radius: 4px; background: #863bff;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #47bfff;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #a78bfa;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #67e8f9;"></div>
<div style="width: 20px; height: 20px; border-radius: 4px; background: #ede9fe;"></div>
</div>
</div>
</div>
<div class="card-body">
<h3>D. 品牌紫蓝 (Brand ZCLAW)</h3>
<p>延续 ZCLAW 品牌色（紫色 #863bff + 蓝色 #47bfff），渐变点缀，现代感与品牌一致性。</p>
</div>
</div>
</div>
<div class="section" style="margin-top: 24px; padding: 16px; background: rgba(99,102,241,0.05); border-radius: 8px;">
<p style="margin: 0; color: #64748b; font-size: 14px;">
<strong>提示：</strong>点击卡片选择你偏好的设计方向。这个选择将影响配色方案、组件风格、以及整体视觉语言。
后续的暗色模式将基于所选方向的暗色变体。
</p>
</div>
Reference in New Issue View Git Blame Copy Permalink