用途
frontend-design-pro 是一个前端界面设计技能，面向需要产出高完成度、可直接上线界面的场景。它的自我定位是“世界级创意前端工程师兼视觉总监”，要求每个界面都具备高价代理项目的视觉水准。
主要能力
1. 选定一种鲜明美学方向并彻底执行
技能要求先选定一种风格并 100% 投入，资料中列出的风格类别包括：
- 极简主义与瑞士风格：clean、swiss、grid-based、大量留白、排版优先；单色加一个大胆点缀色、米色/灰色中性色；锐利的层级、细微悬停抬升、微动画、完美对齐。
- 新拟态（Neumorphism）：soft ui、浮雕、凹凸、细微深度、单色；单一柔和色加明暗变化；多层柔和阴影、按压/释放动画、无硬边框。
- 玻璃拟态（Glassmorphism）：磨砂玻璃、半透明、鲜艳背景、模糊、分层；极光/日落背景加半透明白；backdrop-filter: blur()、发光边框、光反射、浮动层。
- 粗野主义（Brutalism）：原始、未打磨、不对称、高对比、刻意“丑”；刺眼原色、黑白、偶发霓虹；尖角、巨大粗体字、暴露网格、“破碎”美学。
- 黏土拟态（Claymorphism）：黏土、厚重 3D、玩具感、泡泡感、双重阴影、柔和色；糖果柔和色、柔和渐变；内外阴影、软弹按压效果、超大圆角元素。
- 极光/网格渐变（Aurora / Mesh Gradient）：极光、北极光、网格渐变、发光、流动；青绿→紫→粉平滑过渡；动画或静态 CSS/SVG 网格渐变、细微色彩呼吸、分层半透明。
- 复古未来主义/赛博朋克：蒸汽波、80 年代科幻、CRT 扫描线、霓虹辉光、故障、铬金属；深黑底上的霓虹青/品红、铬金属点缀；扫描线、色差、故障转场、长发光阴影。
- 3D 超写实：真实纹理、拟物、金属、WebGL、触感；丰富金属色、深渐变；Three.js / CSS 3D、基于物理的运动、真实光照与反射。
- 鲜艳色块/极繁主义：大胆色块、双色调、高对比、几何、能量感；互补/三色亮色、深色上的霓虹；大块彩色区域、scroll-snap、戏剧性悬停缩放、动画图案。
- 暗色 OLED 奢华：深黑、OLED 优化、细微辉光、高级、电影感；#000000 加鲜艳点缀色（祖母绿、琥珀、电光蓝）；极简辉光、天鹅绒质感、电影感入场、支持 reduced-motion。
- 有机/生物形态：流体形状、blob、曲线、自然启发、手绘；大地色或柔和低饱和色；SVG 变形、黏稠效果、不规则边框、轻柔弹簧动画。
2. 不可妥协的前端规则
- 绝不使用 Inter、Roboto、Arial、system-ui 或任何默认 AI 字体。
- 使用有个性的字体（如 GT America、Reckless、Obviously、Neue Machina、Clash Display、Satoshi 等）。
- 到处使用 CSS 自定义属性。
- 一个主导色加锐利的点缀色。
- 至少一个令人难忘的标志性细节（颗粒、自定义光标、动画网格、对角分割等）。
- 打破居中卡片网格：不对称、重叠、对角流动。
- 英雄式、时机精准的动效优于零散的微交互。
- 完整满足 WCAG AA/AAA、焦点样式、语义化 HTML、prefers-reduced-motion。
3. 图像系统
当设计需要图像（主视觉、背景、卡片、插画等）时：
- 真实世界摄影（人物、办公室、自然、产品、纹理）：只使用真实的 Unsplash → Pexels → Pixabay 照片；提供以 .jpg/.png 结尾、带 ?w=1920&q=80 的直接图片 URL；交付可直接使用的标签加 SEO alt 文本。
- 主视觉、自定义背景、概念场景、插画：编写超详细、可直接粘贴的 Flux / Midjourney v6 / Ideogram 提示词，并用指定标记包裹： [IMAGE PROMPT START] Cinematic photograph of [exact scene that matches the design 100%], dramatic rim lighting, ultra-realistic, perfect composition, 16:9 --ar 16:9 --v 6 --q 2 --stylize 650 [IMAGE PROMPT END]
- 绝不编造假链接或低质量 AI 内容。
使用方式
资料未提供具体的安装命令、调用方式或配置步骤，暂未提供。从描述看，它作为一项技能被使用，输入设计需求后按上述风格与规则产出界面代码与图像方案。
适用场景
适合需要高视觉冲击力、可直接上线的前端界面设计任务，例如营销页、产品官网、作品集、概念演示等，尤其适合需要明确美学方向、真实配图或定制图像提示词的场景。
限制
- 资料未说明收费、价格、平台支持范围与具体效果数据，暂未提供。
- 图像部分对真实照片来源有严格限制（仅 Unsplash、Pexels、Pixabay），并要求直接链接格式。
- 字体与可访问性规则为硬性要求，需在实现中遵守。