沉思波

外观

设计语言 ​

把「好看」从眼睛里搬到规则里。

AI 已经能写页面了，但它写出来的东西长得都一样——因为风格没有被写成规则，只留在人的眼睛里。

这个栏目做的事，是把设计风格与动效拆成可执行、可检索、可复制的东西：

  • 一种风格 = 一套色板 + 一组边框与阴影规则 + 一份间距与字号比例 + 一段能直接交给 AI 的提示词
  • 一个动效 = 一段 HTML/CSS/JS + 一组可实时调节的参数 + 一键复制的源码

有了这些，你跟 AI 说「用新野兽派做一个记账页」「给按钮加点击波纹」，它就不会自由发挥，而是照着规则做。

收录了什么 ​

收录数量用途入口
设计风格143 种定调子：色板、组件规则、CSS、tokens风格词典（本页可搜索）
页面模板35 个整页起点：着陆页、博客、后台、登录…模板目录
组件配方143 组单组件的做法：按钮、卡片、表单配方目录
前端动效160 个动起来：入场、文字、交互、着色器动效实验室
提示词13 组直接喂给 AI 的成套提示词提示词目录
设计指南7 篇色彩、排版、层级、间距的基础课指南目录

每种风格给两个页面：规则详情（身份、色板、AI 实现规则、组件实现、CSS、tokens）和真实展示（能点、能滚、能交互的完整页面）。每个动效都有重播、调参、代码复制。

怎么用 ​

  1. 找感觉：浏览下面的风格卡片，点「真实展示」看效果；动效直接进动效实验室按分类翻。
  2. 抄规则：点「规则详情」，CSS 和 design tokens 直接复制走；动效页右侧代码面板可一键复制 HTML/CSS/JS。
  3. 让 AI 照做：风格规则页底部有成套的示例提示词，复制给你的 AI；动效站还提供了打包好的 SKILL.md，装进你的 Agent 就能用自然语言要动效源码。
143 / 143 种

新野兽派

Neo-Brutalist

视觉表现力

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

规则详情真实展示

编辑杂志风

Editorial

视觉极简

优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。暖米色背景、柔和黑文字、精细的透明度层次和动画下划线交互。

规则详情真实展示

新拟物派

Neumorphism

视觉现代

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

规则详情真实展示

玻璃拟态

Glassmorphism

视觉现代

夜航质感的高级毛玻璃。深墨夜景配克制光源，玻璃只借光、不带色：高斯模糊、饱和度增强、受光顶边与噪点颗粒，营造真实玻璃的安静高级感。

规则详情真实展示

便当盒布局

Bento Grid

布局现代

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

规则详情真实展示

企业简洁风

Corporate Clean

视觉极简

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

规则详情真实展示

极简扁平风

Minimalist Flat

视觉极简

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

规则详情真实展示

柔和界面风

Soft UI

视觉现代

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

规则详情真实展示

自然有机风

Natural Organic

视觉极简

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

规则详情真实展示

现代渐变风

Modern Gradient

视觉表现力

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

规则详情真实展示

复古怀旧风

Retro Vintage

视觉复古

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

规则详情真实展示

暗黑模式

Dark Mode

视觉现代

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

规则详情真实展示

macOS 毛玻璃

macOS Vibrancy

视觉现代

macOS 原生暗色毛玻璃风格。通过多层深灰面板、系统级 backdrop-blur 和极度克制的装饰，还原桌面应用的沉稳质感。

规则详情真实展示

几何大胆风

Geometric Bold

视觉表现力

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

规则详情真实展示

瀑布流布局

Masonry Flow

布局现代

Pinterest 风格的不等高卡片瀑布流布局，通过 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

视觉极简

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

规则详情真实展示

Stripe 风格

Stripe Style

视觉现代

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

规则详情真实展示

Apple 风格

Apple Style

视觉极简

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

规则详情真实展示

像素艺术风

Pixel Art

视觉复古

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

规则详情真实展示

霓虹复古

Neon Retro

视觉复古

80-90年代复古未来主义美学，粉紫渐变、霓虹色彩、故障艺术效果。包含蒸汽波、合成波、赛博朋克三种变体。

规则详情真实展示

