design-taste-frontendlisted

## 是什么 帮你把已经能跑、但看起来像 AI 模板出品的前端页面升级成有审美主见的成品，让你的产品在视觉上从"凑合能看"跳到"被人记住"。 ## 怎么用 1. 把现有页面或组件的截图、链接发给它，告诉它你觉得哪里不对劲。 2. 它会按设计基线（节奏感、动效强度、信息密度）给你定调，不会上来就乱改。 3. 它一次只挑 3 到 5 处最影响观感的地方动手，比如字体、配色、留白、动效节奏。 4. 它会顺手帮你检查无障碍（a11y，可访问性）、移动端视口、CJK（中日韩文��）换行这些容易翻车的细节。 5. 改完它会把改动清单和理由列给你���方便你决定哪些保留、哪些回滚。 ## 架构图 ```mermaid flowchart LR A[现有页面] --> B[基线定调] B --> C[挑选 3 到 5 处升级] C --> D[字体配色与动效调优] D --> E[a11y 与移动端核查] E --> F[改动清单交付] ``` # High-Agency Frontend Skill ## Gotchas 1. **This skill refines existing UI — it doesn't create from scratch.** For greenfield builds use `frontend-design`. Applying taste rules to empty pages produces over-engineered boilerplate. 2. **Don't apply all rules simultaneously.** Pick the 3-5 most impactful improvements per pass. 20 CSS changes at once are unreviewable. 3. **`will-change` is not free.** Promoting every animated element to a GPU layer can hurt performance on memory-constrained devices. Only apply to elements with heavy animations that actually jank. 4. **Motion trades perceived latency for actual load time.** Staggered fade-ins feel premium but add real seconds to time-to-interactive. Test on throttled network. 5. **Default to light theme.** Chinese users predominantly prefer light. Only dark when explicitly requested or content demands it. ## 1. ACTIVE BASELINE CONFIGURATION * DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos) * MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics) * VISUAL_DENSITY: 4 (1=Ar