1. 项目概述一份给AI设计师的“风格词典”如果你和我一样经常用 Claude、Cursor 或者 v0 这类 AI 工具来生成网页界面那你肯定遇到过这个头疼的问题脑子里想的是“赛博朋克”或者“瑞士风格”但打出来的 prompt 却总是词不达意最后 AI 吐出来的东西要么是平平无奇的“现代简约”要么就是四不像的“模板感”设计。我们缺的不是想法而是把抽象风格精准“翻译”成 AI 能理解的语言的能力。最近在 GitHub 上发现了一个叫helloianneo/ai-design-prompts的仓库它完美地解决了这个痛点。这个项目本质上是一本为 AI 设计师准备的“风格词典”。作者做了一件非常扎实的事他选取了同一套标准的着陆页Landing Page结构然后用 32 种截然不同的视觉风格逐一进行了“重绘”。最关键的是他为每一种风格都生成了一段完整、详尽、可直接复制粘贴的 Prompt。这就像给了你 32 把不同风格的钥匙每把都能精准地打开一扇特定的设计之门。这个仓库的价值远不止于一份 Prompt 列表。它更像是一个系统性的设计风格研究将每种风格拆解为“模式”、“字体”和“视觉语言”等核心要素并具体到页面的 11 个区块如 Hero、Features、Pricing 等应该如何布局和呈现。无论你是想快速切换风格进行 A/B 测试还是想深入学习不同设计流派的构成要素甚至只是想给设计师或 AI Agent 写一份清晰的设计需求这份资料都提供了极其宝贵的参考。2. 核心思路拆解从“感觉”到“可执行指令”2.1 为什么常规的 AI 设计 Prompt 会失效在深入这个仓库之前我们先要理解为什么我们平时写的 Prompt 效果不佳。大多数时候我们给 AI 的指令是模糊的、感性的比如“做一个看起来很酷的科技感网站”或者“设计得优雅一点”。这种描述对 AI 来说信息量极低因为它无法理解“酷”和“优雅”的具体视觉表现是什么。AI 模型尤其是多模态或代码生成模型需要的是结构化、具象化、可操作的指令。它们擅长组合已知的视觉元素和代码模式但需要你明确地告诉它组合的规则。这个仓库的成功之处就在于它把“风格”这个抽象概念彻底解构成了 AI 能直接执行的“配方”。2.2 仓库的“配方”结构三层解构法这个仓库的每一份 Prompt 都遵循一个清晰的三层结构这恰恰是写出高质量设计 Prompt 的核心方法论第一层风格定义与核心要素这是 Prompt 的开篇用一两句话精准概括风格的精髓。例如“赛博朋克”是“黑色背景上的高对比度霓虹灯、故障动画、终端/等宽字体、科技感装饰”。这设定了整体的基调和情绪板。同时它明确标注了“模式”如dark和“字体”如mono这是最基础但最容易被忽略的约束条件直接决定了页面的基础色调和排版气质。第二层全局设计语言与原则在风格定义之后Prompt 会进一步阐述该风格下的通用设计原则。比如在“新拟态”风格中会强调“通过单色背景上的双重阴影一明一暗来塑造凸起和凹陷的立体元素”。这相当于告诉了 AI 这种风格的“语法规则”确保页面内所有元素都遵循同一套视觉逻辑保持一致性。第三层模块化布局与组件级描述这是最硬核、最实用的部分。作者将标准的着陆页拆解成 11 个核心区块Hero, Stats, Features, Pricing, FAQ, Footer 等并为每个区块在特定风格下应该如何呈现提供了极其详细的描述。例如“学院风”的 Hero 区是“不对称的两栏布局7/5 分割左侧有黄铜色装饰线条和建立日期右侧是带有黄铜边框叠加的拱顶棕褐色图像”。这种描述方式的高明之处在于结构化AI 可以清晰地理解页面由哪些部分组成以及它们之间的关系。具象化使用了大量具体的视觉词汇如“黄铜色”、“拱顶”、“网格渐变”、“毛玻璃效果”、“硬阴影”等。可执行很多描述甚至接近 CSS 或设计工具的属性语言如rounded-[32px],shadow-clayCard,bg-white/40 backdrop-blur-lg对于生成代码的 AI如 Cursor、Claude Code来说这几乎是“开箱即用”的指令。2.3 风格分类的逻辑从应用场景出发仓库作者不仅整理了风格还贴心地做了分类导航这反映了设计选择的实际思考过程科技 / SaaS / 金融如Modern Dark,Corporate Trust,Terminal CLI。这类风格强调专业、可靠、前沿常用深色模式、清晰的数据展示和科技感元素。编辑 / 排版 / 机构感如Swiss,Newsprint,Academia。这类风格的核心是信息层级和阅读体验强调网格、留白、高质量的衬线字体营造权威或经典感。强风格 / 强情绪 / 年轻化如Clay,Vaporwave,Neo-brutalism。这类风格视觉冲击力强用于吸引特定社群或表达鲜明的品牌个性敢于使用大胆的色彩、非常规的布局和动效。物理质感 / 设计史如Bauhaus,Art Deco,Industrial。这类风格从现实世界或历史设计运动中汲取灵感注重材质、纹理和形式感能快速建立独特的情感连接。这种分类方式非常实用。当你在为一个新项目寻找风格方向时可以先从“它属于哪类产品/受众”这个问题入手快速缩小选择范围而不是在 32 种风格中盲目尝试。3. 深度解析从5种代表性风格看Prompt的构建艺术让我们挑选几种风格深入看看它们的 Prompt 是如何构建的这能帮助我们掌握自己撰写高质量 Prompt 的技巧。3.1 Cyberpunk赛博朋克构建沉浸式数字 dystopia赛博朋克风格是检验 Prompt 描述能力的一个绝佳例子因为它包含大量非常具体的视觉符号。核心风格定义High contrast neon on black, glitch animations, terminal/monospace fonts, tech-oriented decorations.黑色背景上的高对比度霓虹灯、故障动画、终端/等宽字体、科技感装饰。这句话寥寥数语但信息密度极高。它确立了四个不可动摇的基石1) 色彩关系霓虹 vs 黑2) 动态元素故障3) 字体选择等宽4) 装饰主题科技。任何偏离这四点的产出都可以被立刻判定为“不够赛博朋克”。Hero 区块描述节选Full-bleed dark canvas with massive glitched headline ... featuring chromatic aberration and neon glow shadows. ... holographic HUD display with animated panels on right. Grid background with radial gradient mask. Scanline overlay across entire page.充满整个画面的黑暗画布带有巨大的故障标题...具有色差和霓虹光晕阴影。...右侧是全息平视显示器与动画面板。带有径向渐变遮罩的网格背景。整个页面覆盖扫描线。这段描述是如何生效的氛围营造Full-bleed dark canvas全幅黑暗画布和Scanline overlay扫描线覆盖立刻奠定了整体的数字沉浸感。细节刻画chromatic aberration色差和neon glow shadows霓虹光晕阴影是故障文字和霓虹灯效非常具体的技术实现描述远比只说“有发光效果”要精准。元素隐喻holographic HUD display全息平视显示器是一个强有力的文化符号直接指向科幻界面引导 AI 去组合半透明面板、数据图层等元素。层次与背景Grid background with radial gradient mask带径向渐变遮罩的网格背景提供了深度的、有科技感的背景层避免了画面扁平。实操心得在描述强风格化设计时要大胆使用能唤起特定文化意象和感官体验的词汇如“全息”、“故障”、“扫描线”、“终端”并尽可能具体到某种视觉效果的技术名称如“色差”。这能极大地激发 AI 关联其训练数据中的相关图像和代码模式。3.2 Clay粘土风格塑造触手可及的3D玩具体验粘土风格是近年来流行的3D设计趋势其 Prompt 着重于描述物理属性和交互反馈。核心风格定义A hyper-realistic 3D aesthetic simulating soft, inflatable clay objects with multi-layered shadow stacks, vibrant candy-store colors, tactile micro-interactions, and organic floating ambient elements...一种模拟柔软、可充气粘土物体的超写实3D美学具有多层阴影堆叠、鲜艳的糖果店色彩、触觉微交互和有机漂浮环境元素...这个定义非常出色它没有停留在“3D”和“可爱”这种层面而是精确描述了实现这种风格所需的视觉技术多层阴影堆叠和情感体验触觉微交互、有机漂浮。candy-store colors糖果店色彩这个比喻比单纯说“明亮色彩”更能传递出那种甜美、愉悦的情绪。Features 区块描述节选Masonry Bento grid with col-span-2/row-span-2 hero card. Varying background opacity creates depth hierarchy. Icon containers use vibrant gradient backgrounds with rounded-2xl shapes.错落的 Bento 网格布局其中有一个横跨两列两行的主卡片。不同的背景透明度创造了深度层次。图标容器使用鲜艳的渐变背景和超圆角形状。Stats 区块描述节选Grid of breathing spheres (clay-orb clay-breathe) with aspect-square ratio. Numbers use Nunito Black in large sizes. Staggered animation delays create organic rhythm.由呼吸球体组成的网格使用正方形比例。数字使用大号的 Nunito Black 字体。交错的动画延迟创造了有机的节奏。这里的关键点布局指令Masonry Bento grid和col-span-2/row-span-2是给 AI尤其是 v0 这类能理解 CSS Grid 的 AI非常明确的布局指令。深度与动态varying background opacity不同的背景透明度和staggered animation delays交错的动画延迟是创造生动、不呆板的3D场景的核心技巧。具体参数rounded-2xl和aspect-square是 Tailwind CSS 中的具体工具类直接给出了可执行的样式参数。Nunito Black指定了具体的字重确保了视觉的厚重感与圆润风格匹配。拟人化交互breathing spheres呼吸球体和tactile micro-interactions触觉微交互这样的描述引导 AI 去思考如何通过缓动动画、悬停缩放等效果来模拟物理世界的反馈。注意事项使用粘土风格时色彩搭配至关重要。避免使用过于灰暗或浑浊的颜色保持色彩的纯度和明快感。同时阴影的堆叠要足够“软”和“弥散”才能模拟出粘土的质感过于生硬的阴影会像塑料。3.3 Swiss瑞士风格极致的秩序与理性之美瑞士风格国际主义平面设计风格是功能主义和理性主义的典范其 Prompt 的核心在于对网格、字体和留白的绝对控制。核心风格定义A rigorous implementation of the International Typographic Style. Asymmetric layouts, strict grids, objective photography, and clear visual hierarchy. Sans-serif typefaces (Helvetica preferred) set flush-left, ragged-right.国际主义排版风格的严谨实现。不对称布局、严格的网格、客观的摄影、清晰的视觉层级。使用无衬线字体首选 Helvetica左对齐右端参差不齐。这个定义直接点明了风格的历史渊源和核心教条。rigorous严谨、strict严格、objective客观这些词定下了冰冷的基调。flush-left, ragged-right左对齐右端参差不齐是对文本排版极其具体的约束这是该风格一个标志性的细节。布局描述特点在整个 Swiss 风格的 Prompt 中你会反复看到诸如asymmetric layout不对称布局、strict grid严格网格、mathematical proportions数学比例、ample white space充足留白这样的词汇。对于 Hero 区可能会描述为hero section with massive headline set in a strict 8-column grid, left-aligned with generous margin英雄区使用巨大的标题置于严格的8列网格中左对齐并留有大量边距。实操心得描述瑞士风格时要克制对色彩和装饰的描写把重点完全放在结构、比例和排版上。多使用“网格”、“对齐”、“比例”、“留白”、“层级”这类词汇。甚至可以指定具体的网格列数如12列网格和字体大小比例关系使用模数尺度。AI 在生成这类设计时往往容易“做得不够绝”加入一些不必要的圆角或阴影因此 Prompt 中需要反复强调“极简”、“无装饰”、“几何化”。3.4 Bauhaus包豪斯风格形式追随功能的色彩实验包豪斯风格是现代设计的里程碑其 Prompt 需要抓住其几何抽象、原色运用和功能主义的精神。核心风格定义Bold geometric modernism with circles, squares, and triangles. Primary color palette (Red/Blue/Yellow) with stark black borders and hard shadows. Functional yet artistic with constructivist asymmetry.大胆的几何现代主义使用圆形、正方形和三角形。原色色板红/蓝/黄搭配鲜明的黑色边框和硬阴影。功能性与艺术性兼具带有构成主义的不对称性。这个定义精准地抓住了包豪斯的三大视觉支柱基础几何图形、原色、硬边。constructivist asymmetry构成主义的不对称则点明了其动态的、非对称的构图特点区别于瑞士风格的静态对称。Features 区块描述节选Three-column grid with lifted cards featuring corner decorations (circle/triangle/square). Each card has geometric icon in bordered container. Hover lift effect.三列网格的悬浮卡片带有角落装饰圆形/三角形/正方形。每张卡片都有一个带边框的几何图标容器。悬停时有上浮效果。这里可以看到元素贯穿将“圆形、正方形、三角形”这些核心图形具体应用到了corner decorations角落装饰和geometric icon几何图标中确保了风格的统一。功能与交互lifted cards悬浮卡片和Hover lift effect悬停上浮效果在保持几何感的同时加入了符合现代网页交互的微动效是“功能性”的体现。色彩暗示虽然这段没直接写颜色但结合核心定义AI 会自然地将红、蓝、黄三原色应用到卡片、图标或背景上。注意事项使用包豪斯风格时要警惕色彩过于杂乱。虽然使用原色但通常会有主次之分大面积使用一种主色另外两种作为强调色。黑色和白色作为调和色至关重要。布局上可以大胆尝试重叠、切割等不对称构图但整体仍需保持清晰的视觉流和功能分区。3.5 Corporate Trust企业信任风在专业与亲和间寻找平衡这是一种非常实用且常见的风格常用于 SaaS、金融、企业服务等领域。它的目标是在专业可靠和友好易用之间取得平衡。核心风格定义Modern SaaS aesthetic balancing professionalism with approachability. Vibrant indigo/violet gradients, soft colored shadows, isometric depth, and clean geometric sans-serif typography.现代 SaaS 美学平衡专业性与亲和力。充满活力的靛蓝/紫色渐变、柔和的彩色阴影、等距深度感以及干净的几何无衬线字体排版。这个定义清晰地指出了目标平衡和手段渐变、柔影、等距、干净字体。Indigo/violet靛蓝/紫色是建立专业和科技感的常用色系soft colored shadows柔和的彩色阴影和isometric depth等距深度感则增添了现代感和一丝亲和力避免了过于扁平或严肃。Hero 区块描述节选Split layout with 60/40 composition. Left: Gradient headline split, dual-CTA buttons, trust indicator. Right: Isometric floating card with subtle 3D transforms and decorative elements.采用60/40分割的布局。左侧渐变色分割的标题、双行动按钮、信任指标。右侧带有微妙3D变换和装饰元素的等距悬浮卡片。这段描述体现了企业风设计的典型套路经典布局60/40 split layout是一种非常成熟、高效的布局方式能同时展示价值主张和产品视觉。内容策略dual-CTA buttons主次行动按钮和trust indicator信任指标如客户 Logo、评级是转化率优化的标准配置。视觉亮点Isometric floating card等距悬浮卡片在保持整体简洁的同时增加了一点精致的细节和空间感避免页面过于枯燥。实操心得企业信任风的核心是“减少风险感知”。因此设计上要追求清晰、一致、无惊喜。颜色系统要稳定通常一个主色加中性色字体不超过两种一个无衬线用于正文一个可能用于标题图标风格统一。所有的交互状态悬停、点击都应该是可预测的、平滑的。这个风格的 Prompt 写作重点不在于创造惊人的视觉而在于描述一种“稳健的精致感”。4. 实战应用如何将仓库Prompt转化为你的工作流拥有这个宝库后如何高效地用它来提升你的 AI 设计产出呢以下是我总结的几个实战步骤和技巧。4.1 直接复制与微调最快的启动方式对于大多数需求最直接的方法就是“开箱即用”。定位风格根据你的项目类型科技产品、创意机构、个人博客等和想传达的情绪专业、活泼、复古、奢华从仓库的“风格分类导航”或速查表中找到 2-3 个候选风格。复制完整 Prompt点击对应风格下的“复制完整 prompt”你会得到一段包含风格定义和11个区块详细描述的长文本。粘贴并补充将这段 Prompt 粘贴到你的 AI 工具如 Claude、Cursor Chat、v0中。在它之前务必加上你对自己项目的具体描述。例如“我需要设计一个名为‘DataFlow’的数据分析 SaaS 平台的着陆页。它的核心功能是可视化数据管道。请参考以下设计风格为我生成该着陆页的 HTML/CSS 代码使用 Tailwind CSS。” [粘贴完整的 Corporate Trust 风格 Prompt] 这样AI 就能将通用风格与你的具体项目结合。迭代与微调生成初稿后你可以基于结果进行微调。如果觉得颜色太深可以在指令中追加“将主色调从靛蓝改为更明亮的科技蓝”。如果觉得某个区块如 Pricing不够突出可以引用仓库中对应区块的描述并说“请更加严格地按照此描述中的‘三栏网格中间卡片突出’的布局来调整定价部分”。4.2 学习与拆解构建你自己的风格库这个仓库更大的价值在于作为学习资料。你可以通过拆解它来构建属于你自己垂直领域的风格 Prompt 库。分析结构以你最喜欢的 3-5 种风格为例将它们的 Prompt 并排打开。观察它们的描述结构有何异同。你会发现所有风格都涵盖了色彩、字体、布局、组件状态悬停、动效等维度只是侧重点不同。提取关键词建立一个表格记录每种风格的高频关键词和独特词汇。例如风格色彩关键词字体关键词质感关键词布局关键词独特元素Cyberpunk霓虹、高对比、黑色等宽、终端故障、全息、扫描线不对称、HUD色差、代码窗Clay糖果色、渐变圆润无衬线3D、柔软、阴影堆叠Bento网格、悬浮呼吸动画、粘土球Swiss黑白、单色Helvetica、严格对齐无严格网格、不对称左对齐参差右端组合创新不要被现有风格限制。你可以尝试“混搭”。比如想要一个“专业但又带点趣味”的官网可以尝试将Corporate Trust的色彩系统和字体与Clay风格的按钮和卡片质感相结合。给你的 Prompt 可能是“采用 Corporate Trust 的靛蓝-紫色渐变色彩体系和干净的几何无衬线字体但将主要的按钮和统计卡片组件替换为 Clay 风格的柔软、圆润3D样式并带有轻微的悬浮动画。”4.3 针对不同AI工具的优化策略不同的 AI 工具各有侧重使用同一份 Prompt 时需要稍作调整。对于 Claude/ChatGPT 等多模态模型优势理解自然语言能力强能消化长文本。策略可以直接粘贴完整的仓库 Prompt。为了获得更好的视觉化结果可以在开头强调“你是一名资深 UI/UX 设计师”并明确输出格式如“请用详细的文字描述最终页面的视觉效果并说明关键的设计决策”。示例指令“假设你是资深 UI 设计师。请根据以下的‘玻璃拟态’风格指南为一个天气预报应用设计一个主要的仪表盘界面。请详细描述界面在色彩、质感、布局、组件上的具体表现并解释这些设计如何提升用户体验。”对于 Cursor/Claude Code 等代码AI优势能生成可直接运行或参考的代码如 React Tailwind CSS。策略Prompt 中应包含更多技术性描述。仓库 Prompt 里像rounded-[32px],shadow-clayCard,md:scale-110这类 Tailwind 工具类词汇对它们来说就是黄金指令。你可以要求它“使用 Tailwind CSS 实现以下设计”。示例指令“使用 Next.js 和 Tailwind CSS 实现一个遵循以下‘新拟态’设计风格的登录卡片组件。请确保阴影使用shadow-neumorphism-inset和shadow-neumorphism-outset来实现凹陷和凸起效果背景色为#e0e5ec。”对于 v0 等设计生成AI优势对设计系统、布局和现代 CSS 理解深刻能快速生成接近可用的前端代码。策略v0 非常擅长理解网格、弹性布局等结构。可以直接使用仓库中关于布局的描述如Masonry Bento grid with col-span-2/row-span-2 hero card。可以更直接地要求生成“一个完整的着陆页 HTML 结构”。示例指令“根据下面的‘极简黑暗’风格描述生成一个单页着陆页的 HTML 和 CSS 代码。重点实现其 Hero 部分的不对称分割布局和 Stats 部分的水平带状设计。”5. 避坑指南与高阶技巧在实际使用这些风格 Prompt 时我踩过一些坑也总结出一些能让效果更上一层楼的技巧。5.1 常见问题与解决方案问题AI 输出与风格描述不符混杂了其他元素。原因Prompt 可能不够“独占”。AI 训练数据中包含了海量风格如果你的描述不够强势它可能会自行混合。解决在 Prompt 开头或结尾使用否定指令。例如在Swiss风格 Prompt 后加上“绝对不要使用阴影、圆角、渐变或任何装饰性边框。严格避免使用衬线字体。” 这能有效约束 AI 的“创造力”。问题生成的页面布局混乱区块堆叠不正常。原因仓库 Prompt 描述的是“理想状态”但 AI 在生成复杂布局时可能因上下文长度或理解偏差而出错。解决分区块生成。不要一次性要求生成整个页面。先让 AI 根据风格描述生成 Hero 区满意后再基于这个上下文让它接着生成 Stats 区并提示“保持与 Hero 区一致的 [某风格] 设计语言”。这样可控性更高。问题移动端适配糟糕。原因很多风格描述是基于桌面端视角AI 可能不会主动考虑响应式。解决在给你的项目指令中明确要求。“请确保设计是完全响应式的在移动设备上能良好显示。对于 [特定风格] 中提到的复杂布局如不对称分割、Bento网格请提供移动端下的替代方案如垂直堆叠。”问题颜色、字体等细节与预期有偏差。原因描述主观如“奢华金”或 AI 资源限制缺少指定字体。解决尽可能具体化。将“奢华金”改为“#D4AF37 这种暗金色”。将“使用优雅的衬线字体”改为“优先使用 Google Fonts 中的 Playfair Display 或 Cormorant Garamond 字体”。对于关键颜色可以提供 HEX 或 RGB 值。5.2 高阶技巧注入品牌灵魂与动态数据超越模板融入品牌资产仓库提供的是“风格骨架”你需要注入品牌的“血肉”。在 Prompt 中明确指出品牌色“主品牌色是 #2A5CAA辅助色是 #FF6B6B。请将此配色方案融入 [所选风格] 中。”品牌标识“在页面左上角放置我们的 Logo一个抽象的狐狸图标。Logo 文件我可以稍后提供请先预留位置并描述其样式如何与风格融合。”品牌文案“将 Hero 标题替换为我们的口号‘Simplify Your Data Flow’副标题为‘直观的数据管道可视化工具让洞察触手可及’。”让设计“活”起来描述交互状态仓库 Prompt 提到了一些交互如hover lift effect但你可以描述得更细。这对于生成前端代码尤其有用。示例“当用户悬停在功能卡片上时卡片应有轻微的上浮效果transform: translateY(-4px)同时阴影加深并且卡片左侧的装饰性竖条从灰色渐变为品牌主色过渡时间为 300ms使用ease-out缓动函数。”为真实内容而设计着陆页不是艺术品最终要承载真实内容。在给 AI 指令时提供真实或拟真的内容能获得更实用的结果。不要只说“设计一个定价区块。”而要说“设计一个定价区块包含三个套餐1) 免费版0美元/月包含3个数据管道2) 专业版29美元/月包含15个数据管道和高级图表3) 企业版定制价格包含所有功能和白手套支持。专业版需要突出显示为‘最受欢迎’。”5.3 从风格到系统构建可复用的设计令牌对于需要长期维护的项目你可以利用这个仓库的启发与 AI 协作定义一套属于自己项目的“设计令牌”。定义核心令牌基于选定的风格让 AI 帮你整理出一套系统化的变量。指令“基于‘极简黑暗’风格为我定义一套完整的 CSS 自定义属性CSS Custom Properties设计令牌包括颜色主色、背景色、文字色、辅助色、字体、间距间距尺度、圆角、阴影等。”生成组件库利用风格和设计令牌让 AI 批量生成基础组件。指令“使用上述设计令牌为我创建以下 React 组件的代码Button包含 primary, secondary, ghost 变体、Card、Badge、Input。请确保它们都符合‘极简黑暗’的美学。”我个人在实际使用中最大的体会是这个仓库的价值不仅在于那 32 个即拿即用的 Prompt更在于它提供了一种将设计意图转化为机器可理解语言的方法论。它教会我们好的设计指令必须是具体的、结构化的、包含约束的。下次当你再想让 AI 设计点什么时不妨先问自己我想要的风格它的“核心三要素”色彩、字体、质感是什么它的典型布局和组件长什么样它的交互感觉如何想清楚了这些你离生成心中理想的设计也就不远了。