12 种 Stitch 设计风格完全指南：附带示例和提示词模板

为什么风格是决策，不是装饰

在 Stitch 里，“风格”不是往页面里加一点渐变或换一套颜色，而是一组可重复的决策：信息怎么排、颜色扮演什么角色、字体如何分层、圆角和阴影表达什么、页面应该让人产生什么感觉。

同一套内容，用 Swiss Style 和 Brutalist 生成，得到的不只是两种外观，而是两种阅读顺序和两种产品气质。好的风格提示词会把这些决策写清楚，而不是只写“高级”“现代”“有科技感”。

官方 Design Modes 的四类风格

Stitch 官方 Design Modes 文档提供了一组风格词库，分为四类：布局与结构、质感与深度、氛围与时代、颜色与对比。本文从中选取 12 种适合产品界面的风格，逐一说明特征、适用场景和可复制的提示词模板。

布局与结构：Bento Grid、Editorial、Swiss Style
质感与深度：Glassmorphism、Claymorphism、Skeuomorphic
氛围与时代：Brutalist、Cyberpunk、Y2K
颜色与对比：Duotone、Monochromatic、Dark Mode OLED

这些风格可以单独使用，也可以组合，但一次最好只保留一个主要视觉特征。

Bento Grid

Bento Grid 用模块化卡片把内容分成大小不一的格子，像便当盒一样组织信息。它的优势是层级清楚、扩展性强，适合同时展示多种类型的内容。

适合：SaaS 首页、功能总览、个人仪表板、作品集。
注意：格子大小要有明确优先级，不要做成大小随机拼贴。

Design a SaaS homepage using a Bento Grid layout.
Use 4–6 cards with clear size hierarchy, generous gaps, and one accent color.
Keep each card focused on a single idea and make the primary action obvious.

Editorial

Editorial 借鉴杂志排版：大标题、衬线字体、充足留白、不对称图片和清晰的阅读节奏。它让页面更像一篇有观点的文章，而不是一个工具面板。

适合：品牌故事、博客首页、文化类产品、发布页。
注意：正文可读性优先，不要为了“杂志感”牺牲字号和行高。

Design an editorial-style brand story page with a large serif headline,
asymmetrical image placement, generous whitespace, and a clear reading flow.
Use a restrained palette and keep body text highly readable.

Swiss Style

Swiss Style 强调网格、无衬线字体、左对齐和客观清晰的信息组织。它不靠装饰制造个性，而是靠比例、间距和排版秩序。

适合：企业官网、设计系统文档、数据密集型产品、专业工具。
注意：网格要真正约束布局，不要只把页面做得“很白”。

Design a Swiss Style documentation page with a strict grid,
left-aligned sans-serif typography, clear hierarchy, and minimal decoration.
Use generous whitespace and keep all content aligned to the grid.

Glassmorphism

Glassmorphism 用半透明卡片、背景模糊、细边框和柔和阴影制造“磨砂玻璃”效果。它适合有丰富背景图像或渐变的产品。

适合：音乐播放器、创意工具、现代移动应用、展示型页面。
注意：透明层会降低对比度，文字和按钮必须单独检查可读性。

Design a glassmorphism music player with translucent cards,
background blur, subtle borders, and soft shadows.
Keep text contrast strong and use the blur only where it supports hierarchy.

Claymorphism

Claymorphism 用柔和的内外阴影、圆润形状和低饱和色彩，制造像黏土一样的立体感。它比 Glassmorphism 更温暖、更亲和。

适合：教育产品、儿童应用、健康工具、轻量消费应用。
注意：阴影不要过重，否则页面会显得笨重；信息密度通常不宜过高。

Design a claymorphism habit-tracking app with soft inner and outer shadows,
rounded shapes, pastel colors, and friendly spacing.
Keep the layout simple and avoid heavy visual noise.

Skeuomorphic

Skeuomorphic 模拟真实物体的材质、纹理和物理反馈，例如皮革、木头、金属或纸张。它能让界面产生熟悉感和触感。

适合：笔记、计算器、音乐设备、复古风格产品。
注意：现代产品通常只用一个局部拟物元素，不要整套界面都做成真实材质。

Design a skeuomorphic notes app with a paper texture,
subtle leather accents, realistic shadows, and tactile buttons.
Keep navigation and reading areas clean and modern.

Brutalist

