chameleon-adapt

变色龙适应

变色龙不会强迫环境改变。它观察光线，了解自己栖身何处。它勾勒形态，构建结构。它变换色调，与周围的森林相映。它增添纹理——粗糙的树皮、光滑的叶片、流转的光线。最后，它完全适应环境，与周遭融为一体。最终效果自然协调，仿佛它本就该在那里。

何时启用

• 用户要求“设计这个页面”或“让它看起来像 Grove”
• 用户说“增加一些视觉润色”或“为它添加主题”
• 用户调用 /chameleon-adapt，或提到变色龙／适应
• 为 Grove 网站创建或增强页面
• 实现季节性装饰或天气效果
• 构建玻璃拟态容器以提升可读性
• 添加自然元素（树木、鸟类、粒子）
• 使用调色板系统

---

适应过程

READ → SKETCH → COLOR → TEXTURE → ADAPT
  ↓       ↲        ↓         ↲         ↓
Understand Create   Apply    Add      Final
Light    Structure Palette  Effects  Form

---

参考资料路由表

阶段	参考资料	加载时机
READ	—	无需参考资料（评估上下文）
SKETCH	references/layout-patterns.md	设计页面结构时
COLOR	references/color-palette.md	应用季节性颜色时
COLOR	references/groveterm-system.md	编写面向用户的文本时
TEXTURE	references/glass-components.md	添加玻璃拟态效果时
TEXTURE	references/nature-components.md	添加自然装饰时

---

阶段 1：READ

变色龙观察光线，了解自己栖身何处……

在选择任何颜色之前，先了解环境。评估以下三项：

现在是什么季节？

import { season } from '$lib/stores/season';

const isSpring = $derived($season === 'spring');
const isAutumn = $derived($season === 'autumn');
const isWinter = $derived($season === 'winter');
// Summer is the default (no flag needed)

情绪基调是什么？

基调	季节	氛围
希望、焕新	春季	樱花、新生
成长、温暖	夏季	繁茂的枝叶、活力
丰收、沉思	秋季	飘落的树叶、温暖的色彩
休憩、静谧	冬季	雪、霜、常绿植物
梦境、遥远的未来	午夜	紫色光芒、萤火虫

季节氛围摘要：

季节	主色	氛围
春季	springFoliage、cherryBlossomsPeak、wildflowers	焕新、希望
夏季	greens、cherryBlossoms	成长、温暖
秋季	autumn、autumnReds	丰收、沉思
冬季	winter（霜、雪、覆霜的松树）	休憩、静谧

页面的用途是什么？

• 故事／叙事页面——营造完整的季节氛围
• 数据密集型界面——尽量减少装饰，聚焦可读性
• 落地页／主视觉区域——天气效果、随机生成的森林
• 表单／管理界面——简洁的玻璃表面，不添加干扰元素

**输出：**选择季节并确定装饰程度（最少／适中／完整）

---

阶段 2：SKETCH

变色龙勾勒出自己的形态，构建结构……

使用玻璃拟态层搭建页面骨架。确定分层公式，放置玻璃容器，并连接粘性导航模式。

关键决策：每个容器适合使用哪种玻璃变体？内容在 z-index 堆栈中的什么位置？响应式布局如何划分？

参考： 加载 references/layout-patterns.md，了解分层公式、粘性导航模式、页面分区模板、响应式网格模式、间距系统和无障碍布局规则。

玻璃效果快速入门：

import { Glass, GlassCard, GlassButton } from '@lattice/ui/ui';

<Glass variant="tint" class="p-6 rounded-xl">
	<p>Readable text over busy backgrounds</p>
</Glass>

参考： 加载 references/glass-components.md，了解所有玻璃变体、属性、CSS 工具类和组合模式。

输出： 页面结构中已放置玻璃容器和 z-index 层

---

阶段 3：COLOR

变色龙改变色调，与周围的森林融为一体……

应用来自 @autumnsgrove/lattice/ui/nature 的季节性色彩调色板。根据 READ 中确定的情绪基调选择调色板。使用季节辅助函数（getSeasonalGreens、getCherryColors），确保场景中的色彩层次一致。

