跳到主要内容
VibeStacks
  1. 前端技术栈
  2. 视觉风格
常设展 · 前端视觉风格

为你的下一个界面,挑一种风格。

每个展厅讲述一种风格的来历、原则与真实组件。逛完之后,把它作为纪念品带走——一份可以直接交给 AI 编程助手的风格说明。

  • Guide

    导览

    按情绪和适用场景,挑出适合你的展厅。

  • Docent

    讲解

    每个展厅是一堂幻灯片小课,画面本身就用该风格做成。

  • Compare

    对比

    同一张页面,左右两种风格,拖动分割线看差别。

  • Souvenir

    纪念品

    一键复制风格说明,交给你的 AI 编程助手。

情绪
适用场景
12 个展厅
展厅 011950 — 2008

瑞士风格

International Typographic Style

让网格说话,让文字自己站立。

  • 克制
  • 内容阅读
  • 作品集
展厅 021952 — 2014

粗野主义

Web Brutalism

不打磨,不讨好,把结构原样摆出来。

  • 张扬
  • 作品集
  • 内容阅读
展厅 032007 — 2020

毛玻璃

Glassmorphism

一层磨砂玻璃,隔着它看见色彩。

  • 平衡
  • 落地页
  • 作品集
展厅 041919 — 2019

包豪斯

Bauhaus

圆、方、三角,加上红、黄、蓝——用最基本的元素造出秩序。

  • 平衡
  • 落地页
  • 作品集
展厅 052020 — 2021

新粗野主义

Neo-Brutalism / Neubrutalism

粗黑描边、硬投影、糖果色——把粗野主义变得友好又好用。

  • 张扬
  • 落地页
  • 电商
展厅 061984 — 2008

拟物

Skeuomorphism

皮革、纸张、玻璃按钮——让屏幕上的东西看起来摸得着。

  • 平衡
  • 工具
  • 电商
展厅 072010 — 2013

扁平化

Flat Design

去掉高光、阴影和纹理,只留下颜色、文字和形状。

  • 平衡
  • 落地页
  • 电商
展厅 082014 — 2015

Material Design

材料设计

纸与墨水:用阴影讲清楚谁在谁上面。

  • 平衡
  • 工具
  • 后台
展厅 092019 — 2020

新拟态

Neumorphism / Soft UI

从同一块材料里"压"出来的界面:一侧亮、一侧暗,柔软地凸起或凹陷。

  • 克制
  • 工具
  • 后台
展厅 101998 — 1999

Y2K 千禧风

Y2K Aesthetic

镀铬、气泡、发光的蓝与粉——世纪之交对未来的乐观想象。

  • 张扬
  • 落地页
  • 作品集
展厅 111980 — 2015

孟菲斯

Memphis Design

波浪线、圆点、撞色和歪斜的几何——故意"不讲品味"的快乐。

  • 张扬
  • 落地页
  • 作品集
展厅 121934 — 2012

杂志编辑风

Editorial / Magazine

大标题、小导语、首字下沉与分栏——让网页像一本精心编排的杂志。

  • 克制
  • 内容阅读
  • 作品集