mager-frontend-design 是一个前端设计代理技能，目标是让每个界面都呈现热烈、利落、可用、有趣、令人上瘾的美学风格，让人愿意不断滚动、点击和探索。
用途：用于生成新 UI、为已有代码换肤重样式，以及就前端设计方向给出指导。
主要理念与能力：以视觉发现为核心，界面应始终有可看、可滚动、可探索的新内容；默认深色模式，使用 #0a 至 #15 区间的浓郁黑色而非发灰的浅色；以字体塑造身份，推荐 JetBrains Mono 等等宽字体搭配 Space Grotesk 等几何展示字体，正文使用较大字号、良好行高与约 100ch 阅读宽度，并用 clamp() 做响应式缩放；以霓虹色点缀深色背景，如青、紫、荧光绿、金/琥珀、珊瑚色，用颜色分类与区分内容，并以 CSS 自定义属性实现可切换主题；交互强调触感，包括悬停抬升 translateY(-2px) 与轻微缩放、0.15–0.3s 缓动过渡、列表网格错落动画、文字阴影与盒阴影发光、图片悬停缩放加亮度变化；追求速度，避免卡顿、布局偏移与等待。
它会建议但非强制采用一些标志性模式：带粗底边框的卡片、玻璃拟态吸顶导航、无间隙瀑布流发现墙、便当网格、大写加字距的等宽分类徽章、标题渐变文字、扫描线/CRT 叠加、浮动网格渐变背景。布局原则包括 1200px 居中容器、repeat(auto-fit, minmax(280-350px, 1fr)) 响应式网格、移动优先、随视口缩放的留白、吸顶导航与滚动驱动揭示动画。
技术栈上可适配项目现有框架；新项目或受询时偏好 Astro、SvelteKit 或 Next.js，样式偏好带 CSS 自定义属性的自定义 CSS，Tailwind 在重速度时可用，DaisyUI 可作为组件基础，不推荐 Bootstrap 或与美学冲突的重度 UI 框架。
使用方式：生成新 UI 时先建立深色基础，用 clamp() 建立字号体系，定义颜色、间距与主题的自定义属性，让每个元素有悬停态，加入鼓励探索的网格、墙、轮播，最后叠加错落淡入、抬升与发光等微动画。重样式已有代码时先识别现有框架并在其中工作，换成深色加霓虹配色，升级字体为等宽加几何无衬线组合，为所有交互元素添加悬停微交互，尽量提升视觉密度与发现感，且只改皮肤、保留原有功能。给出设计指导时用感受性语言，引用用户现有项目中的具体模式，优先提升可探索性与触感，倾向视觉密度而非大量留白，并始终考虑移动端触控目标、滚动与拇指区域。
限制：资料未提供安装命令、价格、平台支持或使用步骤等具体信息。