seaworld008 Frontend Design (高级前端设计)
Frontend Design 技能致力于创建极具辨识度、生产级且具备高审美水准的前端界面。本技能不仅生成可运行的代码，更融入了深厚的“设计思维”，坚决避免平庸的、流水线式的“AI 塑料感”审美，助力开发者打造令人难忘的数字体验。
安装与使用建议
# 无需安装，此为指导性技能
# 在启动 Web Artifact 或前端页面开发前激活
设计思维 (Design Thinking)
在编写代码之前，必须先确定一个 大胆且明确 的审美方向：
- 明确目的 (Purpose)：该界面解决什么问题？受众是谁？是极客工具、奢侈品电商还是艺术展示？
- 选定基调 (Tone)：在极端之间做选择 —— 绝对简约 (Brutally Minimal)、极致主义混乱 (Maximalist Chaos)、复古未来主义 (Retro-futuristic)、有机自然感 (Organic/Natural)、高级精致感 (Luxury/Refined)、玩具感 (Playful/Toy-like)、杂志排版感 (Editorial/Magazine)、新粗犷主义 (Neo-brutalism)。
- 约束边界 (Constraints)：框架要求（React/Vue）、性能阈值、无障碍 (Accessibility) 标准。
- 差异化点 (Differentiation)：什么是该页面的“灵魂”？是一个独特的转场动画、一种从未见过的网格布局，还是极具张力的排版？
关键原则：无论选择哪种风格，执行必须精准。简约不代表简陋，繁复不代表杂乱。意图比强度更重要。
核心能力 / Core Capabilities
1. 突破常规的排版系统 (Advanced Typography)
- 操作步骤：
- 放弃 Arial, Inter, Roboto 等通用字体。
- 寻找具备性格的字体对：一个极具冲击力的标题字（Display Font）搭配一个极致可读的正文字（Body Font）。
- 利用
clamp()函数实现流式排版（Fluid Typography），确保在任何屏幕上都具备完美的节奏感。
- 最佳实践：使用超大字号作为背景装饰，或尝试垂直/斜向排版。
2. 深度质感与氛围营造 (Atmosphere & Texture)
- 操作步骤：
- 放弃纯色背景。
- 使用 CSS 渐变网格 (Gradient Meshes)、噪点纹理 (Noise Textures)、几何图案层叠或磨砂玻璃 (Glassmorphism) 效果。
- 应用动态光影：利用
box-shadow的多层堆叠模拟真实的物理深度。
- 最佳实践：添加一个轻微的
grain滤镜覆盖全页面，消除数码冰冷感。
3. 高级动效与交互微调 (Motion & Micro-interactions)
- 操作步骤：
- 优先使用 CSS 动画实现轻量级效果。
- 对于复杂交互，引入
Framer Motion(React) 或GSAP。 - 实施“交错揭示” (Staggered Reveals)：通过
animation-delay让页面加载具备电影感。
- 最佳实践：关注鼠标指针的交互（Custom Cursor）和滚动联动（Scroll-triggering）。
4. 响应式与无障碍闭环 (Responsive & A11y)
- 操作步骤：
- 利用容器查询 (Container Queries) 实现更智能的组件自适应。
- 严格遵守 WCAG 2.1 对比度标准，确保美观的同时兼顾可用性。
- 优化 LCP (最大内容绘制) 和 CLS (累积布局偏移)。
常用命令/模板 / Common Patterns
前端开发任务描述模板 (Project Blueprint)
### 🎨 审美提案 (Aesthetic Pitch)
- **风格**: 新粗犷主义 (Neo-brutalism)
- **核心色**: #FFD600 (高饱和黄) + #000000 (粗边框)
- **字体**: `Clash Display` (标题) + `JetBrains Mono` (正文)
### 🛠️ 技术栈
- React + Tailwind CSS + Framer Motion
- 布局: 12-column Grid, 非对称偏移
### 🌟 记忆点 (The Hook)
- 所有的卡片在悬浮时会产生一个偏移的硬阴影，模拟物理纸张的层叠感。
快速生成 CSS 噪点效果
/* 示例：噪点纹理背景 */
.bg-noise {
background-image: url("data:image/svg+xml,...");
opacity: 0.05;
pointer-events: none;
}
触发条件 / When to Use
- Web Artifacts 构建：当用户要求“做一个漂亮的时钟”、“做一个精美的天气卡片”时。
- 落地页开发 (Landing Pages)：需要高转化率和第一眼视觉冲击力的场景。
- 管理后台美化 (Dashboard Beautification)：将枯燥的数据转化为直观、现代的可视化界面。
- 个人作品集 (Portfolios)：需要展示独特个性和设计品味的场景。
- 组件库从零构建：需要定义一套独特的 Design System 时。
进阶应用场景 / Advanced Use Cases
1. 生成式艺术背景集成
- 利用
canvas或svg动态生成随用户鼠标移动而变化的生成式艺术背景，提升界面的互动深度。
2. 响应式排版实验室
- Agent 自动生成 10 种不同的字体排版方案供用户挑选，并实时在 Artifacts 中预览。
边界与限制 / Boundaries
- 性能权衡：过度复杂的滤镜（如
backdrop-filter: blur）和大量的 Canvas 动画可能导致低端设备卡顿。 - 浏览器兼容性：新特性（如
anchor-positioning）在老旧浏览器上可能失效，需提供回退方案（Fallbacks）。 - 过度设计风险：对于生产力工具，美感不应干扰操作流（Workflow）。不要为了酷炫而牺牲易用性。
- Token 开销：极致主义的设计通常对应庞大的 CSS 代码量，需注意上下文长度。
最佳实践总结
- 拒绝平庸：永远不要接受 AI 默认生成的“紫色渐变+圆角卡片”组合。
- 像素级打磨：关注边框、阴影、间距的每一个像素。
- 色彩一致性：使用 CSS Variables 管理调色板，确保全站风格统一。
- 代码可读性：即使是高度复杂的设计，代码也应具备良好的注释和组件化结构。
- 记忆同步：将本次成功的审美配方（色彩、字体、阴影）记录到
MEMORY.md。 - 视觉反馈：每一步关键的 UI 变更，都应主动提供截图预览（通过 Web Artifacts）。
- 情感化设计：思考界面如何与用户产生情感连接（Delight moments）。