Brutalist 用原始、未经修饰的排版、粗描边、高对比和硬边缘制造冲击力。它故意反精致，强调内容和态度。

适合：艺术网站、创意机构、实验性产品、活动页面。
注意：可用性不能被风格牺牲；表单、导航和正文仍要清楚可用。

Design a brutalist portfolio site with oversized typography,
raw black-and-white contrast, thick borders, and hard edges.
Keep navigation and body copy readable despite the aggressive style.

Cyberpunk

Cyberpunk 用深色背景、霓虹色、故障感、网格和科技纹理制造未来都市气质。它的视觉信号很强，适合需要氛围的产品。

适合：游戏、音乐、Web3、科技活动、实验性工具。
注意：霓虹色容易过饱和，建议只保留一到两个发光强调色。

Design a cyberpunk music streaming app with a dark background,
one neon accent, subtle glitch details, and compact information density.
Keep text contrast strong and avoid using neon on every element.

Y2K

Y2K 借用 1990 年代末到 2000 年代初的视觉语言：金属质感、气泡字、亮蓝和亮粉、胶囊按钮和略带未来感的装饰。

适合：潮流品牌、社交产品、活动页、年轻用户产品。
注意：Y2K 元素很多，选两到三个标志性特征即可，不要全部堆叠。

Design a Y2K-inspired social app with chrome accents,
bubble typography, bright blue and pink highlights, and pill-shaped buttons.
Use the retro details sparingly and keep the core navigation clear.

Duotone

Duotone 用两种颜色及其明暗变化组织整个界面，通常是深色底配一个高饱和强调色。它的识别度高，适合建立强品牌记忆。

适合：品牌官网、活动页、音乐产品、视觉驱动的落地页。
注意：双色不等于只有两个色值，仍需要足够的明暗层次来表达层级。

Design a duotone landing page using a deep navy base and one vivid coral accent.
Create hierarchy through tints and shades, not additional colors.
Keep body text readable and use the accent only for key actions.

Monochromatic

Monochromatic 使用同一色相的不同明度和饱和度，营造克制、统一、专业的氛围。它适合需要长期使用、信息密度较高的产品。

适合：企业工具、金融产品、文档站、极简品牌。
注意：单色体系容易显得平，必须用字号、字重、间距和明度差建立层级。

Design a monochromatic analytics dashboard using one blue hue.
Build hierarchy with tints, shades, typography weight, and spacing.
Keep charts distinguishable and ensure all text meets contrast requirements.

Dark Mode OLED

Dark Mode OLED 使用接近纯黑的背景，让内容、强调色和发光元素更突出，同时适合夜间使用和 OLED 屏幕。

适合：开发者工具、视频平台、音乐应用、夜间使用场景。
注意：纯黑背景上的细字和低对比灰色容易不可读，层级要靠明度而不是阴影。

Design a Dark Mode OLED developer tool with a near-black background,
light text, one restrained accent, and clear focus states.
Use borders and tonal surfaces instead of heavy shadows for hierarchy.

如何组合风格

风格可以组合，但要先确定主风格，再用第二种风格做局部强调。例如：

Bento Grid + Monochromatic：用模块化布局组织内容，用单色体系保持克制。
Editorial + Duotone：用杂志式排版建立阅读节奏，用双色强化品牌识别。
Swiss Style + Dark Mode OLED：用严格网格保证秩序，用深色背景降低视觉疲劳。
Glassmorphism + Bento Grid：用模块化卡片承载内容，只在浮层使用玻璃效果。

组合的原则是“一个主特征，一个辅助特征”。如果两种风格都在争夺注意力，页面就会失去重点。

避免趋势堆叠

玻璃拟态、渐变、3D 图标、粗描边、霓虹色单独用都可以，全部堆在一起就会变成视觉噪音。写提示词时，先问自己：这个风格元素是否帮助用户理解内容？如果答案是否定的，就删掉。

另一个常见问题是只写风格词，不写产品、用户和任务。Stitch 会生成一个“像某种风格”的页面，但不一定是一个能用的页面。风格必须服务于内容结构，而不是反过来。

总结

选择 Stitch 风格的第一步不是挑一个流行词，而是确定产品需要什么气质、什么信息密度和什么阅读节奏。本文的 12 种风格覆盖了布局、质感、时代和颜色四个方向。先用一个主风格建立方向，再用 Variations 和 Creative Range 探索，最后用 DESIGN.md 把颜色、字体和组件规则固定下来。