网页设计风格与 AI 提示词生成器
好风格，可以混出来。
网页设计风格与 AI 提示词生成器 · 24 种艺术流派
挑一副骨架，再挑一层表皮
骨架决定排版、字体和动效；表皮决定配色、质感和画面。
实时预览，带走代码提示词、生图提示词、DESIGN.md 和示例 HTML。第一次使用？看教程 →
选骨架
定排版、字体、动效选表皮
定配色、质感、画面图鉴：24 个画派
每张图版讲清一个画派：年代、主张、颜色和质感。看中哪个，点“用作骨架”或“用作表皮”，回到上面的工作台。
能当骨架的画派
这些画派自带一套版面语法：网格怎么分，标题放哪，元素朝哪个方向倾斜。图鉴预览是它们的纯粹形态，骨架和表皮都用自己的。
立体主义Cubism
把对象拆成多个视角的碎面，再叠回同一个平面；颜色克制，以赭、灰、橄榄为主。
立体主义 1907 年前后在巴黎兴起，由毕加索和布拉克推动。它放弃单一视点，把对象拆成碎面，从几个角度同时呈现，再拼回同一个平面。
- 骨架
- 碎面网格
- 字体
- Abril Fatface / Libre Franklin
- 色彩
- 赭、灰、橄榄三色做相互叠压的碎面
- 质感
- 油画布上的细颗粒
未来主义Futurism
歌颂速度与机器：重复的运动轨迹、放射的力线、向前冲的斜体大字。
未来主义诞生于 1909 年马里内蒂在《费加罗报》发表的宣言，主要活跃在意大利。它崇拜速度、机器和城市，用重复的轮廓和力线画出运动本身。
- 骨架
- 动势网格
- 字体
- Saira Extra Condensed / Saira
- 色彩
- 橙色做冲刺方向上的主色和 CTA
- 质感
- 细密斜向速度线
至上主义Suprematism
纯粹的几何形漂浮在白色虚空里，彼此倾斜、错落，没有地平线。
至上主义由马列维奇在 1915 年提出，代表作是《黑色方块》。它抛开一切具象，只留下漂浮在白色空间里的纯粹几何形，追求纯粹感觉的至高无上。
- 骨架
- 无网格
- 字体
- Unbounded / PT Sans
- 色彩
- 白底就是无限空间
- 质感
- 白色画布的细颗粒
构成主义Constructivism
斜线、动势与宣言式大字，把版面当作一台在运转的机器。
构成主义 1910 年代在俄国兴起，塔特林、罗德琴科、李西茨基是代表。它主张艺术为社会服务，海报和书籍大量使用斜线、照片蒙太奇和粗体字。
- 骨架
- 倾斜 -8° 到 -15° 的对角网格
- 字体
- Oswald / PT Sans
- 色彩
- 红黑二色主导
- 质感
- 粗网点印刷，像照片蒙太奇的印刷品
达达Dada
反艺术：剪报拼贴、勒索信式混排字体、印章乱盖，故意荒诞。
达达 1916 年诞生于苏黎世的伏尔泰酒馆，是一战期间对战争和理性的反叛。它用拼贴、现成品和荒诞表演追问什么是艺术，排版刻意混乱。
- 骨架
- 无网格拼贴
- 字体
- Alfa Slab One / Courier Prime
- 色彩
- 旧报纸底色
- 质感
- 旧报纸照片的网点
风格派De Stijl
只剩水平线、垂直线和三原色，用不对称的矩形分割达成平衡。
风格派 1917 年由杜斯伯格和蒙德里安在荷兰创立，同名杂志是它的阵地。它把画面简化成水平线、垂直线和红黄蓝三原色，追求普遍、客观的和谐。
- 骨架
- 不对称矩形分割
- 字体
- Archivo Black / Archivo
- 色彩
- 大部分格子保持白色
- 质感
- 平涂，无质感
包豪斯Bauhaus
形式追随功能：基本几何形、三原色与网格，字本身就是图像。
包豪斯 1919 年由格罗皮乌斯在德国魏玛创立，是一所把艺术、工艺和技术结合起来的设计学校。它强调形式服从功能，用字体、色块和基本几何形建立清楚的秩序。
- 骨架
- 12 栏模块网格
- 字体
- Jost
- 色彩
- 三原色各自成整块色面
- 质感
- 石版印刷的细颗粒，几乎察觉不到
装饰艺术Art Deco
机器时代的奢华：中轴对称、阶梯层叠、放射纹和金色细线。
装饰艺术因 1925 年巴黎装饰艺术博览会得名，盛行于两次大战之间。它把机器时代的流线型和古典的对称结合在一起，常见于摩天楼、海报和远洋邮轮。
- 骨架
- 严格中轴对称
- 字体
- Poiret One / Josefin Sans
- 色彩
- 深底浅字
- 质感
- 金属拉丝般的细竖纹
极简主义Minimalism
少到不能再少：大片留白、一条细线、一个焦点，靠比例说话。
极简主义 1960 年代在纽约兴起，贾德、弗莱文是代表。它去掉表现和装饰，用工业材料、重复的单元和精确的边缘，让作品和所在的真实空间直接对话。
- 骨架
- 单栏
- 字体
- Instrument Sans
- 色彩
- 近乎单色
- 质感
- 哑光纯平面
孟菲斯Memphis
故意撞色、故意错位：波浪线、碎几何、粗黑描边和硬投影。
孟菲斯是埃托雷·索特萨斯 1980 年底在米兰召集的设计团体，1981 年首展，名字来自鲍勃·迪伦的一首歌。它反对现代主义的好品味，用撞色、波浪线和廉价材质做家具和图案。
- 骨架
- 松散拼贴
- 字体
- Bungee / Rubik
- 色彩
- 粉、青、黄三色撞色
- 质感
- 稀疏大圆点和碎纹图案
只做表皮的画派
这些画派的力量在颜色、笔触和画面题材上，没有可以照搬的版面结构，所以要借别人的骨架。色块从左到右是面板色、主色、两个辅色和文字色。
敦煌壁画Dunhuang Murals
土红、石青、石绿和赭黄，墙面斑驳褪色；飞天的飘带和藻井的莲花。
敦煌莫高窟的壁画从 4 世纪一直画到 14 世纪。矿物颜料画在泥壁上，历经千年，部分颜料变色、壁面风化，留下斑驳的飞天、藻井和佛传故事。
- 母题
- 飞天飘带、藻井莲花、火焰纹背光
- 色彩
- 赭黄墙面做底
- 质感
- 壁画墙面的斑驳色块和颗粒
青绿山水Blue-Green Landscape
石青石绿层层罩染，细线勾出山石轮廓，绢本上的理想山水。
青绿山水以石青、石绿为主色，隋唐时成熟，北宋王希孟的《千里江山图》是巅峰。它先勾出山石轮廓，再用矿物颜料层层罩染，画的是理想中的江山。
- 母题
- 层叠山峰、细线勾勒、青绿罩染
- 色彩
- 石青做主色和 CTA
- 质感
- 绢本经纬纹
水墨Chinese Ink Wash
墨分五色：大面积留白、淡墨晕染、枯笔，一方朱印收尾。
水墨画在唐代兴起、宋代成熟，讲究墨分五色。它用墨的浓淡干湿表现远近和气韵，画面常留大片空白，也常配有题跋和朱红印章。
- 母题
- 远山、留白、朱红印章
- 色彩
- 墨色分浓淡做层级
- 质感
- 宣纸上的淡墨晕染，边缘柔和
工笔花鸟Gongbi Bird-and-Flower
工整细线勾勒，层层渲染，花鸟细节精确，大片素绢留白。
工笔花鸟在五代和两宋达到高峰，黄筌、宋徽宗是代表。它用均匀的细线勾出轮廓，再一层层渲染设色，花瓣和羽毛都精确到可以辨认。
- 母题
- 折枝花卉、工整细线、鸟羽细节
- 色彩
- 大面积素绢留白
- 质感
- 绢本经纬纹
浮世绘Ukiyo-e
木版套色：平涂色块、细黑轮廓线、普鲁士蓝与朱红，天空和海面带单色晕染。
浮世绘是日本江户时代的风俗画，以木版画最为人熟知，描绘市井生活、歌舞伎和风景。葛饰北斋的《神奈川冲浪里》用普鲁士蓝印出巨浪，后来影响了欧洲印象派。
- 母题
- 巨浪、霞形云带、松枝
- 色彩
- 普鲁士蓝做主色面和 CTA
- 质感
- 和纸纤维纹，带木版压印感
巴洛克Baroque
明暗对照：深色背景里一束强光照亮主体，深红、金色与暖色肌肤。
巴洛克兴起于 17 世纪的罗马，追求运动感和戏剧性。卡拉瓦乔、伦勃朗把明暗对照推到极致：一束光从暗处照亮人物，其余都沉进阴影里。
- 母题
- 一束侧光、深红帷幕、金色雕饰
- 色彩
- 近黑的暖褐做底
- 质感
- 一束侧光，四周压暗
洛可可Rococo
轻盈甜美：粉蓝、粉红、象牙与金色，贝壳形曲线和花环，宫廷的午后。
洛可可流行于 18 世纪的法国宫廷，华托、弗拉戈纳尔是代表。它比巴洛克更轻盈甜美，用粉彩色、贝壳形曲线和花环描绘贵族的闲适生活。
- 母题
- 贝壳形曲线、花环与丝带、花园秋千
- 色彩
- 象牙粉做底
- 质感
- 柔和的纸纹
印象派Impressionism
画光而不是画物：碎笔触、互补色并置、阴影也是彩色的，几乎不用黑。
印象派 1874 年在巴黎首次联展，名字来自莫奈的《印象·日出》。画家到户外写生，用碎笔触和明亮的互补色捕捉一瞬间的光，连阴影都是彩色的。
- 母题
- 水面倒影、碎笔触、户外阳光
- 色彩
- 文字用深紫蓝代替黑
- 质感
- 碎笔触色斑，像水面上的光
点彩派Pointillism
用纯色小点并置，让眼睛在远处自己混色；画面明亮、安静、秩序井然。
点彩派由修拉在 1880 年代提出，代表作是《大碗岛的星期天下午》。它依据色彩科学，把纯色小点并排点在画布上，让颜色在观众眼中自己混合。
- 母题
- 纯色小点并置、河岸与阳伞、午后公园
- 色彩
- 浅底上撒满三色小点
- 质感
- 密集的纯色小点
新艺术运动Art Nouveau
鞭线般的有机曲线：花草藤蔓、光环圆框、柔和的金与鼠尾草绿。
新艺术运动在 1890 到 1910 年间席卷欧洲，穆夏的海报和巴黎地铁入口是代表。它从植物里提炼出鞭子般的曲线，把艺术带进建筑、家具和日用品。
- 母题
- 鞭线曲线、花草藤蔓、光环圆框
- 色彩
- 橄榄墨色做文字
- 质感
- 石版海报的暖纸纹
野兽派Fauvism
颜色不必像真的：朱红配翠绿、钴蓝配橙，粗笔触平涂，情绪比写实重要。
野兽派 1905 年在巴黎秋季沙龙亮相，因用色狂野被评论家称为野兽。马蒂斯、德兰是代表，颜色不再模仿现实，而是直接表达情绪。
- 母题
- 非写实的固有色（绿色的脸、红色的树）、粗轮廓线、大块平涂
- 色彩
- 互补色直接相撞
- 质感
- 粗笔触色块，颜色彼此碰撞
表现主义Expressionism
用扭曲的形体和刺眼的颜色表达焦虑；木刻般粗粝的刀痕，城市在倾斜。
表现主义 1905 年前后在德国兴起，桥社和青骑士是代表团体。它扭曲形体、放大刺眼的颜色，用木刻般粗粝的线条表达焦虑和内心体验。
- 母题
- 扭曲的街道与建筑、木刻刀痕、尖锐的阴影
- 色彩
- 病态的黄绿做底和面板
- 质感
- 木刻刀痕般的斜向粗线
超现实主义Surrealism
梦的逻辑：精确写实的物体出现在不可能的场景里，长影子、空旷地平线和渐变的天。
超现实主义随 1924 年布勒东的宣言诞生，受弗洛伊德梦的理论影响。达利、马格利特把精确写实的物体放进不可能的场景，呈现潜意识的逻辑。
- 母题
- 空旷地平线、长长的投影、漂浮的物体
- 色彩
- 沙色做底
- 质感
- 从上往下褪开的天色
波普Pop Art
把漫画和广告搬进画廊：本戴点、粗黑轮廓、平涂三原色和重复。
波普艺术 1950 年代起于英国、1960 年代盛于美国，沃霍尔和利希滕斯坦是代表。它把广告、漫画和日用商品搬进画廊，用丝网印刷和本戴点模仿批量生产。
- 母题
- 本戴点、对话气泡、漫画格
- 色彩
- 红黄蓝平涂
- 质感
- 本戴点网点，点径明显
从流派到网页
不只认识画派，也看它们怎样变成布局、配色和可执行的提示词。主视觉是 AI 生成的风格示意，不是历史作品的复制。
安装：把整套规则装进 Agent
提供 Pi、Claude Code 和 Codex 版本，共用标准 SKILL.md、24 个流派的数据与混合规则。装好后带走 DESIGN.md、代码和生图提示词，按需做页面；技能本身不需要额外 API key。
Pi 版本
下载技能包 .zip解压后，将整个 style-mix 文件夹放到：
~/.pi/agent/skills/style-mix安装后在 Pi 中运行 /reload，再用 /skill:style-mix 调用。
/skill:style-mix 用包豪斯 × 野兽派设计一个网页Claude Code 版本
下载技能包 .zip解压后，将整个 style-mix 文件夹放到：
~/.claude/skills/style-mix在 Claude Code 的新会话中用 /style-mix 调用。
/style-mix 用包豪斯 × 野兽派设计一个网页Codex 版本
下载技能包 .zip解压后，将整个 style-mix 文件夹放到：
~/.agents/skills/style-mix在 Codex 中输入 $style-mix，或从 /skills 选择；没有出现时重启 Codex。
$style-mix 用包豪斯 × 野兽派设计一个网页三个下载包内容相同，安装目录和调用方式不同；只需安装你使用的版本。下方命令适用于 macOS / Linux，遇到已有技能目录会停止，不覆盖你的修改。
装好以后这样说
- 用包豪斯 × 野兽派给我的咖啡店做一个落地页
- 敦煌壁画风格，生图提示词：一只猫蹲在屋顶上
- 至上主义 × 青绿山水，只要 DESIGN.md
- 风格派的骨架，配点彩派的颜色，改一下现在这个设置页