light-frontend-design

# 有审美的前端设计 ## 先定设计方向（写码前必答四问，来自 frontend-design skill） 1. **Purpose**：解决什么问题、谁在用、什么场景(答辩/大屏/后台)。 2. **Tone**：从基调谱系选一个并押注到底——科技/学术/农业智慧化/医疗/极简/玻璃拟态/卡片/大屏/管理系统/移动端，或 editorial/brutalist/luxury/organic。先 web 搜索核实涉及的具名产品/品牌(10 秒搜索胜过 1-2 小时返工)。 3. **Constraints**：框架、性能、可访问性、信息密度。 4. **Differentiation**：一个会被记住的唯一视觉/交互记忆点(不是堆特效)。 据此定 **设计语言**：调色板(主/辅/强调/中性) + 字体系统 + 间距栅格 + 圆角阴影 + 图标风格，落到 Design Tokens，登记 db05。设计长在已有语境(品牌/代码库/UI kit/真实截图)上而非凭空造。简报太空(如"做个好看的")时进 Advisor 模式：从风格库提 3 个差异化方向让用户选，再押注其一(canvas-design)。涉及品牌则先按 Core Asset Protocol 收集 logo/产品图/UI 截图/品牌色字，写入 brand-spec.md 当一等公民。 设计系统持久化：用一个全局真相源(如 MASTER.md/design tokens)+ 页级覆盖文件(页文件覆盖全局，无页文件则用全局)，避免跨页风格漂移(ui-ux-pro-max)。 ## 设计原则（可量化） - 视觉层次清晰，留白充足，对齐严格；"主色 + 锐利强调色" 优于均匀分布的怯懦调色板。 - 字体：避开 Inter/Roboto/Arial/系统字体，展示字配精炼正文字，pair 出个性。 - 一致性：组件复用、token 化、风格统一(a07)；用 CSS 变量承载主题。 - 可访问性(WCAG 2.1 AA)：正文对比 ≥4.5:1、大字 ≥3:1、UI 组件 ≥3:1；键盘可达 + 焦点态可见；颜色不作唯一信息载体；图片有意义 alt；尊重 prefers-reduced-motion。 - 克制动效：HTML 优先纯 CSS、React 用 Motion/GSAP；一次编排良好的页面载入 + 错峰揭示(animation-delay) > 散落微交互；hover/交互过渡 150-300ms。 - **反 AI-slop 禁令**：紫/粉渐变配白底、emoji 当图标(用 SVG: Lucide/Heroicons)、rounded-card-左边框、gradient-orb 代表 AI、CSS 剪影冒充产品图、千篇一律模板布局。 - 可调三旋钮(taste-skill)：VARIANCE(布局实验度)/MOTION(动效深度)/DENSITY(每屏信息量)，按场景拨——大屏调高 DENSITY，落地页调高 VARIANCE，后台调低两者。 ## 技术实现（按需，见 a09） - **框架 Next.js**：默认用 Server Components(零客户端 JS)，按需 `"use client"` 并检查边界位置避免膨胀 bundle；loading.tsx + Suspense 做流式、并行取数避免瀑布；next/font 防 layout shift、`<Image>` 防 CLS+WebP；Server Actions 内逐个鉴权、DB 访问放 serve...