千禧风格

Y2K

视觉复古

2000年代初的未来主义美学，金属质感、透明塑料、气泡元素、银色和彩虹渐变，充满对数字时代的乐观想象。

规则详情真实展示

孟菲斯风格

Memphis

视觉复古

80年代意大利设计运动，大胆的几何图形、鲜艳的撞色、不规则形状和有趣的图案，打破传统设计规则。

规则详情真实展示

装饰艺术风格

Art Deco

视觉复古

1920-30年代的奢华设计风格，几何对称图案、金色装饰、优雅线条和高端质感，传达精致与繁荣。

规则详情真实展示

包豪斯风格

Bauhaus

视觉现代

德国包豪斯学派的设计理念，强调功能主义、几何形式和原色运用，形式追随功能的现代主义经典。

规则详情真实展示

拟物设计

Skeuomorphism

视觉复古

模拟真实世界物体的数字设计风格，通过纹理、光影、材质模仿现实物品，带来熟悉感和直觉性体验。

规则详情真实展示

瑞士国际风格

Swiss International

视觉现代

源于瑞士的理性主义设计风格，强调网格系统、无衬线字体、清晰层次和客观信息传达，是现代平面设计的基石。

规则详情真实展示

吉卜力风格

Ghibli Style

视觉表现力

灵感源自吉卜力工作室动画的设计风格，温暖柔和的色调、手绘质感、自然元素和梦幻氛围，传递治愈与诗意。

规则详情真实展示

材料设计

Material Design

视觉现代

Google 推出的设计系统，基于纸张和墨水的隐喻，强调层次、动效、大胆色彩和响应式交互，是现代移动端设计的标准。

规则详情真实展示

流利设计

Fluent Design

视觉现代

微软推出的设计系统，融合了光效、深度、动效、材质和缩放五大元素，打造自然直观的跨平台体验。

规则详情真实展示

漫画风格

Comic Style

视觉表现力

灵感源自漫画书和日式漫画的设计风格，浓重的墨线边框、网点填充、对话气泡、动作线和分镜面板布局，充满故事感和视觉冲击力。

规则详情真实展示

铅笔手绘风

Sketch Style

视觉表现力

模拟铅笔手绘的设计风格，不规则线条边框、纸张纹理背景、手写字体感、素描阴影和涂鸦装饰，传达亲切温暖的手工质感。

规则详情真实展示

水彩画风

Watercolor Style

视觉表现力

灵感源自水彩画的设计风格，柔和的颜色渐变、模糊的边缘效果、纸张质感背景和流动的色彩扩散，传递艺术感与诗意。

规则详情真实展示

F型布局

F-Pattern Layout

布局现代

基于眼动追踪研究的F型扫描布局，用户视线从左上角开始，沿顶部水平扫描后向下移动，适合内容密集型页面、博客文章和新闻列表。

规则详情真实展示

Z型布局

Z-Pattern Layout

布局现代

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

规则详情真实展示

圣杯布局

Holy Grail Layout

布局现代

经典的三栏式网页布局，由固定页头、三列中间区域（左侧导航、主内容、右侧边栏）和固定页脚组成，是Web设计的基础布局范式。

规则详情真实展示

仪表盘布局

Dashboard Layout

布局现代

数据驱动的仪表盘布局，包含侧边导航、顶部工具栏、多模块数据面板和图表区域，适合后台管理系统、数据分析平台和监控面板。

规则详情真实展示

赛博朋克霓虹

Cyberpunk Neon

视觉表现力

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

规则详情真实展示

合成波

Synthwave

视觉复古

80年代复古未来主义音乐美学，霓虹粉紫配色、网格地平线、日落渐变和复古科技感，充满怀旧的未来想象。

规则详情真实展示

柔和野兽派

Neo-Brutalist Soft

视觉表现力

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

规则详情真实展示

俏皮野兽派

Neo-Brutalist Playful

视觉表现力

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

规则详情真实展示

新艺术运动风

Art Nouveau

视觉复古

源自19世纪末的有机曲线美学，以流动的藤蔓纹样、自然花卉元素、Mucha风格海报装饰和优雅的衬线字体为特征，传递自然与艺术的和谐统一。

