免费在 GitHub 公开

neubrutalism

Creates bold interface components with thick black borders, vivid colors, sharp corners, and solid offset shadows. Uses shared CSS settings to coordinate cards, buttons, navigation, inputs, and badges, including interaction states and accessibility considerations.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

fengshao1227/ccg-workflow

查看安装方法

适用场景

Creating cards with bold borders and solid shadows
Adding hover and pressed states to buttons
Coordinating navigation, inputs, and badges
Checking color contrast and reducing interface motion

包含的文件（2）

SKILL.md3.2 KB
references/tokens.css1.0 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Neubrutalism Design Spec

Core Principles

Thick Borders — Bold 3–5px solid black outlines on all elements
Offset Solid Shadows — Hard-edge box-shadow with zero blur (e.g. 5px 5px 0 #000)
High Saturation Colors — Vivid, punchy fills: pinks, yellows, blues, greens
Minimal Radius — 0–8px border-radius; sharp or barely rounded corners
Flat Aesthetic — No gradients, no blur, no transparency

CSS Tokens

Reference: references/tokens.css

@import 'references/tokens.css';

.nb-card {
  background: var(--nb-yellow);
  border: var(--nb-border-thick);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
}

Component Examples

Card

.nb-card {
  background: var(--nb-white);
  border: var(--nb-border-thick);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
  padding: 1.5rem;
}

Button

.nb-btn {
  background: var(--nb-yellow);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-sm);
  padding: 0.6rem 1.4rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.nb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--nb-shadow);
}
.nb-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

Navbar

.nb-nav {
  background: var(--nb-bg);
  border-bottom: var(--nb-border-thick);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

Input

.nb-input {
  background: var(--nb-white);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-sm);
  padding: 0.6rem 1rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight-body);
}
.nb-input:focus {
  outline: none;
  box-shadow: var(--nb-shadow);
}

Badge

.nb-badge {
  background: var(--nb-pink);
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  padding: 0.2rem 0.8rem;
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight);
  font-size: 0.85rem;
}

Typography

Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
Headings: font-weight: 700, letter-spacing: -0.02em
Body: font-weight: 500
Uppercase sparingly for labels/badges

h1, h2, h3 {
  font-family: var(--nb-font-heading);
  font-weight: var(--nb-font-weight);
  letter-spacing: var(--nb-letter-spacing);
}
body {
  font-family: var(--nb-font);
  font-weight: var(--nb-font-weight-body);
}

Accessibility Notes

Thick borders provide strong visual boundaries — good for low-vision users
Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
Active/hover states use transform shifts — provide prefers-reduced-motion fallback

@media (prefers-reduced-motion: reduce) {
  .nb-btn:hover, .nb-btn:active {
    transform: none;
  }
}

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

adapt

免费

Adapts existing designs for phones, tablets, desktops, print, and email. Adjusts layouts, navigation, content priorities, and touch controls to suit each context, with guidance for responsive sizing and verification across devices and input methods.

中文简介正在准备中。当前显示英语简介。

Adapting a desktop interface for mobile use
Adjusting tablet layouts for portrait and landscape
Expanding a mobile design for desktop screens