使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/madebymustafa/design-taste --skill neo-brutalism开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
neo-brutalism
One identity: a skills poster for a product that is unapologetically online — loud, honest, square.
1. PALETTE (Fixed)
- Paper:
#FFF8E7(warm bright). Alternate field:#FFEFC2slightly deeper. - Ink:
#0A0A0A— used for ALL borders (2.5px), text, and shadows. - Accents — exactly two: one dominant hot accent
#FF3878(fields, big elements, the hero moment) + one supporting cool accent#7CC6FE(secondary fields, marks, the sticker on the hot field). Two is the ceiling; one is fine. - NO gradients, NO soft/blurred shadows (
box-shadowmust be hard:6px 6px 0 #0A0A0Astyle), NO glass, NO dark-mode hero sections.
2. TYPOGRAPHY (Fixed)
- Display: a geometric grotesk at 700 (
Space Grotesk700,Archivo800),clamp(2.6rem, 7vw, 5.5rem), leading 0.98, tracking −0.02em. Sentence case is fine; never italic, never lowercase-everything-as-a-trend. - Body: same family 400/500, 16–17px, 1.5.
- Labels: mono caps (
IBM Plex Mono,Space Mono), 11px,letter-spacing: 0.06em— stamps, statuses, "NEW", version notes. - One emphasis trick set: highlight words by placing them on a translucent hot/sky swatch, or underlining with a 6px ink rule. Pick one, use ≤ 3 times.
3. COMPOSITION (Fixed)
- Everything is bordered. Every card, button, panel, sticker, input: 2.5px solid ink border, square or pill (no 6–20px soft radius unless the component is a pill). Include the hard offset shadow on 60–70% of elevated elements; flat components (bordered, no shadow) keep the page from tipping into chaos.
- Hero: giant display + oversized pill CTA + a hot field panel with a sky sticker on it; the panel and sticker can rotate 1–2°. Rotation budget: 3 elements per page max.
- Color distribution: hot fields ≤ 2 per viewport, sky fields ≤ 2, everything else paper. Never two hot fields side by side.
- Sections: alternate paper and ink fields (ink sections: paper text). Full-bleed allowed. Pricing: three cards — paper / hot / paper; the hot card gets the biggest shadow.
- Buttons: min 56px height, 2.5px border,
6px 6px 0 #0A0A0Ashadow, pressed state =translate(6px, 6px)with shadow removed.
4. CONTENT TREATMENT
- No emoji. Decorative marks: ✳, ★, →, ◦, •• and simple drawn SVGs (thick strokes, flat fills, only the two accents + ink).
- Copy is part of the identity: direct, a little cocky, zero corporate filler ("You probably have better things to do than learn SQL" > "Streamline your analytics workflow").
- One exclamation mark per page, max. Compliments to the reader allowed ("You're doing great.").
- Price details formatted like packaging labels: mono, bordered, stamped "MOST POPULAR".
5. MOTION (Snappy, Visible, Short)
- Entrances: 150–250ms snap with 2px overshoot on the shadow (
cubic-bezier(0.34, 1.56, 0.64, 1)), or straight 120ms pops. No long cinematic reveals. - Hover: border color flips to an accent, or shadow grows 2px. Press: shadow collapses (see §3).
- Loops: absolutely none — no marquees, no bouncing arrows, no infinite wiggle. The page is confident, not nervous.
6. CHECKLIST (Fail the Page If…)
- [ ] Any element without a 2.5px ink border (backgrounds and images excepted).
- [ ] Any soft shadow or gradient.
- [ ] More than two accent colors.
- [ ] More than ~3 rotated elements.
- [ ] Any emoji.
- [ ] A "corporate voice" sentence anywhere in the copy.
- [ ] Two hot accent fields side by side.
- [ ] An element that looks like it came from a Tailwind template.