规则详情真实展示

超现实主义风

Surrealism

视觉表现力

灵感源自Dali等超现实主义大师，梦境般的场景构成、不合逻辑的空间关系、融化变形的形态和意想不到的色彩组合，营造神秘而引人入胜的视觉体验。

规则详情真实展示

浮世绘数字风

Ukiyo-e Digital

视觉复古

灵感源自日本浮世绘木版画，以靛蓝、朱红、金叶为主色调，扁平化设计、强烈的轮廓线、波浪纹样和北斋式构图，将传统东方美学融入现代数字界面。

规则详情真实展示

哥特式风

Gothic

视觉复古

中世纪哥特建筑美学，尖拱、玫瑰窗、手抄本装饰、大教堂氛围。深紫与血红配色，金色装饰线条，充满黑暗而庄严的神秘气息。

规则详情真实展示

Outrun 复古未来

Outrun

视觉复古

80年代日落、棕榈树剪影、跑车、网格地平线和复古浪潮美学。洋红与紫色霓虹、青色天空，充满速度感和怀旧未来主义。

规则详情真实展示

暗黑学院风

Dark Academia

视觉复古

古典大学图书馆、皮革装帧书籍、古典文学和老式校园美学。深棕与墨绿配色，暗金点缀，温暖而沉静的学术氛围。

规则详情真实展示

田园核风

Cottagecore

视觉复古

田园乡村美学，花卉图案、刺绣质感、蘑菇元素和温馨家庭感。柔和的衬线字体、圆润边角、温暖自然的配色，唤起对简单田园生活的向往。

规则详情真实展示

Risograph 印刷风

Risograph

视觉表现力

Risograph 印刷机的独特美学，2-3色套印效果、半调网点、套印错位和有限色彩，呈现独特的印刷质感和手工批量感。

规则详情真实展示

机甲风

Mecha

视觉表现力

灵感源自高达/EVA等机甲动画的设计风格，科技面板、警告标识、机械质感，军绿和深蓝底色搭配警告黄和危险红，充满工业力量感。

规则详情真实展示

哥特萝莉风

Gothic Lolita

视觉表现力

维多利亚蕾丝、黑色缎带、十字架与玫瑰的暗黑优雅，融合哥特式建筑装饰与洛丽塔精致细节的暗色浪漫美学。

规则详情真实展示

赛博中华风

Cyber Chinese

视觉表现力

传统中华美学与赛博朋克科幻的碰撞融合，朱红金黄搭配霓虹蓝紫，龙凤印章与霓虹灯笼交织的未来东方幻想。

规则详情真实展示

酸性平面设计

Acid Graphics

视觉表现力

高饱和度荧光色彩、扭曲字体、液态流动形态和迷幻视觉。源于锐舞文化和地下俱乐部美学，以强烈的视觉冲击力呈现反叛与实验精神。

规则详情真实展示

手绘涂鸦风

Hand-Drawn Doodle

视觉表现力

手绘线条、涂鸦插画、不规则形状和手写字体。像在笔记本上随手画出的设计，充满创意和趣味性，传达温暖亲切的手工感。

规则详情真实展示

瑞士海报风

Swiss Poster

视觉现代

大胆排版、网格对齐、原色色块和实验性布局。源于瑞士国际主义海报设计传统，以超大字体和强烈的视觉层次构建信息传达。与 swiss-style 的区别在于更注重海报级别的实验性大排版。

规则详情真实展示

水彩艺术风

Watercolor Art

视觉表现力

真实水彩画美学，有机的晕染边缘、颜料池化效果、纸张纹理叠加和植物水彩装饰，营造如同手绘水彩画般的自然有机视觉体验。

规则详情真实展示

油画印象派风

Impressionist Oil

视觉表现力

受莫奈、雷诺阿等印象派大师启发，大胆的笔触纹理、斑驳光影、点彩色彩和温暖的画布质感，呈现如油画般的浓郁视觉体验。

规则详情真实展示

沉浸摄影

Immersive Photo

视觉表现力

摄影即界面。全幅大图铺满视口，文字压在图上、靠可读性遮罩浮起；缓慢的 Ken Burns 推拉让静照呼吸，模糊占位先行、真图渐显。图是内容不是背景，排版为让照片说话而生。

