HomeStylesTemplates
StyleKit
StylesRecipesGuidesAnimationsTemplates

StyleKit

A curated web design style library to help AI generate better-looking websites.

Navigation

StylesTemplatesCommunityGuideBlogChangelog

Resources

UI Design PromptsLanding Page PromptsDashboard PromptsTailwind UI PromptsDark Mode UI PromptsGitHub Repository

Stay Updated

By subscribing, you agree to our Privacy Policy and Terms.


Support Maintenance

If StyleKit helps your workflow, voluntary support helps cover servers, domains, and ongoing upkeep.

Scan to support / View all options

(c) 2026 StyleKit. Open source project.

AboutContactPrivacyTermsBuilt with the Editorial style
Stylekit前端样式库stylekit.top陕ICP备2025065501号-3

Design Style Collection

Style Catalog

Every style includes complete documentation, component templates, and AI rules for quick integration.

Tip: press / to focus search, and Esc to clear.

Explore by goal

Active filters: Scenario: Portfolio

Type:
Tags:

19 results

新野兽派

Neo-Brutalist

大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派,强调功能与原始美学。包含经典、柔和、俏皮三种变体。

MarketingCreative
expressivehigh-contrast
Layout

便当盒布局

Bento Grid

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

PortfolioMarketing
modernresponsive

极简扁平风

Minimalist Flat

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

PortfolioE-Commerce
minimalmodern
Layout

瀑布流布局

Masonry Flow

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

PortfolioDashboard
modernresponsive
Layout

分屏布局

Split Screen

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

MarketingPortfolio
modernresponsive
Layout

全屏滚动布局

Full Page Scroll

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

MarketingPortfolio
modernexpressive
Layout

全屏英雄区布局

Fullscreen Hero

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

MarketingPortfolio
expressivemodern
Layout

Z型布局

Z-Pattern Layout

基于眼动追踪的Z型扫描布局,视线从左上到右上,斜穿到左下再到右下,形成Z字路径。适合着陆页、营销页面和简洁信息展示。

MarketingPortfolio
modernresponsive

俏皮野兽派

Neo-Brutalist Playful

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

MarketingCreative
expressive

日系清新风

Japanese Fresh

以淡雅配色、大面积留白和纤细线条为特征的日系清新设计,营造清新治愈、轻盈透气的视觉感受。

PortfolioDocs
minimalmodern

北欧极简风

Scandinavian Minimalism

源自北欧的温暖极简设计,强调自然材质、舒适留白、木质色调和Hygge生活美学,营造宁静温馨的视觉体验。

PortfolioBlog
minimalmodern

侘寂风

Wabi-Sabi

日本侘寂美学的数字化呈现,崇尚不完美之美、自然衰老之雅和极致留白之禅,以墨色、茶色和纸张质感传递东方诗意。

BlogPortfolio
minimalexpressive

枯山水

Zen Garden

日本枯山水庭园的数字化诠释,以砂纹、石组、苔藓为灵感,追求极致静谧与冥想感。沙白与苔绿的搭配传递出自然之道的宁静力量。

PortfolioDocs
minimalexpressive

黑色电影

Film Noir

源自 1940-50 年代经典黑色电影的戏剧性视觉风格。极致的明暗对比、深沉的灰阶层次、斜线光影和神秘氛围,适合故事驱动的产品、摄影作品集和高端品牌。

PortfolioMarketing
expressivehigh-contrast

粒子系统

Particle System

深色科技背景上漂浮的粒子网络,以连线、脉冲和轨迹营造数据流动感。适合科技公司、数据可视化、创意作品集。

PortfolioBlog
modernexpressive

韩式极简

Korean Minimal

韩国极简设计美学,受K-beauty和韩国建筑影响。柔和的粉彩色调、大量留白、精致的圆角和克制的装饰。

PortfolioDocs
minimalmodern

大理石奢华

Marble Luxury

大理石纹理与金色装饰的高端设计风格,白色大理石质感背景、金色线条分隔、黑色文字。适合奢侈品牌、酒店。

MarketingE-Commerce
modernminimal

工程蓝图

Blueprint

工程蓝图与技术图纸风格,蓝底白线、网格坐标、标注线和尺寸标记。适合建筑、工程、科技和教育领域。

PortfolioDocs
minimalmodern

奢品零售

Luxury Retail

高端零售与奢侈品牌风格,大面积留白搭配衬线字体,金色与大理石质感传递尊贵感。

E-CommerceMarketing
modernminimal