强调色： 对任何使用强调色的表面（按钮、链接、高亮、焦点环），请使用 var(--grove-accent-*) 令牌，而不是硬编码绿色十六进制值。用户的强调色可能不是绿色。纯色请使用 var(--grove-accent)，悬停状态请使用 var(--grove-accent-dark)，不透明度色调请使用 var(--grove-accent-N)。提交前钩子会强制检查这一点。品牌绿（自然主题 SVG、徽标）可使用 // accent-ok。

还要通过 GroveTerm 组件应用 Grove 术语，不要在面向用户的文本中硬编码 Grove 专用词语。

参考： 加载 references/color-palette.md，了解所有包含十六进制值的颜色令牌、季节性调色板（Spring/Summer/Autumn/Winter/Midnight）、强调色调色板、辅助函数和背景渐变模式。

参考： 加载 references/groveterm-system.md，了解 GroveTerm 组件套件、[[term|standard]] 语法、常用术语词汇和无障碍规则。

输出： 已应用配色方案，并正确导入相关内容及季节变体；面向用户的文本使用 GroveTerm 组件

---

阶段 4：TEXTURE

变色龙增添层次——粗糙的树皮、光滑的树叶、流转的光线……

叠加自然主题组件，营造氛围。生成随机森林（树木之间不会重叠，最小间隔为 8%）。添加适合季节的天气效果。放置季节性鸟类，为场景增添生机。接入 Lucide 图标（绝不使用表情符号）。遵循响应式密度表。

参考： 加载 references/nature-components.md，了解完整的组件目录、随机森林生成算法、天气效果代码片段、季节性鸟类放置方式、图标注册表模式，以及移动设备上的粒子数量调整。

输出： 已叠加自然主题组件，并设置正确的 z-index 和响应式密度

---

阶段 5：适应

变色龙与周围环境融为一体——完成全面适应……

进行最后润色并确保无障碍性。减少移动设备上的粒子数量。添加用于导航的移动端溢出菜单。确认 prefers-reduced-motion 包裹所有粒子层。确认所有触控目标至少为 44x44px。检查深色模式下的玻璃效果变体。运行 CI。

验证（必须）：

pnpm install
gw ci --affected --fail-fast --diagnose

如果 CI 失败：阅读诊断信息、修复问题并重新运行。变色龙不会在变色后留下损坏的代码。

组件审查关卡（构建或修改组件时必须执行）：

在进行页面级验证之前，变色龙会使用 Showroom 单独审查它构建或修改的每个组件。这样可以发现完整页面截图中容易遗漏的设计令牌违规、间距偏离网格、缺少焦点样式和硬编码颜色。

# For each component built or modified, run a Showroom audit
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte

# Scaffold a fixture for new components (generates .showroom.ts with scenarios)
uv run --project tools/glimpse glimpse showroom \
  libs/engine/src/lib/ui/components/[path-to-component].svelte --scaffold

**这是必经关卡。**变色龙接触的每个组件都必须通过 Showroom 审查，然后才能进入页面级 Glimpse 验证。继续之前，请修复所有合规性问题。

视觉验证（UI 工作必须执行）：

变色龙不只负责构建——它还会_查看_自己的成果。使用 Glimpse 截取结果并反复调整，直到设计符合预期：

# Prerequisite: seed the database if not already done
uv run --project tools/glimpse glimpse seed --yes

# Capture the page you just built (--auto starts the dev server)
# Local routing uses ?subdomain= for tenant isolation
uv run --project tools/glimpse glimpse capture \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --season autumn --theme dark --logs --auto

# Verify all season × theme combos render correctly
uv run --project tools/glimpse glimpse matrix \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --seasons spring,summer,autumn,winter --themes light,dark --auto

# Interactive check: click around, verify flows work visually
uv run --project tools/glimpse glimpse browse \
  "http://localhost:5173/[your-page]?subdomain=midnight-bloom" \
  --do "click navigation links, scroll down" --screenshot-each --logs --auto

# Optional: verify with random data too (proves UI handles any content)
uv run --project tools/glimpse glimpse seed --profile fake --fake-posts 5 --yes
# Then capture with the randomly generated subdomain from seed output

**迭代流程：**截图 → 检查截图 → 找出问题 → 修复 → 再次截图。重复此流程，直到适应完成。不要发布自己没看过的 UI。

最终检查清单（CI 通过且完成视觉验证后）：