规则详情真实展示

拼贴艺术风

Collage Art

视觉表现力

杂志拼贴和混合材料美学，纸片剪切、多层叠加、撕纸边缘和混搭字体，营造充满创意和手工感的视觉冲击。

规则详情真实展示

电影视频首屏

Cinematic Video Hero

视觉表现力

以短循环视频开场的电影级首屏。海报帧先出作 LCP，视频进视口才静音自动播、无缝循环；文字压在可读性遮罩上，暗场调色与缓慢运动营造预告片般的沉浸开场。

规则详情真实展示

故障艺术风

Glitch Art

视觉表现力

数字故障美学风格，通过RGB色彩通道分离、水平位移带、扫描线纹理、VHS追踪错误和数据损坏块，呈现赛博朋克式的视觉冲击和信号腐蚀质感。

规则详情真实展示

视觉小说风

Visual Novel

视觉现代

借鉴ADV视觉小说游戏UI的设计风格，半透明对话框面板、角色铭牌徽章、装饰性边角框线、分支选项按钮和存档界面，打造沉浸式交互故事体验。

规则详情真实展示

少女漫画风

Shoujo Manga

视觉表现力

少女漫画特有的浪漫美学，网点纹理背景、花朵框线装饰、缎带横幅标题、多角星闪光效果、蕾丝边框和爱心元素，以粉色主色调呈现梦幻柔美的视觉体验。

规则详情真实展示

赛博动漫风

Cyber Anime

视觉表现力

融合赛博朋克科幻UI与动漫美学，以HUD抬头显示、全息投影面板、机甲边框和多层霓虹光效，打造未来感十足的动漫界面风格。

规则详情真实展示

像素动漫风

Pixel Anime

视觉复古

将经典JRPG游戏UI与像素动漫美学融合，以RPG对话框、状态条、像素边框和NES色板打造怀旧8-bit游戏界面风格。

规则详情真实展示

日系清新风

Japanese Fresh

视觉极简

以Ma (间) 留白哲学、侘寂美学和极致呼吸感为核心，通过发丝级边框、植物线描装饰和极简温暖中性色，营造沉静治愈的设计体验。

规则详情真实展示

霓虹武士风

Neon Samurai

视觉表现力

日本传统武士美学与霓虹赛博朋克的碰撞融合，刀锋斜切线条、朱红的鸟居门框架、书法笔触与双色霓虹光效交织，浮世绘遇见霓虹灯的未来都市武道。

规则详情真实展示

魔法阵风

Magic Circle

视觉表现力

同心圆环嵌套体系、六芒星几何核心、符文铭文沿圆路径排列、生命之花神圣几何、金色辉光辐射与炼金术符号交织的奇幻视觉风格。

规则详情真实展示

赛博和风

Cyber Wafuu

视觉表现力

青海波纹样与电路走线融合、鸟居门导航框架、麻叶纹网格、金继ぎ金色修复线、障子屏风格栅面板、传统纹样被科技'侵入'的日式赛博美学。

规则详情真实展示

蒸汽朋克

Steampunk

视觉表现力

维多利亚时代工业机械美学，黄铜与铜质金属元素、齿轮机关装饰、蒸汽管道铆钉细节。适合复古科幻、工业风格、创意展示项目。

规则详情真实展示

波普艺术

Pop Art

视觉表现力

大胆鲜明的波普艺术风格，灵感来自 Andy Warhol 和 Roy Lichtenstein。粗黑轮廓、半色调网点、漫画式对话泡泡、高饱和度色块。适合创意品牌、潮流文化、艺术展示。

规则详情真实展示

太阳朋克

Solarpunk

视觉表现力

乐观的生态未来主义风格，融合自然与科技的和谐美学。有机曲线、植物元素、温暖渐变、柔和圆角。适合环保、可持续发展、绿色科技产品。

规则详情真实展示

日式RPG

JRPG

视觉表现力

经典日式 RPG 菜单与对话框美学，斜面边框、渐变背景、状态栏、华丽框架。适合游戏界面、互动叙事、奇幻风格产品。

规则详情真实展示

非对称网格

Asymmetric Grid

