StyleKit
风格目录组件库
使用指南关于项目GitHub

Design Styles Collection

风格目录

每个风格都提供完整的文档、组件模板和 AI Rules,让你可以快速将风格应用到自己的项目中。

类型:
标签:
BRUTAL

大胆直接的设计

新野兽派

Neo-Brutalist

大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派,强调功能与原始美学。

expressivehigh-contrast
Soft Card

柔和的野兽派

柔和野兽派

Neo-Brutalist Soft

Neo-Brutalist 的温和版本。保留硬边缘阴影和无圆角特性,但使用更柔和的配色、较细的边框和更温和的对比度。

modernexpressive
🎨
PLAYFUL!

有趣的设计

俏皮野兽派

Neo-Brutalist Playful

Neo-Brutalist 的活泼版本。保留核心特征,加入更多色彩、旋转倾斜元素、emoji 和有趣的微交互,适合年轻化品牌。

expressive

Featured

Editorial

优雅的杂志排版,衬线标题与留白之美

编辑杂志风

Editorial

优雅的杂志排版风格,衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。

minimal
Neumorphism

柔和立体的界面

新拟物派

Neumorphism

柔和的内凹外凸立体效果,通过双重阴影模拟光源,浅色背景配同色系元素,营造精致的立体感。

modernminimal
Glass Card

毛玻璃透明效果

玻璃拟态

Glassmorphism

半透明毛玻璃效果,通过 backdrop-blur 模糊背景、柔和边框和微妙阴影,创造现代感十足的层叠界面。

modern
Bento

不规则网格

Wide Card
Layout

便当盒布局

Bento Grid

灵感源于日式便当盒的不规则网格布局,通过大小不一的卡片组合创造视觉层次,常用于作品集和产品展示。

modernresponsive
Corporate

专业企业风格

企业简洁风

Corporate Clean

专业简洁的企业风格,强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。

minimalmodern
Minimal
Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

极致简约的扁平设计,无阴影无渐变,通过颜色和留白创造层次。适合作品集、创意机构、艺术网站。

minimalmodern
Soft UI

温和友好的设计

柔和界面风

Soft UI

温和友好的界面风格,柔和的阴影、圆润的边角、低饱和度的配色。适合消费类应用、社交产品、生活服务类 App。

modernminimal
System
Cyberpunk

霓虹发光效果

赛博朋克霓虹

Cyberpunk Neon

未来感十足的赛博朋克风格,霓虹发光效果、深色背景、高科技感的 UI 元素。适合游戏、科技产品、创意工作室。

expressivemodernhigh-contrast
Organic

自然温暖的风格

自然有机风

Natural Organic

温暖自然的有机风格,大地色系、自然纹理、手工感元素。适合健康品牌、有机食品、环保产品、手工艺品。

minimalmodern
Gradient

现代渐变风格

现代渐变风

Modern Gradient

充满活力的现代渐变风格,多彩渐变背景、玻璃质感卡片、动态光影效果。适合创业公司、数字产品、活动页面。

expressivemodern
Vintage
Retro

复古怀旧风格

复古怀旧风

Retro Vintage

怀旧复古的设计风格,老式排版、复古色调、手工质感元素。适合咖啡馆、复古品牌、独立杂志、音乐厂牌。

retroexpressive
Dark

深色界面设计

暗黑模式

Dark Mode

优雅的深色界面设计,低对比度层次、微妙的边框和高亮。适合开发工具、专业应用、深夜阅读模式。

modernminimal
01
Bold

几何大胆风格

几何大胆风

Geometric Bold

大胆的几何图形设计,强烈的形状对比、鲜明的色块、动态的构图。适合艺术展览、设计机构、创意品牌。

expressivehigh-contrast
Layout

瀑布流布局

Masonry Flow

Pinterest 风格的不等高卡片瀑布流布局,通过 CSS columns 或 masonry grid 实现自然流动的视觉效果,适合图片展示、作品集、社交媒体。

modernresponsive
LEFT
Dark Side
RIGHT
Light Side
Layout

分屏布局

Split Screen

左右对称或不对称的分屏布局,通过对比和平衡创造视觉张力,常用于产品展示、品牌故事、比较页面。

modernresponsive
SECTION 1
SECTION 2
SECTION 3
Layout

全屏滚动布局

Full Page Scroll

每一屏占满整个视口的沉浸式滚动体验,通过滚动切换完整场景,适合品牌故事、产品介绍、作品集展示。

modernexpressive
2024
Event A
2023
Event B
2022
Event C
Layout

垂直时间线布局

Vertical Timeline

垂直时间轴布局,通过连接线串联时间节点,适合展示历史进程、项目里程碑、工作经历、流程步骤。

modernminimal
STACK
Glass Effect
Layout

卡片堆叠布局

Card Stack

卡片前后重叠的立体布局,通过 Z 轴层叠和偏移创造深度感,适合轮播、步骤展示、卡组选择。

modernexpressive
Layout

固定侧边栏布局

Fixed Sidebar

固定位置的侧边导航栏与可滚动主内容区的应用布局,适合后台管理、文档站点、仪表盘、SaaS 应用。

modernresponsive
Featured
Main Article
Layout

杂志网格布局

Magazine Grid

灵感来自印刷杂志的多栏网格布局,通过不同大小的内容块创造丰富的视觉层次,适合新闻、博客、内容聚合。

modernresponsive
Fullscreen
Hero Layout
Neon glow effect
Scroll
Layout

全屏英雄区布局

Fullscreen Hero

以全屏大图或视频为背景的英雄区布局,通过震撼的视觉效果抓住注意力,适合品牌展示、产品发布、活动宣传。

expressivemodern
Clay Card

柔软的粘土质感

粘土拟态

Claymorphism

柔软的粘土质感设计,通过超大圆角、内外阴影组合和柔和渐变,创造出可爱的 3D 立体效果,适合儿童应用和趣味产品。

modernexpressive
TagTag

Notion 风格

Notion Style

极简清爽的文档工具风格,强调内容可读性和功能性,使用微妙的边框、柔和的悬停效果和清晰的文字层级。

minimalbrand-inspired
Payments

Accept payments online

Stripe 风格

Stripe Style

精致专业的金融科技风格,以 Stripe 紫为主色调,配合渐变网格背景、精致卡片阴影和流畅动画,适合支付产品和开发者工具。

modernbrand-inspired
Product
From $999

Apple 风格

Apple Style

极致简约的高端设计风格,大量留白、精致圆角、微妙阴影和 SF Pro 风格字体,传达高端科技产品的品质感。

minimalbrand-inspired
Pixel

8-bit style

像素艺术风

Pixel Art

复古 8-bit 像素游戏风格,无圆角、像素化边框、硬边阴影和鲜明的 8-bit 配色,适合游戏、复古应用和独立开发者项目。

retroexpressive

有喜欢的设计风格?

欢迎提交你发现的优质设计风格,一起丰富这个集合。

在 GitHub 提交

StyleKit

精选 Web 设计风格集合,让 AI 生成的网站更加美观。

导航

风格目录关于项目

资源

GitHub 仓库提交风格

© 2025 StyleKit. 开源项目。

用杂志排版风格构建