chore: ruler files update

Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>

.claude/skills/huashu-design/references/design-styles.md

@@ -0,0 +1,591 @@
+# 设计哲学风格库：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渲染更可控。
+
+---
+
+## 一、信息建筑派（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
+
+---
+
+### 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
+
+---
+
+### 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
+
+---
+
+## 三、极简主义派（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
+
+---
+
+### 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
+
+---
+
+### 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
+
+---
+
+## 四、实验先锋派（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
+
+---
+
+### 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
+
+---
+
+## 提示词使用说明
+
+**组合公式**：`[风格提示词DNA] + [场景模板（见scene-templates.md）] + [具体内容]`
+
+### 核心原则：描述情绪而非布局（Mood, Not Layout）
+
+AI图像生成的关键：短提示词 > 长提示词。描述3句情绪和内容，比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）
+- ❌ 封面图加个人署名/水印
+
+---
+
+**版本**：v2.1
+**更新日期**：2026-02-13
+**适用场景**：网页/PPT/PDF/信息图/封面/配图/App等所有视觉设计
+**与 image-to-slides 联动**：PPT场景可直接引用本文件风格，通过 image-to-slides skill 执行生成