布局现代

打破传统对称网格的布局方式，通过不规则的列宽、重叠元素和视觉张力创造动态有趣的页面结构，适合创意作品集、艺术展览和品牌展示。

规则详情真实展示

视差滚动

Parallax Sections

布局现代

通过固定背景和滚动内容创造深度视差效果的沉浸式布局，每个全屏区块都有独立的背景层，适合品牌故事、产品展示和沉浸式体验页面。

规则详情真实展示

暖色仪表盘

Warm Dashboard

视觉现代

温暖柔和的仪表盘设计风格，采用珊瑚/赤陶色背景、奶油白卡片、柔和阴影，营造舒适专业的数据展示体验。

规则详情真实展示

霓虹渐变

Neon Gradient

视觉表现力

深色背景上的鲜艳渐变卡片，配合粗彩色边框和霓虹发光效果，适合科技产品、SaaS 着陆页、年轻化品牌。

规则详情真实展示

Apple 流动玻璃

Apple Liquid Glass

视觉现代

Apple WWDC 2025 发布的全新设计语言，通过 SVG 折射滤镜、彩虹边缘光晕、流体形变动画和多层玻璃堆叠，创造出超越传统毛玻璃的有机流动视觉体验。

规则详情真实展示

北欧极简风

Scandinavian Minimalism

视觉极简

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

规则详情真实展示

赛璐璐动画风

Cel Shading

视觉表现力

模拟传统动画赛璐璃片的渲染风格，粗黑轮廓线、平面色块填充、无渐变阴影和鲜艳饱和色彩，充满卡通游戏的活力感。

规则详情真实展示

侘寂风

Wabi-Sabi

视觉极简

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

规则详情真实展示

枯山水

Zen Garden

视觉极简

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

规则详情真实展示

科幻HUD

Sci-Fi HUD

视觉现代

源自星际飞船驾驶舱和战术指挥中心的全息显示界面。深空背景、青色发光边框、半透明玻璃面板、雷达扫描动效，营造'正在操作高科技设备'的沉浸体验。

规则详情真实展示

滚动叙事

Scrollytelling

布局表现力

滚动就是叙事进度条。一块 sticky 画布钉在视口中央，文字步骤逐段划过时触发画布状态切换——数字跳动、图形变形、图层点亮。信息随阅读进度一帧帧揭示，像纽约时报的数据长报道。

规则详情真实展示

可爱极简

Kawaii Minimal

视觉极简

融合日系可爱文化与极简设计的温柔风格。柔和的粉彩色系、圆润形状、轻盈留白和细腻的微交互，适合生活方式应用、儿童产品和创意工具。

规则详情真实展示

黑色电影

Film Noir

视觉复古

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

规则详情真实展示

街机CRT

Arcade CRT

视觉复古

80-90年代街机显示器美学，包含扫描线、屏幕曲率、霓虹辉光和RGB色差效果。适合游戏、复古科技、创意项目。

规则详情真实展示

Frutiger Aero

Frutiger Aero

视觉复古

Windows Vista/7时代的玻璃质感美学，天空蓝渐变、半透明毛玻璃面板与自然元素融合，营造清新通透的数字自然感。

规则详情真实展示

反设计

Anti-Design

视觉表现力

故意打破传统UI规范的粗野主义实验风格，极粗边框、高饱和色彩与不规则排版

规则详情真实展示

全息渐变

Holographic

视觉表现力

彩虹光谱虹彩渐变美学，模拟全息投影的棱镜折射与动态光效，营造超凡脱俗的虹彩体验。

规则详情真实展示

生成艺术

Generative Art

视觉表现力

算法驱动的程序化视觉美学，以数学函数、噪声纹理和参数化图形创造独特动态界面。适合创意编程、数据可视化、艺术项目。

规则详情真实展示

粒子系统

Particle System

视觉现代

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

规则详情真实展示

视差杂志

Parallax Editorial

布局表现力

有物理纵深的杂志排版。暖纸底色上，前景文字与背景层以不同速率滚动，制造真实的层叠景深；sticky 图文交错、章节编号、首字下沉，把长内容读成一场有节奏的翻页。

规则详情真实展示

VHS美学

VHS Aesthetic

