frontend-design

Name: frontend-design
Author: s-hiraoku

github.com/s-hiraoku设计与 UI1899 次安装3 周前更新

代码仓库

关于 frontend-design

Frontend Design 是面向界面开发的设计技能，帮助开发者在编写代码前明确用途、视觉方向与约束，并据此制定排版、配色、布局和交互细节。

主要功能

01先明确界面目标与视觉方向
02字体选择与文本溢出处理
03语义化颜色系统与对比度
04尊重减少动态效果偏好
05响应式布局与交互状态设计

适用场景

01规划新页面的视觉风格
02为界面建立颜色与字体规范
03检查动画和交互状态
04设计适配不同尺寸的组件布局

安装

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

$npx skills add https://github.com/s-hiraoku/synapse-a2a --skill frontend-design

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

详细介绍

前端设计

打造具有鲜明美感和专业水准的界面。避免千篇一律的“模板”风格。

设计流程

编写代码前，先回答以下问题：

目的 — 这个界面要解决什么问题？谁会使用它？
基调 — 采用什么美学方向？（粗野主义、奢华、活泼、编辑风、复古未来主义等）
约束 — 目标设备、无障碍要求、性能预算
标志性元素 — 哪一个元素能让人印象深刻？

坚定地选择一个方向。有瑕疵的大胆设计，也胜过畏首畏尾的设计。

排版

字体选择

避免使用过于常见的默认字体。选择能强化界面个性的字体。

/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */

排版细节

/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */

有意处理文本溢出：

/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }

色彩系统

主题架构

基于 CSS 自定义属性构建，并使用清晰的语义化命名。

:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}

色彩原则

选定一套配色 — 1 种主色 + 1–2 种强调色。避免使用 5 种颜色的彩虹配色。
使用 oklch — 感知均匀度更佳，也比 hex/hsl 更适合以编程方式生成配色。
对比度 — 正文至少为 4.5:1，大号文本至少为 3:1（WCAG AA）。

动效与动画

规则

尊重用户偏好：始终遵循 prefers-reduced-motion
仅为 transform 和 opacity 添加动画：它们由 GPU 合成，其他属性都会触发布局或绘制
绝不使用 transition: all：明确列出具体属性
动画必须可中断：用户操作应能取消正在运行的动画

/* GOOD: Specific properties, respects user preference */
.card {
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

高影响力时刻

将动画预算集中在：

页面切换 — 精心编排的交错式渐显
状态变化 — 加载 → 内容，折叠 → 展开
交互反馈 — 按钮按下、表单提交确认

避免：为每个元素添加随机悬停效果、劫持滚动、装饰性背景动画。

空间布局

布局原则

非对称更有趣 — 完全居中的网格布局容易让人预料
有意留白 — 留白是设计元素，不是错误
打破网格的元素 — 一个与网格重叠或延伸到网格之外的元素，能形成视觉焦点
对角线流动 — 视线沿对角线移动，比水平扫视更吸引人

响应式策略

/* Fluid typography */
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* Container queries for component-level responsiveness */
.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}

背景与氛围

通过层叠处理营造视觉纵深：

/* Noise texture overlay */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

/* Gradient mesh */
.hero {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.7 0.15 250 / 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.7 0.2 30 / 0.2), transparent 50%),
    var(--color-bg);
}

图像与媒体

// Explicit dimensions prevent layout shift
<Image src={src} width={800} height={600} alt="Description" />

// Below-fold: lazy load
<Image src={src} loading="lazy" alt="..." />

// Above-fold: prioritize
<Image src={src} priority alt="..." />

// Decorative: empty alt
<Image src={pattern} alt="" aria-hidden="true" />

交互状态

每个交互元素都需要 4 种状态：

状态	处理方式
默认	基础外观
悬停	提高对比度或轻微变化
焦点	通过 `:focus-visible` 显示可见的轮廓环
激活/按下	轻微缩放或颜色变化
禁用	降低不透明度 + `cursor: not-allowed`

.button {
  background: var(--color-accent);
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.button:hover { background: var(--color-accent-hover); }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.button:active { transform: scale(0.98); }

反模式

避免	应采用
所有地方都用 Inter/Roboto/Arial	选择有特色且适合项目的字体
白底紫色渐变	选定一套具体、协调的配色
统一的卡片网格	调整卡片尺寸，加入特色卡片或主视觉卡片
所有元素都加阴影	有目的地使用阴影，体现层级关系
所有元素都用 `border-radius: 9999px`	根据内容类型和使用场景选择圆角
千篇一律的悬停效果	根据元素功能定制交互反馈

支持 Markdown

登录后评论