Design Styles Collection
风格目录
每个风格都提供完整的文档、组件模板和 AI Rules,让你可以快速将风格应用到自己的项目中。
大胆直接的设计
新野兽派
Neo-Brutalist大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派,强调功能与原始美学。
柔和的野兽派
柔和野兽派
Neo-Brutalist SoftNeo-Brutalist 的温和版本。保留硬边缘阴影和无圆角特性,但使用更柔和的配色、较细的边框和更温和的对比度。
有趣的设计
俏皮野兽派
Neo-Brutalist PlayfulNeo-Brutalist 的活泼版本。保留核心特征,加入更多色彩、旋转倾斜元素、emoji 和有趣的微交互,适合年轻化品牌。
Featured
Editorial
优雅的杂志排版,衬线标题与留白之美
编辑杂志风
Editorial优雅的杂志排版风格,衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
柔和立体的界面
新拟物派
Neumorphism柔和的内凹外凸立体效果,通过双重阴影模拟光源,浅色背景配同色系元素,营造精致的立体感。
毛玻璃透明效果
玻璃拟态
Glassmorphism半透明毛玻璃效果,通过 backdrop-blur 模糊背景、柔和边框和微妙阴影,创造现代感十足的层叠界面。
不规则网格
便当盒布局
Bento Grid灵感源于日式便当盒的不规则网格布局,通过大小不一的卡片组合创造视觉层次,常用于作品集和产品展示。
专业企业风格
企业简洁风
Corporate Clean专业简洁的企业风格,强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
极简扁平风格
极简扁平风
Minimalist Flat极致简约的扁平设计,无阴影无渐变,通过颜色和留白创造层次。适合作品集、创意机构、艺术网站。
温和友好的设计
柔和界面风
Soft UI温和友好的界面风格,柔和的阴影、圆润的边角、低饱和度的配色。适合消费类应用、社交产品、生活服务类 App。
霓虹发光效果
赛博朋克霓虹
Cyberpunk Neon未来感十足的赛博朋克风格,霓虹发光效果、深色背景、高科技感的 UI 元素。适合游戏、科技产品、创意工作室。
自然温暖的风格
自然有机风
Natural Organic温暖自然的有机风格,大地色系、自然纹理、手工感元素。适合健康品牌、有机食品、环保产品、手工艺品。
现代渐变风格
现代渐变风
Modern Gradient充满活力的现代渐变风格,多彩渐变背景、玻璃质感卡片、动态光影效果。适合创业公司、数字产品、活动页面。
复古怀旧风格
复古怀旧风
Retro Vintage怀旧复古的设计风格,老式排版、复古色调、手工质感元素。适合咖啡馆、复古品牌、独立杂志、音乐厂牌。
深色界面设计
暗黑模式
Dark Mode优雅的深色界面设计,低对比度层次、微妙的边框和高亮。适合开发工具、专业应用、深夜阅读模式。
几何大胆风格
几何大胆风
Geometric Bold大胆的几何图形设计,强烈的形状对比、鲜明的色块、动态的构图。适合艺术展览、设计机构、创意品牌。
瀑布流布局
Masonry FlowPinterest 风格的不等高卡片瀑布流布局,通过 CSS columns 或 masonry grid 实现自然流动的视觉效果,适合图片展示、作品集、社交媒体。
分屏布局
Split Screen左右对称或不对称的分屏布局,通过对比和平衡创造视觉张力,常用于产品展示、品牌故事、比较页面。
全屏滚动布局
Full Page Scroll每一屏占满整个视口的沉浸式滚动体验,通过滚动切换完整场景,适合品牌故事、产品介绍、作品集展示。
垂直时间线布局
Vertical Timeline垂直时间轴布局,通过连接线串联时间节点,适合展示历史进程、项目里程碑、工作经历、流程步骤。
卡片堆叠布局
Card Stack卡片前后重叠的立体布局,通过 Z 轴层叠和偏移创造深度感,适合轮播、步骤展示、卡组选择。
固定侧边栏布局
Fixed Sidebar固定位置的侧边导航栏与可滚动主内容区的应用布局,适合后台管理、文档站点、仪表盘、SaaS 应用。
杂志网格布局
Magazine Grid灵感来自印刷杂志的多栏网格布局,通过不同大小的内容块创造丰富的视觉层次,适合新闻、博客、内容聚合。
全屏英雄区布局
Fullscreen Hero以全屏大图或视频为背景的英雄区布局,通过震撼的视觉效果抓住注意力,适合品牌展示、产品发布、活动宣传。
柔软的粘土质感
粘土拟态
Claymorphism柔软的粘土质感设计,通过超大圆角、内外阴影组合和柔和渐变,创造出可爱的 3D 立体效果,适合儿童应用和趣味产品。
Notion 风格
Notion Style极简清爽的文档工具风格,强调内容可读性和功能性,使用微妙的边框、柔和的悬停效果和清晰的文字层级。
Accept payments online
Stripe 风格
Stripe Style精致专业的金融科技风格,以 Stripe 紫为主色调,配合渐变网格背景、精致卡片阴影和流畅动画,适合支付产品和开发者工具。
Apple 风格
Apple Style极致简约的高端设计风格,大量留白、精致圆角、微妙阴影和 SF Pro 风格字体,传达高端科技产品的品质感。
8-bit style
像素艺术风
Pixel Art复古 8-bit 像素游戏风格,无圆角、像素化边框、硬边阴影和鲜明的 8-bit 配色,适合游戏、复古应用和独立开发者项目。