视觉复古

80-90年代VHS录像带视觉美学，色彩失真、扫描线噪点与信号故障效果。适合怀旧、复古科技、创意影像项目。

规则详情真实展示

水墨画风

Ink Wash

视觉极简

源自中国传统水墨画的设计风格，以墨色浓淡干湿变化营造空灵意境，大量留白表达'气韵生动'，适合文化品牌、茶道、书法和东方美学项目。

规则详情真实展示

单色极简

Monochrome

视觉极简

纯黑白灰的极致单色设计，通过精确的灰阶层次、字重对比和负空间构建视觉层次，不依赖任何色彩即达到高级感。适合摄影、建筑和高端品牌。

规则详情真实展示

赤陶暖调

Terracotta

视觉极简

地中海赤陶与暖色大地的设计风格，温暖的陶土色调、粗糙手工质感和自然纹理。适合生活方式品牌、餐饮、旅行和手工艺品展示。

规则详情真实展示

网页粗野主义

Brutalist Web

视觉复古

回归90年代早期互联网的原始HTML美学，系统字体、蓝色下划线链接、纯白背景、无装饰，内容优先于形式。

规则详情真实展示

中世纪现代

Mid-Century Modern

视觉复古

50年代原子时代设计美学，几何图案、有机曲线、饱和色彩。Eames椅、原子钟、星芒图案为灵感。

规则详情真实展示

构成主义

Constructivism

视觉复古

苏联构成主义海报风格，强烈的红黑配色、对角线构图、几何块面、宣传性排版。

规则详情真实展示

欧普艺术

Op Art

视觉表现力

光学艺术运动风格，利用几何图案制造视觉幻象和运动感。黑白对比为核心，辅以振动色彩对。

规则详情真实展示

伊斯兰几何

Islamic Geometric

视觉表现力

伊斯兰几何纹理设计风格，精密的几何镶嵌图案、阿拉伯式花纹、金色与深蓝的经典配色。

规则详情真实展示

印度节庆

Indian Festive

视觉表现力

印度排灯节与色彩节的绚丽美学，丰富的金色装饰、宝石色调、曼荼罗纹饰。适合庆典、活动、生活方式品牌。

规则详情真实展示

非洲纺织

African Textile

视觉表现力

西非Kente布和Adire扎染为灵感的设计风格，大胆的几何编织图案、大地色与鲜明色彩的碰撞、手工质感。

规则详情真实展示

动力学排印

Kinetic Typography

视觉表现力

文字即界面的动态排印风格。墨黑舞台上，可变字体的字重与字宽成为动画本体：逐字登场、字重呼吸、滚动速度拉伸字宽。一切动效只属于文字，唯一的信号橙负责指路。

规则详情真实展示

韩式极简

Korean Minimal

视觉极简

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

规则详情真实展示

粉彩哥特

Pastel Goth

视觉表现力

柔暗美学与糖果色的独特融合，粉紫粉蓝等柔和色彩搭配骷髅、十字架等暗系元素。暗色背景+粉彩高亮。

规则详情真实展示

极繁主义

Maximalism

视觉表现力

极繁主义设计——更多就是更多。层叠图案、混搭字体、饱和色彩、装饰性边框。与极简主义形成鲜明对比，拥抱丰富、华丽和视觉冲击。

规则详情真实展示

中世纪手抄本

Medieval Manuscript

视觉复古

中世纪泥金手抄本风格，花体首字母、羊皮纸质感、金色与深红装饰性边框。哥特式黑体字与插画元素相结合。

规则详情真实展示

涂鸦街头

Graffiti Street

视觉表现力

街头涂鸦艺术风格，喷漆质感、大胆的撞色、手写体标签、砖墙背景。都市文化与反叛精神的视觉表达。

规则详情真实展示

大理石奢华

Marble Luxury

视觉现代

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

规则详情真实展示

维多利亚植物

Victorian Botanical

视觉复古

维多利亚时代植物学插画风格，精细的线描植物、花卉纹饰、自然历史博物馆的优雅。暗绿与金色的经典搭配。

规则详情真实展示

立体主义

Cubism

视觉表现力