• CI：gw ci --affected 顺利通过
• Glimpse：所有目标季节下的页面截图均显示正确
• Glimpse：已通过视觉检查确认深色模式和浅色模式
• Glimpse：--logs 输出中没有控制台错误
• 在繁杂背景上使用玻璃效果提升文本可读性？
• 使用 Lucide 图标，不用表情符号？
• 导航项是否有移动端溢出菜单？
• 装饰元素是否遵循 prefers-reduced-motion？
• 触控目标是否至少为 44x44px？
• 季节性色彩是否符合页面的情感基调？
• 树木是否经过随机排列，且间距适当（最小间距为 8%）？
• 是否支持深色模式并采用合适的玻璃效果变体？
• 面向用户的文本是否遵循 Grove 语气？
• Grove 术语是否使用 GroveTerm 组件（而非硬编码）？
• 数据驱动的内容字符串是否使用 [[term]] 语法？

**输出：**完全适应、无障碍、响应式且可投入生产的 UI——已完成视觉验证

---

变色龙规则

意图

每一种颜色的选择都应服务于内容。装饰应提升可读性，而非妨碍阅读。

克制

不是每个页面都需要森林。数据密集型界面应采用简洁的玻璃表面，不添加干扰元素。

真实

按预期使用季节系统。春天不只是“浅色”——它象征着新生与希望。

沟通

使用适应相关的比喻：

• “读取光线……”（理解上下文）
• “勾勒形态……”（构建结构）
• “变换色调……”（应用颜色）
• “添加纹理……”（叠加组件）
• “全面适应……”（最后润色）

---

使用场景

模式	适用场景
玻璃态	背景上的文本、导航栏、卡片、模态框
随机森林	故事页面、关于页面、视觉区块
季节主题	路线图、时间线、情感叙事
午夜绽放	未来功能、梦想、神秘内容
天气粒子	Hero 区块、季节之间的过渡
鸟类	为森林场景增添生机、作为季节指示标记

不适用场景

模式	避免使用的场景
繁重装饰	数据密集型页面、管理界面、表单
粒子效果	对性能要求很高的页面、存在无障碍顾虑的场景
季节性色彩	需要保持色彩一致性的品牌关键场景
多层玻璃效果	可能导致模糊效果的性能问题
随机化	需要在不同会话间保持内容一致的场景
复杂森林	移动优先页面、简单的信息展示内容

---

示例调整

用户：“让这个关于页面带有 Grove 的感觉”

变色龙流程：

1. 阅读 — “页面讲述团队的历程。情感基调：沉思。季节：秋季（丰收）。装饰级别：完整。”

2. 绘制草图 — “加载 references/layout-patterns.md。创建玻璃卡片容器，使用 glass-surface 的粘性导航，并应用分层公式。”

3. 配色 — “加载 references/color-palette.md。导入秋季调色板（铁锈色、余烬色、琥珀色、金色）、暖色渐变，以及用作强调色的 autumnReds。加载 references/groveterm-system.md，用于面向用户的文本。”

4. 添加纹理 — “加载 references/nature-components.md 和 references/glass-components.md。添加随机分布的白杨／桦树、FallingLeavesLayer、秋季鸟类（红雀）和 Lucide 图标。”

5. 调整 — “调整响应式密度，支持减少动态效果，使用 GroveTerm 显示 ‘Welcome, Wanderer’ 问候语，设置 44px 触控目标，并验证深色模式。运行 gw ci --affected。”

---

快速决策指南

场景	操作
故事／叙事页面	营造完整的季节氛围，添加天气效果
数据密集型界面	尽量减少装饰，注重玻璃效果的可读性
落地页／主视觉区	随机分布的森林、粒子、季节性鸟类
表单／管理界面	简洁的玻璃表面，不添加分散注意力的自然元素
移动优先页面	减少树木数量，简化效果
无障碍顾虑	遵循 prefers-reduced-motion 设置，保留玻璃效果以确保可读性

---

与其他技能集成

• /gathering-ui — 将变色龙与 deer-sense 搭配，一次性打造无障碍 UI
• /deer-sense — 调整后进行无障碍审查
• /grove-ui-design — 更广泛的 UI 设计模式与组件选择
• /beaver-build — 调整后编写测试，覆盖交互式 UI

---

森林欢迎那些有意适应的人。