feat(MCN工作台): 数据功能页+图标扁平化+多项UI优化
- 工作台大版本升级:hash 路由 + 6 数据功能页(周榜/热门账号/账号详情/视频详情/AI写脚本/AI写作复盘),只读复用 dsh 库副本 + 抖音榜单 JSON - 数据库隔离:复制 dsh 库到 mcn-work-shop/,与 dsh 原库各访问各的(已 gitignore) - 图标全面扁平化:Lucide 线性 SVG,功能图标亮色区分,文字标题去图标 - 首页重构:功能入口卡 + AI写剧本快捷卡片(2列/8个/5行预览) + 独立帮助页 + header 精简 - 新增设计技能 impeccable + taste-skill(生成网页时参考) - 修复:fmtTime 跨 script 全局冲突(P0)、弹窗关闭、外链新标签打开等
This commit is contained in:
1 parent
f025ad3b86
commit
5f5b4f1cb7
120 files changed
+44528
-1
No files matched your search
@@ -0,0 +1,99 @@
|
||||
Quiet design is harder than bold design. Subtlety needs precision. Reduce visual intensity in designs that are too loud, aggressive, or overstimulating without losing personality or making the result generic.
|
||||
|
||||
---
|
||||
|
||||
## Visitor mode
|
||||
|
||||
Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
|
||||
|
||||
Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
|
||||
|
||||
---
|
||||
|
||||
## Assess Current State
|
||||
|
||||
Analyze what makes the design feel too intense:
|
||||
|
||||
1. **Identify intensity sources**:
|
||||
- **Color saturation**: Overly bright or saturated colors
|
||||
- **Contrast extremes**: Too much high-contrast juxtaposition
|
||||
- **Visual weight**: Too many bold, heavy elements competing
|
||||
- **Animation excess**: Too much motion or overly dramatic effects
|
||||
- **Complexity**: Too many visual elements, patterns, or decorations
|
||||
- **Scale**: Everything is large and loud with no hierarchy
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the purpose? (Marketing vs tool vs reading experience)
|
||||
- Who's the audience? (Some contexts need energy)
|
||||
- What's working? (Don't throw away good ideas)
|
||||
- What's the core message? (Preserve what matters)
|
||||
|
||||
If any of these are unclear from the codebase, {{ask_instruction}}
|
||||
|
||||
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined and easier on the eyes. Think luxury, not laziness.
|
||||
|
||||
## Plan Refinement
|
||||
|
||||
Create a strategy to reduce intensity while maintaining impact:
|
||||
|
||||
- **Color approach**: Desaturate or shift to more restrained tones?
|
||||
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
|
||||
- **Simplification approach**: What can be removed entirely?
|
||||
- **Sophistication approach**: How can we signal quality through restraint?
|
||||
|
||||
**IMPORTANT**: Subtlety requires precision. Quiet without intent collapses to generic.
|
||||
|
||||
## Refine the Design
|
||||
|
||||
Systematically reduce intensity across these dimensions:
|
||||
|
||||
### Color Refinement
|
||||
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
|
||||
- **Soften palette**: Replace bright colors with muted tones
|
||||
- **Reduce color variety**: Use fewer colors more thoughtfully
|
||||
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
|
||||
- **Gentler contrasts**: High contrast only where it matters most
|
||||
- **Tinted grays**: Use warm or cool tinted grays instead of pure gray. Adds depth without loudness
|
||||
- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
|
||||
|
||||
### Visual Weight Reduction
|
||||
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
|
||||
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
|
||||
- **White space**: Increase breathing room, reduce density
|
||||
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
|
||||
|
||||
### Simplification
|
||||
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
|
||||
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
|
||||
- **Reduce layering**: Flatten visual hierarchy where possible
|
||||
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
|
||||
|
||||
### Motion Reduction
|
||||
- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
|
||||
- **Remove decorative animations**: Keep functional motion, remove flourishes
|
||||
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
|
||||
- **Refined easing**: Use ease-out-quart for smooth, understated motion. Never bounce or elastic
|
||||
- **Remove animations entirely** if they're not serving a clear purpose
|
||||
|
||||
### Composition Refinement
|
||||
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
|
||||
- **Align to grid**: Bring rogue elements back into systematic alignment
|
||||
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
|
||||
|
||||
**NEVER**:
|
||||
- Make everything the same size/weight (hierarchy still matters)
|
||||
- Remove all color (quiet ≠ grayscale)
|
||||
- Eliminate all personality (maintain character through refinement)
|
||||
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
|
||||
- Make everything small and light (some anchors needed)
|
||||
|
||||
## Verify Quality
|
||||
|
||||
Ensure refinement maintains quality:
|
||||
|
||||
- **Still functional**: Can users still accomplish tasks easily?
|
||||
- **Still distinctive**: Does it have character, or is it generic now?
|
||||
- **Better reading**: Is text easier to read for extended periods?
|
||||
- **Restrained, not absent**: Does the POV survive the cuts?
|
||||
|
||||
When the result feels right, hand off to `{{command_prefix}}impeccable polish` for the final pass.
|
||||
Reference in new issue
Block a user