毕加索和布拉克的立体主义运动，几何碎片化构图、多视角叠加、棱角分明的形状与沉稳的大地色调。

规则详情真实展示

热带天堂

Tropical Paradise

视觉现代

热带度假风设计，棕榈叶、鲜艳花卉色彩、阳光沙滩的明快基调。适合旅游、度假村、生活方式和餐饮品牌。

规则详情真实展示

GitHub 风格

GitHub Style

视觉现代

GitHub设计语言风格，简洁的界面层次、柔和的灰度系统、蓝色交互色、等宽代码字体与开发者友好的信息架构。

规则详情真实展示

巫术核心

Witchcore

视觉表现力

神秘学美学风格，塔罗牌、月相符号、水晶与草药元素。深紫色调搭配金色神秘符文，暗色背景上闪烁的星尘效果。

规则详情真实展示

霓虹东京

Neon Tokyo

视觉现代

东京歌舞伎町霓虹夜景风格，湿润的街道倒影、叠层霓虹招牌、赛博朋克城市夜色。不同于cyberpunk-neon的科幻感，更偏向真实都市夜景。

规则详情真实展示

纸艺手作

Paper Craft

视觉表现力

纸艺与剪纸风格，层叠纸张效果、柔和阴影暗示深度、手作质感边缘。适合儿童品牌、教育产品、创意工作室。

规则详情真实展示

工程蓝图

Blueprint

视觉极简

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

规则详情真实展示

多巴胺设计

Dopamine Design

视觉表现力

高饱和度霓虹配色、大胆排版、充满能量感的视觉冲击力。2025-2026 年度设计趋势，用色彩直接刺激多巴胺分泌，让界面充满快乐和兴奋。

规则详情真实展示

Linear 风格

Linear Style

视觉极简

受 Linear 应用启发的极简暗色设计风格。精确的排版、克制的动效、开发者审美的极致表达。深色背景配合微妙的渐变和精细的边框。

规则详情真实展示

清爽电商

Shopify Clean

视觉现代

面向独立电商站的干净现代风格，以产品为核心，清晰的价格层级和流畅的购物转化路径。

规则详情真实展示

奢品零售

Luxury Retail

视觉现代

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

规则详情真实展示

鲜活市集

Fresh Market

视觉现代

面向食品生鲜与有机品牌的电商风格，暖色调圆润卡片搭配自然纹理，传递新鲜与信任。

规则详情真实展示

数据密集

Data Dense

视觉现代

高密度后台管理面板风格，紧凑间距与小尺寸组件，优先展示数据表格与操作效率。

规则详情真实展示

超大字体排版

Oversized Typography

视觉表现力

2026 年作品集网站头号趋势——文字即布局。姓名与标题以视口级 fluid clamp() 巨字充当 hero 和视觉主体，图像退居次要，黑白底色配唯一国际橙强调。

规则详情真实展示

终端风

Developer Terminal

视觉现代

把网站做成一场终端会话：荧光绿 mono 文字、prompt 前缀、命令与输出的成对结构、tmux 状态栏，用工具的真实感表达开发者身份。

规则详情真实展示

横滚画廊

Horizontal Gallery

布局极简

白盒美术馆式的横向滚动作品集布局，无边框大图沿水平展线依次排开，留白即展墙，编号与极细图注还原策展语言，观看是一场步行。

规则详情真实展示

论文排版风

LaTeX Paper

视觉极简

把 LaTeX 学术论文的排版语言搬到网页：Computer Modern 字感、居中标题与 Abstract、层级编号小节、定理环境、编号公式、booktabs 表格与悬挂缩进参考文献。适合研究主页、课程讲义与学术型作品集。

规则详情真实展示

学术科普风

Distill Style

视觉极简

以 Distill.pub 为原型的学术科普设计语言：窄列 serif 正文承载论证，边注承载旁白，图表突破版心承载证据。适合科普博客、研究者主页与学术型作品集。

规则详情真实展示

暗色画廊风

Dark Gallery

视觉极简

暗色调摄影画廊作品集风格：近黑背景让全出血图片成为绝对主角，温琥珀色点缀无信息，超轻极简排版安静退后。适合摄影师、电影人、视觉艺术家的作品展示。

规则详情真实展示

