|
|
@@ -1,591 +1,370 @@
|
|
|
-# 设计哲学风格库：20种体系
|
|
|
-
|
|
|
-> 用于视觉设计（网页/PPT/PDF/信息图/配图/App等）的设计风格库。
|
|
|
-> 每种风格提供：哲学内核 + 核心特征 + 提示词DNA（与场景模板组合使用）。
|
|
|
-
|
|
|
-## 风格×场景×执行路径 速查表
|
|
|
-
|
|
|
-| 风格 | 网页 | PPT | PDF | 信息图 | 封面 | AI生成 | 最佳路径 |
|
|
|
-|------|:---:|:---:|:---:|:-----:|:---:|:-----:|---------|
|
|
|
-| 01 Pentagram | ★★★ | ★★★ | ★★☆ | ★★☆ | ★★★ | ★☆☆ | HTML |
|
|
|
-| 02 Stamen Design | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★☆ | ★★☆ | 混合 |
|
|
|
-| 03 Information Architects | ★★★ | ★☆☆ | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | HTML |
|
|
|
-| 04 Fathom | ★★☆ | ★★★ | ★★★ | ★★★ | ★★☆ | ★☆☆ | HTML |
|
|
|
-| 05 Locomotive | ★★★ | ★★☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★☆ | 混合 |
|
|
|
-| 06 Active Theory | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★★ | AI生成 |
|
|
|
-| 07 Field.io | ★★☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 08 Resn | ★★★ | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★☆ | AI生成 |
|
|
|
-| 09 Experimental Jetset | ★★☆ | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★☆ | 混合 |
|
|
|
-| 10 Müller-Brockmann | ★★☆ | ★★★ | ★★★ | ★★★ | ★★☆ | ★☆☆ | HTML |
|
|
|
-| 11 Build | ★★★ | ★★★ | ★★☆ | ★☆☆ | ★★★ | ★☆☆ | HTML |
|
|
|
-| 12 Sagmeister & Walsh | ★★☆ | ★★★ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 13 Zach Lieberman | ★☆☆ | ★☆☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 14 Raven Kwok | ★☆☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 15 Ash Thorp | ★★☆ | ★★☆ | ★☆☆ | ★☆☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 16 Territory Studio | ★★☆ | ★★☆ | ★☆☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-| 17 Takram | ★★★ | ★★★ | ★★★ | ★★☆ | ★★☆ | ★☆☆ | HTML |
|
|
|
-| 18 Kenya Hara | ★★☆ | ★★★ | ★★★ | ★☆☆ | ★★★ | ★☆☆ | HTML |
|
|
|
-| 19 Irma Boom | ★☆☆ | ★★☆ | ★★★ | ★★☆ | ★★★ | ★★☆ | 混合 |
|
|
|
-| 20 Neo Shen | ★★☆ | ★★☆ | ★★☆ | ★★☆ | ★★★ | ★★★ | AI生成 |
|
|
|
-
|
|
|
-> 场景适配：★★★ = 强烈推荐 / ★★☆ = 适合 / ★☆☆ = 需改造
|
|
|
-> AI生成：★★★ = 直出效果好 / ★★☆ = 需调整 / ★☆☆ = 建议HTML执行
|
|
|
-> 最佳路径：AI生成（图片直出）/ HTML（代码渲染，数据精确）/ 混合（HTML布局+AI配图）
|
|
|
-
|
|
|
-**核心规律**：有明确视觉元素的风格（插画/粒子/生成艺术）AI直出效果好；依赖精确排版和数据的风格（网格/信息架构/留白）HTML渲染更可控。
|
|
|
+# 设计风格库：网页 20 种 + PPT 20 种（HTML 原生优先）
|
|
|
|
|
|
----
|
|
|
-
|
|
|
-## 一、信息建筑派（01-04）
|
|
|
-> 哲学：「数据不是装饰，是建筑材料」
|
|
|
-
|
|
|
-### 01. Pentagram - Michael Bierut风格
|
|
|
-**哲学**：字体即语言，网格即思想
|
|
|
-**核心特征**：
|
|
|
-- 极度克制的颜色（黑白+1个品牌色）
|
|
|
-- 瑞士网格系统的现代演绎
|
|
|
-- 字体排印作为主要视觉语言
|
|
|
-- 负空间的战略性使用（60%+留白）
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Pentagram/Michael Bierut style:
|
|
|
-- Extreme typographic hierarchy, Helvetica/Univers family
|
|
|
-- Swiss grid with precise mathematical spacing
|
|
|
-- Black/white + one accent color (#HEX)
|
|
|
-- Information architecture as visual structure
|
|
|
-- 60%+ whitespace ratio
|
|
|
-- Data visualization as primary decoration
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Hillary Clinton 2016 campaign identity
|
|
|
-**搜索关键词**：pentagram hillary logo system
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 02. Stamen Design - 数据诗学
|
|
|
-**哲学**：让数据成为可触摸的风景
|
|
|
-**核心特征**：
|
|
|
-- 地图学思维应用于信息设计
|
|
|
-- 算法生成的有机图形
|
|
|
-- 温暖的数据可视化色调（赭石、鼠尾草绿、深蓝）
|
|
|
-- 可交互的层级系统
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Stamen Design aesthetic:
|
|
|
-- Cartographic approach to data visualization
|
|
|
-- Organic, algorithm-generated patterns
|
|
|
-- Warm palette (terracotta, sage green, deep blues)
|
|
|
-- Layered information like topographic maps
|
|
|
-- Hand-crafted feel despite digital precision
|
|
|
-- Soft shadows and depth
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：COVID-19 surge map
|
|
|
-**搜索关键词**：stamen covid map visualization
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 03. Information Architects - 内容优先原则
|
|
|
-**哲学**：设计不是装饰，是内容的建筑
|
|
|
-**核心特征**：
|
|
|
-- 极端的内容层级清晰度
|
|
|
-- 只使用系统字体（优化阅读）
|
|
|
-- 蓝色超链接传统的坚守
|
|
|
-- 性能即美学
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Information Architects philosophy:
|
|
|
-- Content-first hierarchy, zero decorative elements
|
|
|
-- System fonts only (SF Pro/Roboto/Inter)
|
|
|
-- Classic blue hyperlinks (#0000EE)
|
|
|
-- Reading-optimized line length (66 characters)
|
|
|
-- Progressive disclosure of depth
|
|
|
-- Text-heavy, fast-loading design
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：iA Writer app
|
|
|
-**搜索关键词**：information architects ia writer
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 04. Fathom Information Design - 科学叙事
|
|
|
-**哲学**：每一个像素都必须承载信息
|
|
|
-**核心特征**：
|
|
|
-- 科学期刊的严谨+设计的优雅
|
|
|
-- 定量数据的精确可视化
|
|
|
-- 冷静的专业色调（灰、海军蓝）
|
|
|
-- 注释与引用系统的设计化
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Fathom Information Design style:
|
|
|
-- Scientific journal aesthetic meets modern design
|
|
|
-- Precise data visualization (charts, timelines, scatter plots)
|
|
|
-- Neutral scheme (grays, navy, one highlight color)
|
|
|
-- Footnote/citation design integrated into layout
|
|
|
-- Clean sans-serif (GT America/Graphik)
|
|
|
-- Information density without clutter
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Bill & Melinda Gates Foundation年度报告
|
|
|
-**搜索关键词**：fathom information design gates foundation
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 二、运动诗学派（05-08）
|
|
|
-> 哲学：「技术本身就是一种流动的诗」
|
|
|
-
|
|
|
-### 05. Locomotive - 滚动叙事大师
|
|
|
-**哲学**：滚动不是浏览，是旅程
|
|
|
-**核心特征**：
|
|
|
-- 丝滑的视差滚动
|
|
|
-- 电影化的分镜叙事
|
|
|
-- 大胆的空间留白
|
|
|
-- 动态元素的精确编排
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Locomotive scroll narrative style:
|
|
|
-- Film-like scene composition with parallax depth
|
|
|
-- Generous vertical spacing between sections
|
|
|
-- Bold typography emerging from darkness
|
|
|
-- Smooth motion blur effects
|
|
|
-- Dark mode (near-black backgrounds)
|
|
|
-- Strategic glowing accents
|
|
|
-- Hero sections 100vh tall
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Lusion.co website
|
|
|
-**搜索关键词**：locomotive scroll lusion
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 06. Active Theory - WebGL诗人
|
|
|
-**哲学**：让技术可见化即让技术可理解
|
|
|
-**核心特征**：
|
|
|
-- 3D粒子系统作为核心元素
|
|
|
-- 实时渲染的数据可视化
|
|
|
-- 鼠标交互驱动的世界构建
|
|
|
-- 霓虹与深空的配色
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Active Theory WebGL aesthetic:
|
|
|
-- Particle systems representing data flow
|
|
|
-- 3D visualization in depth space
|
|
|
-- Neon gradients (cyan/magenta/electric blue) on dark
|
|
|
-- Mouse-reactive environment
|
|
|
-- Depth of field and bokeh effects
|
|
|
-- Floating UI with glassmorphism
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：NASA Prospect
|
|
|
-**搜索关键词**：active theory nasa webgl
|
|
|
+> **2026-06 重构**。基于对全球 10 大网站类型 + 10 大演示类型、各 top5 公认最佳设计（共 100 个真实案例）的调研反推。
|
|
|
+> 旧版 20 种「平面/装置设计师哲学」库的致命问题：大胆风格几乎全是 AI-生成-only（粒子/光影/手绘），**用户默认无生图能力、default 全走 HTML 时，大胆半场直接清零，只剩极简——这是「default 千篇一律」的根因**。本库每一种都标了「纯 HTML/CSS 无生图」下的**还原度**。
|
|
|
+>
|
|
|
+> ⚖️ **但记住定位**：这是**「没思路时翻的弹药」，不是「必须从这里选」的清单**。用户给了内容/品牌/参考，设计就从那里展开，别套库。skill 的职责是帮用户规避最差，不是规定好设计长什么样——好设计从用户的真实需求里长出来。
|
|
|
|
|
|
----
|
|
|
+## 这个库怎么用
|
|
|
|
|
|
-### 07. Field.io - 算法美学
|
|
|
-**哲学**：代码即设计师
|
|
|
-**核心特征**：
|
|
|
-- 生成艺术系统
|
|
|
-- 每次访问都不同的动态图形
|
|
|
-- 抽象几何的智能编排
|
|
|
-- 技术感与艺术性的平衡
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Field.io generative design style:
|
|
|
-- Abstract geometric patterns, algorithmically generated
|
|
|
-- Dynamic composition that feels computational
|
|
|
-- Monochromatic base with vibrant accent
|
|
|
-- Mathematical precision in spacing
|
|
|
-- Voronoi diagrams or Delaunay triangulation
|
|
|
-- Clean code aesthetic
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：British Council digital installations
|
|
|
-**搜索关键词**：field.io generative design
|
|
|
+1. **先按输出类型选半区**：做网页/落地页/官网 → 网页 20 种；做 PPT/deck/演示 → PPT 20 种。
|
|
|
+2. **温度体系**：每种标了 `大胆 / 中性 / 安静`。**故意让大胆款占多数**——模型的确定性偏差天然偏安静极简，库的配比要把它往大胆推。
|
|
|
+ - 方向 A（稳妥底盘）从安静/中性里按需求选；方向 B 取不同温度拉反差；**方向 C 由 SKILL 的「秒数轮盘」强制注入大胆款**。
|
|
|
+ - ❌ 三个方向不要都落在「米白+留白+一个点缀色」——那是最常见的失败模式。
|
|
|
+3. **还原度**：≥90% 闭眼做；70-90% 主体可做、个别细节降级；<70%（如 Memphis 做旧纹理）必须在产出里**明确标注哪部分用纯色块降级**，不假装能做出原版质感。
|
|
|
+4. **字体**：每种给了开源替代（Inter/Geist/Manrope/Space Grotesk/Fraunces/Playfair 等），不要写付费字体（Söhne/Circular 等）。
|
|
|
+5. 配套：SKILL「设计方向顾问」Phase 3-5 用本库推 3 方向；`assets/showcases/` 有预制截图画廊。
|
|
|
|
|
|
---
|
|
|
|
|
|
-### 08. Resn - 叙事驱动的交互
|
|
|
-**哲学**：每个点击都推进故事
|
|
|
-**核心特征**：
|
|
|
-- 游戏化的用户旅程
|
|
|
-- 强烈的情感化设计
|
|
|
-- 插画与代码的深度结合
|
|
|
-- 非线性的探索体验
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Resn interactive storytelling approach:
|
|
|
-- Illustrative style mixed with UI elements
|
|
|
-- Gamified exploration (progress indicators)
|
|
|
-- Warm color palette despite tech subject
|
|
|
-- Character-driven design
|
|
|
-- Scroll-triggered animations
|
|
|
-- Editorial illustration meets product design
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Resn.co.nz portfolio
|
|
|
-**搜索关键词**：resn interactive storytelling
|
|
|
+## 网页风格库(20种)
|
|
|
+
|
|
|
+#### 大胆派
|
|
|
+
|
|
|
+**媒体级粗野主义 Editorial Brutalism（巨号Helvetica压小正文）** `大胆·还原98%`
|
|
|
+- 参考:Bloomberg Businessweek（Richard Turley 2010-2014 改版，Code and Theory操刀）；Neue Haas Grotesk谱系
|
|
|
+- 适配:媒体/内容出版、AI产品发布、品牌官网hero、调研报告封面、观点型长文头图
|
|
|
+- 视觉DNA:配色纯黑#000+纯白#FFF+超链接蓝#0000EE，点缀信号橙红#FF433D/终端绿#00A33E。字体Helvetica/Neue Haas Grotesk，120px+巨号headline左对齐紧字距直接压住14px小正文，极端字号反差。布局模块化网格+1px规则线分栏切割，高信息密度刻意不留白。标志元素：rule line分栏、超链接蓝下划线、黑白底大色块。
|
|
|
+- HTML实现:纯CSS可1:1还原。CSS Grid做模块网格+border做规则线分栏，clamp()做超大响应式字号+letter-spacing收紧，系统Helvetica/Arial栈或Inter兜底，超链接直接#0000EE下划线。零素材依赖。
|
|
|
+- 字体:Inter（替Helvetica/Neue Haas Grotesk），代码用Geist Mono
|
|
|
+
|
|
|
+**新粗野主义撞色信息流 Neo-Brutalism（粗黑描边卡片+高饱和撞色）** `大胆·还原95%`
|
|
|
+- 参考:The Verge 2022 redesign（in-house team，PolySans + Mānuka）
|
|
|
+- 适配:媒体/内容站、AI产品聚合页、活动landing、社区榜单页、小红书风信息卡
|
|
|
+- 视觉DNA:配色电光紫#5200FF~品红#E1306C高饱和主色+亮黄#F8E000强调+纯黑#08080D+白，大面积撞色块刻意不柔和。字体几何无衬线大标题+衬线正文反差。布局卡片化feed流、2-4px粗黑描边、硬色块分区、近乎无圆角。标志元素：粗描边卡片hover撞色翻转、未完成界面气质。
|
|
|
+- HTML实现:纯CSS强项。border:3px solid #000粗描边+box-shadow硬投影偏移(4px 4px 0 #000)+grid/flex卡片流+:hover切换background撞色翻转。无3D/光影障碍。
|
|
|
+- 字体:Space Grotesk（替PolySans）+ 任一衬线如Fraunces
|
|
|
+
|
|
|
+**孟菲斯复古拼贴最大化 Memphis Maximalism（撞色块+错位叠放+复古字体）** `大胆·还原72%`
|
|
|
+- 参考:Gucci Vault概念店（Alessandro Michele）；Memphis设计运动 / Sagmeister叛逆基因
|
|
|
+- 适配:电商概念店、创意活动页、品牌实验campaign、Y2K复古主题、节日营销页
|
|
|
+- 视觉DNA:配色复古红/芥末黄/宝蓝/紫/橄榄绿大面积撞色并置+做旧米色暖底，浓烈刻意不和谐。字体复古衬线+装饰字混用、印刷质感、打破网格错位叠放。布局反网格拼贴策展、模块大小不一错落叠压、像逛数字房间。标志元素：撞色块、错位叠放、非常规导航彩蛋。
|
|
|
+- HTML实现:transform:rotate()做错位叠放+position:absolute叠压+高饱和background撞色块+复古Google Fonts。真实做旧纹理无法CSS还原，降级为纯色块+mix-blend-mode/contrast滤镜模拟肌理，几何拼贴版成立、archival做旧版会降级。
|
|
|
+- 字体:DM Serif Display + Bungee（装饰）+ Space Mono
|
|
|
+
|
|
|
+**糖果色凸起立体按钮游戏化 Friendly Geometric Candy** `大胆·还原85%`
|
|
|
+- 参考:Duolingo（Johnson Banks + Monotype，Feather Bold字体）；反硅谷极简
|
|
|
+- 适配:教育语言学习、消费级App landing、游戏化产品、面向大众亲和产品、活动报名页
|
|
|
+- 视觉DNA:配色Duo绿#58CC02+鸭子黄#FFC800+天蓝#1CB0F6糖果高饱和+白底，圆润友好。字体超粗圆体（Feather Bold感）。布局大圆角卡片、凸起3D按钮（底部硬阴影=可按压感）、吉祥物位+进度气泡。标志元素：3px实底阴影立体按钮、按下位移动画、超圆角。
|
|
|
+- HTML实现:纯CSS。box-shadow:0 4px 0生硬底阴影做凸起按钮+:active translateY(4px)消阴影模拟按压，border-radius大圆角，纯色块。吉祥物无生图时用CSS几何形或emoji占位（轻微降级）。
|
|
|
+- 字体:Baloo 2 / Nunito（超粗圆体替Feather）
|
|
|
+
|
|
|
+**纯CSS几何插画+响应式变形彩蛋 Pure-CSS Art** `大胆·还原80%`
|
|
|
+- 参考:Lynn Fisher（lynnandtonic.com，纯CSS艺术传奇，Adobe专文报道）
|
|
|
+- 适配:个人主页、创意404/彩蛋页、品牌玩味landing、技术博客头图、设计师自我展示
|
|
|
+- 视觉DNA:配色2-4色高对比扁平面（每个breakpoint换调色）。字体粗几何无衬线标题。布局核心是「图随视口变形」——一组CSS形状在不同断点重组成不同画面（如建筑随屏宽变换层数）。标志元素：纯CSS绘制的几何插画、断点驱动的重排彩蛋、零图片。
|
|
|
+- HTML实现:纯CSS的炫技战场，零素材是优势。div+border-radius/clip-path/transform/box-shadow堆叠几何形，@media断点改变形状尺寸位置实现变形。难度在设计构思而非技术，但需要精心手搓每个形状。
|
|
|
+- 字体:Rubik / Archivo（粗几何替自定义）
|
|
|
+
|
|
|
+**巨型字黑白高对比时装大字报 Bold Big-Type Editorial** `大胆·还原88%`
|
|
|
+- 参考:Jacquemus官网 / Rik Oostenbroek / Domestika；时装杂志大字报
|
|
|
+- 适配:电商时尚、作品集、媒体专题、品牌宣言页、视频课程封面、调研报告大字版
|
|
|
+- 视觉DNA:配色极简黑白+单一克制点缀色（裸粉#E8C4C0或正红）。字体超大Display无衬线/高反差衬线，标题占满整屏。布局全幅网格、巨字与负空间博弈、图文1:1分割。标志元素：屏占比巨型headline、奢侈级留白、左右对位排版。
|
|
|
+- HTML实现:纯CSS完美还原。clamp()巨号字+CSS Grid全幅分割+大量padding留白+vh单位让标题占满视口。无图时用纯色块/文字块替代时装大片占位（轻降级但版式成立）。
|
|
|
+- 字体:Archivo Expanded / Anton（Display）+ Playfair Display（高反差衬线）
|
|
|
+
|
|
|
+**复古未来太空图录 Cosmic Retro-Futurism** `大胆·还原75%`
|
|
|
+- 参考:Perplexity Comet浏览器发布站（The Brand Identity：Black/Blue/Cream；《2001太空漫游》气质）
|
|
|
+- 适配:AI产品发布站、科技品牌宣言页、活动倒计时页、未来感landing、概念发布会
|
|
|
+- 视觉DNA:配色纯黑#0A0A0A+奶油纸白cream#F0EAD8+一抹钴蓝-孔雀蓝#2B4F91，低饱和像老式天文图录。字体高反差衬线（古典天文图册感）+留白。布局线描轨道/抛物线SVG、行星圆点、奶油底压黑字、古籍式排印。标志元素：SVG天体轨道线、奶油+蓝+黑三色、复古衬线大字、天文图录质感。
|
|
|
+- HTML实现:纯CSS+SVG还原静态版八成气质。SVG path画轨道抛物线+CSS径向定位行星圆点+三色变量+高反差衬线。缺口是「太空落到地球」的全屏视频转场（灵魂部分）——降级为CSS scroll视差+SVG轨道旋转近似。
|
|
|
+- 字体:Cormorant Garamond / EB Garamond（高反差衬线）+ Space Mono
|
|
|
+
|
|
|
+**电影感声波可视化 Cinematic Sound-Viz Dark** `大胆·还原72%`
|
|
|
+- 参考:ElevenLabs；电影片头title sequence（Saul Bass式极简动态）× 音频工程界面
|
|
|
+- 适配:音频/语音AI产品、音乐科技站、播客平台、媒体发布页、影院级品牌hero
|
|
|
+- 视觉DNA:配色纯黑#000底+纯白文字+蓝紫渐变accent波形。字体大号无衬线标题Saul Bass式极简。布局全幅暗场、声波/频谱可视化贯穿、巨标题压波形、卡片功能区。标志元素：彩色audio-waveform波形带、电影片头式极简、高对比黑白+单渐变、声音可视化母题。
|
|
|
+- HTML实现:纯CSS+SVG还原70%气质（骨架完美，波形是降级点）。SVG polyline画静态波形或多条不等高div柱阵+CSS animation做『假波形』跳动近似。缺口：随声音实时跳动的Web Audio/Canvas频谱不可纯CSS还原，静态版像、动态灵魂还不了。
|
|
|
+- 字体:Inter / Sora（大号无衬线）
|
|
|
+
|
|
|
+**像素游戏横版叙事 Pixel-Game Side-Scroller** `大胆·还原70%`
|
|
|
+- 参考:Robby Leonardi交互简历（8/16-bit平台动作游戏叙事，致敬任天堂SNES）
|
|
|
+- 适配:创意简历/作品集、品牌玩味campaign、游戏化landing、活动彩蛋页、个人趣味主页
|
|
|
+- 视觉DNA:配色复古游戏多段分区——森林绿#4CAF50草地+天蓝#5DADE2，过渡太空紫#2C2A4A、火山橙红#E8743B、海底青#1ABC9C，每『关卡』换一套高饱和卡通调色。字体像素字体（8-bit感）+粗无衬线。布局横版/纵向滚动分关卡场景、视差分层、scroll触发位移。标志元素：分关卡换色、像素美学、视差滚动、游戏HUD式UI。
|
|
|
+- HTML实现:纯CSS+少量JS还原骨架（原作就是HTML+CSS+jQuery无WebGL）。视差分层position+scroll位移、image-rendering:pixelated、CSS逐帧background-position做sprite动画、分段背景色。缺口：原创角色/场景手绘像素插画——无生图时用CSS方块拼简易像素图标替代（美术降级，技术不降）。
|
|
|
+- 字体:Press Start 2P / VT323（像素字）+ Inter
|
|
|
+
|
|
|
+
|
|
|
+#### 中性派
|
|
|
+
|
|
|
+**包豪斯几何标志+扁平插画系统 Bauhaus Geometric** `中性·还原90%`
|
|
|
+- 参考:Khan Academy rebrand（六边形+花瓣logomark + Wonder Blocks设计系统）；Bauhaus几何构成
|
|
|
+- 适配:教育课程站、品牌logo系统、信息图、儿童亲和向产品、活动KV
|
|
|
+- 视觉DNA:配色三原色谱系——包豪斯红#E63946/黄#FFB703/蓝#0077B6+黑白，纯色块拼接。字体几何无衬线（圆润几何感）。布局圆/三角/方基本几何单元搭建插画，对齐栅格、模块化拼图。标志元素：纯几何形态logomark、扁平无渐变插画、原色块构成。
|
|
|
+- HTML实现:纯CSS几何全能。border-radius:50%做圆、clip-path/border三角形、方块div拼几何插画，CSS Grid栅格对齐，纯色fill无需素材。插画用CSS形状或内联SVG几何路径手搓。
|
|
|
+- 字体:Poppins / Manrope（几何圆润替Wonder Blocks）
|
|
|
+
|
|
|
+**暗色双色侧栏开发者作品集 Dark Editorial（深底+单荧光accent+等宽字）** `中性·还原96%`
|
|
|
+- 参考:Brittany Chiang（brittanychiang.com v4，dev portfolio事实标准）
|
|
|
+- 适配:作品集个人主页、开发者向产品、技术品牌站、简历页、AI工具landing
|
|
|
+- 视觉DNA:配色深墨绿/海军底#0A192F+板岩灰文字#8892B0+单一荧光青绿accent#64FFDA。字体无衬线正文+等宽字（编号/标签）。布局左固定侧栏导航+右滚动主区双栏，section编号01/02、链接hover下划线滑入。标志元素：单accent色、等宽编号标签、侧栏锚点高亮。
|
|
|
+- HTML实现:纯CSS完全还原。position:sticky做固定侧栏+CSS Grid双栏+单accent变量+等宽字标签+:hover下划线transform滑入。零素材，纯版式与微交互。
|
|
|
+- 字体:Inter + JetBrains Mono（等宽）
|
|
|
+
|
|
|
+**暖色出版物 Warm Editorial（奶油纸底+赤陶橙+衬线无衬线混排）** `中性·还原97%`
|
|
|
+- 参考:Anthropic / Claude（DBCo + Geist Studio，Styrene×Tiempos）；Penguin/Pelican平装书排印
|
|
|
+- 适配:AI产品站、品牌官网、长文阅读页、橙皮书电子书、调研报告、培训材料
|
|
|
+- 视觉DNA:配色奶油纸底#F5F0E8+赤陶橙#CC785C/#D97757点缀+近黑文字#191919，温暖低饱和。字体衬线标题（Tiempos感）×无衬线正文（Styrene感）混排。布局书籍式单栏阅读流、舒适行高、节制分隔线。标志元素：纸感暖底、赤陶橙、出版级排印节奏。
|
|
|
+- HTML实现:纯CSS 100%还原，零素材。背景色变量+衬线无衬线字体栈混排+max-width限制阅读宽度+line-height 1.7舒适行高。这是Anthropic赤陶橙暖色版的安全主场。
|
|
|
+- 字体:Fraunces / Newsreader（替Tiempos衬线）+ Inter（替Styrene）
|
|
|
+
|
|
|
+**Linear暗色发光+Bento网格 Glassmorphism Bento** `中性·还原85%`
|
|
|
+- 参考:Linear / Cursor（'The Linear Look'现象级流派，Frontend Horse有代码配方）
|
|
|
+- 适配:SaaS/AI产品站、开发者工具、技术品牌hero、产品功能展示、深色dashboard演示
|
|
|
+- 视觉DNA:配色近黑底#08090A+去饱和蓝紫品牌#5E6AD2+低饱和青紫微光渐变#4EA7FC→#B59AFF。字体几何无衬线负字距紧凑。布局便当盒bento网格分块、发丝分割线、玻璃拟态卡片。标志元素：暗底发光渐变边框、bento分块、流光streamer、磨砂玻璃。
|
|
|
+- HTML实现:纯CSS强还原。box-shadow/filter blur+radial-gradient做发光晕，backdrop-filter:blur玻璃拟态，conic/linear-gradient边框，CSS Grid拼bento。缺口仅「真实产品UI截图」——用色块+文字拼简化假UI替代（这部分降级）。
|
|
|
+- 字体:Inter / Geist（负字距）+ Geist Mono
|
|
|
+
|
|
|
+**斜切流体渐变带 Angled Fluid Gradient** `中性·还原92%`
|
|
|
+- 参考:Stripe（标志性angled gradient banner，Klim定制Söhne字体）
|
|
|
+- 适配:SaaS/Fintech落地页、品牌官网hero、产品发布页、活动banner、AI产品营销页
|
|
|
+- 视觉DNA:配色多色流体渐变（靛蓝#635BFF→青→粉→橙暖调）做hero背景+纯白内容区+近黑文字。字体精致无衬线（Söhne感）。布局倾斜分割色块（skew切角分区）、渐变hero压结构化栅格正文。标志元素：angled斜切边界、多色流体渐变、理性栅格压表达渐变。
|
|
|
+- HTML实现:纯CSS。transform:skewY()或clip-path:polygon()做斜切分区，linear-gradient多色叠加（可加CSS animation缓慢流动）做流体渐变带，Grid做下方结构化正文。零素材。
|
|
|
+- 字体:Inter / Hanken Grotesk（替Söhne）
|
|
|
+
|
|
|
+**实用主义彩虹分类文档 Utility-First Colorful Docs** `中性·还原98%`
|
|
|
+- 参考:Tailwind CSS Docs（Sky/Cyan品牌色+功能分类彩虹色相条）
|
|
|
+- 适配:技术文档、API参考、设计系统站、教程站、开发者knowledge base、SaaS帮助中心
|
|
|
+- 视觉DNA:配色Sky蓝#38BDF8品牌+teal→cyan→sky青蓝渐变+Slate灰阶#0F172A/#64748B/#F8FAFC，文档用彩虹色相条区分功能分类（粉#EC4899/紫#A855F7/绿#10B981/橙）。字体清爽无衬线+等宽代码。布局左侧栏导航+中正文+右TOC三栏，彩色高亮代码块、分类色标。标志元素：青蓝渐变hero、彩虹分类色、三栏文档骨架、语法高亮代码块。
|
|
|
+- HTML实现:纯CSS 98%还原（它本身就是CSS框架文档）。Grid三栏+linear-gradient青蓝hero+分类色变量+代码块语法色用span着色。Inter开源，唯暗色切换/copy需轻量JS。零光影/3D/手绘。
|
|
|
+- 字体:Inter + JetBrains Mono / Fira Code（代码）
|
|
|
+
|
|
|
+**终端核软未来 Terminal-Core Soft-Futurism（等宽字+等距立方）** `中性·还原80%`
|
|
|
+- 参考:Cursor (Anysphere)；开发者终端美学 × Teenage Engineering工业极简
|
|
|
+- 适配:AI编程工具站、CLI产品landing、开发者基础设施、技术品牌hero、终端类产品
|
|
|
+- 视觉DNA:配色炭黑#0B0D14底+暖白文字#F2F0EF+克制蓝紫渐变accent点缀按钮与光晕。字体等宽字为主角（命令行感）+无衬线辅助。布局命令行/代码块前景、bento分区、2.5D等距cube示意。标志元素：等宽字命令行、等距投影立方体、暖白×炭黑、克制渐变光晕、工业极简。
|
|
|
+- HTML实现:纯CSS 80%还原。等宽字代码块+暗色bento+box-shadow光晕；2.5D等距cube用CSS 3D transform(rotateX/Y+skew)或SVG等距投影手搓。缺口：可点击切换的多界面demo需JS+假UI拼接。无WebGL刚需。
|
|
|
+- 字体:Geist Mono / JetBrains Mono（主角）+ Inter（辅助）
|
|
|
+
|
|
|
+
|
|
|
+#### 安静派
|
|
|
+
|
|
|
+**功能主义网格社区 Functional Brutalism（灰线分割+系统字+蓝链接）** `安静·还原98%`
|
|
|
+- 参考:Are.na / Lobsters / Quartz；Müller-Brockmann栅格数字落地 + Tufte信息密度
|
|
|
+- 适配:社区/UGC平台、内容聚合站、文档知识库、移动优先内容流、极客向产品
|
|
|
+- 视觉DNA:配色近白底#FBFBFB+黑文字+1px灰分割线#E0E0E0+经典链接蓝#0000EE/已访问紫。字体系统字栈（-apple-system/无装饰）。布局高密度信息列表、细灰线分栏、极小留白、紧凑行距。标志元素：发丝灰分割线、蓝链接、系统字、信息密度优先。
|
|
|
+- HTML实现:纯CSS最易还原，这是Brutalist Web的本色。border-bottom:1px灰线列表+system-ui字栈+紧凑padding+蓝链接。几乎不需要任何素材或JS，纯结构。
|
|
|
+- 字体:system-ui系统字栈 / IBM Plex Sans（兜底）
|
|
|
+
|
|
|
+**深色画廊裱框 Gallery Dark（深黑负空间+单列大图+EXIF小字）** `安静·还原75%`
|
|
|
+- 参考:Glass (glass.photo) / Bottega Veneta；美术馆暗房 + Apple Photos内容至上
|
|
|
+- 适配:摄影作品集、奢侈品电商、视觉内容沉浸展示、个人画廊页、高端产品陈列
|
|
|
+- 视觉DNA:配色纯黑底#0A0A0A+作品图本身提供唯一色彩+极淡灰EXIF小字#666。字体极细无衬线小字。布局单列居中大图、巨幅负空间裱框、图下metadata小字。标志元素：暗房黑底、内容至上UI退隐、EXIF式小字注脚、大图独占视口。
|
|
|
+- HTML实现:纯CSS还原版式骨架。纯黑底+居中max-width单列+巨幅padding裱框留白+小字metadata。缺口是「真实摄影作品」本身——用占位图/纯色块代替则失灵魂，但暗房氛围与版式100%可搭。
|
|
|
+- 字体:Inter（细字重300）/ Cormorant（衬线奢侈感可选）
|
|
|
+
|
|
|
+**Swiss极致黑白 Swiss Monochrome（Vercel式纯黑白+Geist+锐利边角）** `安静·还原98%`
|
|
|
+- 参考:Vercel / Next.js Docs（自研Geist已开源）；Massimo Vignelli少即是多
|
|
|
+- 适配:开发者工具文档、技术品牌官网、AI产品站、SaaS落地页、极简调研报告
|
|
|
+- 视觉DNA:配色纯黑#000+纯白#FFF+灰阶#888，零彩色或仅一抹蓝链接。字体Geist几何无衬线+Geist Mono。布局锐利直角（无圆角或极小）、高对比、精密栅格、克制留白。标志元素：纯黑白、锐利边角、Geist字体、三角/箭头几何标记。
|
|
|
+- HTML实现:纯CSS 100%还原，Geist开源可直接引。CSS Grid精密栅格+纯黑白变量+border-radius:0锐角+发丝边框。这是HTML最舒适的极简主场，零素材依赖。
|
|
|
+- 字体:Geist + Geist Mono（Vercel开源原版）
|
|
|
+
|
|
|
+**日式留白白盒画廊 Kenya Hara White Gallery** `安静·还原80%`
|
|
|
+- 参考:Cosmos (cosmos.so) / Aesop伊索官网；原研哉『白』的空寂 + 瑞士网格混血
|
|
|
+- 适配:高端电商、创意画廊、内容策展平台、设计师作品集、品牌精品店、moodboard站
|
|
|
+- 视觉DNA:配色近全白#FAFAFA底+纯黑文字#0A0A0A+极淡灰分割#EFEFEF，内容图提供全部色彩、UI退到背景。字体极简系统/几何无衬线小字、大字距。布局masonry瀑布网格、极致留白、淡灰发丝分隔、东方空寂。标志元素：白盒美学、奢侈留白、内容至上UI隐退、瀑布流策展。
|
|
|
+- HTML实现:纯CSS还原静态版式（与暗色画廊区分在『白』）。CSS columns或Grid做masonry+近白变量+大padding留白+淡灰分隔。缺口是Lenis/GSAP丝滑惯性滚动与图片入场缓动（高级感60%在此），CSS仅基础transition，动效层降级。
|
|
|
+- 字体:Inter（细字重）/ Cooper Hewitt（Aesop同款开源）
|
|
|
+
|
|
|
+
|
|
|
+## PPT风格库(20种)
|
|
|
+
|
|
|
+#### 大胆派
|
|
|
+
|
|
|
+**新瑞士大字报 / Neo-Swiss Billboard Editorial** `大胆·还原98%`
|
|
|
+- 参考:Scribe $75M、Flock Safety $47M 等 AI/SaaS 路演 deck 的 Big-Number Editorial 流派；Bloomberg Businessweek 信息图；Pentagram
|
|
|
+- 适配:融资路演、QBR/业务回顾、年度趋势复盘、产品发布关键页
|
|
|
+- 视觉DNA:配色=纯白(#FFFFFF)或近黑(#0A0A0A)底+单一高饱和强调色(电光蓝#2D5BFF/荧光绿#00E676/品牌橙#FF6B2C)+中性网格线#E5E5E5。字体=超大粗体无衬线，标题占半屏，数字tabular-nums等宽收紧字距。母版=①大色块章节页一个词②巨型数字占半屏(3.2x)+小注③左右分栏对比④全幅扁平折线/柱状。标志=billboarding大字、严格基线网格、大色块章节页
|
|
|
+- HTML实现:超大数字用clamp()；严格网格用CSS Grid；大色块章节页background-color；折线柱状用纯div+CSS或内联SVG(比贴图更锐利)；数字对齐font-variant-numeric:tabular-nums。零插画零3D
|
|
|
+- 字体:Inter / Geist / Söhne替代Neue Haas Grotesk；数字配Geist Mono
|
|
|
+
|
|
|
+**黑底巨型数字剧场 / Black Big-Number Stage** `大胆·还原97%`
|
|
|
+- 参考:Steve Jobs 2007 iPhone Keynote、小米SU7 Ultra雷军发布会、Spotify Wrapped、Presentation Zen(Garr Reynolds)
|
|
|
+- 适配:产品发布主题演讲、思想演示、全员town hall、情绪向年度回顾
|
|
|
+- 视觉DNA:配色=纯黑#000000底+纯白#FFFFFF字高反差，一页只一个品牌强调色高亮(小米橙#FF6900/Spotify绿#1ED760/Apple蓝#2997FF)。字体=几何无衬线粗体，一屏一词或一个超大数字占满视野，字距收紧。母版=①标题页黑底居中一行大字②数据高潮页巨型数字+单位+一行注③左右参数对比双栏(强调色vs灰)④slogan单页。大量负空间
|
|
|
+- HTML实现:黑底白字几行CSS；巨型数字clamp()+flex居中；强调色highlight单独span；左右对比CSS Grid两列+条形高亮；tabular-nums。去掉产品照改纯文字反而更接近Zen本质
|
|
|
+- 字体:Geist / Inter / 思源黑替代SF Pro
|
|
|
+
|
|
|
+**高饱和单色品牌撞色海报 / Mono-Brand Type-as-Hero** `大胆·还原96%`
|
|
|
+- 参考:Spotify Wrapped视觉系统、Mailchimp Brand Book(Collins)、Netflix红黑现代复刻、COLLINS品牌系统
|
|
|
+- 适配:品牌/营销策略、campaign宣讲、town hall文化页、活动主视觉
|
|
|
+- 视觉DNA:配色=单一品牌主色满版铺底(Spotify绿#1ED760/Mailchimp黄#FFE01B/Netflix红#E50914)+黑或白反差字，撞色两层。字体=超大字体即主视觉(type-as-hero)顶天立地。母版=①满色块底+反白巨字②双色块上下/左右分割③巨型数字撑满。标志=单色满版、字体当图、高对比撞色
|
|
|
+- HTML实现:满版background-color；超大字clamp()占满；双色用两个100vh色块；字体当图靠font-weight900+负letter-spacing。纯色块零素材，HTML原生最爽
|
|
|
+- 字体:Inter / Manrope / Archivo(超粗)替代Circular/Cavendish
|
|
|
+
|
|
|
+**全幅渐变宣言版式 / Full-Bleed Gradient Manifesto** `大胆·还原82%`
|
|
|
+- 参考:Zuora『Tell a Different Story』销售deck(Andy Raskin拆解)、Nike『Just Do It』campaign、National Geographic跨页
|
|
|
+- 适配:销售提案愿景页、品牌宣言、keynote转折页、使命愿景单页
|
|
|
+- 视觉DNA:配色=满版CSS渐变(暖橙→品红/深蓝→青)或纯色出血+反白宣言大字+hashtag口号(#shifthappens)。字体=厚重无衬线全大写标语横贯。母版=①满幅渐变+居中反白宣言②应许之地愿景页③客户logo墙。标志=full-bleed出血、反白大标语、hashtag口号
|
|
|
+- HTML实现:linear-gradient/radial-gradient满版(不做粒子/光影，纯CSS渐变是允许的)；反白字position居中；logo墙用grid灰度SVG/文字占位。原本靠纪实大照片的部分降级为CSS渐变铺底+大字，照片缺失这一项还原度降约15%
|
|
|
+- 字体:Archivo / Anton / Manrope(超粗)
|
|
|
+
|
|
|
+**CS50单概念糖果舞台 / Candy-Color Lecture Stage** `大胆·还原94%`
|
|
|
+- 参考:Harvard CS50(David Malan)、Lessig Method/高桥流、Presentation Zen
|
|
|
+- 适配:教育课件、技术讲座、概念解释、代码教学
|
|
|
+- 视觉DNA:配色=深黑底#0A0A0A+高饱和糖果色大字轮换(品红#FF2D95/青#00E5FF/明黄#FFD500/绿#39FF14)。字体=无衬线超大字漂浮居中，一屏一概念，文字极少。母版=①深黑底单个糖果色大词②等宽代码块语法高亮③舞台聚光感大字。标志=深黑漂浮糖果色大字、等宽代码高亮、强舞台聚光、极少文字
|
|
|
+- HTML实现:深黑背景+单色超大字clamp()居中；代码块用pre+等宽字+span上色做语法高亮；聚光感用极淡radial-gradient暗角(非粒子光效)。还原度高
|
|
|
+- 字体:Inter超粗 + JetBrains Mono(代码)
|
|
|
+
|
|
|
+**玩味手绘极简 / Playful Maximalist Editorial (Collins式)** `大胆·还原75%`
|
|
|
+- 参考:Mailchimp Brand Book(Collins 2018)、New Yorker漫画气质、Cooper圆润衬线、Cavendish荧光黄
|
|
|
+- 适配:有态度的品牌deck、创意机构提案、文化向town hall、反SaaS极简的营销页
|
|
|
+- 视觉DNA:配色=Cavendish荧光黄#FFE01B大面积+黑+少量撞色，反SaaS极简。字体=Cooper式圆润衬线大标题(playful)+杂志式留白编排。母版=①荧光黄满底+怪诞标题②杂志式不规则留白排版③大字玩梗文案。标志=荧光黄、圆润衬线、playful编排、怪诞手绘气质(降级为几何色块/emoji替代真插画)
|
|
|
+- HTML实现:荧光黄background；圆润衬线font-family；杂志留白用非对称Grid。手绘猩猩/插画这一核心元素无AI生图无法做，降级为CSS几何色块+大号emoji+不规则transform旋转的文字块替代，插画缺失还原度降约20%
|
|
|
+- 字体:Fraunces(可调圆润)/ Bree Serif替代Cooper；正文Inter
|
|
|
+
|
|
|
+**不羁玩梗流行版 / Irreverent Pop (Reddit式)** `大胆·还原80%`
|
|
|
+- 参考:Reddit Ads销售deck(被Dock列为最有性格)、David Carson式不羁排版、90年代web复古、Memphis玩味
|
|
|
+- 适配:Z世代品牌、玩梗营销deck、社区/创作者向、敢于不正经的提案
|
|
|
+- 视觉DNA:配色=Reddit橙红#FF4500+撞色，90s web复古色。字体=混排/打破网格的David Carson式排版，玩梗口语文案。母版=①fun页玩梗大字②facts页节奏转折严肃数据③口语标题。标志=打破网格混排、橙红、玩梗口语、fun→facts节奏反转、复古web质感
|
|
|
+- HTML实现:故意打破网格用transform旋转/重叠定位/混合字号；橙红+撞色块；复古质感用粗黑边border+硬阴影box-shadow(无blur)。自定义meme插画降级为emoji+几何拼贴，但混排排版本身HTML可还原
|
|
|
+- 字体:Archivo / Space Grotesk + 混搭Inter制造对比
|
|
|
+
|
|
|
+**Y2K膨胀大字 / Maximalist 3D-Type (Wrapped式)** `大胆·还原78%`
|
|
|
+- 参考:Spotify Wrapped 2022/2023/2025、Memphis撞色、Y2K/Maximalism、duotone人像渐变
|
|
|
+- 适配:年度回顾(情绪出圈向)、个性化数据卡、社交分享竖屏卡、品牌年终
|
|
|
+- 视觉DNA:配色=高饱和撞色满版背景(品红+青+橙)+Spotify绿点睛+duotone双色渐变。字体=顶天立地巨型数字，年份/数字做3D膨胀/金属质感。母版=①撞色满版+巨型膨胀数字②duotone人像/色块底+反白大字③竖屏可分享卡。标志=巨型膨胀3D数字、撞色满版、duotone渐变、年份金属质感、竖屏story卡
|
|
|
+- HTML实现:撞色满版background；3D膨胀数字用CSS text-shadow多层叠加+transform:perspective或SVG+stroke制造立体(非真3D渲染)；duotone用mix-blend-mode+渐变叠在灰度图占位块上。金属质感降级为渐变填充文字background-clip:text，还原度降约15%
|
|
|
+- 字体:Archivo Black / Anton超粗 + 数字Clash Display
|
|
|
+
|
|
|
+
|
|
|
+#### 中性派
|
|
|
+
|
|
|
+**Bento便当格模块网格 / Bento Grid** `中性·还原95%`
|
|
|
+- 参考:Apple Keynote Bento Grid时代、新一代MBB Bento/Big-Type deck(2024-2026)、Stripe年报指标卡矩阵、Pitch.com QBR模板
|
|
|
+- 适配:产品功能汇总、咨询/QBR数据汇报、销售成果页、town hall指标页
|
|
|
+- 视觉DNA:配色=浅灰/奶白底(#F5F5F7/cream)或近黑底+品牌主色+1-2强调色，卡片浅色分区底+圆角+微描边/微阴影。字体=超大display标题+常规正文，字重对比强烈，KPI数字tabular figures。母版=①标题页巨型单句+留白②bento页2×2/3列不等高卡片每卡一洞见(数字/线性icon/sparkline)③one-insight超大数字页。标志=不等高卡片网格、圆角微描边、呼吸感
|
|
|
+- HTML实现:CSS Grid的grid-template-areas做不等高bento；卡片border-radius+box-shadow微阴影+1px hairline；sparkline用内联SVG；线性icon用inline SVG stroke。零贴图
|
|
|
+- 字体:Inter / Geist + 数字Geist Mono
|
|
|
+
|
|
|
+**Neo-Swiss暗色终端美学 / Dark Hairline Terminal** `中性·还原94%`
|
|
|
+- 参考:Linear pitch deck、Vercel设计语言、CS50深黑舞台课件；字体Inter Tight+JetBrains Mono
|
|
|
+- 适配:开发者工具/技术产品发布、技术路演、工程向汇报
|
|
|
+- 视觉DNA:配色=近黑底(#0D0D0F/#111113)+hairline细线#262629网格+单一紫蓝强调(#5B5BD6/#7C7CFF)。字体=Inter Tight大标题+JetBrains Mono做标签/数据。母版=①极简标题页一句话+mono小标②hairline分隔的数据网格③mono标签的特性列表。标志=1px细线网格、mono单等宽标签、极致留白、近黑非纯黑
|
|
|
+- HTML实现:近黑背景+border:1px solid的hairline网格；mono标签用等宽font-family；微光用极淡box-shadow/border highlight而非真光效(降级避开赛博霓虹禁区)。注意避开#0D1117深蓝禁区，用中性近黑
|
|
|
+- 字体:Inter Tight + JetBrains Mono / IBM Plex Mono
|
|
|
+
|
|
|
+**双字体咨询版 / Two-Font Consulting (Bower式)** `中性·还原90%`
|
|
|
+- 参考:McKinsey 2019品牌系统(Wolff Olins设计，Bower衬线+无衬线)、BCG Executive Perspectives、深蓝细线pattern
|
|
|
+- 适配:咨询报告、高管汇报、行业研究、权威机构提案
|
|
|
+- 视觉DNA:配色=深蓝(#051C2C/McKinsey深蓝)×白二元+单一品牌色高亮(BCG绿#00805A)，暖灰底带呼吸感。字体=characterful衬线大标题(Bower式)与无衬线正文高对比并置。母版=①左上角结论式action-title②蓝色细线pattern装饰③杂志式左右分工(结论文字+视觉)④大数字data-point卡。标志=衬线×无衬线高对比、深蓝细线pattern、action-title、暖灰高级感
|
|
|
+- HTML实现:双字体font-family并置(衬线标题+无衬线正文)；细线pattern用repeating-linear-gradient或SVG line；data-point卡纯CSS；照片灰度处理这一项无照片可省。蓝紫edge shimmer降级为纯色边
|
|
|
+- 字体:Playfair Display / Fraunces衬线标题 + Inter正文(替代Bower)
|
|
|
+
|
|
|
+**图谱箭头企业版 / Diagram-Driven Isotype** `中性·还原88%`
|
|
|
+- 参考:Salesforce销售deck、Isotype(Otto Neurath)谱系、Gene Zelazny《Say It With Charts》、Hans Rosling/Gapminder
|
|
|
+- 适配:平台/架构讲解、客户旅程、流程方法论、生态地图
|
|
|
+- 视觉DNA:配色=企业蓝色块+产品线分色区分+图标化能力网格。字体=清晰无衬线。母版=①横向客户旅程箭头流②分层平台架构图③图标化能力网格④2×2/瀑布/金字塔结构图。标志=箭头流程、分层架构盒、Isotype图标网格、流程即叙事
|
|
|
+- HTML实现:箭头流程用Flexbox+CSS clip-path三角或SVG arrow；架构分层用嵌套带边框div；图标用inline SVG stroke统一描边；瀑布/金字塔用Grid+斜切。气泡图可用CSS圆形+定位。纯矢量绘制
|
|
|
+- 字体:Inter / IBM Plex Sans(图表友好)
|
|
|
+
|
|
|
+**单图母图概念图解 / Diagrammatic Minimalism** `中性·还原95%`
|
|
|
+- 参考:Simon Sinek黄金圆环(Golden Circle)TED、Bauhaus几何抽象、信息建筑『一图定全场』
|
|
|
+- 适配:理论框架讲解、TED式思想传播、模型/方法论可视化、单概念keynote
|
|
|
+- 视觉DNA:配色=极简白/浅底+黑+1个强调色，几何纯色。字体=无衬线，标签大写嵌入图形。母版=①唯一几何母图(同心圆/三角/矩阵)承载全部概念②由内向外箭头③对比案例。标志=单一几何母图、嵌套同心圆/三角、大写标签、一图承载概念
|
|
|
+- HTML实现:同心圆用border-radius:50%嵌套div或SVG circle；三角用clip-path/SVG polygon；箭头SVG marker；标签absolute定位贴在图形上。纯几何，HTML完美还原
|
|
|
+- 字体:Manrope / Futura系(Jost开源替代)几何感
|
|
|
+
|
|
|
+**Sparkline叙事波形 / Narrative Sparkline (Duarte式)** `中性·还原91%`
|
|
|
+- 参考:Nancy Duarte《Resonate》Sparkline叙事图谱、Al Gore《An Inconvenient Truth》、Duarte Inc.数据叙事
|
|
|
+- 适配:演讲结构设计、变革叙事、before/after对照、数据故事弧线
|
|
|
+- 视觉DNA:配色=深底或白底+品牌橙强调转折点+灰化对照。字体=无衬线，annotation标注点。母版=①横贯全屏的振荡波形线②波形上text标注点③上下并置对照波形④全黑底孤悬一条数据线⑤逐步reveal。标志=横贯波形线、波形标注点、橙色转折、对照波形、爬出画面的曲线
|
|
|
+- HTML实现:波形线用内联SVG path(平滑贝塞尔)；标注点用SVG circle+text定位；对照波形上下两条path；reveal用CSS动画stroke-dashoffset。纯SVG绘制无素材
|
|
|
+- 字体:Inter + 数字Geist Mono
|
|
|
+
|
|
|
+
|
|
|
+#### 安静派
|
|
|
+
|
|
|
+**断言-证据 / Tufte信息设计** `安静·还原93%`
|
|
|
+- 参考:Michael Alley Assertion-Evidence(Penn State实证)、McKinsey/BCG action-title、Edward Tufte数据墨水比、Barbara Minto金字塔原理
|
|
|
+- 适配:学术/工程汇报、数据严谨型咨询页、政策研报、技术评审
|
|
|
+- 视觉DNA:配色=白/极浅灰底+黑正文+单一克制强调色(深蓝/砖红)。字体=整句话标题(非名词短语)，标题下独占一张图，文字标注嵌进图里。母版=①整句action-title②标题下单图证据③零bullet。标志=整句标题、单图证据、嵌入式标注、零chartjunk、高数据墨水比
|
|
|
+- HTML实现:整句标题靠排版层级；图表用纯CSS/内联SVG画极简折线散点(去网格线去图例，标注直接text定位在数据点旁)；零装饰。Tufte的克制正是HTML强项
|
|
|
+- 字体:Source Serif / Lora标题 + Inter正文(双字体阅读级)
|
|
|
+
|
|
|
+**瑞士机构极简 / Institutional Swiss Minimal** `安静·还原96%`
|
|
|
+- 参考:Sequoia官方10页pitch模板、Airbnb 2009种子轮deck、Müller-Brockmann网格、Massimo Vignelli
|
|
|
+- 适配:投资路演、标准商业提案、问题-解法叙事、品牌去装饰提案
|
|
|
+- 视觉DNA:配色=纯白底+黑灰正文+单一品牌强调色(Airbnb珊瑚红#FF5A3C/中性蓝)。字体=Helvetica系无衬线，标题中号粗体一句话，正文短句大间距。母版=①居中logo+slogan②顶部一句话标题带+下方3栏对仗(Problem/Solution三点)③TAM大数字分层④2×2竞品矩阵。标志=顶部标题带、三栏对仗、单色强调、2×2矩阵
|
|
|
+- HTML实现:Flexbox三栏对仗；2×2矩阵纯CSS Grid+border画；TAM分层用嵌套div或同心方块；一页一信息。几乎纯排版网格，HTML理想对象
|
|
|
+- 字体:Inter / Helvetica Now替代Helvetica；正文Inter
|
|
|
+
|
|
|
+**杂志编辑长文流 / Editorial Longform** `安静·还原95%`
|
|
|
+- 参考:Stripe Annual Letter($1.9T)、Amazon六页叙事备忘录、Benedict Evans『X eats the world』、Stripe Press
|
|
|
+- 适配:年度信/复盘叙事、深度思想长文、内部更新、研报型阅读物
|
|
|
+- 视觉DNA:配色=奶白/米白底(#FBFAF8)+深墨字+品牌色点睛(Stripe紫#635BFF)。字体=衬线或高品质无衬线，散文体段落+内联数据卡，超大display数字穿插。母版=①刊头大标题②多栏散文+内联指标卡③超大数字段落锚点。标志=出版物阅读节奏、内联数据卡、克制留白、散文体而非bullet
|
|
|
+- HTML实现:多栏column-count或Grid；内联数据卡float/inline-block嵌入正文；衬线正文max-width控制行宽65ch；超大数字穿插。纯排版，零素材
|
|
|
+- 字体:Newsreader / Source Serif正文 + Inter辅助；数字tabular
|
|
|
+
|
|
|
+**人文圆角卡片 / Humanist Rounded Cards (Khan式)** `安静·还原80%`
|
|
|
+- 参考:Khan Academy Wonder Blocks设计系统、Source Serif Pro衬线、森林绿品牌、友善人文主义
|
|
|
+- 适配:教育产品、亲和力课件、公益/非盈利deck、温暖品牌提案
|
|
|
+- 视觉DNA:配色=森林绿#14BF96/#0A5C4B+米白底+暖色辅助，柔和不刺眼。字体=Source Serif衬线标题(人文气)+无衬线正文。母版=①圆角卡片组件组②衬线标题+亲和正文③真实摄影位(降级为绿色系几何/圆角色块)。标志=森林绿、衬线标题、大圆角卡片、人文温暖、不完美亲和质感
|
|
|
+- HTML实现:大圆角border-radius卡片+柔和box-shadow；衬线标题font-family；暖米白底。真实师生摄影这一项无AI生图，降级为绿色系几何插画块/大圆角纯色占位+emoji人物，照片缺失还原度降约18%
|
|
|
+- 字体:Source Serif 4标题 + Nunito Sans / Inter正文(Nunito圆润呼应人文)
|
|
|
+
|
|
|
+**研报密集图表 / Dense Research Report (Meeker式)** `安静·还原92%`
|
|
|
+- 参考:Mary Meeker《Internet Trends》(BOND)、CB Insights《State of AI》、McKinsey Global Institute《Year in Charts》、FT/Bloomberg数据新闻
|
|
|
+- 适配:趋势研报、行业数据复盘、密集数据汇报、市场地图
|
|
|
+- 视觉DNA:配色=白底+品牌色(BOND/CB Insights亮蓝#0066FF)阶梯单色高亮其余灰化，几乎零留白。字体=结论式句子标题，每页1图密度，极小来源脚注。母版=①结论句标题+满页单图②logo网格market map③大数字KPI卡④密集多图网格+脚注。标志=结论句标题、零留白研报感、单色阶梯高亮、logo市场地图、来源脚注规范
|
|
|
+- HTML实现:密集图表全用纯CSS/内联SVG画(柱/折线/堆叠/散点)；logo market map用Grid+文字/SVG占位格；KPI卡CSS；脚注小字。极致信息密度正是HTML擅长，零素材
|
|
|
+- 字体:Inter + IBM Plex Sans + 数字tabular Geist Mono
|
|
|
+
|
|
|
+**纯文字宣言备忘录 / All-Text Manifesto (Netflix/Amazon式)** `安静·还原97%`
|
|
|
+- 参考:Netflix Culture Deck(2009，125页)、Amazon六页叙事备忘录(Bezos)、Tufte反PowerPoint主张、Matthew Carter阅读级排印
|
|
|
+- 适配:文化宣言、价值观宣讲、深度备忘录、反PPT的纯文档演示
|
|
|
+- 视觉DNA:配色=纯白或纯黑底+单一强调色(Netflix红#E50914)做唯一高亮，极致克制。字体=阅读级排印，一页一观点金句断言/纯散文零bullet零图。母版=①满版底+金句断言②口语化坦诚段落③制度名词高亮(Keeper Test)④六页散文+附录表。标志=纯文字一页一观点、零图零bullet、单色高亮金句、口语坦诚、silent-read文档感
|
|
|
+- HTML实现:纯排版：金句用大字clamp()左对齐层级；散文max-width控制行宽；唯一强调色span高亮关键短语；附录用极简table。零素材零图，纯文字是HTML最稳的还原
|
|
|
+- 字体:Newsreader / Source Serif(阅读级)或Inter(宣言式)；标题可Archivo超粗
|
|
|
|
|
|
----
|
|
|
-
|
|
|
-## 三、极简主义派（09-12）
|
|
|
-> 哲学：「删减到无法再删」
|
|
|
-
|
|
|
-### 09. Experimental Jetset - 概念极简
|
|
|
-**哲学**：一个想法=一个形式
|
|
|
-**核心特征**：
|
|
|
-- 单一视觉隐喻贯穿整个设计
|
|
|
-- 蓝/红/黄+黑白的蒙德里安色系
|
|
|
-- 字体即图形
|
|
|
-- 反商业的诚实设计
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Experimental Jetset conceptual minimalism:
|
|
|
-- Single visual metaphor for entire design
|
|
|
-- Primary colors only (red/blue/yellow) + black/white
|
|
|
-- Typography as main graphic element
|
|
|
-- Grid-based with deliberate rule-breaking
|
|
|
-- No photography, only type and geometry
|
|
|
-- Anti-commercial, honest aesthetic
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Whitney Museum identity
|
|
|
-**搜索关键词**：experimental jetset whitney responsive w
|
|
|
|
|
|
---
|
|
|
|
|
|
-### 10. Müller-Brockmann传承 - 瑞士网格纯粹主义
|
|
|
-**哲学**：客观性即美
|
|
|
-**核心特征**：
|
|
|
-- 数学精确的网格系统（8pt基线）
|
|
|
-- 绝对的左对齐或居中
|
|
|
-- 单色或双色方案
|
|
|
-- 功能主义至上
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Josef Müller-Brockmann Swiss modernism:
|
|
|
-- Mathematical grid system (8pt baseline)
|
|
|
-- Strict alignment (flush left or centered)
|
|
|
-- Two-color maximum (black + one accent)
|
|
|
-- Akzidenz-Grotesk or similar rationalist typeface
|
|
|
-- No decorative elements
|
|
|
-- Timeless, objective aesthetic
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：《Grid Systems in Graphic Design》
|
|
|
-**搜索关键词**：muller brockmann grid systems poster
|
|
|
-
|
|
|
----
|
|
|
+## ⚠️ AI 生图专用风格（仅在确认用户有生图能力时才推，default 不可选）
|
|
|
|
|
|
-### 11. Build - 当代极简品牌
|
|
|
-**哲学**：精致的简单比复杂更难
|
|
|
-**核心特征**：
|
|
|
-- 奢侈品级的留白（70%+）
|
|
|
-- 微妙的字重对比（200-600）
|
|
|
-- 单一强调色的战略使用
|
|
|
-- 呼吸感的节奏
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Build studio luxury minimalism:
|
|
|
-- Generous whitespace (70%+ of area)
|
|
|
-- Subtle typography weight shifts (200 to 600)
|
|
|
-- Single accent color used sparingly
|
|
|
-- High-end product photography aesthetic
|
|
|
-- Soft shadows and subtle gradients
|
|
|
-- Golden ratio proportions
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Build studio portfolio
|
|
|
-**搜索关键词**：build studio london branding
|
|
|
+下面这些风格的灵魂在**动态生成视觉 / 3D / 粒子 / 电影级光影 / 手绘插画**，纯 HTML/CSS 无生图下只能做出严重劣化的 mock，**从 default 推荐池剔除**。用户明确有生图能力（走 `huashu-gpt-image`）时才作为候选：
|
|
|
|
|
|
----
|
|
|
+| 风格 | 灵魂 | 为什么 HTML 做不了 |
|
|
|
+|------|------|------------------|
|
|
|
+| Active Theory（WebGL 粒子） | 3D 粒子系统/实时渲染 | 纯 CSS 无法 |
|
|
|
+| Field.io（生成艺术） | 算法生成图形 | 静态 SVG 只能做僵化简化版 |
|
|
|
+| Resn（插画交互） | 角色插画+游戏化 | 依赖手绘素材 |
|
|
|
+| Zach Lieberman（实时生成） | creative coding 笔触 | 依赖实时生成 |
|
|
|
+| Raven Kwok（分形参数） | 递归分形 | CSS 做不出复杂度 |
|
|
|
+| Ash Thorp（电影光影） | 电影级体积光/概念美术 | CSS 光影是劣化 |
|
|
|
+| Territory Studio（FUI 全息） | 科幻全息界面 | 依赖大量发光层叠素材 |
|
|
|
+| Neo Shen（水墨晕染） | 水墨有机晕染 | CSS 渐变≠水墨 |
|
|
|
+| Sagmeister & Walsh（色彩爆发） | 手作实物+实验排版 | 撞色骨架可做（已并入网页「Memphis/孟菲斯」与 PPT「单色撞色海报」），手作质感做不了 |
|
|
|
|
|
|
-### 12. Sagmeister & Walsh - 快乐极简
|
|
|
-**哲学**：美即功能的情感维度
|
|
|
-**核心特征**：
|
|
|
-- 意外的色彩爆发
|
|
|
-- 手工感与数字的融合
|
|
|
-- 正能量的视觉语言
|
|
|
-- 实验性但可读
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Sagmeister & Walsh joyful philosophy:
|
|
|
-- Unexpected color bursts on minimal base
|
|
|
-- Handmade elements (physical objects in digital)
|
|
|
-- Optimistic visual language
|
|
|
-- Experimental typography that remains legible
|
|
|
-- Human warmth through imperfection
|
|
|
-- Mix of analog and digital aesthetics
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：The Happy Show
|
|
|
-**搜索关键词**：sagmeister walsh happy show
|
|
|
+> 这些款不是「不好」，是「载体不对」——它们的原生载体是 AI 直出图，不是浏览器 DOM。
|
|
|
|
|
|
---
|
|
|
|
|
|
-## 四、实验先锋派（13-16）
|
|
|
-> 哲学：「打破规则即创造规则」
|
|
|
-
|
|
|
-### 13. Zach Lieberman - 代码诗学
|
|
|
-**哲学**：编程即绘画
|
|
|
-**核心特征**：
|
|
|
-- 手绘感的算法图形
|
|
|
-- 实时生成艺术
|
|
|
-- 黑白的纯粹表达
|
|
|
-- 工具本身的可见性
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Zach Lieberman code-as-art style:
|
|
|
-- Hand-drawn aesthetic generated by code
|
|
|
-- Black and white only, no color
|
|
|
-- Real-time generative patterns
|
|
|
-- Sketch-like line quality
|
|
|
-- Visible process/grid/construction lines
|
|
|
-- Poetic interpretation of algorithms
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：openFrameworks creative coding
|
|
|
-**搜索关键词**：zach lieberman openframeworks generative
|
|
|
+## 默认审美禁区（用户可按自己品牌 override）
|
|
|
|
|
|
----
|
|
|
-
|
|
|
-### 14. Raven Kwok - 参数化美学
|
|
|
-**哲学**：系统的美胜过个体的美
|
|
|
-**核心特征**：
|
|
|
-- 分形与递归图形
|
|
|
-- 黑白高对比
|
|
|
-- 建筑化的信息结构
|
|
|
-- 东方园林的算法演绎
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Raven Kwok parametric aesthetic:
|
|
|
-- Fractal patterns and recursive structures
|
|
|
-- High-contrast black and white
|
|
|
-- Architectural visualization of data
|
|
|
-- Chinese garden principles in algorithm form
|
|
|
-- Intricate detail that rewards zooming
|
|
|
-- Processing/Creative coding aesthetic
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Raven Kwok generative art exhibitions
|
|
|
-**搜索关键词**：raven kwok processing generative art
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 15. Ash Thorp - 赛博诗意
|
|
|
-**哲学**：未来不是冰冷的，是孤独的诗
|
|
|
-**核心特征**：
|
|
|
-- 电影级的光影
|
|
|
-- 赛博朋克的温暖版本（橙/青，非冷蓝）
|
|
|
-- 故事性的概念设计
|
|
|
-- 工业美学的精致化
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Ash Thorp cinematic concept art:
|
|
|
-- Film-grade lighting and atmospheric effects
|
|
|
-- Warm cyberpunk (orange/teal, NOT cold blue)
|
|
|
-- Industrial design meets luxury
|
|
|
-- Narrative concept art feel
|
|
|
-- Volumetric lighting and god rays
|
|
|
-- Blade Runner warmth over Tron coldness
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Ghost in the Shell concept art
|
|
|
-**搜索关键词**：ash thorp ghost shell concept art
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 16. Territory Studio - 屏幕界面虚构
|
|
|
-**哲学**：未来UI的今日想象
|
|
|
-**核心特征**：
|
|
|
-- 科幻电影中的屏幕设计（FUI）
|
|
|
-- 全息投影感
|
|
|
-- 多层叠加的数据可视化
|
|
|
-- 可信的未来感
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Territory Studio FUI (Fantasy User Interface):
|
|
|
-- Fantasy User Interface design
|
|
|
-- Holographic projection aesthetics
|
|
|
-- Orange/amber monochrome or cyan accents
|
|
|
-- Multiple overlapping data layers
|
|
|
-- Believable future technology
|
|
|
-- Technical readouts and data streams
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Blade Runner 2049 screen graphics
|
|
|
-**搜索关键词**：territory studio blade runner interface
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 五、东方哲学派（17-20）
|
|
|
-> 哲学：「留白即内容」
|
|
|
-
|
|
|
-### 17. Takram - 日式思辨设计
|
|
|
-**哲学**：技术是思考的媒介
|
|
|
-**核心特征**：
|
|
|
-- 概念原型的优雅
|
|
|
-- 柔和的科技感（圆角、柔和阴影）
|
|
|
-- 图表即艺术
|
|
|
-- 谦逊的精致
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Takram Japanese speculative design:
|
|
|
-- Elegant concept prototypes and diagrams
|
|
|
-- Soft tech aesthetic (rounded corners, gentle shadows)
|
|
|
-- Charts and diagrams as art pieces
|
|
|
-- Modest sophistication
|
|
|
-- Neutral natural colors (beige, soft gray, muted green)
|
|
|
-- Design as philosophical inquiry
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：NHK Fabricated City
|
|
|
-**搜索关键词**：takram nhk data visualization
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 18. Kenya Hara - 空的设计
|
|
|
-**哲学**：设计不是填充，是清空
|
|
|
-**核心特征**：
|
|
|
-- 极致的留白（80%+）
|
|
|
-- 纸张质感的数字化
|
|
|
-- 白色的层次（暖白、冷白、米白）
|
|
|
-- 触觉的视觉化
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Kenya Hara "emptiness" design:
|
|
|
-- Extreme whitespace (80%+)
|
|
|
-- Paper texture and tactility in digital form
|
|
|
-- Layers of white (warm white, cool white, off-white)
|
|
|
-- Minimal color (if any, very desaturated)
|
|
|
-- Design by subtraction not addition
|
|
|
-- Zen simplicity
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Muji art direction, 《Designing Design》
|
|
|
-**搜索关键词**：kenya hara designing design muji
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 19. Irma Boom - 书籍建筑师
|
|
|
-**哲学**：信息的物理诗学
|
|
|
-**核心特征**：
|
|
|
-- 非线性的信息架构
|
|
|
-- 边缘与边界的游戏
|
|
|
-- 意外的颜色组合（粉+红、橙+棕）
|
|
|
-- 手工艺的数字转译
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Irma Boom book architecture style:
|
|
|
-- Non-linear information structure
|
|
|
-- Play with edges, margins, boundaries
|
|
|
-- Unexpected color combos (pink+red, orange+brown)
|
|
|
-- Handcraft translated to digital
|
|
|
-- Dense information inviting exploration
|
|
|
-- Editorial design, unconventional grid
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：SHV Think Book (2136 pages)
|
|
|
-**搜索关键词**：irma boom shv think book
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### 20. Neo Shen - 东方光影诗
|
|
|
-**哲学**：技术需要人的温度
|
|
|
-**核心特征**：
|
|
|
-- 水墨晕染的数字化
|
|
|
-- 柔和的光晕效果
|
|
|
-- 诗意的留白
|
|
|
-- 情感化的色彩（深蓝、暖灰、柔金）
|
|
|
-
|
|
|
-**提示词DNA**：
|
|
|
-```
|
|
|
-Neo Shen poetic Chinese aesthetic:
|
|
|
-- Digital interpretation of ink wash painting
|
|
|
-- Soft glow and light diffusion effects
|
|
|
-- Poetic negative space
|
|
|
-- Emotional palette (deep blues, warm grays, soft gold)
|
|
|
-- Calligraphic influences in typography
|
|
|
-- Atmospheric depth
|
|
|
-```
|
|
|
-
|
|
|
-**代表作**：Neo Shen digital art series
|
|
|
-**搜索关键词**：neo shen digital ink wash art
|
|
|
+- ❌ **GitHub-dark 偷懒解**：均匀深蓝底（#0D1117）+ 通用青/紫霓虹 glow——只禁这一种烂大街组合，不是「暗色一律禁」
|
|
|
+- ✅ **不在禁区**：电影级戏剧光影、暖色赛博（Ash Thorp 橙/青）、运动诗学暗场叙事——有作者意图的暗色保留（本库「Linear 暗色发光」「黑底数字剧场」「CS50 糖果舞台」都是合法暗色）
|
|
|
+- ❌ 激进紫渐变万能公式、emoji 当图标、圆角卡片+左彩 border accent（除非品牌本身用）
|
|
|
+- ❌ 封面图加个人署名/水印
|
|
|
|
|
|
---
|
|
|
|
|
|
-## 提示词使用说明
|
|
|
-
|
|
|
-**组合公式**：`[风格提示词DNA] + [场景模板（见scene-templates.md）] + [具体内容]`
|
|
|
+## 有生图能力时的提示词心法（Mood, Not Layout）
|
|
|
|
|
|
-### 核心原则：描述情绪而非布局（Mood, Not Layout）
|
|
|
+> 仅当走 AI 生图路径时适用；HTML 路径直接按上面各风格的「HTML 实现」写代码。
|
|
|
|
|
|
-AI图像生成的关键：短提示词 > 长提示词。描述3句情绪和内容，比30行布局细节效果更好。
|
|
|
+短提示词 > 长提示词。描述情绪和内容，比堆 30 行布局细节有效。
|
|
|
|
|
|
| 杀死多样性的写法 | 激发创造力的写法 |
|
|
|
|----------------|----------------|
|
|
|
| 指定颜色比例（60%/25%/15%） | 描述情绪（"warm like Sunday morning"） |
|
|
|
-| 规定布局位置（"标题居中，图片右侧"） | 引用具体美学（"Pentagram editorial feel"） |
|
|
|
-| 限制角色姿势和表情 | 让AI自然诠释风格 |
|
|
|
-| 列出所有要包含的视觉元素 | 描述观众应该感受到什么 |
|
|
|
-
|
|
|
-### Good / Bad 示例
|
|
|
-
|
|
|
-**Bad — 过度约束（AI生成出来空且平）：**
|
|
|
-```
|
|
|
-Professional presentation slide. Dark background, light text.
|
|
|
-Title centered at top. Two columns below. Left column: bullet points.
|
|
|
-Right column: bar chart. Colors: navy 60%, white 30%, gold 10%.
|
|
|
-Font size: title 36pt, body 18pt. Margins: 40px all sides.
|
|
|
-```
|
|
|
-
|
|
|
-**Good — 情绪驱动（生成多样且有质感）：**
|
|
|
-```
|
|
|
-A data visualization that feels like a Bloomberg Businessweek
|
|
|
-editorial spread. The key number "28.5%" should dominate the
|
|
|
-composition like a headline. Warm cream tones with sharp black
|
|
|
-typography. The data tells a story of dramatic channel shift.
|
|
|
-```
|
|
|
-
|
|
|
-### 执行路径选择
|
|
|
-
|
|
|
-根据速查表的「最佳路径」列选择：
|
|
|
-- **AI生成**：有明确视觉元素的风格（06/07/12/13/14/15/16/20），用 Gemini/Midjourney 直出
|
|
|
-- **HTML渲染**：依赖精确排版的风格（01/03/04/10/11/17/18），代码控制数据和布局
|
|
|
-- **混合**：HTML做骨架布局 + AI生成配图/背景（02/05/08/09/19）
|
|
|
-
|
|
|
-### 质量控制
|
|
|
-
|
|
|
-1. ❌ 不要直接写 "in the style of Pentagram" → ✅ 用具体设计特征描述
|
|
|
-2. 文字在AI生成中常出错 → 生成后替换文字
|
|
|
-3. 比例易失真 → 明确指定 aspect ratio
|
|
|
-4. 先生成3-5个变体，选择最佳后细化
|
|
|
-
|
|
|
-**默认审美禁区**（用户可按自己品牌 override）：
|
|
|
-- ❌ 赛博霓虹/深蓝色底（#0D1117）
|
|
|
-- ❌ 封面图加个人署名/水印
|
|
|
+| 规定布局位置 | 引用具体美学（"Pentagram editorial feel"） |
|
|
|
+| 列出所有视觉元素 | 描述观众应该感受到什么 |
|
|
|
+
|
|
|
+完整 AI 生图方法论 → `huashu-gpt-image` skill。
|
|
|
|
|
|
---
|
|
|
|
|
|
-**版本**：v2.1
|
|
|
-**更新日期**：2026-02-13
|
|
|
-**适用场景**：网页/PPT/PDF/信息图/封面/配图/App等所有视觉设计
|
|
|
-**与 image-to-slides 联动**：PPT场景可直接引用本文件风格，通过 image-to-slides skill 执行生成
|
|
|
+**版本**：v3.0（2026-06 全面重构为 HTML 原生 40 种库）
|
|
|
+**适用**：网页/PPT/PDF/信息图/封面/App 等所有视觉设计的 default HTML 路径
|
alchain