feat: UI redesign with uv-ui color system and landscape imagery

- Replace all colors with uv-ui design tokens (primary #3c9cff, warning #f9ae3d, etc.)
- Hero section: Wugong Mountain landscape photo with dark overlay
- Super Player card: photo background, large typography, warning-color price/CTA, value comparison (¥198 vs ¥3800+)
- Spots section: landscape thumbnails instead of CSS gradients, warning-color prices
- Profile page: landscape hero header, CSS menu icons, floating card layout
- Card list page: landscape hero header, filter pills, empty state design
- TabBar: rename '入园码' to '旅游卡', Lucide-style PNG icons (home/card/profile)
- Typography: corrected font weights (semibold for prices, medium for labels)
- Remove broken font-loader (lxgw-wen-kai CDN 404)
- Skip wx.getPrivacySetting in devtools to avoid framework timeout
- Replace all inline SVG with CSS-only icons for mini-program compatibility
- Add design system files (styles/, components/, animations)

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -150,3 +150,63 @@ dist/build/mp-weixin/   # 用微信开发者工具导入此目录
 4. **条件编译**：`#ifdef MP-WEIXIN` 包裹微信特有逻辑
 5. **隐私协议**：`App.vue` 中 `wx.getPrivacySetting` 检查，未同意前不能调授权 API
 6. **微信开发者工具调试**：需勾选「不校验合法域名」才能请求 localhost
+
+<frontend_aesthetics>
+You tend to converge toward generic, "on distribution" outputs.
+In frontend design, this creates what users call the "AI slop"
+aesthetic. Avoid this: make creative, distinctive frontends that
+surprise and delight. Focus on:
+
+Typography: Choose fonts that are beautiful, unique, and interesting.
+Avoid generic fonts like Arial and Inter; opt instead for distinctive
+choices that elevate the frontend's aesthetics.
+
+Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for
+consistency. Dominant colors with sharp accents outperform timid,
+evenly-distributed palettes.
+
+Motion: Use animations for effects and micro-interactions.
+Focus on high-impact moments: one well-orchestrated page load
+with staggered reveals creates more delight than scattered
+micro-interactions.
+
+Backgrounds: Create atmosphere and depth rather than defaulting
+to solid colors. Layer CSS gradients, use geometric patterns,
+or add contextual effects.
+
+Avoid generic AI-generated aesthetics:
+- Overused font families (Inter, Roboto, Arial, system fonts)
+- Clichéd color schemes (particularly purple gradients on white)
+- Predictable layouts and component patterns
+- Cookie-cutter design that lacks context-specific character
+
+Interpret creatively and make unexpected choices that feel
+genuinely designed for the context.
+</frontend_aesthetics>
+
+<use_interesting_fonts>
+Typography instantly signals quality. Avoid boring, generic fonts.
+
+Never use: Inter, Roboto, Open Sans, Lato, default system fonts
+
+Impact choices:
+- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
+- Editorial: Playfair Display, Crimson Pro, Fraunces
+- Startup: Clash Display, Satoshi, Cabinet Grotesk
+- Technical: IBM Plex family, Source Sans 3
+- Distinctive: Bricolage Grotesque, Obviously, Newsreader
+
+Pairing principle: High contrast = interesting.
+Display + monospace, serif + geometric sans.
+
+Use extremes: 100/200 weight vs 800/900, not 400 vs 600.
+Size jumps of 3x+, not 1.5x.
+</use_interesting_fonts>
+
+# Design System
+
+Always refer to DESIGN.md when generating or modifying any UI component.
+Use only colors, fonts, and spacing values defined in DESIGN.md.
+Do not invent new values or use defaults from any framework.
+Match component states (hover, focus, active, disabled) to patterns
+in DESIGN.md.