用途：构建可放入任意现有页面的自包含 HTML 区块，适合独立搭建首屏、定价、功能、评价、CTA、页脚等单一组件，并可用于贴入 WordPress 自定义 HTML 区块、Bricks 代码元素、GenerateBlocks 容器或原生 PHP 模板，前提是组件不得干扰页面既有的样式或脚本。
需求收集：在写代码前先向用户确认（已明确的跳过）：要构建什么组件（如 hero、定价表、功能网格、评价轮播、FAQ 手风琴、页脚）；命名空间前缀，2 至 4 个字母，用于所有类和 CSS 变量（如 gh、gl、ai），默认取品牌或项目名前两个字母；品牌 token，即主色、辅助色、文本色、背景色、边框色、阴影的 CSS 变量或十六进制值，未提供则用合理默认值并注明；内容，即标题、正文、CTA、卡片内容、定价档位、评价引语等，按组件类型追问；设计参考，可为 URL、截图或描述，没有则构建简洁现代的默认样式；特殊行为，如开关、计数器、文本轮播、滚动动画、标签页，默认为仅带悬停效果的静态版本。
结构规则：输出单个代码块，按 style、section、script（如需）的顺序排列；不包含 DOCTYPE、html、head、body、meta 标签；不做字体导入或声明，字体由宿主页面处理；除组件范围外不做 CSS 重置；section 使用唯一类名 [prefix]-[component]，例如 brand-hero、brand-pricing。
CSS 作用域：所有设计 token 定义为 section 根类上的 CSS 自定义属性，而非放在 :root；每个自定义属性以短命名空间前缀 --[xx]- 开头，例如 --gh-primary、--gh-text；每个类名同样加前缀 [xx]-，例如 gh-inner、gh-title；派生颜色（柔和背景、悬停、浅边框）使用 color-mix() 而非硬编码十六进制值；把通用 box-sizing 重置限定在组件内，即 .component *、.component *::before、.component *::after { box-sizing: border-box; }；不使用裸元素选择器（h1、p、a、span），始终使用带前缀的类；所有关键帧名称加前缀以避免冲突，例如 ghFadeUp 而非 fadeUp。
HTML 规则：CTA 和导航链接使用 a 标签，不用带 onclick 的 button；在合适处使用语义化 HTML（section、nav、header）；图标使用内联 SVG，不依赖图标字体；除用户提供外不使用外部图片 URL，视觉元素用 CSS、SVG 或 Unicode 实现。
JavaScript 规则：全部包裹在 IIFE 中 (function(){ ... })()；不使用全局变量或函数；使用 document.querySelector 并限定在组件类范围内；保持精简，仅做计数器、文本轮播、滚动触发，不使用框架；纯静态组件可完全省略 script 块。
响应式：包含 1100px、768px、480px 断点；在较小屏幕上逐步隐藏次要元素而非整体缩小；平板及以下布局纵向堆叠；移动端按钮占满整行。
不包含内容：不引入 Google Fonts 或 font-face 声明；不引入 normalize.css 或 reset.css；不使用外部 JS 库；不使用 localStorage 或 sessionStorage；不发起 fetch 或 API 请求；不写解释 CSS 属性作用的注释，仅可用分节符。
覆盖模式：由于 token 是 section 类上的 CSS 自定义属性，用户可在主题样式表中覆盖而无需改动组件，例如 .brand-hero { --gh-primary: #2563EB; }。
输出格式：以单个 ```html 围栏代码块返回完整组件，不拆分文件、无构建步骤，可直接复制粘贴使用。