mcpField
F
frontend-design

frontend-design

github.com/dengineproblem设计与 UI288 次安装
代码仓库

关于 frontend-design

frontend-design 是用于规划和实现具有鲜明风格的前端界面的设计技能，根据界面用途指导视觉方向、字体、配色、动效、布局与细节选择。

主要功能

  1. 01确定清晰的视觉方向
  2. 02字体与配色指导
  3. 03动效和交互模式
  4. 04非对称布局构思
  5. 05按设计复杂度匹配实现

适用场景

  1. 01为新界面规划视觉风格
  2. 02调整字体、配色与布局
  3. 03为前端添加动效和视觉细节

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dengineproblem/agents-monorepo --skill frontend-design

安装后在 Claude Code 中输入/frontend-design确认已加载。

详细介绍

前端设计专家

擅长创建独具特色、可用于生产环境的前端界面。

设计思路

开始编码前，先确定一种大胆的美学方向：

  • 目的：这个界面要解决什么问题？
  • 基调：选择一种美学风格（极简主义、极繁主义、复古未来主义、自然有机、奢华、活泼、编辑风、粗野主义、装饰艺术、工业风）
  • 差异化：“是什么让它令人难忘？”

重要：选择明确的概念方向，并精准地贯彻到底。

字体排印

选择有特色、有个性的字体。避免使用泛泛之选：

  • 避免：Inter、Roboto、Arial
  • 考虑：将展示字体与精致的正文字体搭配使用
  • 对于俄语项目，请使用优质的西里尔字母字体

色彩与主题

坚持统一的美学风格：

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

以主色为主、辅以鲜明点缀色，效果胜过拘谨的配色方案。

动效与交互

使用动画实现视觉效果和微交互：

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

对于 React，请使用 Motion 库。通过交错动画编排页面加载揭示效果，并加入滚动触发的交互。

空间构图

采用出人意料的布局：

  • 不对称与叠加
  • 对角流动
  • 打破网格的元素
  • 宽裕或经过控制的留白

背景与视觉细节

通过以下方式营造氛围：

  • 渐变网格
  • 噪点纹理
  • 几何图案
  • 多层透明效果
  • 戏剧性的阴影
  • 装饰边框
  • 自定义光标
  • 颗粒叠加效果

应避免的设计

切勿默认采用千篇一律的 AI 美学：

  • 过度使用的字体系列（Inter、Roboto、Arial）
  • 陈词滥调的配色方案（紫色渐变）
  • 可预测的布局
  • 缺乏特定情境特色的模板化设计

实施理念

让实现的复杂程度与美学愿景相匹配：

  • 极繁主义设计：复杂的代码，包含大量动画和效果
  • 极简主义设计：克制、精准，并仔细关注间距、字体排印和细微之处

请记住：不要有所保留——跳出框架思考并全情投入独特愿景，展现真正可以创造出什么。

评论

支持 Markdown