创意工作室风

Creative Studio

视觉现代

一种大胆、自信的作品集风格，适合设计工作室、创意机构与自由职业者。超大标题、色彩碰撞、丰富悬停态、客户徽标墙与团队网格——专业但不刻板，充满个性。

规则详情真实展示

暖感有机风

Warm Organic

视觉极简

温暖的自然主义作品集风格：陶土与黏土色系、天然质感、柔和阴影与有机曲线。为建筑师、室内设计师、产品设计师、陶瓷艺术家与景观设计师而设计。设计本身像手工制作——仿佛印在了纹理纸上。

规则详情真实展示

发布会主题

Launch Keynote

视觉现代

苹果发布会式的产品揭幕美学：纯黑舞台、发光产品、超大紧字距标题、唯一电蓝强调。招牌技法是滚动逐帧序列——一个 sticky 画布随滚动播放预渲染的产品动画，一屏一产品一句话，像万亿市值的产品页。

规则详情真实展示

奢华画册

Luxe Lookbook

视觉表现力

时装屋数字旗舰的高级定制美学：瓷白底、墨黑字、一支哑光金；超大高对比 Didone 衬线做标题，通栏丝绸动态视频首屏，画册网格悬停揭图。留白即奢侈，克制即高级，数字如艺术品——像一家敢为一件大衣标价四千欧元的时装屋。

规则详情真实展示

着色器渐变

Shader Gradient

视觉现代

以实时 WebGL 片元着色器驱动的流动网格渐变作背景的高端 SaaS 美学。近黑画布上一层缓慢呼吸的虹彩渐变场，冻毛玻璃内容面板悬浮其上，干净现代无衬线配一支明亮强调色——Stripe / Linear / Vercel 首屏的活体渐变。

规则详情真实展示

动效实验室 ​

动效实验室 收录 160 个常用动效，覆盖四大类：

  • 基础：入场、退场、循环——淡入、弹跳、摇摆、果冻
  • 文字：打字机、故障、霓虹、火焰、3D 波浪
  • 交互：磁吸、3D 倾斜、点击波纹、聚光、拖尾
  • 高级：粒子系统、GLSL 着色器、布料模拟、Three.js

每个动效都能实时调参（参数走 URL，可分享链接）、一键复制源码，并且尊重 prefers-reduced-motion 无障碍偏好。把它装进你的 AI Agent 的方法在 Skill 页。

使用边界 ​

诚实说明，这三条请先看：

  • 内容不是我们的。风格库来自 luckymaomi 的 UI 风格库（该站自述为复刻版，原始出处已不可考），动效实验室来自 yangxu128 的 Motion.Lab。两者均按 MIT 许可收录。
  • 我们做的是镜像收录：未修改页面内容与样式，每个页面都带「本页出处」徽章，标注来源、许可，并给出去原站和回到本页导览的入口。镜像页不参与搜索引擎收录（noindex + canonical 指回原站）——内容是别人的，排名也该是别人的。
  • 质量自负：这是个人项目的成果，风格规则与动效实现可以当参考与起点，正式项目请按自己的品牌与无障碍标准再校一遍。

致谢 ​

感谢两位开源作者的劳动：

  • luckymaomi · UI 风格库 —— 143 种风格的规则化整理，MIT（许可证原文）
  • yangxu128 · Motion.Lab —— 160 个动效的可交互手册，MIT（依据仓库 README 声明）

本站镜像收录的目的只有一个：让这些内容在我们自己的站内高速、稳定、可检索，并且在未来原作者删库时不至于一起消失。如果你是作者并对收录方式有意见，联系我们即可调整。

后面会做什么 ​

  • 接成技能：把风格规则与动效源码整理成我们的技能资源，让用户的 AI 在搭应用时直接查「给我一个 Bento Grid 的仪表盘」
  • 沉淀自己的风格：把我们自己做过的项目（官网、控制台、学习中心）反抽成同格式的风格卡，进这个词典
  • 持续同步：镜像脚本已入库（scripts/mirror-ui-library.mjs），源站更新后可增量重爬

最后更新:

本页讨论

0 条评论

还没有评论，来说第一句。

0/2000 · Ctrl + Enter 发布