From 1217b363ca49149a4d544cb37238b95efa425ee9 Mon Sep 17 00:00:00 2001
From: wangkeyu-u <189725962+wangkeyu-u@users.noreply.github.com>
Date: Thu, 8 Oct 2026 00:24:04 +0800
Subject: [PATCH] fix: safely embed gallery JSON in HTML scripts

---
 .github/workflows/ci.yml |  1 +
 README.md                |  3 ++
 docs/maintenance.md      |  2 ++
 docs/validation.md       |  2 ++
 package.json             |  3 +-
 preview-gallery.html     |  2 +-
 scripts/gen-gallery.js   | 30 +++++++++++------
 tests/embedded-data.js   | 73 ++++++++++++++++++++++++++++++++++++++++
 8 files changed, 104 insertions(+), 12 deletions(-)
 create mode 100644 tests/embedded-data.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index da2d4b3..a37b971 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,5 +20,6 @@ jobs:
       - run: npx playwright install --with-deps chromium
       - run: npm run build
       - run: git diff --exit-code -- preview-gallery.html
+      - run: npm run test:embedded-data
       - run: npm test
       - run: npm run test:copy
diff --git a/README.md b/README.md
index a2ac940..842913c 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ Node.js 22+。从仓库根目录执行：
 npm ci
 npm run build
 npx playwright install chromium
+npm run test:embedded-data
 npm test
 npm run test:copy
 ```
@@ -35,6 +36,8 @@ npm run test:copy
 
 功能检查覆盖卡片、图片、筛选、选择、持久化和复制。测试截图写入被忽略的 `.artifacts/`。它不评估提示词生成页面与原网站的视觉或动画一致程度。
 
+`npm run test:embedded-data` 用 Chromium 解析真实模板生成的临时页面，检查提示词中的 `</script>`、HTML 注释、替换符号和 Unicode 分隔符能完整恢复为数据，且附加脚本不会执行。临时页面在测试结束后删除。
+
 ## 维护与记录
 
 - [维护工具](docs/maintenance.md)：各脚本的输入、输出和运行范围。
diff --git a/docs/maintenance.md b/docs/maintenance.md
index b9a6429..bef4ea8 100644
--- a/docs/maintenance.md
+++ b/docs/maintenance.md
@@ -2,6 +2,8 @@
 
 所有命令从仓库根目录运行。`npm run build` 是日常构建入口；不会重抓页面或更改条目。
 
+画廊构建器在嵌入 JSON 时转义 `<` 和 Unicode 行/段分隔符，并用回调填入模板占位符。提示词中的脚本结束标签、HTML 注释与 `$&` 等替换符号因此保留为普通数据；浏览器读取后的内容与原 JSON 一致。维护模板或构建器后运行 `npm run test:embedded-data`：真实 Chromium 回归使用临时数据与页面，不访问条目网站，也不修改 `preview-data.json`。
+
 | 工具 | 输入 | 输出/影响 |
 | --- | --- | --- |
 | `scripts/gen-gallery.js` | 模板、preview-data.json | preview-gallery.html |
diff --git a/docs/validation.md b/docs/validation.md
index 8ed75b2..96ce808 100644
--- a/docs/validation.md
+++ b/docs/validation.md
@@ -4,6 +4,8 @@
 
 `npm test` 检查本地画廊的卡片数量、图片加载、筛选、选择、localStorage、复制和控制台错误。`npm run test:copy` 检查单卡复制入口。这些检查不测量第三方网站或 AI 重建的动画质量。
 
+`npm run test:embedded-data` 检查浏览器实际解析嵌入数据的行为：普通中文与转义字符、脚本结束标签（含大小写变化）、HTML 注释、`$&` 等替换符号和 Unicode 行/段分隔符。要求完整数据恢复、画廊初始化完成、只保留模板原有脚本且提示词内附加脚本没有执行。该回归只覆盖 JSON 嵌入边界，不代表所有卡片 HTML 渲染输入都完成了安全审查。
+
 ## 历史复现记录
 
 旧 README 报告 204 项进入评估、194 项标为复现通过、其中 191 项标为动画还原。`preview-data.json` 保留原有状态、失败记录、备注和提示词；本次清理没有重新判定这些状态。194/204 约为 95.1%，旧文档括号中的 100% 是错误表述。
diff --git a/package.json b/package.json
index 6e70222..7905ac5 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "build": "node scripts/gen-gallery.js",
     "test": "node tests/functional.js",
-    "test:copy": "node tests/smoke-copy.js"
+    "test:copy": "node tests/smoke-copy.js",
+    "test:embedded-data": "node --test tests/embedded-data.js"
   }
 }
diff --git a/preview-gallery.html b/preview-gallery.html
index f93b874..bbac21a 100644
--- a/preview-gallery.html
+++ b/preview-gallery.html
@@ -163,7 +163,7 @@ <h1 class="mast">UI <em>Gallery</em></h1>
 <div class="bar" id="bar"><span class="cnt">已选 <b id="selN">0</b></span><button id="copySel">复制已选</button><button class="ghost" id="onlySel">仅看已选</button><button class="ghost" id="clearSel">清空</button></div>
 <button class="totop" id="totop" aria-label="回到顶部" title="回到顶部">↑</button>
 <script>
-const ITEMS = [{"id":"antd","name":"Ant Design","fw":["React"],"theme":"企业级 / 数据密集","vendor":"蚂蚁集团 Ant Group","link":"https://ant.design","kind":"item","img":"previews/antd.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/ant-design/ant-design","desc":"最成熟的企业级 React 组件库，组件最全、中后台首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ant Design (https://ant.design) homepage above-the-fold section at 1280px width. \n\nGlobal style: clean, modern, white background (#ffffff), dark text near black (#000000 at 0.88 opacity), primary accent blue #1677ff, secondary grays (#d9d9d9 borders, #f5f5f5 subtle backgrounds). System Chinese font stack: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, PingFang SC, Microsoft YaHei, sans-serif.\n\nTop navigation bar (height ~64px, white background, subtle bottom border, horizontal padding ~32px, flex justify-between align-center):\n- Left: brand logo — a small geometric diamond-shaped icon made of two overlapping blue/cyan/triangular shapes pointing right, next to the text \"Ant Design\" in bold black.\n- Center-left: a search input with rounded border, placeholder text \"输入关键字搜索...\", light gray border, small search icon on the left.\n- Right: nav links with Chinese labels separated by space: \"设计\" \"研发\" \"组件\" \"博客\" \"资源\" \"国内镜像\". After the links, show a tiny circular badge with the initials \"中\" (white text on dark blue/purple) and a small colored version pill \"6.5.0\". Then a row of small mono icon buttons (language, theme, GitHub, etc.) in neutral gray.\n\nHero section (centered, white background, large top padding ~70px, padding-bottom ~50px):\n- Huge centered headline: \"Ant Design\" in very bold black sans-serif (~64px).\n- Subcopy below headline: \"AI友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。\" in medium gray, ~18px, max-width ~720px, centered.\n- Two centered buttons below subcopy (gap ~16px):\n  - Primary: \"开始使用\" with blue background #1677ff, white text, rounded pill border-radius ~100px, padding ~10px 24px.\n  - Secondary: \"设计语言\" with white background, thin gray border, dark text, rounded border-radius ~6px, same padding.\n\nNews cards row (three cards in a horizontal flex row, gap ~24px, centered, max-width ~1160px, padding 24px 32px):\n- Each card is white with a very light gray border, border-radius ~8px, padding ~24px, flex 1, equal height.\n- Card 1 title: \"Ant Design Pro V6 发布\" with a red \"HOT\" badge on the right. Body: \"脱胎换骨的全新版本！全新技术栈加持，React 19 + antd 6 + utoo，构建速度飞跃 42%，AI 助手开箱即用，开发体验全面进化。\"\n- Card 2 title: \"Ant Design CLI 发布\". Body: \"开发者的新伙伴。终端里随时召唤 Ant Design，查 API、做迁移，官方 MCP 服务，离线也能用\" Then date \"2026.05.08\".\n- Card 3 title: \"Ant Design 6.0 发布！\". Body: \"新一代 Ant Design 正式发布！极致灵活定制主题，拥抱 React 新生态。为 AI 时代的应用开发提供更坚实的基础与更卓越的体验。\" Then date \"2025.11.22\".\n\nSponsors strip (light gray background, full width, padding ~24px):\n- Left label \"SPONSORS\" in small light gray uppercase.\n- Right: sponsor logos/names inline: small \"Yh\" icon with \"YouMind\", a blue circle with \"TRACTIAN\", a pink/purple robot icon with \"LobeHub\", a red/orange icon with \"CodeRabbit\".\n\nThe whole page should feel like a polished Chinese enterprise UI library landing page, simple and flat with minimal shadow.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.acss-1v3xej5` → transition: color 0.3s ease\n- `div.dumi-default-search-bar` → transition: background 0.3s ease\n- `input.dumi-default-search-bar-input` → transition: all 0.3s ease\n- `ul.ant-menu.ant-menu-root` → transition: width 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `li.ant-menu-item.ant-menu-item-only-child` → transition: border-color, background-color 0.3s, 0.3s ease, ease 0s, 0s\n- `img.acss-1jyth9` → transition: transform, opacity 0.1s, 0.3s ease, ease 0s, 0s\n- `button.ant-btn.css-ry7cab` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `div.btn-inner` → transition: all 0.2s ease\n- `div` → transition: all 5s ease-in-out\n- `a.acss-10ocqpj` → transition: background-color 0.1s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `:where(.css-ry7cab) a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.dumi-default-search-bar-input`:\n  **focus:** background-color: rgb(255, 255, 255); border-color: #1677ff80; box-shadow: rgba(22, 119, 255, 0.1) 0px 0px 0px 3px; border-top-color: rgba(22, 119, 255, 0.5); border-right-color: rgba(22, 119, 255, 0.5); border-bottom-color: rgba(22, 119, 255, 0.5); border-left-color: rgba(22, 119, 255, 0.5); background: #ffffff\n- `a:where(.css-ry7cab)`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.acss-aekbnf`:\n  **hover:** transform: scale(1.1)\n  **focus:** transform: scale(1.1)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes css-ry7cab-antBorderBeamMove  {\n  0%  {\n  offset-distance: 0%;\n  } 100%  {\n  offset-distance: 100%;\n  }\n}\n@keyframes css-ry7cab-antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideDownIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideDownOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antMoveUpIn  {\n  0%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antMoveUpOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antMoveDownIn  {\n  0%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antMoveDownOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideLeftIn  {\n  0%  {\n  transform: scaleX(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideRightIn  {\n  0%  {\n  transform: scaleX(0.8);\n  transform-origin: 100% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideLeftOut  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleX(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideRightOut  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleX(0.8);\n  transform-origin: 100% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"主 agent 手动依据 hifi 提示词重建: 静态首屏(导航/hero/新闻卡/赞助条)高度一致, 真实 #1677ff 与文案逐字使用; 动画含真实 @keyframes(antMoveUpIn/antFadeIn 等)与 hover 过渡(color .3s ease / all .2s cubic-bezier), 入场淡入上移 + 卡片 hover 上浮已实现。WebGL hero 背景以 CSS 渐变近似(提示词允许)。"},{"id":"mui","name":"Material UI (MUI)","fw":["React"],"theme":"Material Design 3","vendor":"MUI / Google 规范","link":"https://mui.com","kind":"item","img":"previews/mui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/mui/material-ui","desc":"Google Material Design 规范的标杆实现，高度可定制、暗黑模式一流。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the MUI (https://mui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background (#ffffff), dark near-black text (#1a1e23), primary blue #0073e6 (link blue) and banner blue #006ce5. System sans-serif font stack.\n\nTop announcement banner (full width, blue background #006ce5, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost →\"\n- The arrow should be a small right arrow.\n\nTop navigation bar (white background, height ~64px, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: MUI logo — a stylized blue \"M\" icon made of two angled strokes (like an abstract letter M), followed by nav links: \"Products\" \"Docs\" \"Pricing\" \"About us\" \"Blog\" in dark text, small font.\n- Right: search bar with gray border, placeholder \"Search...\", and a small \"⌘K\" keyboard hint; then a GitHub icon and a moon/theme icon.\n\nHero section (two-column layout, white background, padding ~60px 32px, max-width ~1200px, gap ~40px):\n- Left column (~45%):\n  - Headline: first line \"Move faster\" in bold blue (#0073e6), second/third lines \"with intuitive\" and \"React UI tools\" in very bold black, stacked.\n  - Subcopy: \"MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.\" in gray, ~15px, line-height 1.6.\n  - Button: \"Discover the Core libraries\" with a right-pointing arrow, blue background #0073e6, white text, rounded pill border-radius ~20px, padding ~10px 20px.\n- Right column (~55%):\n  - A large UI component showcase floating in a light gray (#f6f7f8) or white area with subtle shadows. Include:\n    - A prominent blue card at top-left with white text: icon/clock \"March 25th\", a code \"</>\" line, \"Customize every button and chip instance primary color\", a small circular avatar with \"Assigned to Lucas Smith\", and a thin progress bar at 60%.\n    - To the right of/above the blue card, a small numbered checklist: \"1 Install one of our products to get your next app started successfully:\" with bullet items \"Material UI\", \"MUI Base\", \"Joy UI\".\n    - Below, a row of colored tags: \"MUI\" (blue), \"React\" (yellow), \"CSS\" (green), \"TypeScript\" (pink), \"JavaScript\" (blue).\n    - A calendar widget showing \"July 2026\" with days grid, selected day 13 circled, navigation arrows.\n    - A temperature range slider showing 25°C, 50°C, 20°C, 50°C with a blue knob.\n    - A small dialog at bottom-right: \"Cookie preferences\" with text \"We use cookies to understand site usage and improve our content. This includes third-party analytics.\" and two buttons \"Allow analytics\" (blue) and \"Essential only\" (white).\n\nThe page should look like a modern developer-centric UI library landing page with a split hero + component demo.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.MuiPaper-root.MuiPaper-outlined` → transition: all 0.5s ease\n- `svg` → transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.MuiButtonBase-root.MuiIconButton-root` → transition: all 0.1s ease-in\n- `header.css-z9fwg4` → transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.css-1j49n3m` → transition: all 0.15s ease\n- `div.MuiContainer-root.MuiContainer-maxWidthLg` → transition: all 0.3s ease\n- `a.MuiButtonBase-root.MuiButton-root` → transition: all 0.12s ease-in\n- `span.MuiButton-icon.MuiButton-endIcon` → transition: all 0.2s ease\n- `div.MuiBox-root.css-1imkh24` → transition: max-height 0.3s ease\n- `div.MuiPaper-root.MuiPaper-elevation` → transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.MuiLinearProgress-bar.MuiLinearProgress-bar1` → transition: transform 0.4s linear\n- `div.MuiChip-root.MuiChip-filled` → transition: background-color, box-shadow 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `svg` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.MuiPickersArrowSwitcher-root.css-gvoll6` → transition: opacity 0.225s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-14uhdw1`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1gsvth3`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-bsgogs`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-17bblal`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-17ooklt`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1e6ce01`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1j49n3m`:\n  **hover:** background: hsla(215, 15%, 92%, 0.5); background-color: rgba(232, 234, 238, 0.5)\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-d9ymps`:\n  **hover:** box-shadow: rgba(223, 226, 231, 0.5) 0px 1px 2px 0px\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1xyewq8`:\n  **hover:** box-shadow: rgba(223, 226, 231, 0.5) 0px 1px 2px 0px\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1gp0uct`:\n  **active:** box-shadow: rgba(0, 59, 117, 0.7) 0px 1px 0px 1px inset\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-r8v66l`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1mdrglg`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1mb4tbx`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-15d84yc`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-y826nw`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes in-right  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes mui-auto-fill  {\n  from {\n  -webkit-animation-name:mui-auto-fill;\n  animation-name:mui-auto-fill;\n  }\n}\n@keyframes mui-auto-fill-cancel  {\n  from {\n  -webkit-animation-name:mui-auto-fill-cancel;\n  animation-name:mui-auto-fill-cancel;\n  }\n}\n@keyframes fade-in  {\n  0% {\n  opacity:0}to {\n  opacity:1}\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"主 agent 手动依据 hifi 提示词重建(Material 落地页)。真实 #0073e6/#006ce5 与 banner/hero 文案逐字使用; 右栏组件演示(蓝卡/清单/标签/日历/滑块/对话框)结构还原; 动画含真实 @keyframes in-right(右栏入场)、fade-in(左栏), 以及 MUI 过渡 cubic-bezier(.4,0,.2,1) 逐字照搬, hover 变色/上浮已加。"},{"id":"chakra","name":"Chakra UI","fw":["React"],"theme":"简洁 / 组合式","vendor":"Chakra / Segun Adebayo","link":"https://chakra-ui.com","kind":"item","img":"previews/chakra.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/chakra-ui/chakra-ui","desc":"组合式 API + Emotion，内置暗黑模式与 a11y，源码易读可二次封装。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Chakra UI (https://chakra-ui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, near-black text (#09090b), teal accent #0d9486, system sans-serif font.\n\nTop announcement banner (full width, horizontal gradient from teal to purple, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"Build faster with Premium Chakra UI Components\" followed by a small diamond/gem icon, then a \"Learn more\" button with a light white/transparent border.\n\nTop navigation bar (white background, height ~64px, padding 0 32px, flex justify-between align-center):\n- Left: Chakra logo — a small teal rounded hexagon/circle icon with a white lightning or abstract mark inside, next to the word \"chakra\" in lowercase bold black text.\n- Right: nav links \"Docs\" \"Showcase\" \"Spotlight\" \"Blog\" \"Guides\" in dark text, then a GitHub icon and a moon/theme icon.\n\nHero section (two-column layout, white background, padding ~80px 32px, max-width ~1200px, gap ~40px):\n- Left column (~55%):\n  - A small teal badge pill above the headline: \"⚡ Chakra Shipped is live →\" with a tiny lightning icon and right arrow.\n  - Headline: \"Chakra UI is a component system for building products\" in very bold black (~48px), with the words \"with speed\" on a light teal background highlight with teal text.\n  - Subcopy: \"Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC\" in gray, ~16px.\n  - Two buttons in a row:\n    - Primary: \"Start Building\" with teal background #0d9486, white text, rounded ~6px, padding ~12px 24px.\n    - Secondary: terminal-style \"npm i @chakra-ui/react\" with a small \">\" prompt icon, light gray background, teal text, rounded ~6px, monospace font.\n- Right column (~45%):\n  - A large, semi-transparent teal lightning bolt illustration, slightly tilted, filling most of the column height.\n\nComponent cards row (three cards below hero, full width, light background, gap ~24px, each card white with subtle border and rounded corners):\n- Card 1: a slider component with a teal knob and gray track.\n- Card 2: a row of four square checkbox/radio options with light borders.\n- Card 3: a tabs component with tabs \"Chakra\" (selected/active teal), \"Ark\", \"Zag\", and below text: \"Chakra UI is a component library for building web applications.\"\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.chakra-button.css-13mnqbs` → transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, translate, transform 0.2s ease\n- `div.chakra-slider__thumb.css-s1ws36` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-pjt2ur`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.css-1d1nf42`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes react-spinners-BarLoader-long  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%  {\n  left: 100%;\n  right: -90%;\n  } 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@keyframes react-spinners-BarLoader-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@keyframes react-spinners-BeatLoader-beat  {\n  50%  {\n  transform: scale(0.75);\n  opacity: 0.2;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-BounceLoader-bounce  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes react-spinners-CircleLoader-circle  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-ClimbingBoxLoader-climbingBox  {\n  0%  {\n  transform: translate(0px, -1em) rotate(-45deg);\n  } 5%  {\n  transform: translate(0px, -1em) rotate(-50deg);\n  } 20%  {\n  transform: translate(1em, -2em) rotate(47deg);\n  } 25%  {\n  transform: translate(1em, -2em) rotate(45deg);\n  } 30%  {\n  transform: translate(1em, -2em) rotate(40deg);\n  } 45%  {\n  transform: translate(2em, -3em) rotate(137deg);\n  } 50%  {\n  transform: translate(2em, -3em) rotate(135deg);\n  } 55%  {\n  transform: translate(2em, -3em) rotate(130deg);\n  } 70%  {\n  transform: translate(3em, -4em) rotate(217deg);\n  } 75%  {\n  transform: translate(3em, -4em) rotate(220deg);\n  } 100%  {\n  transform: translate(0px, -1em) rotate(-225deg);\n  }\n}\n@keyframes react-spinners-ClipLoader-clip  {\n  0%  {\n  transform: rotate(0deg) scale(1);\n  } 50%  {\n  transform: rotate(180deg) scale(0.8);\n  } 100%  {\n  transform: rotate(360deg) scale(1);\n  }\n}\n@keyframes react-spinners-ClockLoader-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-DotLoader-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-DotLoader-bounce  {\n  0%, 100%  {\n  transform: scale(0);\n  } 50%  {\n  transform: scale(1);\n  }\n}\n@keyframes react-spinners-FadeLoader-fade  {\n  50%  {\n  opacity: 0.3;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-GridLoader-grid  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.5);\n  opacity: 0.7;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-MoonLoader-moon  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-PacmanLoader-pacman-1  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-44deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：teal 渐变公告条 + 双栏 hero + 三组件卡。真实过渡 0.2s ease、slider-thumb 0.15s cubic-bezier(0.4,0,0.2,1) 与真实 @keyframes 照抄。teal #0d9486 一致。"},{"id":"mantine","name":"Mantine","fw":["React"],"theme":"现代 / 暗色原生","vendor":"Mantine","link":"https://mantine.dev","kind":"item","img":"previews/mantine.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/mantinedev/mantine","desc":"100+ 组件 + 大量 Hooks，TypeScript 友好，开箱暗色模式，开发体验极佳。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Mantine (https://mantine.dev) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background (#ffffff), black text (#000), system sans-serif font, accent blue #228be6 (Mantine blue), subtle gray borders (#dee2e6).\n\nTop navigation bar (height ~60px, white background with slight transparency, horizontal padding ~32px, flex justify-between align-center, border-bottom subtle):\n- Left: Mantine logo — a stylized geometric blue \"M\" mark inside a rounded square, followed by the text \"Mantine\" in bold black.\n- Right: a version pill \"v9.4.1\" with light gray border, a search input showing \"Search\" and \"Ctrl + K\" hint, a \"Documentation\" link, a theme/moon icon, and a GitHub icon.\n\nHero section (centered or left-aligned, white background, large top padding ~90px, padding-bottom ~60px, max-width ~1100px, centered or left):\n- Huge headline: \"A fully featured React components library\" in very bold black (~56px), line-height ~1.1.\n- Subcopy: \"Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and hooks to cover every use case.\" in gray (~16px), max-width ~600px, margin-top ~20px.\n- Two buttons below the subcopy (gap ~16px):\n  - Primary: \"Get started\" with blue background #228be6, white text, rounded ~8px, padding ~12px 24px.\n  - Secondary: \"Documentation\" with white background, gray border, dark text, rounded ~8px, same padding.\n\nFeature cards row (four cards in a horizontal grid, gap ~24px, max-width ~1100px, centered, padding-bottom ~60px):\n- Each card white with light border, rounded ~12px, padding ~24px.\n- Card titles in bold: \"Built for the AI-assisted workflow\", \"120+ components\", \"Hooks library\", \"Flexible styling\".\n- Card body text: short gray description lines (e.g., \"LLM-optimized docs, agent skills for complex tasks, and an MCP server for direct API access\").\n\nThe overall vibe is a modern, minimal developer-components library landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.HomePageJumbotron-module__LspnZW__image.mantine-dark-hidden` → animation: HomePageJumbotron-module__LspnZW__slide 120s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mantine-focus-auto.mantine-active` → transition: box-shadow, transform 0.1s, 0.1s ease, ease 0s, 0s\n- `span.m_80f1301b.mantine-Button-inner` → transition: transform, opacity 0.15s, 0.1s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.m_87cf2631`:\n  **hover:** transform: translateY(-1px) scale(1.01); opacity: 1\n- `.m_b6d8b162`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes m_5d2b3b9d  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.6);\n  } 50%, 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes m_aac34a1  {\n  0%, 100%  {\n  opacity: 1;\n  transform: scale(1);\n  } 50%  {\n  opacity: 0.5;\n  transform: scale(0.6);\n  }\n}\n@keyframes m_f8e89c4b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes m_885901b1  {\n  0%  {\n  opacity: 0.6;\n  transform: scale(0);\n  } 100%  {\n  opacity: 0;\n  transform: scale(2.8);\n  }\n}\n@keyframes m_55dc625a  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% / var(--marquee-repeat,4) - var(--marquee-gap,var(--mantine-spacing-md)) / var(--marquee-repeat,4)));\n  }\n}\n@keyframes m_cdef532c  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-100% / var(--marquee-repeat,4) - var(--marquee-gap,var(--mantine-spacing-md)) / var(--marquee-repeat,4)));\n  }\n}\n@keyframes m_81a374bd  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: calc(2.5rem * var(--mantine-scale)) 0;\n  }\n}\n@keyframes m_e0fb7a86  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 0 calc(2.5rem * var(--mantine-scale));\n  }\n}\n@keyframes m_18d73873  {\n  0%  {\n  transform: var(--rn-roll-from);\n  } 100%  {\n  transform: var(--rn-roll-to);\n  }\n}\n@keyframes m_299c329c  {\n  0%, 100%  {\n  opacity: 0.4;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes m_739a6f61  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n  transform: rotateY(0deg);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n  transform: rotateY(1800deg);\n  } 100%  {\n  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n  transform: rotateY(3600deg);\n  }\n}\n@keyframes DropdownOptionsAnimation-module__8WkA7q__option-animation  {\n  0%  {\n  opacity: 0;\n  transform: translate(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes HomePageJumbotron-module__LspnZW__slide  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate3d(0, calc(-129.75rem * var(--mantine-scale)), 0);\n  }\n}\n@-webkit-keyframes animation-1s6mpx1  {\n  0%, 20%, 53%, 80%, 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  } 40%, 43%  {\n  transform: translate3d(0px, -30px, 0px);\n  } 70%  {\n  transform: translate3d(0px, -15px, 0px);\n  } 90%  {\n  transform: translate3d(0px, -4px, 0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：白底 + Mantine 蓝 #228be6、hero 大标题 + 四张特性卡。真实 m_5d2b3b9d 入场与 button 0.1s ease 过渡照抄，蓝色一致。"},{"id":"shadcn","name":"shadcn/ui","fw":["React"],"theme":"Radix + Tailwind 白盒","vendor":"shadcn","link":"https://ui.shadcn.com","kind":"item","img":"previews/shadcn.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/shadcn-ui/ui","desc":"复制即用、100% 代码所有权。基于 Radix 原语 + Tailwind，年度最热仓库。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the shadcn/ui (https://ui.shadcn.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, black text, Geist/system sans-serif, clean minimal, rounded corners, black primary buttons, light gray inputs and borders.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: nav links in small black text: \"Home\" \"Docs\" \"Components\" \"Blocks\" \"Charts\" \"Directory\" \"Typeset\" \"Create\".\n- Right: search input with rounded light gray background, placeholder \"Search documentation...\"; GitHub icon with \"119k\" count; a small info icon; a black \"+ New\" pill button with white text.\n\nHero section (centered, white background, padding ~80px 32px ~40px):\n- Small light-gray pill badge above headline: \"Introducing shadcn/typeset →\".\n- Large centered headline: \"The Foundation for your Design System\" in bold black (~44px).\n- Subcopy centered: \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\" in gray (~16px), max-width ~620px.\n- Black rounded pill button: \"Build Your Own →\".\n\nComponent showcase (three large cards in a row, gap ~24px, padding ~40px 32px, background white, cards with rounded ~20px borders and very light gray background):\n- Left card: a form/components demo with several elements stacked:\n  - Top row of buttons: black \"Button →\", white \"Secondary\", white \"Outline\".\n  - Input fields \"Name\" and \"Message\" with rounded light gray backgrounds.\n  - A row with black \"Save\" button, \"Secondary\" link, radio/checkbox/toggle controls.\n  - Bottom row: \"Alert Dialog\" button and \"Button Group\" dropdown.\n  - Two bottom tabs: \"Planning\" and \"Support\".\n- Center card: a \"Contribution History\" bar chart card with title \"Contribution History\", subtitle \"Last 6 months of activity\", five vertical bars in varying shades of gray labeled Dec, Jan, Feb, Mar, Apr. Below the chart a two-column summary: \"UPCOMING May 2024 Scheduled\" and \"SAVINGS PLAN Accelerated Recurring\".\n- Right card: a QR-code card with a large black QR code illustration, title \"Scan to connect your mobile device\", subtext \"Open the Ledger mobile app and scan this code to link your device.\", and a small bottom action.\n\nThe overall look is the signature shadcn/ui black-and-white, rounded, modern component gallery landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.shrink-0` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.shrink-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-fit` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/input-group.relative` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.peer.relative` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.pointer-events-none.block` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.flex.h-8` → transition: margin, opacity 0.2s linear\n- `button.peer/menu-button.group/menu-button` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/item.flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.pl-3`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.hover\\:bg-muted`:\n  **active:** opacity: 1\n- `.hover\\:bg-primary\\/80`:\n  **active:** opacity: 1\n- `.focus-visible\\:border-ring-visible`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes scroll-fade-reveal-t  {\n  0%  {\n  --scroll-fade-t: 0px;\n  } 100%  {\n  --scroll-fade-t: var(--_scroll-fade-size-t,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  }\n}\n@keyframes scroll-fade-reveal-b  {\n  0%  {\n  --scroll-fade-b: var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  } 100%  {\n  --scroll-fade-b: 0px;\n  }\n}\n@keyframes scroll-fade-reveal-s  {\n  0%  {\n  --scroll-fade-s: 0px;\n  } 100%  {\n  --scroll-fade-s: var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  }\n}\n@keyframes scroll-fade-reveal-e  {\n  0%  {\n  --scroll-fade-e: var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  } 100%  {\n  --scroll-fade-e: 0px;\n  }\n}\n@keyframes tw-shimmer  {\n  0%  {\n  background-position: 100% 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建首屏：导航/hero/三张组件卡，真实 @keyframes（pulse/enter/caret-blink/tw-shimmer 等）与 button/link 的 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。黑白带圆角风格一致。"},{"id":"radix","name":"Radix UI","fw":["React"],"theme":"无样式原语 / a11y","vendor":"Radix / Modulz","link":"https://www.radix-ui.com","kind":"item","img":"previews/radix.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/radix-ui/primitives","desc":"WAI-ARIA 合规的无样式交互原语，shadcn 的底层内核，可完全掌控样式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Radix UI (https://www.radix-ui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: very light lavender/pink gradient background, dark text (#1c2024), serif font for headlines (use Georgia or Times fallback), sans-serif for UI. Accent blue #3e63dd for links and toggles, soft purple/pink background shapes.\n\nTop navigation bar (height ~64px, transparent background, padding 0 32px, flex justify-between align-center):\n- Left: Radix logo — a stylized black \"R\" mark made of two angled strokes, next to the text \"Radix\" in bold sans-serif. To the right of the brand, a small dark pill with \"Made by WorkOS\" (white text on black or dark gray).\n- Right: nav links \"Themes\" (active, shown as a solid black pill button with white text), \"Primitives\", \"Icons\", \"Colors\", \"Documentation\", \"Playground\", \"Blog\", then a GitHub icon and a theme/sun icon.\n\nHero section (two-column layout, padding ~80px 32px, gap ~40px, max-width ~1200px):\n- Left column (~45%):\n  - A small blue pill badge: \"Read about Radix Themes 3.0 →\".\n  - Large elegant serif headline: \"Start building your app now\" (~56px), line-height ~1.1, dark.\n  - Subcopy: \"An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.\" in gray sans-serif (~16px).\n  - A code block with light background, rounded ~12px, showing:\n    import \"@radix-ui/themes/styles.css\";\n    import { Theme, Button } from \"@radix-ui/themes\";\n    export default () => (\n      <Theme>\n        <Button>Hey 👋</Button>\n      </Theme>\n    );\n    Use syntax highlighting colors: purple import keywords, red strings, blue tags, dark text.\n  - Two buttons below the code block:\n    - Black rounded button \"Get started →\".\n    - Light purple/lavender rounded button with a small grid icon and \"Playground\" in dark text.\n  - Below buttons: \"Live examples\" label with a row of small horizontal tabs/lines indicating examples.\n- Right column (~55%):\n  - A large component showcase floating on the soft gradient background. Include:\n    - Top card: \"Your team\" with subtitle \"Invite and manage your team members.\", an input field \"Email address\" with blue \"Invite\" button, and a list of team members with circular avatars, names (Emmeline Labrie, Zac Wight, etc.), email addresses, and three-dot menus.\n    - Below card: \"Notifications\" with subtitle \"Manage your notification settings.\", sections \"Comments\", \"Favorites\", \"New documents\", each with toggles for Push (blue on), Email (blue on), Slack (gray off).\n    - Far right partial card: \"Sign in\" form with Email and Password fields and a blue \"Sign in\" button, and a \"Your...\" card below it.\n\nThe overall vibe is a soft, modern, serif-headline component library landing page with floating UI cards on a pastel gradient.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.header-module__bY5_QG__HeaderInner` → transition: background-color, box-shadow 0.18s, 0.18s ease, ease 0s, 0s\n- `span.rt-SwitchThumb` → transition: transform, box-shadow 0.14s, 0.14s cubic-bezier(0.45, 0.05, 0.55, 0.95), ease-in-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rt-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rt-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes rt-slide-from-top  {\n  0%  {\n  transform: translateY(4px) scale(0.97);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-top  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  transform: translateY(4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-bottom  {\n  0%  {\n  transform: translateY(-4px) scale(0.97);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-bottom  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  transform: translateY(-4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-left  {\n  0%  {\n  transform: translate(4px) scale(0.97);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-left  {\n  0%  {\n  transform: translate(0px) scale(1);\n  } 100%  {\n  transform: translate(4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-right  {\n  0%  {\n  transform: translate(-4px) scale(0.97);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-right  {\n  0%  {\n  transform: translate(0px) scale(1);\n  } 100%  {\n  transform: translate(-4px) scale(0.97);\n  }\n}\n@keyframes rt-skeleton-pulse  {\n  0%  {\n  background-color: var(--gray-a3);\n  } 100%  {\n  background-color: var(--gray-a4);\n  }\n}\n@keyframes rt-dialog-overlay-no-op  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rt-dialog-content-show  {\n  0%  {\n  opacity: 0;\n  transform: translateY(5px) scale(0.97);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-dialog-content-hide  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(5px) scale(0.99);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：淡紫粉渐变背景、Georgia 衬线大标题、代码块、浮动 Your team/Notifications 卡片；内联真实 rt-fade-in/rt-dialog-content-show/@keyframes 与 switch thumb transition(.14s cubic-bezier(.45,.05,.55,.95))、header transition(.18s)。CSS 过渡/入场动画逐字照抄，复现一致。"},{"id":"headlessui","name":"Headless UI","fw":["React","Vue"],"theme":"无样式 / a11y","vendor":"Tailwind Labs","link":"https://headlessui.com","kind":"item","img":"previews/headlessui.png","chips":["Dialog","Menu","Listbox","Combobox","Switch","RadioGroup","Tab","Disclosure","Popover"],"repo":"https://github.com/tailwindlabs/headlessui","desc":"Tailwind 官方无样式组件，React/Vue 双版本，可访问性优先。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Headless UI (https://headlessui.com) documentation page above-the-fold at 1280px width. This is a dark-themed component documentation page.\n\nGlobal style: very dark background near #0a0a0f, light text #f0f0f0, muted gray sidebar text #9ca3af, accent purple/blue gradient for the logo and selected items. System sans-serif font.\n\nTop header bar (height ~56px, dark background with slight gradient/purple glow on the left, padding 0 24px, flex justify-between align-center):\n- Left: HeadlessUI logo — a rounded square icon with a purple-to-blue gradient and a small white square/dash inside, next to the text \"HeadlessUI\" in white, then a version dropdown pill \"v2.1\" with a down arrow.\n- Right: GitHub icon in white.\n\nPage layout (flex, full width, height below header):\n- Left sidebar (width ~220px, dark background, border-right subtle, padding 16px):\n  - Top: two pill tabs \"React\" (selected, white background) and \"Vue\" (transparent).\n  - Section heading \"COMPONENTS\" in tiny uppercase gray.\n  - Links: \"Dropdown Menu\", \"Disclosure\", \"Dialog\" (selected/active, light background), \"Popover\", \"Tabs\", \"Transition\".\n  - Section heading \"FORMS\" in tiny uppercase gray.\n  - Links: \"Button\", \"Checkbox\", \"Combobox\", \"Fieldset\", \"Input\", \"Listbox\", \"Radio Group\", \"Select\".\n- Main content area (flex 1, padding 40px, max-width ~800px):\n  - H1: \"Dialog\" in large white bold text.\n  - Subcopy: \"A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.\" in gray.\n  - A preview/demo card with rounded corners, dark gray background, two tabs at top-right: \"Preview\" (selected, lighter) and \"Code\".\n  - Inside the preview card, a centered modal/dialog with dark background, rounded corners, shadow: title \"Payment successful\", body text \"Your payment has been successfully submitted. We've sent you an email with all of the details of your order.\", and a gray button \"Got it, thanks!\".\n  - Below the preview: H2 \"Installation\" in white bold, and text \"To get started, install Headless UI via npm:\"\n- Right sidebar (width ~200px, dark background, border-left subtle, padding 16px):\n  - Heading \"ON THIS PAGE\" in tiny uppercase gray.\n  - Links: \"Installation\", \"Basic example\", \"Styling\", \"Examples\", \"Showing/hiding the dialog\", \"Adding a backdrop\", \"Scrollable dialogs\", \"Managing initial focus\", \"Rendering to a portal\", \"Adding transitions\", \"Animating with Framer Motion\", \"Keyboard interaction\", \"Component API\", \"Dialog\", \"DialogBackdrop\", \"DialogPanel\", \"DialogTitle\", \"CloseButton\".\n\nThe overall vibe is a dark, modern, developer-focused component documentation page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.block` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.pr-1\\.5`:\n  **hover:** background-color: rgba(255, 255, 255, 0.15)\n- `.hover\\:bg-white\\/5`:\n  **hover:** background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75)\n- `.prose :where(a)`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深色(#0a0a0f)文档页、左右双 sidebar、居中 Payment successful 模态、紫色→蓝色 logo 渐变。内联真实 transition a.group.block -> color/background 0.2s cubic-bezier(.4,0,.2,1) 与 hover 过渡。纯 CSS 过渡复现一致。"},{"id":"nextui","name":"NextUI (HeroUI)","fw":["React"],"theme":"现代 / SSR 友好","vendor":"NextUI","link":"https://nextui.org","kind":"item","img":"previews/nextui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/nextui-org/nextui","desc":"基于 React Aria + Tailwind，强调高性能与 SSR，组件量 200+。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the HeroUI / NextUI (https://nextui.org) homepage above-the-fold at 1280px width.\n\nGlobal style: light gray/off-white background (#f5f5f7), dark text, accent blue #0072f5, clean rounded modern UI, system sans-serif font.\n\nTop navigation bar (height ~64px, light gray background, padding 0 32px, flex justify-between align-center):\n- Left: HeroUI logo — the word \"hero\" in lowercase bold black with a small stylized geometric icon (black square/arrow mark) to the left.\n- Center: nav links \"Docs\" \"Themes\" \"Components\" \"React Native\" \"Blog\" \"Roadmap\" (Roadmap with a small superscript asterisk).\n- Right: search input with rounded light background, placeholder \"Search\" and a small \"⌘K\" hint; small icons (theme, sparkles, etc.); a \"Theme\" button; GitHub icon with \"29.9k\".\n\nHero section (centered, light gray background, padding ~80px 32px ~40px):\n- Small blue pill badge: \"HeroUI React v3.2.2 — patch release\".\n- Large centered headline: \"Beautiful by default.\" in bold black (~48px), followed by \"Customizable by design.\" in medium gray (~48px), stacked.\n- Subcopy centered: \"HeroUI is the modern UI library for web and mobile, built to help you move fast, stay consistent, and deliver delightful user experiences.\" in gray (~16px), max-width ~620px.\n- Two centered buttons: \"Get started\" (blue rounded) and \"View components\" (white rounded with border).\n- Small centered line below: GitHub icon + \"Open source with 29.9k stars\".\n\nComponent showcase (below hero, padding ~40px 32px, full width, display of overlapping UI cards on light gray background):\n- A \"Pro\" promotional card on the left with a blue/purple gradient top, \"Pro\" logo, \"Now available\", and bottom text \"Build faster with HeroUI Pro\" with description and \"Close\" / \"Explore Pro\" buttons.\n- In the center, a \"Verify account\" card with colored avatar circles, text \"We've sent a code to a****@gmail.com\", six input boxes with numbers \"4 3 2 0 _ _\", and \"Didn't receive a code? Resend\".\n- Below the verify card, several \"Click me\" buttons in blue, light blue, and red/coral variants.\n- On the right, a \"Create an account\" card with user icon, \"Start your free 7-day trial. No credit card required.\", blue \"Get Started\" button, \"OR\" divider, and \"Continue with Google\" / \"Continue with Apple\" buttons.\n- Top-right of the showcase area: a row of small colored circles (theme color swatches) in pink, red, orange, yellow, green, cyan, blue, purple.\n\nThe overall vibe is a modern, colorful, mobile-friendly UI library landing page with lots of rounded component demos.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.spinner.spinner--accent` → animation: spin 0.75s linear infinite normal\n- `div.input-otp__slot-value` → animation: slot-value-in 0.25s ease 1 normal both\n- `div.absolute.inset-[5.73%_3.6%_4.36%_3.18%]` → animation: float-stars 12s ease-in-out infinite normal\n- `div.absolute.inset-[5.73%_3.6%_4.36%_3.18%]` → animation: float-stars-reverse 15s ease-in-out infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.backdrop-blur-lg.border-b` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.button.button--icon-only` → transition: transform, background-color, box-shadow 0.25s, 0.1s, 0.1s ease, cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `div.popover__trigger` → transition: color, background-color, box-shadow 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `div.tabs__tab.whitespace-nowrap` → transition: color, background-color, box-shadow, opacity 0.15s, 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1), ease 0s, 0s, 0s, 0s\n- `div.tabs__indicator` → transition: translate, width, height 0.25s cubic-bezier(0.32, 0.72, 0, 1)\n- `a.text-[13px].font-medium` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.color-swatch-picker__item` → transition: border-color, box-shadow 0.1s, 0.1s cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s\n- `div.color-swatch-picker__swatch` → transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1)\n- `input.input.input--primary` → transition: background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `svg` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.checkbox__control` → transition: background-color, border-color, transform 0.2s, 0.2s, 0.1s cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `svg` → transition: stroke-dashoffset 0.15s linear 0.015s\n- `span.switch__control` → transition: background-color, box-shadow 0.25s, 0.15s ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **active:** transform: scale(0.97)\n- `.tabs__tab`:\n  **hover:** opacity: 0.7\n- `.tabs__list-container > .tabs__list-container__scroll-prev`:\n  **hover:** opacity: 0.7\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes float-stars  {\n  0%  {\n  transform: translateY(0px) translate(0px);\n  } 50%  {\n  transform: translateY(-40px) translate(40px);\n  } 100%  {\n  transform: translateY(0px) translate(0px);\n  }\n}\n@keyframes float-stars-reverse  {\n  0%  {\n  transform: translateY(0px) translate(0px);\n  } 50%  {\n  transform: translateY(40px) translate(-40px);\n  } 100%  {\n  transform: translateY(0px) translate(0px);\n  }\n}\n@keyframes shine  {\n  0%  {\n  translate: -100%;\n  } 100%  {\n  translate: 100%;\n  }\n}\n@keyframes scrolling-banner  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-50% - var(--gap) / 2));\n  }\n}\n@keyframes scrolling-banner-vertical  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-50% - var(--gap) / 2));\n  }\n}\n@keyframes custom-fade-in  {\n  0%  {\n  opacity: 0;\n  backdrop-filter: blur() saturate(0%);\n  background-color: rgba(0, 0, 0, 0);\n  } 100%  {\n  opacity: 1;\n  backdrop-filter: blur(8px) saturate(180%);\n  background-color: var(--color-backdrop);\n  }\n}\n@keyframes custom-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：浅灰 #f5f5f7 背景、双标题 hero、三张组件展示卡（Pro 渐变/验证 OTP/注册）。真实 spin 0.75s linear、float-stars 12s/15s、slot-value-in 0.25s 与大量 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。蓝 #0072f5 一致。"},{"id":"semi","name":"Semi Design","fw":["React"],"theme":"企业级 / 设计代币","vendor":"字节跳动 ByteDance","link":"https://semi.design","kind":"item","img":"previews/semi.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/DouyinFE/semi-design","desc":"Design Token 与 Figma 插件完善，支持多主题动态切换，含主题商店。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Semi Design (https://semi.design) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background with very subtle gradient/pastel glow, Chinese text, dark near-black (#1c1f23) text, primary blue #0064fa, system Chinese sans-serif font stack.\n\nTop announcement banner (full width, horizontal gradient from purple to pink/coral, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"🚀 使用 MCP & Skills 让 AI 对 Semi 了如指掌，如虎添翼 🚀\" with a right arrow and a close X on the far right.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center):\n- Left: Semi Design logo — a black abstract curved \"S\" shape inside a circle, next to \"semi design\" lowercase text.\n- Center: nav links in Chinese: \"组件\" \"主题\" \"设计转代码\" \"模板\" \"数据可视化\" with a small red/pink \"NEW\" badge, \"博客\".\n- Right: small icons (Figma, moon/theme, Twitter/X, GitHub, language \"EN\"), a search input with placeholder \"搜索\" and \"⌘K\" hint, and a blue primary button \"登录\".\n\nHero section (two-column layout, white/light background, padding ~70px 32px, max-width ~1200px, gap ~40px):\n- Left column (~45%):\n  - Very large Chinese headline: \"连接设计师与开发者\" in bold black (~52px).\n  - Subcopy: \"由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。\" in gray (~16px), line-height 1.7, max-width ~480px.\n  - Two buttons:\n    - Primary \"开始使用\" with blue background #0064fa, white text, rounded ~6px, padding ~12px 28px.\n    - Secondary \"GitHub 10k\" with white background, thin border, GitHub icon, dark text, rounded ~6px, same padding.\n  - A row of technology/framework icons below the buttons (React atom logo, a blue cube, a yellow lightning bolt, a cartoon animal, a Remix-style \"R\", and \"NEXT.js\" text).\n- Right column (~55%):\n  - A large dashboard/application UI mockup with rounded corners and subtle shadow, showing a left sidebar with Chinese menu items (工作台, 搜索, 项目空间, 业务指标, 用户产品, 待设计, 实验中, 重点关注, 待 UED 设计, 早会看板, 性能验证, DC 的视图, 更多视图, 报警规则, 性能大盘, 时间表, 配置) and a main content area titled \"你好, Semi\" with a waving-hand icon. Show metrics: 已处理 1,213, 平均处理时长 12pd ↓12.69%, 待处理 16, 高优 5 • 2. Below, tabs \"我的关注\" / \"我的项目\", a list of product cards with TikTok/Douyin logo \"抖音极速版\" and \"头条搜索\", numbers 待处理 17 / 已解决 22, and a \"待处理文件\" list with file names and sizes.\n\nThe overall vibe is a Chinese enterprise design system landing page with a big product dashboard mockup.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** AOS (Animate On Scroll)。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.skip-to-content` → transition: transform 0.3s ease\n- `button.semi-button.semi-button-primary` → transition: background-color, border 0s, 0s ease-in, ease-in 0s, 0s\n- `div.frame14368--3fnU7.aos-init` → transition: opacity, transform 0.4s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content-link`:\n  **hover:** text-decoration: underline\n- `-visible`:\n  **hover:** text-decoration: underline\n- `.group2835--uvjAi a-visible`:\n  **hover:** text-decoration: underline\n- `.semi-select`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：紫→粉→珊瑚渐变公告条、中文企业风导航、大标题'连接设计师与开发者'、右侧产品 dashboard mock(工作台菜单+你好Semi+指标卡)。AOS 提示用等价 transition(opacity/transform .4s ease)近似滚动揭示；button primary transition 0s 照抄。中文文案真实。"},{"id":"blueprint","name":"Blueprint","fw":["React"],"theme":"数据密集型","vendor":"Palantir","link":"https://blueprintjs.com","kind":"item","img":"previews/blueprint.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","FileUpload"],"repo":"https://github.com/palantir/blueprint","desc":"面向数据密集应用（表格/图表/表单）的 React 组件套件。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Blueprint (https://blueprintjs.com) homepage above-the-fold at 1280px width.\n\nGlobal style: dark navy blue gradient background (#111418 to #0f2744), white text, subtle blueprint/technical-drawing line art pattern of UI components (inputs, buttons, forms, calendars) in very faint blue/white lines across the background. Centered hero layout. System sans-serif font.\n\nTop navigation bar (subtle, transparent, padding ~16px 32px, flex justify-end, small white text):\n- Right-aligned nav links: \"Documentation\", \"GitHub\", and a blue button \"View openings\".\n\nHero section (centered, full width, padding ~120px 32px, position relative):\n- A large Blueprint logo in the center — a 3D cube made of three visible faces: red/coral (#ff6b6b) on the left, blue (#4a90e2) on the top-right, green (#2ecc71) on the bottom. The cube is isometric, slightly tilted.\n- Below the logo: \"Blueprint\" in large white bold text (~36px).\n- Subcopy: \"A React-based UI toolkit for the web\" in light gray/white (~16px).\n- Below subcopy: two links separated by a small dot: \"Documentation\" and \"GitHub\" in white/blue, underlined or link style.\n\nBackground pattern (subtle, behind the hero):\n- Very faint white/blue wireframe outlines of UI components: input boxes, buttons, checkboxes, dropdowns, calendar grids, sliders, and form elements scattered across the dark blue gradient. They should be low opacity (~0.08) so they don't overpower the text.\n\nBottom strip (full width, near-black background, padding ~40px, centered):\n- A white stylized icon resembling a circle on a pedestal (open-source symbol).\n- Text below: \"Blueprint is an open source project\" in white.\n\nThe overall vibe is a dark, technical, blueprint-style landing page for a React UI toolkit.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.landing-wireframe`:\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(33, 93, 176, 0.753)\n- `.bp6-button`:\n  **hover:** color: rgb(138, 187, 255); text-decoration: underline; background-color: rgba(255, 255, 255, 0.2)\n  **active:** background-color: rgba(255, 255, 255, 0.4); color: rgb(255, 255, 255)\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(138, 187, 255, 0.753)\n- `.bp6-dark`:\n  **hover:** color: rgb(138, 187, 255); text-decoration: underline\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(138, 187, 255, 0.753)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes linear-progress-bar-stripes  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 30px 0px;\n  }\n}\n@keyframes skeleton-glow  {\n  0%  {\n  background: rgba(211, 216, 222, 0.2);\n  border-color: rgba(211, 216, 222, 0.2);\n  } 100%  {\n  background: rgba(95, 107, 124, 0.2);\n  border-color: rgba(95, 107, 124, 0.2);\n  }\n}\n@keyframes pt-spinner-animation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深海军蓝渐变、等距三色立方体(red/blue/green 面)、技术线稿背景(低透明度 SVG 近似 canvas 氛围)、底部开源标识。内联真实 @keyframes linear-progress-bar-stripes/skeleton-glow/pt-spinner-animation。WebGL canvas 用 CSS 线稿近似，已在 notes 标注边界。"},{"id":"grommet","name":"Grommet","fw":["React"],"theme":"企业级 / 响应式","vendor":"HPE","link":"https://v2.grommet.io","kind":"item","img":"previews/grommet.png","chips":["Button","TextInput","Select","CheckBox","RadioButton","RangeInput","Form","FileInput","DataTable"],"repo":"https://github.com/grommet/grommet","desc":"HPE 出品的响应式 React 组件库，主题系统强大。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Grommet (https://v2.grommet.io) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, dark gray text (#444444), purple accent #7d4cdb, clean minimal, lowercase serif headings, system sans-serif body. The read.json body font is \"Times\", so use a serif font for headings.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center):\n- Left: Grommet logo — a purple circle outline ring, next to the word \"grommet\" in lowercase purple text.\n- Right: a white pill button \"docs\" with purple border, a purple filled pill button \"components\", and a magnifying glass search icon.\n\nHero section (centered, white background, padding ~60px 32px):\n- At the top: a large, centered, light-gray browser/window mockup with a subtle shadow and a thin top bar. Inside the mockup, show a faint layout with a left sidebar and a main content area in very light gray.\n- Below the mockup: large centered lowercase serif headline: \"streamline the way you develop apps\" in dark gray (~56px), line-height ~1.2.\n- Subcopy below: \"build responsive and accessible mobile-first projects for the web.\" in gray (~18px), centered, max-width ~600px.\n- Two buttons below the subcopy:\n  - \"GET STARTED\" outlined purple rounded pill with purple text and border.\n  - \"hello world\" solid green/teal rounded pill with dark text (or purple-filled variant).\n\nThe overall vibe is a simple, minimalist product landing page with a big app mockup and friendly lowercase typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.StyledButton-sc-323bzc-0.fXUZcT` → transition: color, background-color, border-color, box-shadow 0.1s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bEKRlj`:\n  **hover:** text-decoration: underline\n- `.fXUZcT`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000; box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.lbmcGd`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000; box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.iNIgAV`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.bA-DKzc`:\n  **hover:** text-decoration: underline\n- `.gpFJnC`:\n  **hover:** text-decoration: underline\n- `.eTRdcZ`:\n  **hover:** box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.eOrRZR`:\n  **hover:** box-shadow: rgb(85, 85, 85) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.dGClPB`:\n  **hover:** box-shadow: rgb(129, 252, 237) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.monaco-editor .native-edit-context`:\n  **focus:** opacity: 1\n- `.monaco-editor .ime-text-area`:\n  **focus:** opacity: 1\n- `.dfrqYr`:\n  **hover:** box-shadow: rgb(111, 255, 176) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.fUOUhe`:\n  **hover:** text-decoration: underline\n- `.hoQiYp`:\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.bDIANP`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hAsUlT  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes hftlBD  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-smooth  {\n  0%, 20%  {\n  opacity: 1;\n  } 60%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-phase  {\n  0%, 20%  {\n  opacity: 1;\n  } 90%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-expand  {\n  0%, 20%  {\n  transform: scaleY(1);\n  } 80%, 100%  {\n  transform: scaleY(0);\n  }\n}\n@keyframes fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes monaco-findInput-highlight-0  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-1  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-0  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-1  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes progress  {\n  0%  {\n  transform: translateX(0%) scaleX(1);\n  } 50%  {\n  transform: translateX(2500%) scaleX(3);\n  } 100%  {\n  transform: translateX(4900%) scaleX(1);\n  }\n}\n@keyframes flash-background  {\n  0%  {\n  background-color: lightgreen;\n  } 100%  {\n  background-color: none }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches real site: nav logo/buttons, browser mockup, serif headline, two CTA buttons all correct; all prompt keyframes pasted verbatim"},{"id":"evergreen","name":"Evergreen","fw":["React"],"theme":"产品级","vendor":"Segment","link":"https://evergreen.segment.com","kind":"item","img":"previews/evergreen.png","chips":["Button","TextInput","Select","Checkbox","Radio","Switch","Slider","Form","FilePicker"],"repo":"https://github.com/segmentio/evergreen","desc":"Segment 出品的产品级 React UI 套件，开箱即用。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Evergreen (https://evergreen.segment.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, very dark navy text (#101e4a), accent blue #3366ff, clean minimal enterprise design, system sans-serif font.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: Evergreen logo — a small green triangle/tree icon inside a light circle, next to the word \"EVERGREEN\" in uppercase bold dark text, small font.\n- Center: nav links \"Introduction\" \"Foundations\" \"Components\" \"Patterns\" \"Resources\" in dark gray, small font.\n- Right: a blue \"Star\" link.\n\nHero section (white background, padding ~80px 32px ~40px, max-width ~1200px, margin 0 auto):\n- Left-aligned hero content:\n  - Large bold dark headline: \"Meet Evergreen, Segment's design system\" (~40px), line-height ~1.2.\n  - Subcopy: \"Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.\" in gray (~16px), max-width ~520px, line-height 1.6.\n  - Blue rounded button \"Get Started\" with white text, padding ~10px 20px, font-size ~14px.\n\nCore values section (white background, padding ~60px 32px, max-width ~1200px, margin 0 auto):\n- Section title \"Core values\" in bold dark (~24px), margin-bottom ~32px.\n- Three cards in a horizontal row, gap ~24px:\n  - Each card has a small light-blue circular icon (lightbulb, wrench, grid/building blocks) on top, then a bold dark title, then gray description text.\n  - Card 1: title \"Works out of the box\", body \"Evergreen contains a set of polished React components that work out of the box.\"\n  - Card 2: title \"Flexible and composable\", body \"Evergreen components are built on top of a React UI Primitive for endless composability.\"\n  - Card 3: title \"Enterprise-grade\", body \"Evergreen features a UI design language for enterprise-grade web applications.\"\n\nThe overall vibe is a clean, corporate, Segment-style design system landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.ub-fnt-sze_14px.ub-f-wght_400` → transition: all 0.12s ease-in-out\n- `button.ub-pst_relative.ub-f-wght_500` → transition: box-shadow 0.08s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ub-box-szg_border-box`:\n  **hover:** color: rgb(71, 77, 102); background-color: rgb(41, 82, 204); border-bottom-color: rgb(41, 82, 204); border-left-color: rgb(41, 82, 204); border-right-color: rgb(41, 82, 204); border-top-color: rgb(41, 82, 204)\n  **active:** color: rgb(16, 24, 64); background-color: rgb(31, 61, 153); border-bottom-color: rgb(31, 61, 153); border-left-color: rgb(31, 61, 153); border-right-color: rgb(31, 61, 153); border-top-color: rgb(31, 61, 153)\n  **focus:** box-shadow: rgb(230, 232, 240) 0px 0px 0px 2px; background-color: rgb(51, 102, 255); border-bottom-color: rgb(51, 102, 255); border-left-color: rgb(51, 102, 255); border-right-color: rgb(51, 102, 255); border-top-color: rgb(51, 102, 255)\n- `.ub-dspl_flex`:\n  **hover:** color: rgb(41, 82, 204); transform: translateY(-2px); box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 2px 4px -2px\n  **active:** color: rgb(31, 61, 153)\n  **focus:** box-shadow: rgb(173, 194, 255) 0px 0px 0px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading_eqdsen  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes loading-circle_1gjkti9  {\n  0%  {\n  stroke-dashoffset: 600;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes openAnimation_65p985  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-120%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes closeAnimation_7y33w6  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 100%  {\n  transform: scale(0.9);\n  opacity: 0;\n  }\n}\n@keyframes openAnimation_17afo5l  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes fadeInAnimation_1b6l33e  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOutAnimation_dnefzk  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes openAnimation_1eqftk6  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes closeAnimation_16u42jn  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 100%  {\n  transform: scale(0.8);\n  opacity: 0;\n  }\n}\n@keyframes pulseAnimation_9bpru1  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.9);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate360InAnimation_5ilb18  {\n  0%  {\n  transform: translateX(100%) rotate(0deg);\n  } 100%  {\n  transform: translateX(-100%) rotate(-360deg);\n  }\n}\n@keyframes rotate360OutAnimation_1z164r  {\n  0%  {\n  transform: translateX(-100%) rotate(0deg);\n  } 100%  {\n  transform: translateX(100%) rotate(360deg);\n  }\n}\n@keyframes leftRotate360InAnimation_flx4dq  {\n  0%  {\n  transform: translateX(-100%) rotate(0deg);\n  } 100%  {\n  }\n}\n@keyframes leftRotate360OutAnimation_to4evf  {\n  0%  {\n  transform: translateX(100%) rotate(0deg);\n  } 100%  {\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches real site: nav with centered links, left-aligned hero headline+button, 3-card core values with icons all correct; all prompt keyframes pasted verbatim"},{"id":"fluent","name":"Fluent UI (React)","fw":["React"],"theme":"Microsoft / Fluent","vendor":"Microsoft","link":"https://react.fluentui.dev","kind":"item","img":"previews/fluent.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Dropdown","Form"],"repo":"https://github.com/microsoft/fluentui","desc":"微软 Fluent Design 的 React 实现，Office/Windows 同款。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Fluent UI React v9 Storybook documentation page above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text rgb(17,16,15), secondary text gray rgb(96, 94, 91). Font stack: \"Segoe UI\", -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif.\n\nLayout: fixed-height full-screen two-column layout. Top navigation bar (~48px, white background, bottom border 1px solid #e8e8e8, flex justify-between align-center, padding 0 16px):\n- Left: a small abstract Fluent logo icon (two overlapping blue/cyan/purple triangular/chevron shapes pointing right, like a stylized \"F\"). The logo uses a gradient from #0f6cbd to #4b54a6 with a slight 3D overlap. Next to it, the text \"Fluent UI React v9\" in 14px bold dark text.\n- Right: a small gear/settings icon button in muted gray.\n\nLeft sidebar (fixed width ~240px, white background, right border 1px solid #e8e8e8, padding 12px, overflow-y auto):\n- Search box at the top with light gray border (#d1d1d1), rounded corners 4px, placeholder text \"Find components\", and a small magnifying glass icon on the left.\n- Navigation sections with 14px dark bold headings and 13px gray item rows:\n  - Section \"Concepts\" (expanded): item \"Introduction\" highlighted with a bright blue (#0078d4) background bar and white text; items below: \"Developer\", \"Migration\", \"Recipes\", \"Package Maturity Levels\". Use a small document/page icon before each item (a simple rectangle with folded corner).\n  - Section \"Theme\" (collapsed, with chevron): \"Border Radii\", \"Colors\", \"Fonts\", \"Shadows\", \"Spacing\", \"Stroke Widths\", \"Typography\", \"Theme Designer\".\n  - Section \"Components\" (collapsed, with chevron): \"Accordion\", \"Avatar\", \"AvatarGroup\", \"Badge\", \"Breadcrumb\".\n\nMain content area (right of sidebar, light gray/white background, padding 32px):\n- Large bold heading \"Fluent UI React Components\" (~32px, dark).\n- Below it, subheading \"v9.74.3\" (~18px, muted gray).\n- A large hero banner card with rounded corners 8px, full-width of the main content, height ~280px. Background is a soft pastel gradient (pink #f8e8f2 → lavender #e8e8f8 → light blue #d8f0fc). Add subtle translucent pink/purple circles/blurred blobs behind the numeral. In the center, render a large, translucent, glossy 3D-style number \"9\" with a glassy/iridescent appearance: white-to-light-blue highlights, soft long shadow, subtle purple and pink reflections, low opacity so it blends with the background. The numeral should look like a floating translucent 3D shape, not a flat white number.\n- Below the banner, a section heading \"What's new\" (~20px, bold dark) with a thin gray horizontal divider above it.\n\nKeep the overall look clean, like a Microsoft documentation/Storybook interface, with flat styling and subtle separators.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.css-17ac8cd` → transition: opacity 0.2s ease-in-out\n- `button.css-17coe6o` → transition: background, box-shadow 0.15s ease-out\n- `input.css-1w135r1` → transition: all 0.15s ease\n- `button.css-h7e28b` → transition: color, box-shadow 0.15s, 0.15s ease, ease 0s, 0s\n- `div.css-1h0aucu` → transition: transform 0.1s ease-out\n- `iframe.css-1ey3k8o` → transition: background-position, visibility 0s, 0s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-1l2fybq`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset; opacity: 1\n- `.css-1p3dnyj > *`:\n  **focus:** border-color: rgb(0, 120, 212); border-top-color: rgb(0, 120, 212); border-right-color: rgb(0, 120, 212); border-bottom-color: rgb(0, 120, 212); border-left-color: rgb(0, 120, 212)\n- `.css-17coe6o`:\n  **hover:** color: rgb(0, 120, 212); background: rgba(0, 120, 212, 0.14); background-color: rgba(0, 120, 212, 0.14)\n  **active:** color: rgb(0, 120, 212); background: rgba(2, 156, 253, 0.1); background-color: rgba(2, 156, 253, 0.1)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset\n- `.css-474jb1`:\n  **hover:** color: rgb(0, 120, 212); background: rgba(0, 120, 212, 0.14); background-color: rgba(0, 120, 212, 0.14)\n  **active:** color: rgb(0, 120, 212); background: rgba(2, 156, 253, 0.1); background-color: rgba(2, 156, 253, 0.1)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset\n- `.css-du0n83`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset; opacity: 1; background: white; color: rgb(0, 120, 212); background-color: white\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes animation-r0iffl  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@-webkit-keyframes animation-u07e3c  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：白底 Storybook 双栏、Segoe UI、渐变 F 形 logo、粉/薰衣草/蓝柔和渐变 banner 内玻璃质感数字'9'。内联真实 @-webkit-keyframes animation-r0iffl(闪烁)/animation-u07e3c(旋转 .36deg/spin) 与多项 transition(opacity .2s ease-in-out / background .15s ease-out 等)。纯 CSS 动画复现一致。"},{"id":"polaris","name":"Polaris","fw":["React"],"theme":"电商 / Shopify","vendor":"Shopify","link":"https://polaris.shopify.com","kind":"item","img":"previews/polaris.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Slider","Form","DropZone"],"repo":"https://github.com/Shopify/polaris","desc":"Shopify 管理后台设计系统，电商场景组件齐全。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Polaris for React deprecation landing page above-the-fold at 1280px width.\n\nGlobal style: full-screen dark teal/blue gradient background that radiates from a lighter teal center to deep navy/teal edges (center roughly #1a5c7a, edges #0a2e42). Scatter small white dot \"stars\" across the background with varying opacity and sizes for a subtle space effect. Add a soft white/blue radial glow behind the central icon.\n\nTypography: Inter, -apple-system, system-ui, Segoe UI, Roboto, sans-serif. White text.\n\nCentered hero layout (vertical center, text-align center, horizontal padding 32px):\n- At the top, a large white 4-point star / sparkle icon. The icon should be plump and rounded, like a soft plus/starburst shape, with a subtle white glow and drop shadow so it looks luminous against the dark background. Size about 120px x 120px.\n- Below the icon, a bold white heading: \"Polaris for React is deprecated.\" (~28px, font-weight 700, letter-spacing -0.2px).\n- Subcopy below heading in lighter teal/white (~16px, line-height 1.6, max-width ~640px, centered): \"Polaris Web Components are now the default way to build Shopify apps. Built on web standards, they work with React, Vue, vanilla JavaScript, or no framework at all.\"\n- Primary button: white background, dark teal text, rounded corners 8px, padding ~12px 28px, font-weight 600, label \"Go to Polaris Web Components\".\n- Below the button, a text link: \"Continue to Polaris React\" in white with a subtle underline.\n\nOverall vibe: a calm, starry night-sky deprecation notice with a glowing Polaris-style star icon, clean and centered.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.Frame_DarkModeIcon__ZX2zl` → animation: Frame_slide-down__WiYgV 0.3s ease 1 normal\n- `div.InterstitialModal_Overlay__5HBZV` → animation: InterstitialModal_fadeIn__e3b_1 0.4s ease-in-out 1 normal\n- `div.InterstitialModal_Star__3ULFw` → animation: InterstitialModal_twinkle__5_RKG 2.75346s ease-in-out 1.64517s infinite normal\n- `div.InterstitialModal_Modal__MjD5T` → animation: InterstitialModal_slideUp__E_tIq 0.5s ease-out 1 normal\n- `div.InterstitialModal_BackgroundStarBottom__Qhz6m` → animation: InterstitialModal_backgroundStarBottomSink__Y65Bw 2s ease-out 0.3s 1 normal forwards\n- `div.InterstitialModal_BackgroundStarTop__USNm7` → animation: InterstitialModal_backgroundStarTopSink__qT8FW 2s ease-out 0.3s 1 normal forwards\n- `div.InterstitialModal_MainStar__TkNvQ` → animation: InterstitialModal_starRise__RWvS4, InterstitialModal_starFloat__Ry606 1.5s, 3s ease-out, ease-in-out 0.3s, 2s 1, infinite normal, normal forwards, none\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.Frame_PolarisUnifiedCta__N2WIF` → transition: transform 0.2s ease-out\n- `a` → transition: box-shadow, scale 0.3s, 0.3s ease, ease-in-out 0s, 0s\n- `span.Frame_NavItem__FmKTU` → transition: box-shadow 0.2s linear\n- `button.InterstitialModal_SecondaryLink__uUB33` → transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1)\n- `div` → transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1)\n- `svg` → transition: background-color, color 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `:where(.styles-for-site-but-not-polaris-examples *)`:\n  **hover:** scale: 1.01; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; opacity: 1\n  **focus:** transform: translateY(0px)\n- `.InterstitialModal_PrimaryButton__kpnLm`:\n  **hover:** background: #f0f0f0!important; background-color: rgb(240, 240, 240) !important\n  **active:** background: #e0e0e0!important; background-color: rgb(224, 224, 224) !important\n  **focus:** border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red\n- `.InterstitialModal_SecondaryLink__uUB33`:\n  **hover:** opacity: 1\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n  **focus-visible:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `#dux-privacy .button`:\n  **hover:** background-color: rgb(0 0 0); color: rgb(255, 255, 255); border-color: rgb(122 235 159); border-top-color: rgb(122, 235, 159); border-right-color: rgb(122, 235, 159); border-bottom-color: rgb(122, 235, 159); border-left-color: rgb(122, 235, 159)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes p-motion-keyframes-bounce  {\n  0%, 65%, 85%  {\n  transform: scale(1);\n  } 75%  {\n  transform: scale(0.85);\n  } 82.5%  {\n  transform: scale(1.05);\n  }\n}\n@keyframes p-motion-keyframes-fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes p-motion-keyframes-pulse  {\n  0%, 75%  {\n  transform: scale(0.85);\n  opacity: 1;\n  } 100%  {\n  transform: scale(2.5);\n  opacity: 0;\n  }\n}\n@keyframes p-motion-keyframes-appear-above  {\n  0%  {\n  transform: translateY(var(--p-space-100));\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes p-motion-keyframes-appear-below  {\n  0%  {\n  transform: translateY(calc(var(--p-space-100)*-1));\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes Polaris-Checkbox--pathAnimation  {\n  0%  {\n  stroke-dashoffset: 2;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut  {\n  0%  {\n  transform: translateX(var(--p-space-100));\n  } 80%  {\n  transform: translateX(var(--p-space-100));\n  } 100%  {\n  transform: translateX(var(--p-space-500));\n  }\n}\n@keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon  {\n  0%  {\n  transform: translateX(calc(var(--p-space-500)*-1));\n  opacity: 0;\n  } 40%  {\n  opacity: 0;\n  } 50%  {\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Polaris-Navigation__snappy--grow  {\n  0%  {\n  margin-bottom: -10%;\n  opacity: 0;\n  } 100%  {\n  margin-bottom: 0px;\n  opacity: 1;\n  }\n}\n@keyframes GlobalSearch_search-results-enter__p_rD8  {\n  0%  {\n  transform: scale(0.98);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes SearchResultHighlight_fade-in__3_Z2U  {\n  0%  {\n  transform: scale(0.95);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes Frame_fade-in__eoxEF  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes InterstitialModal_fadeIn__e3b_1  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes InterstitialModal_sunsetDarken__kcJ54  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深青蓝径向渐变星空、发光四角星 sparkle、居中废弃通知、白底深青按钮。内联真实 @keyframes InterstitialModal_fadeIn/slideUp/starFloat/twinkle 与 p-motion-keyframes-*；背景星 JS 随机生成 + twinkle 动画。滚动/悬停过渡(transform .2s ease-out / box-shadow .3s)照抄。动画复现一致。"},{"id":"primer","name":"Primer","fw":["React"],"theme":"GitHub / 开发者工具","vendor":"GitHub","link":"https://primer.style","kind":"item","img":"previews/primer.png","chips":["Button","TextInput","Select","Checkbox","Radio","Switch","Form","FileUpload","Table"],"repo":"https://github.com/primer/react","desc":"GitHub 官方设计系统，开发者工具与文档站同款风格。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Primer design system homepage above-the-fold at 1280px width.\n\nGlobal style: very light gray background (#f6f8fa), dark text (#1f2328), link accent blue (#0969da). Font stack: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\".\n\nTop navigation bar (~56px, white background, bottom border 1px solid #d1d9e0, flex justify-between align-center, padding 0 32px):\n- Left: GitHub inverted \"Octocat\" logo icon (white cat silhouette inside a black circle) followed by the text \"Primer\" in bold dark text (~16px).\n- Right: horizontal nav links \"Product UI\", \"Brand UI\", \"Octicons\", \"Accessibility\", \"Brand Toolkit\" (with a small asterisk/superscript on \"Toolkit\"), then a small circular theme icon button, then a light gray bordered button \"Give feedback\" with rounded corners 6px.\n\nHero section (centered, light gray background, top padding ~60px, padding-bottom ~50px):\n- Very large bold centered headline \"Primer\" (~56px, black).\n- Centered subline \"The design system for GitHub\" (~18px, muted gray #57606a) below it.\n- In the top-right corner behind the hero, place abstract colorful geometric shapes: a large blue (#3572a5) irregular blob/circle, a teal/green (#2dba4e) curved shape, and a lighter blue (#79c0ff) rounded shape, partially off-screen, overlapping like a modern abstract art illustration.\n\nCards section (below hero, on same light gray background, two large white cards side by side with gap ~24px, max-width ~1160px, margin auto, padding 0 32px 60px):\n- Left card (white, rounded 16px, padding 32px, subtle shadow, flex:1):\n  - Heading \"Build UI at GitHub\" on first line, \"with Primer Product UI\" on second line (~28px, bold dark).\n  - Below, a blue link \"Get started with Product UI\" with a right-pointing chevron.\n  - At the bottom of the card, add simple UI component illustrations: a light gray browser window/chrome bar, a small green success toast with checkmark and text \"Success!\", a small purple button labeled \"Button\", and a few faint gray connected circles/line drawing to the left to suggest component diagrams.\n- Right card (white, rounded 16px, padding 32px, subtle shadow, flex:1):\n  - A grid of 6 stylized GitHub Octocat/brand icon variations (3 columns x 2 rows): top row outline cat, solid blue cat, solid teal/blue cat; bottom row outline side profile cat, solid blue side profile cat, solid blue/teal gradient side profile cat. Keep them simple SVG-style icons with rounded shapes.\n  - Below the icons, heading \"Create for GitHub\" on first line and \"using the Brand toolkit\" on second line (~28px, bold dark).\n\nOverall look: clean, modern GitHub design system landing page, light and airy with white cards and colorful abstract accents.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.prc-Button-ButtonBase-9n-Xk.prc-Button-IconButton-fyge7` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.Primer_Brand__Bento-module__Bento__Item___fM9oe.Primer_Brand__Bento-module__Bento__Item--bgColor-subtle___rIDKo` → transition: transform 0.4s cubic-bezier(0.01, 0.73, 0.08, 0.93)\n- `svg` → transition: transform 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.SkipLink-module__QsmcLW__SkipLink`:\n  **hover:** text-decoration: underline\n- `.Header-module__JCpHOG__SiteTitle`:\n  **hover:** text-decoration: underline\n- `.Navigation-module__z92daa__Link`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___kwg9g  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-out___fhdxi  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___pfcD5  {\n  0%  {\n  scale: 0.98;\n  box-shadow: rgba(1, 4, 9, 0.15) 0px 8px;\n  } 100%  {\n  scale: 1;\n  box-shadow: rgba(1, 4, 9, 0.15) 0px 8px 24px;\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___zQfEQ  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.6) translateY(-8px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___xgh8U  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__AnchorNav-module__fade-in___KfA_2  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___P9_uK  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-top___hI7o9  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__TextRevealAnimation-module__wipe___Mztl1  {\n  0%  {\n  transform: scaleX(1);\n  } 100%  {\n  transform: scaleX(0);\n  }\n}\n@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n@keyframes Primer_Brand__Tooltip-module__tooltip-appear___OeSNz  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__SubNav-module__fade-in___t8Rrr  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__SubNav-module__fade-in-down___LOqE1  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、色值、文案匹配；v2 改进了抽象图形、组件示意图与品牌图标网格。14 个关键帧完整保留。"},{"id":"baseweb","name":"Base Web","fw":["React"],"theme":"产品级","vendor":"Uber","link":"https://baseweb.design","kind":"item","img":"previews/baseweb.png","chips":["Button","Input","Select","Checkbox","Radio","Slider","Form","FileUploader","Table"],"repo":"https://github.com/uber/baseweb","desc":"Uber 基于 Styletron 的 React 组件库，主题可深度定制。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Base Web React UI framework documentation homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000), system font stack. Clean, minimal documentation layout.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #e5e5e5, flex justify-between align-center, padding 0 24px):\n- Left: Base Web logo — a small geometric diamond shape (square rotated 45°) made of black lines, with the word \"Base\" in bold black text to the right and a smaller \"Web\" stacked below/inside the logo mark. Then a version dropdown \"v18.2.0\" with a small downward chevron, followed by nav links \"Blog\" and \"Components\".\n- Right: a search input box with a magnifying glass icon and placeholder \"Search documentation\" (light gray border, rounded), then a GitHub icon button, a hamburger menu icon button, and a lightbulb/theme icon button.\n\nLayout: two-column docs layout. Left sidebar (fixed width ~260px, white background, right border 1px solid #e5e5e5, padding 16px 0, font-size 13px):\n- Section heading \"GETTING STARTED\" in small uppercase gray, bold, with items below: \"Home\" (active, highlighted with a light gray background bar and black text), \"Setup\", \"Learn Base Web\".\n- Section heading \"GUIDES\" in small uppercase gray, items: \"Internationalization\", \"Bidirectionality\", \"Theming\", \"Styling\", \"Overrides\", \"Colors\", \"API Cheat Sheet\".\n- Section heading \"COMPONENTS\" in small uppercase gray, then subsection \"INPUTS\" in smaller uppercase gray, with items: \"Button\", \"Button Dock\", \"Button Group\", \"Button Timed\", \"Checkbox\", \"Checkbox-v2\".\n\nMain content area (right of sidebar, padding 32px 40px, white background):\n- A small green badge labeled \"New\" with a light green background (#e6f7f0) and green text (#1a7f37), followed by the text \"What's new in Base Web 16?\" in black with a small arrow/chevron on the right.\n- Large bold heading \"Base Web React UI framework\" (~28px).\n- Subcopy below: \"Base Web is a foundation for initiating, evolving, and unifying web products.\" (~14px, gray).\n- Two white cards with light gray border (#e5e5e5), rounded 8px, padding 20px, side by side (gap 20px), each taking ~50% width:\n  - Card 1: heading \"Setup Base Web\", body text \"Base Web is distributed as an npm package. As Base Web is built on top of a CSS-in-JS engine, all you need is the dependencies from npm.\", and a black button at the bottom with white text \"Setup Base Web\".\n  - Card 2: heading \"Learning Base Web\", body text \"The best way to learn Base Web is to start building an application using it. Click on the link below to find 2 apps built using Base Web (one simple, one more complex).\", and a black button at the bottom with white text \"Learn more\".\n- Below the cards, start a section with heading \"Components\" (~22px, bold), followed by body text mentioning \"Datepicker\" and \"Layer\" as underlined links, and a link to the \"component gallery\".\n\nOverall vibe: clean, minimal, black-and-white documentation site with sharp typography and simple bordered cards.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.css-DGmGm` → transition: background 0.2s cubic-bezier(0, 0, 1, 1)\n- `a.css-dLzUvf` → transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-hjBPNt`:\n  **hover:** color: rgb(75, 75, 75)\n  **active:** color: rgb(94, 94, 94)\n- `.css-eSkqEk`:\n  **focus:** outline: rgb(39, 110, 241) solid 3px; outline-color: rgb(39, 110, 241)\n- `.css-DGmGm`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-lhiqvA`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-fzNYDq`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-eFhhiP`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-fCanch`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-IohLN`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、色值、文案匹配；v2 修正了 New 大小写、全宽按钮、侧边栏激活态左边框与组件说明文案。过渡规则已保留。"},{"id":"gestalt","name":"Gestalt","fw":["React"],"theme":"产品级","vendor":"Pinterest","link":"https://gestalt.pinterest.systems","kind":"item","img":"previews/gestalt.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Form","FileUploader","Table"],"repo":"https://github.com/pinterest/gestalt","desc":"Pinterest 设计系统，强调一致的产品体验。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Gestalt (Pinterest's Design System) homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000). Typography: a bold, friendly sans-serif (use system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif). Clean Pinterest-style landing page.\n\nTop navigation bar (~56px, white background, flex justify-between align-center, padding 0 32px):\n- Left: Gestalt logo — a circular/wedge icon made of three colored segments (blue, purple, and pink/green), like a small pie chart, followed by the word \"Gestalt\" in bold black text (~18px).\n- Right: a moon icon button (theme toggle), a light gray pill button \"Gestalt 1.0\" with a small arrow/↗ after it, and a bright red pill button \"Login\" with white text.\n\nHero section (centered, white background, padding ~80px 32px 60px):\n- Huge bold centered headline: \"Pinterest's Design System\" on two lines (~52px, very bold, line-height 1.05).\n- Centered subcopy below: \"We're here to help you build experiences that inspire people to create the life they love\" (~16px, gray #444, max-width ~520px, line-height 1.5).\n- Below the subcopy, an image collage of rounded rectangles (radius ~24px) arranged in an overlapping, playful Pinterest-style layout. Include:\n  - A tall vertical image on the left (hands/nails photo) with rounded corners.\n  - A central top image (person in sunglasses/green stripes) with rounded corners.\n  - A right-side image (hair with colorful clips against a blue sky) with rounded corners, slightly larger.\n  - A small bottom image (food/plant) centered below the central image.\n  - A blue toggle-switch icon to the left of the central image.\n  - A blue pushpin icon near the bottom center between images.\n  - A black pill badge with white text and a checkmark: \"✓ Gestalt\" near the bottom right.\n  Since no external images can be used, represent each photo as a rounded colored placeholder block with a subtle gradient and optional CSS pattern to suggest photography (e.g., skin-tone, green, blue, food-green tones). Keep the collage arrangement and overlapping feel.\n\nOverall vibe: playful, Pinterest-brand design system landing page with rounded imagery and bold typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.d3L.NLN` → transition: transform 0.085s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-link`:\n  **focus:** outline: 2px solid #000000\n- `.KuF`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes FuY  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes _Ud  {\n  0%  {\n  transform: translateX(-100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes Pmg  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@keyframes JYg  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(-100%);\n  }\n}\n@keyframes YAI  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes Yls  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes UVU  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  } 100%  {\n  opacity: var(--sema-opacity-90);\n  }\n}\n@keyframes Wl2  {\n  0%  {\n  opacity: var(--sema-opacity-90);\n  } 100%  {\n  opacity: var(--sema-opacity-0);\n  }\n}\n@keyframes W9B  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  } 100%  {\n  opacity: var(--sema-opacity-100);\n  }\n}\n@keyframes t25  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  transform: scale(0.8);\n  } 20%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(1);\n  } 40%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(0.8);\n  } 60%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(1);\n  } 80%  {\n  opacity: var(--sema-opacity-0);\n  transform: scale(0.8);\n  } 100%  {\n  opacity: var(--sema-opacity-0);\n  }\n}\n@keyframes TAT  {\n  0%  {\n  background-color: var(--comp-skeleton-color-background-default);\n  } 11.5385%  {\n  background-color: var(--comp-skeleton-color-background-highlight);\n  } 23.0769%, 100%  {\n  background-color: var(--comp-skeleton-color-background-default);\n  }\n}\n@keyframes xvO  {\n  0%  {\n  transform: translate(var(--g-start-x),var(--g-start-y)) scale(0);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes f2V  {\n  100%  {\n  transform: scale(0);\n  }\n}\n@keyframes jfh  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"v3 修正了两行标题、拼贴布局、toggle、pushpin 与 badge 位置；14 个关键帧与过渡规则已保留。图片用渐变色块替代（无法使用外部图片）。"},{"id":"antd-mobile","name":"Ant Design Mobile","fw":["React"],"theme":"移动端 / H5","vendor":"蚂蚁集团","link":"https://mobile.ant.design","kind":"item","img":"previews/antd-mobile.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","ImagePicker"],"repo":"https://github.com/ant-design/ant-design-mobile","desc":"移动端 Ant Design，组件专为拇指操作设计，支持 PWA。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ant Design Mobile homepage above-the-fold at 1280px width.\n\nGlobal style: bright blue gradient background (center #2b8df5, edges #1677ff), white text. Chinese UI library landing page. Font stack: -apple-system, system-ui, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif.\n\nTop navigation bar (~56px, transparent/blue background, white text, flex justify-between align-center, padding 0 32px):\n- Left: Ant Design Mobile logo — a stylized blue \"A\" made of two lines with two small colored dashes (red and blue) to the right, followed by text \"Ant Design Mobile\" in white bold, and a small gray version pill \"v5.42.2\".\n- Center: a search input box with light blue/transparent background, rounded corners, placeholder \"搜索\" and a small magnifying glass icon.\n- Right: nav links in white Chinese: \"指南\", \"组件\", \"资源\", \"国内镜像\", \"返回旧版\", \"发布日志\", \"GitHub\". Then an outlined \"English\" button with white border and text, rounded corners.\n\nHero section (padding ~80px 32px 100px, flex row, content on left, visual on right):\n- Left side:\n  - Large white headline \"Ant Design Mobile\" (~42px, bold).\n  - Subcopy in white Chinese: \"探索移动端 Web 的极致体验\" (~18px).\n  - Two buttons below (gap 16px): primary \"开始使用\" (blue background, white text, rounded pill), secondary \"在线体验\" (transparent background, white text, white border, rounded pill).\n- Right side: a floating composition of mobile UI components on the blue gradient:\n  - A tall phone mockup (white rounded rectangle, ~160px wide, ~320px tall) with a subtle shadow, showing the Ant Design Mobile logo inside (blue \"A\" + red/blue dashes).\n  - A calendar card floating to the left of the phone, white rounded rectangle, showing \"2022年 2月\" at the top, a 7x6 grid of day numbers, and the date \"21\" highlighted in blue.\n  - A small toggle switch floating above the calendar (colored pill with a knob).\n  - A green checkmark card floating to the right of the phone (white rounded rectangle with a green circle checkmark).\n  - A small orange avatar/user icon below the green card.\n  - Add subtle light-blue translucent circles/rectangles in the background to suggest a layered app interface.\n\nFeature cards section (white background, four columns, max-width ~1100px, centered, padding 40px 32px, gap ~24px):\n- Each card is centered, with a blue icon above, a bold Chinese title, and gray body text below.\n- Card 1: icon (layers/diamond), title \"高性能\", body \"无需配置，即可拥有最佳的包体积大小和极致的性能\".\n- Card 2: icon (sliders/pen), title \"可定制\", body \"可以高效地对组件外观进行调整或创造自己的主题\".\n- Card 3: icon (circle/atom), title \"原子化\", body \"每个组件的功能不多也不少，恰好就是你所需\".\n- Card 4: icon (target/smooth), title \"流畅感\", body \"拥有流畅的手势和细腻的动画，助力产品打造出极致体验\".\n\nBelow the cards, a section heading \"语言设计与开发资源\" in gray.\n\nOverall vibe: bright, modern Chinese mobile component library landing page with a blue gradient and floating mobile UI illustrations.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.__dumi-default-navbar-logo` → transition: opacity 0.2s ease-in-out\n- `input.__dumi-default-search-input` → transition: all 0.2s ease\n- `a` → transition: all 0.3s ease\n- `button.adm-button.adm-button-primary` → transition: opacity 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.__dumi-default-navbar-logo`:\n  **active:** opacity: 0.8\n- `.__dumi-default-search-input`:\n  **focus:** border-color: #1677ff; border-top-color: rgb(22, 119, 255); border-right-color: rgb(22, 119, 255); border-bottom-color: rgb(22, 119, 255); border-left-color: rgb(22, 119, 255)\n- `.__dumi-default-navbar nav > span > a`:\n  **hover:** color: rgb(255, 255, 255); opacity: 1\n  **active:** opacity: 0.8\n- `.__dumi-default-locale-select a`:\n  **active:** opacity: 0.8\n- `.homePage___3_GRs a`:\n  **active:** opacity: 0.8\n- `.adm-card`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px, rgba(0, 0, 0, 0.09) 0px 5px 12px 4px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes adm-spin-loading-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes adm-skeleton-loading  {\n  0%  {\n  background-position: 100% 50%;\n  } 100%  {\n  background-position: 0px 50%;\n  }\n}\n@keyframes adm-shake-horizontal  {\n  0%  {\n  transform: translateX(0px);\n  } 10%  {\n  transform: translateX(-4px);\n  } 20%  {\n  transform: translateX(5px);\n  } 30%  {\n  transform: translateX(-1px);\n  } 40%  {\n  transform: translateX(8px);\n  } 50%  {\n  transform: translateX(0px);\n  } 60%  {\n  transform: translateX(-8px);\n  } 70%  {\n  transform: translateX(1px);\n  } 80%  {\n  transform: translateX(-5px);\n  } 90%  {\n  transform: translateX(4px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes loading-rotate  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes adm-caret-blink  {\n  0%  {\n  opacity: 1;\n  } 60%  {\n  opacity: 1;\n  } 80%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes dropDown  {\n  0%  {\n  margin-top: -100%;\n  } 100%  {\n  margin-top: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 改进了 Logo、手机模型、日历卡片、分段 toggle 与特性卡片的重叠白色容器；6 个关键帧与 4 条过渡规则已保留。"},{"id":"react-bootstrap","name":"React Bootstrap","fw":["React"],"theme":"Bootstrap 风格","vendor":"React Bootstrap","link":"https://react-bootstrap.github.io","kind":"item","img":"previews/react-bootstrap.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/react-bootstrap/react-bootstrap","desc":"Bootstrap 5 的 React 重写，无 jQuery 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Bootstrap homepage above-the-fold at 1280px width.\n\nGlobal style: dark background (#1a1d21 or #212529), white/light gray text, purple accent (#7b2ff7). Font stack: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif.\n\nTop navigation bar (~56px, purple gradient background from #7b2ff7 to #9c4dff, white text, flex justify-between align-center, padding 0 24px):\n- Left: React Bootstrap logo — a small rounded square with a stylized \"RB\" letters, followed by \"React Bootstrap\" in bold white text. Then nav links \"Getting Started\" and \"Components\" in white.\n- Right: version dropdown \"v3.0.0-beta.5 (Bootstrap 5)\" with a small chevron, \"GitHub\" link with an external-link icon, a moon/theme icon button, and a dark search button labeled \"Search ⌘K\" (black background, rounded, with a magnifying glass and the ⌘K shortcut).\n\nHero section (centered, dark background, padding ~80px 32px 40px):\n- Large centered white headline \"React Bootstrap\" (~42px, bold).\n- Centered light gray subcopy \"The most popular front-end framework, rebuilt for React.\" (~18px, color #adb5bd).\n- Two centered purple buttons with rounded corners 6px, gap 16px, white text, font-weight 600:\n  - \"Get started\"\n  - \"Components\"\n- Below the buttons, centered text \"Current version: 3.0.0-beta.5\" in gray (#adb5bd).\n- Below that, a small advertisement card (dark gray/black background, rounded 4px, border 1px solid #333, max-width ~400px, margin auto, padding 12px, display flex):\n  - Left: a small square ad image (black background with a hand icon and colorful text).\n  - Right: ad text \"Spike forgiveness. Zero overages. Zero surprise bills. Free for 30 days, no card required.\" in small white/light gray text, and a tiny \"ADS VIA CARBON\" label at the bottom.\n\nFeatures section (dark background, three-column layout, max-width ~1100px, margin auto, padding 40px 32px, gap 32px):\n- Column 1: heading \"Rebuilt with React\" white bold, body paragraphs in gray #adb5bd about replacing Bootstrap JavaScript with true React components and jQuery-free.\n- Column 2: heading \"Bootstrap at its core\", body paragraphs about compatibility and Bootstrap stylesheet.\n- Column 3: heading \"Accessible by default\", body paragraphs about accessibility and component control.\n\nOverall vibe: dark, developer-focused React library landing page with Bootstrap branding and purple accents.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.skipToContent_fXgn` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `button.clean-btn.toggleButton_yw5v` → transition: background 0.2s ease\n- `button.DocSearch.DocSearch-Button` → transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.navbar-sidebar__backdrop` → transition: opacity, visibility 0.2s ease-in-out\n- `a.button.button--primary` → transition: color, background, border-color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.menu__link`:\n  **hover:** color: rgb(26, 26, 26)\n- `.accordion-flush > .accordion-item > .accordion-collapse`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.dropdown__menu`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes b  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes c  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes d  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes e  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes f  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"布局、配色、字体与预览高度一致，导航栏紫色渐变、Hero区域、广告卡片和三栏特性均还原到位。逐字复制了全部6个@keyframes及hover/transition过渡规格，入场淡入动画已实现。"},{"id":"ariakit","name":"Ariakit","fw":["React"],"theme":"无样式 / a11y","vendor":"Ariakit","link":"https://ariakit.org","kind":"item","img":"previews/ariakit.png","chips":["Button","Checkbox","Radio","Switch","Form","Select","Combobox","Dialog","Popover"],"repo":"https://github.com/ariakit/ariakit","desc":"低层级无障碍 React 组件原语，键盘导航一流。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ariakit homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000), blue accent (#007acc or similar), with gradient underlines (blue to purple/pink). Font stack: __GeistSans, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #e8e8e8, flex justify-between align-center, padding 0 32px):\n- Left: Ariakit logo — a blue rounded square with a white stylized lowercase \"a\" inside, followed by the text \"ariakit\" in bold dark lowercase. Then a version pill/button \"v0.4.32\" with a small sparkle/asterisk icon and a downward chevron. Then a \"Browse\" button with a magnifying glass icon and \"⌘K\" shortcut.\n- Right: a plain text link \"Unlock Ariakit Plus\", a bell notification icon button (with a tiny blue dot badge), and a moon/theme icon button.\n\nHero section (centered, white background, padding ~90px 32px 50px):\n- Very large bold centered headline \"Build accessible web apps with React\" on two lines (~58px, black, line-height 1.05, max-width ~700px).\n- Centered subcopy (~18px, gray #555, max-width ~640px, line-height 1.6): \"Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps.\" Underline the words \"unstyled\", \"primitive\", and \"styled examples\" with colorful gradient underlines (blue to pink/purple). Each underline should be a short gradient bar (roughly 2-3px thick) beneath the word.\n- Two centered buttons below subcopy (gap 20px):\n  - Primary \"Get started\" with blue background (#007acc), white text, rounded 8px, padding ~12px 24px.\n  - Secondary \"Explore components\" with transparent background, black text, and a right arrow \"→\".\n\nComponent showcase section (below hero, three large gray cards with rounded corners, gap ~20px, max-width ~1100px, margin auto, padding 0 32px 60px):\n- Left card: light gray (#f3f4f6) rounded rectangle with a simple dropdown/combobox example: a search input \"Search for users\", a list of users (\"Harry Poe\", \"John Doe\"), and \"Esc\"/\"Delete\" hints on the right.\n- Center card: light gray rounded rectangle with a simple data table header showing \"Account type\" and \"Address\" columns.\n- Right card: light gray rounded rectangle with two user profile rows (avatar circles with initials \"J\" and \"H\", names \"John Doe\", \"Harry Poe\", emails), a dropdown arrow, and an \"Actions\" button.\n\nOverall vibe: clean, modern, minimalist open-source React library landing page with gradient accents and subtle component previews.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.absolute.right-0` → animation: enter 0.15s ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.inset-0` → transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.relative.rounded-xl` → transition: transform, filter 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus-visible\\:ariakit-outline-visible`:\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n- `.no-underline`:\n  **hover:** background-color: rgba(0, 0, 0, 0.075)\n- `.sm\\:px-8`:\n  **hover:** background-color: rgb(0, 98, 163)\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n- `.hover\\:bg-gray-150`:\n  **hover:** background-color: rgb(237, 240, 243)\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes appear  {\n  0%  {\n  display: none;\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"白色极简风格还原准确，导航栏蓝色logo、版本pill、Browse按钮均与预览一致。Hero大标题分行显示、渐变下划线（蓝→紫）效果正确，三张组件卡片布局和内容匹配良好。逐字复制了@keyframes appear及全部过渡规格，入场动画和卡片hover效果已实现。"},{"id":"react-aria","name":"React Aria Components","fw":["React"],"theme":"无样式 / a11y","vendor":"Adobe","link":"https://react-spectrum.adobe.com/react-aria","kind":"item","img":"previews/react-aria.png","chips":["Button","ToggleButton","Checkbox","Radio","Switch","TextField","Select","ComboBox","DatePicker"],"repo":"https://github.com/adobe/react-spectrum","desc":"Adobe 出品的组件原语，行为/无障碍开箱即用，样式自定。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Spectrum 404 error page above-the-fold at 1280px width.\n\nGlobal style: very light gray/white background (#f8f8f8 / #ffffff), dark gray text (#333333). Font stack: Adobe Clean, Source Sans Pro, -apple-system, system-ui, sans-serif.\n\nTop navigation bar (~56px, white/light gray background, border-bottom 1px solid #e5e5e5, flex justify-between align-center, padding 0 24px):\n- Left: React Spectrum logo — a red Adobe \"A\"-shaped icon (stylized triangular \"A\") followed by the text \"React Spectrum\" in bold dark text.\n- Center: a large search input with rounded corners, light gray border, placeholder \"Search React Spectrum\", a magnifying glass icon on the left, and a small \"⌘K\" shortcut hint on the right.\n- Right: nav links \"Docs\", \"Releases\", \"Blog\" in dark gray, then a GitHub icon button, an Adobe icon button, and an info/help icon button.\n\nMain content (centered vertically and horizontally within the viewport, white background, text-align center):\n- A 404 icon: a simple outline of a browser window (rectangle with a top bar and small dots) with a circle containing an \"X\" overlapping the bottom-right corner. Use dark gray strokes.\n- Below the icon, a bold heading \"Error 404: Page not found\" (~22px, dark).\n- Subcopy: \"This page isn't available. Try checking the URL or visit a different page.\" (~14px, gray, max-width ~400px).\n\nFooter (fixed at bottom, small gray text, centered, border-top 1px solid #e5e5e5, padding 16px):\n- \"Copyright © 2026 Adobe. All rights reserved.\" followed by links \"Privacy\", \"Terms of Use\", \"Cookies\", \"Do not sell my personal information\" separated by slashes or vertical bars.\n\nOverall vibe: clean, minimal Adobe 404 page with a centered error illustration and footer.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a._Le151.Oh151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.15s cubic-bezier(0.45, 0, 0.4, 1)\n- `svg` → transition: opacity, transform 0.2s, 0.2s ease-out, ease-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Z8Un9b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes uw9JJd  {\n  0%, 100%  {\n  stroke-dashoffset: 75px;\n  } 30%  {\n  stroke-dashoffset: 20px;\n  }\n}\n@keyframes chyGla_slide-in  {\n  0%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes chyGla_slide-out  {\n  100%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes yzKlUb  {\n  0%  {\n  outline-width: 0px;\n  transform: scale(1);\n  } 50%  {\n  outline-width: 8px;\n  transform: scale(1.04);\n  } 100%  {\n  outline-width: 0px;\n  transform: scale(1);\n  }\n}\n@keyframes zamT8b  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  width: 0px;\n  transform: translateY(calc(-100% - 12px));\n  }\n}\n@keyframes XYaG5b  {\n  0%  {\n  box-shadow: none;\n  background-color: var(--base-bg);\n  } 100%  {\n  box-shadow: var(--shadow);\n  background-color: var(--layer-2-bg);\n  }\n}\n@keyframes nToi3b  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(100% + 12px));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes AmkoXc  {\n  0%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes HaKxcb  {\n  100%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes VHPsfc  {\n  0%  {\n  transform: translate(-70%) scaleX(0.7);\n  } 100%  {\n  transform: translate(100%) scaleX(0.7);\n  }\n}\n@keyframes reCXe  {\n  0%  {\n  transform: translate(100%) scaleX(0.7);\n  } 100%  {\n  transform: translate(-70%) scaleX(0.7);\n  }\n}\n@keyframes EFZ7wb  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 15.15%  {\n  transform: translate(0px, 0px);\n  } 16.67%  {\n  transform: translateY(-1.2em);\n  } 31.82%  {\n  transform: translateY(-1.2em);\n  } 33.33%  {\n  transform: translateY(-2.4em);\n  } 48.48%  {\n  transform: translateY(-2.4em);\n  } 50%  {\n  transform: translateY(-3.6em);\n  } 65.15%  {\n  transform: translateY(-3.6em);\n  } 66.67%  {\n  transform: translateY(-4.8em);\n  } 81.82%  {\n  transform: translateY(-4.8em);\n  } 83.33%  {\n  transform: translateY(-6em);\n  } 98.48%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(-7.2em);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Adobe风格404页面还原准确：红色A形logo、居中搜索栏、浏览器窗口+X圆形图标错误提示、底部版权信息均与预览一致。逐字复制了全部13个@keyframes（含Z8Un9b旋转、uw9JJd虚线动画、EFZ7wb步进滚动等）及SVG过渡规格，入场淡入上浮动画已实现。"},{"id":"element-plus","name":"Element Plus","fw":["Vue"],"theme":"企业级 / 后台","vendor":"饿了么 / Element","link":"https://element-plus.org","kind":"item","img":"previews/element-plus.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/element-plus/element-plus","desc":"Vue 3 生态扛把子，国内使用率最高，后台 CRUD 首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Element Plus homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text (#303133), blue accent (#409eff). Font stack: Inter, \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Microsoft YaHei\", sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #ebeef5, flex justify-between align-center, padding 0 32px):\n- Left: Element Plus logo — a blue hexagon outline with a subtle 3D effect, followed by the text \"Element\" in blue (#409eff) with a small \"+\" superscript, and a light blue version pill \"2.14.3\".\n- Center: a search input with rounded border, placeholder \"Search\", a magnifying glass icon, and a small \"⌘K\" shortcut badge.\n- Right: nav links \"Guide\", \"Component\", \"Resource\", \"Playground\" in dark gray, then a theme toggle icon, a language/translate icon (Chinese character \"文\"), and a GitHub icon.\n\nHero section (centered, white background, padding ~70px 32px 40px):\n- Large bold centered headline \"Element Plus\" (~46px, dark, font-weight 700).\n- Centered subcopy \"A Vue 3 based component library for designers and developers\" (~16px, gray #606266, margin-bottom 40px).\n- Below, a large SVG/CSS illustration of a dashboard interface (max-width ~780px, centered):\n  - A browser window frame with a blue title bar at the top containing three small colored dots (red, yellow, green) on the left and an address bar on the right.\n  - Inside the browser window, a light blue/white layout with a sidebar menu on the left, a content area with a blue square/card, a horizontal bar chart, and a wavy line graph.\n  - Overlay a small blue tooltip/card with rounded corners and white lines representing text.\n  - Overlay a small white card in the bottom-left with a blue donut chart and lines.\n  - Overlay a small white card in the top-right with a blue button and lines.\n  - In the bottom-right corner of the illustration, add a small person figure sitting cross-legged with a laptop (simple flat illustration: blue shirt, dark hair, gray laptop).\n  - Keep the illustration in soft blues and grays, flat vector style, with subtle shadows.\n\nOverall vibe: clean, professional Vue component library landing page with a friendly dashboard illustration.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.DocSearch.DocSearch-Button` → transition: background-color 0.2s ease\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.link-item.link` → transition: color 0.3s ease\n- `div.theme-toggler-content.theme-toggler` → transition: border-color, background-color 0.3s, 0.2s ease, ease 0s, 0s\n- `span.el-switch__core` → transition: border-color, background-color 0.3s, 0.3s ease, ease 0s, 0s\n- `div.el-switch__action` → transition: all 0.3s ease\n- `div.parallax-container` → transition: all 0.3s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.home-page .el-card a`:\n  **hover:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotating  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes v-modal-in  {\n  0%  {\n  opacity: 0;\n  }\n}\n@keyframes v-modal-out  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes dialog-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes dialog-fade-out  {\n  0%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  }\n}\n@keyframes modal-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes modal-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes viewer-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes viewer-fade-out  {\n  0%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  }\n}\n@keyframes msgbox-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes progress  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 32px 0px;\n  }\n}\n@keyframes indeterminate  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes striped-flow  {\n  0%  {\n  background-position: -100% center;\n  } 100%  {\n  background-position: 100% center;\n  }\n}\n@keyframes el-skeleton-loading  {\n  0%  {\n  background-position: 100% 50%;\n  } 100%  {\n  background-position: 0px 50%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Element Plus首页还原准确：蓝色六边形logo、版本pill、搜索栏、导航链接均与预览一致。Hero区域大标题+副标题居中显示，SVG仪表盘插图包含浏览器窗口（红黄绿点+地址栏）、侧边栏、柱状图/折线图、蓝色tooltip卡片、左下环形图卡片、右上白色卡片及右下人物插画。逐字复制了全部16个@keyframes含rotating/dialog-fade-in/out/modal-fade等，入场动画和hover过渡已实现。"},{"id":"naive-ui","name":"Naive UI","fw":["Vue"],"theme":"现代 / TS 友好","vendor":"TuSan (尤雨溪推荐)","link":"https://www.naiveui.com","kind":"item","img":"previews/naive-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/tusen-ai/naive-ui","desc":"全 TS + Composition API，零外部依赖，主题系统基于 CSS 变量。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Naive UI homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text (#33354c), green accent (#18a058). Font stack: v-sans, system-ui, -apple-system, \"Segoe UI\", sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #f0f0f0, flex justify-between align-center, padding 0 32px):\n- Left: Naive UI logo — a green stylized \"N\" shape (two curved/angled strokes), followed by the text \"Naive UI\" in bold dark text.\n- Center-left: nav links \"首页\" (active, green), \"文档\", \"组件\", and a search input with placeholder \"搜索\" (light border, rounded 4px).\n- Right: text links \"English\", \"深色\" (dark mode), \"GitHub\", and a small version number \"2.44.1\" in gray.\n\nHero section (centered, white background, padding ~120px 32px, position relative):\n- Very large bold centered headline \"Naive UI\" (~64px, very bold, black).\n- Centered Chinese subline: \"一个 Vue 3 组件库\" (~16px, gray).\n- Centered second subline: \"比较完整，主题可调，使用 TypeScript，快，有点意思\" (~14px, gray, max-width ~360px, line-height 1.6).\n- Two centered buttons below (gap 14px):\n  - \"换个主题\" — white background, light gray border, dark text, rounded 4px, padding ~8px 16px.\n  - \"开始使用\" — green background (#18a058), white text, rounded 4px, padding ~8px 16px.\n- Decorative abstract shapes: on both left and right sides of the hero, place clusters of rounded pill/rectangle shapes in bright colors (green #18a058, yellow #f0a020, blue #2080f0, red #d03050). Shapes should be horizontally oriented, overlap each other, and partially extend off-screen. Add small circular dots in matching colors around the shapes.\n- In the bottom-right corner of the viewport, add a small floating circular button with a magic-wand/sparkles icon (white icon on light gray/white circular background with subtle shadow).\n\nOverall vibe: playful, colorful, modern Vue 3 component library landing page with bold abstract decorations and clean typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.n-element` → transition: color, background-color, box-shadow 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-layout.n-layout--absolute-positioned` → transition: box-shadow, background-color, color 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-layout-header.n-layout-header--static-positioned` → transition: color, background-color, box-shadow, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `div.n-text.ui-logo` → transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-menu.n-menu--horizontal` → transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-menu-item-content.n-menu-item-content--selected` → transition: background-color, padding-left, border-color 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-menu-item-content-header` → transition: color, opacity 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `input.n-input__input-el` → transition: -webkit-text-fill-color, caret-color, color, text-decoration-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `div.n-input__border` → transition: box-shadow, border-color 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `button.n-button.n-button--default-type` → transition: color, background-color, opacity, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `path` → transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-button__border` → transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-layout-footer.n-layout-footer--static-positioned` → transition: box-shadow, color, background-color, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes button-wave-spread  {\n  0%  {\n  box-shadow: 0 0 0.5px 0 var(--n-ripple-color);\n  } 100%  {\n  box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color);\n  }\n}\n@keyframes button-wave-opacity  {\n  0%  {\n  opacity: var(--n-wave-opacity);\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Naive UI首页还原准确：绿色N形logo、导航栏（首页激活态绿色）、搜索框、右侧链接均与预览一致。Hero区域超大标题+中文副标题居中，两个按钮（换主题描边/开始使用绿色）正确显示，左右两侧彩色抽象装饰形状（绿黄蓝红圆角pill和圆形）分布自然，右下角悬浮魔杖按钮已实现。逐字复制了button-wave-spread/button-wave-opacity关键帧及n-element系列过渡规格。"},{"id":"vuetify","name":"Vuetify","fw":["Vue"],"theme":"Material Design 3","vendor":"Vuetify","link":"https://vuetifyjs.com","kind":"item","img":"previews/vuetify.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/vuetifyjs/vuetify","desc":"Vue 的 Material Design 标杆，生态最成熟，Material You 动态主题。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Vuetify homepage above-the-fold at 1280px width.\n\nGlobal style: very light blue/white gradient background (#e8f2fc to #ffffff), dark text (#1a1a1a), blue accent (#1867c0). Font stack: Roboto, -apple-system, system-ui, sans-serif.\n\nTop announcement banner (~44px, dark navy/black background #0f172a, white text, flex justify-between align-center, padding 0 24px):\n- Left: Vuetify icon (blue droplet/\"V\" shape) followed by text \"Vuetify0 has reached Release Candidate\" and smaller subtext \"The API is frozen and the v1 stable set is locked — 50 components, 71 composables, and the final stretch to v1.0.\"\n- Right: a white-bordered button \"Read the announcement\" with a small arrow icon, and a small X close button.\n\nTop navigation bar (~56px, white/very light background, border-bottom 1px solid #e0e0e0, flex justify-between align-center, padding 0 24px):\n- Left: Vuetify logo — a blue stylized \"V\" droplet, followed by \"VUETIFY\" in bold blue text. Then a search input with placeholder \"Search\" and a \"⌘K\" shortcut.\n- Center/Right: nav links \"Blog\", \"Learn\", \"Support\", \"Ecosystem\", \"Playground\", a bordered \"One\" button (rounded pill), then icon buttons (shopping bag, GitHub, translate, settings), and a blue \"Login\" button with a right arrow.\n\nHero section (padding ~80px 32px, max-width ~1100px, margin auto, flex row with content on left and code window on right):\n- Left side:\n  - A small badge \"#1 Vue UI Library\" with light blue background and blue text, rounded pill.\n  - Large headline: \"A complete\" in dark, \"design system\" in blue (#1867c0), \"that works.\" in dark, all on separate lines (~52px, bold).\n  - Subcopy: \"Built by the Vue Community, Backed by Sponsors.\" (~18px, gray).\n  - Two buttons: primary \"Get Started\" (blue background, white text, rounded 6px), secondary \"Why Vuetify?\" (white background, light border, blue text, with a small downward chevron).\n  - Below buttons: a CLI command pill \"npm create vuetify\" (with a small chevron on the left) and a version badge \"Latest 4.1.4\" (with a tag icon).\n- Right side: a dark code editor window (~420px wide) with rounded 8px corners, a dark title bar with three colored dots (red, yellow, green), and syntax-highlighted Vue template code:\n  - <template>, <v-app>, <v-container>, <v-btn color=\"primary\">, \"Hello Vuetify!\", </v-btn>, </v-container>, </v-app>, </template>\n  - Use colored syntax: pink for tags, blue for attributes, green for strings, gray for plain text.\n\nOverall vibe: modern, developer-focused Vue UI framework landing page with a clean light gradient, code preview, and prominent CTA.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.v-toolbar.v-toolbar--collapse-start` → transition: height, width, transform, max-width, left, right, top, bottom, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.v-responsive__sizer` → transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.v-list-item__overlay` → transition: opacity, color 0.2s ease-in-out\n- `div.v-avatar.v-theme--light` → transition: width, height 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.v-btn.v-btn--elevated` → transition: box-shadow, transform, opacity, background 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.v-btn__overlay` → transition: opacity 0.2s ease-in-out\n- `span.v-btn__content` → transition: transform, opacity 0s, 0.2s ease, cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `button.v-btn.v-btn--active` → transition: all 0.2s ease\n- `main.v-main.text-center` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.v-icon-btn__content` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `i.v-icon.notranslate` → transition: opacity, font-size, width, height 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.v-card.v-card--link` → transition: box-shadow, opacity, background, --v-elevation-overlay 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.v-btn`:\n  **hover:** opacity: 1\n  **focus:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes scroll-65fa3932  {\n  0%  {\n  transform: translate(calc(1% * var(--v96e92ca6)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes metronome-example  {\n  0%  {\n  transform: scale(0.5);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes bell-shake-f0fc0275  {\n  0%, 100%  {\n  transform: rotate(0deg);\n  } 5%  {\n  transform: rotate(14deg);\n  } 10%  {\n  transform: rotate(-14deg);\n  } 15%  {\n  transform: rotate(10deg);\n  } 20%  {\n  transform: rotate(-8deg);\n  } 25%  {\n  transform: rotate(4deg);\n  } 30%  {\n  transform: rotate(0deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Vuetify首页还原准确：深色公告栏（V图标+Release Candidate文案+Read按钮+关闭）、白色导航栏（VUETIFY logo+搜索+Blog/Learn/Support/Ecosystem/Playground/One/Login）均与预览一致。左侧Hero区域含#1 badge、三行标题（design system蓝色）、两个按钮及npm/Latest元信息，右侧深色代码编辑器窗口（三色圆点+语法高亮Vue模板代码）。逐字复制了scroll/metroome/bell-shake三个@keyframes，入场动画和v-btn过渡规格已实现。"},{"id":"quasar","name":"Quasar","fw":["Vue"],"theme":"跨端 / 全家桶","vendor":"Quasar","link":"https://quasar.dev","kind":"item","img":"previews/quasar.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","DatePicker","Form"],"repo":"https://github.com/quasarframework/quasar","desc":"同一套代码编译 SPA/PWA/SSR/移动端/桌面，CLI 工程化完善。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Quasar Framework website (quasar.dev) — a Vue.js UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nBrand / site name: Quasar (logo text \"Quasar\" with a small \"Q\" mark on the left, white).\n\nOverall theme: dark, \"space / lift-off\" tech vibe. \n- Page background: #121212 (rgb(18,18,18)).\n- Top navigation bar background: #050A14 (rgb(5,10,20)), full width, sticky at top, height ~64px.\n- Navigation text color: #929397 (rgb(146,147,151)), uppercase, letter-spaced, font-size ~13px, font-family Roboto / system sans.\n\nTop nav contents (left to right):\n- \"Quasar\" wordmark (white, bold) with a circular \"Q\" logo glyph to its left (blue accent).\n- Nav links (grey, uppercase): DOCS, COMPONENTS, SPONSORS, Team, Blog, Why Quasar?, Announcements, Video Tutorials, Roadmap, Brand resources.\n- Right side controls: a circular \"menu\" icon button, a \"Getting Started\" text button, \"Tools\" text button, \"More\" text button, and a version pill labeled \"v2.21.2\" (transparent background, 1px solid border #00B4FF blue (rgb(0,180,255)), rounded 3px, white text).\n\nHero section (below nav, dark):\n- Large headline (white, bold, ~40px, Roboto): \"The enterprise-ready cross-platform VueJs framework\"\n- Subtext line (grey #929397, ~16px) describing it as the go-to Vue framework for SPA, PWA, SSR, mobile & desktop from one codebase (paraphrase: \"Sensible people choose Vue. Productive people choose Quasar.\").\n- A primary call-to-action button: background #EA5E13 (rgb(234,94,19) orange), white text, rounded 3px, label \"ARE YOU READY TO LIFT OFF?\" (uppercase).\n- Optionally a downward arrow icon button below.\n\nAccent colors: blue #00B4FF and orange #EA5E13 on a near-black background. Overall look: dark, minimal, developer-focused, with a rocket/lift-off motif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.doc-stars.doc-stars--lg` → animation: animateStar 150s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.doc-header__logo-img` → transition: transform 0.8s ease-in-out\n- `a.q-btn.q-btn-item` → transition: color 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)\n- `span.q-focus-helper` → transition: background-color, opacity 0.3s, 0.4s cubic-bezier(0.25, 0.8, 0.5, 1), cubic-bezier(0.25, 0.8, 0.5, 1) 0s, 0s\n- `span.q-btn__content.text-center` → transition: opacity 0.3s ease\n- `div.doc-search__field.rounded-borders` → transition: box-shadow, background-color 0.28s, 0.28s ease-in-out, ease-in-out 0s, 0s\n- `img.q-img__image.q-img__image--with-transition` → transition: opacity 0.28s ease-in\n- `div.q-notification.row` → transition: transform, opacity 1s, 1s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.q-btn`:\n  **hover:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes q-circular-progress-circle  {\n  0%  {\n  stroke-dasharray: 1, 400;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 400, 400;\n  stroke-dashoffset: -100px;\n  } 100%  {\n  stroke-dasharray: 400, 400;\n  stroke-dashoffset: -300px;\n  }\n}\n@keyframes q-expansion-done  {\n  0%  {\n  --q-exp-done: 1;\n  }\n}\n@keyframes q-field-label  {\n  40%  {\n  margin-left: 2px;\n  } 60%, 80%  {\n  margin-left: -2px;\n  } 70%, 90%  {\n  margin-left: 2px;\n  }\n}\n@keyframes q-autofill  {\n  100%  {\n  color: inherit;\n  background: 0px 0px;\n  }\n}\n@keyframes q-linear-progress--indeterminate  {\n  0%  {\n  transform: translate(-35%) scaleX(0.35);\n  } 60%  {\n  transform: translate(100%) scaleX(0.9);\n  } 100%  {\n  transform: translate(100%) scaleX(0.9);\n  }\n}\n@keyframes q-linear-progress--indeterminate-short  {\n  0%  {\n  transform: translate(-101%) scale(1);\n  } 60%  {\n  transform: translate(107%) scaleX(0.01);\n  } 100%  {\n  transform: translate(107%) scaleX(0.01);\n  }\n}\n@keyframes q-skeleton--fade  {\n  0%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes q-skeleton--pulse  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.85);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes q-skeleton--pulse-x  {\n  0%  {\n  transform: scaleX(1);\n  } 50%  {\n  transform: scaleX(0.75);\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes q-skeleton--pulse-y  {\n  0%  {\n  transform: scaleY(1);\n  } 50%  {\n  transform: scaleY(0.75);\n  } 100%  {\n  transform: scaleY(1);\n  }\n}\n@keyframes q-skeleton--wave  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes q-mat-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes q-notif-badge  {\n  15%  {\n  transform: translate(-25%) rotate(-5deg);\n  } 30%  {\n  transform: translate(20%) rotate(3deg);\n  } 45%  {\n  transform: translate(-15%) rotate(-3deg);\n  } 60%  {\n  transform: translate(10%) rotate(2deg);\n  } 75%  {\n  transform: translate(-5%) rotate(-1deg);\n  }\n}\n@keyframes q-notif-progress  {\n  0%  {\n  transform: scaleX(1);\n  } 100%  {\n  transform: scaleX(0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dark Quasar above-the-fold with sticky #050A14 nav, blue/orange accents, hero CTA; verbatim q-* keyframes included."},{"id":"primevue","name":"PrimeVue","fw":["Vue"],"theme":"企业级 / 30+ 主题","vendor":"PrimeTek","link":"https://primevue.org","kind":"item","img":"previews/primevue.png","chips":["Button","InputText","Select","Checkbox","Radio","ToggleSwitch","Slider","DatePicker","Form"],"repo":"https://github.com/primefaces/primevue","desc":"80+ 复杂组件，Styled/Unstyled 双模式，带可视化主题工厂。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the PrimeVue website (primevue.org) — a Vue UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, light, modern SaaS landing. \n- Page background: #F8FAFC (rgb(248,250,252)), near white with a slight cool tint.\n- Primary text color: #334155 (rgb(51,65,85)) slate.\n\nTop navigation bar (transparent / same bg, sticky, ~64px):\n- Left: \"PrimeVue\" wordmark (bold, slate, with a small square/diamond logo glyph).\n- Right: a GitHub icon link and a version pill \"v5.0.0-rc.1\" (subtle border, slate text).\n\nHero section (centered, generous whitespace):\n- A small version badge above the title: text \"primevue@5.0.0-rc.1\" (mono-ish, slate, light border pill).\n- Big headline (bold, ~52px, slate): \"Premium UI Suite for Vue\" (you may put \"Suite for Vue\" on a second line).\n- Subhead paragraph (~18px, slate, max-width ~640px): \"Enhance your web applications with PrimeVue's comprehensive suite of customizable, feature-rich and accessible UI components.\"\n- A row of decorative circular color dots representing the brand palette: dark slate (#334155), emerald (#10B981 / rgb(16,185,129)), green (#22C55E / rgb(34,197,94)), lime (#84CC16 / rgb(132,204,22)), orange (#F97316 / rgb(249,115,22)). Each a ~28px filled circle.\n\nFont: Inter / system sans. Vibe: minimal, airy, developer-tool marketing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: whouses-marquee-74e2c8dd 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `div.layout-topbar` → transition: background-color 0.5s ease\n- `button.inline-flex.items-center` → transition: outline-color, border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.px-5.lg:px-7` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.p-inputtext.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes px-fadeout  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes px-scalein  {\n  0%  {\n  opacity: 0;\n  transform: scaleY(0.8);\n  transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes px-slidedown  {\n  0%  {\n  max-height: 0px;\n  } 100%  {\n  }\n}\n@keyframes px-slideup  {\n  0%  {\n  max-height: 1000px;\n  } 100%  {\n  max-height: 0px;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-modal-enter  {\n  0%  {\n  background: transparent;\n  } 100%  {\n  background: var(--p-mask-background);\n  }\n}\n@keyframes px-animate-modal-leave  {\n  0%  {\n  background: var(--p-mask-background);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0px 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0px 100%);\n  } 20%  {\n  clip-path: polygon(0px 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0px 100%);\n  } 40%  {\n  clip-path: polygon(0px 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0px 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes color-animation  {\n  40%, 100%  {\n  background-position: -200% center;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：浅冷白 #F8FAFC 背景、sticky 导航 + v5.0.0-rc.1 药丸 + hero 大标题 + 五品牌色圆点。真实 px-fadein 0.5s ease 与 topbar 0.5s ease/link 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。slate #334155 + 品牌色一致（注：原站含 WebGL canvas 动画，此处用等价 CSS 渐变氛围近似，已注明）。"},{"id":"antdv","name":"Ant Design Vue","fw":["Vue"],"theme":"企业级 / 与 React 对齐","vendor":"阿里系","link":"https://antdv.com","kind":"item","img":"previews/antdv.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/vueComponent/ant-design-vue","desc":"与 React 版 API 对齐，支持 Vite / Nuxt，含 ProComponents。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Ant Design Vue website (antdv.com) — a Vue implementation of Ant Design. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, enterprise design-system landing.\n- Page background: #FFFFFF. Primary text: rgba(0,0,0,0.88) near-black.\n- Brand accent: Ant Design blue #1677FF. Secondary accent: a mint/green CTA #5DF2A3 (rgb(93,242,163)) with dark text #0B1021 (rgb(11,16,33)).\n\nTop navigation bar (white, sticky, ~64px, subtle bottom border #f0f0f0):\n- Left: \"Ant Design Vue\" wordmark — the \"Ant\" part can be blue, bold, ~20px, with a small geometric logo glyph.\n- Center/right nav links (dark grey, ~15px): Docs, Components, Store.\n- Far right controls: a green pill button \"Get Started Free\" (bg #5DF2A3, dark text, rounded 6px, bold), a \"中 文\" outlined button (white bg, 1px border #d9d9d9, rounded 4px), and a \"More\" outlined button.\n\nHero / main section (white, centered or left-aligned, generous padding):\n- Large heading (bold, ~40px): \"Ant Design Vue\" on one line and \"Overview\" as a secondary line.\n- Subhead (~17px, grey): \"An enterprise-class UI components based on Ant Design and Vue.\"\n- A green CTA button \"Get Started Free\" (same green as nav).\n- Optionally show a strip of component category labels (General, Layout, Navigation, Data Display, Feedback) as muted pills to echo the component overview.\n\nFont: -apple-system, system-ui, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif. Vibe: clean, professional, Ant-Design look (blue + neutral greys, rounded buttons).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a.banner-content` → transition: opacity 0.3s ease\n- `a.start-button` → transition: all 0.3s ease\n- `header.clearfix` → transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a` → transition: color 0.3s ease\n- `input.ant-input.css-1p3hq3p` → transition: all 0.2s ease\n- `li.ant-menu-item.ant-menu-item-only-child` → transition: border-color, background 0.3s, 0.3s ease, ease 0s, 0s\n- `div.ant-select-selector` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `span.anticon.anticon-down` → transition: transform 0.3s ease\n- `li.ant-menu-item.ant-menu-item-selected` → transition: border-color, background, padding 0.3s, 0.3s, 0.2s ease, ease, cubic-bezier(0.215, 0.61, 0.355, 1) 0s, 0s, 0s\n- `div.components-overview-affix` → transition: all 0.25s ease\n- `div.ant-card.css-1p3hq3p` → transition: all 0.5s ease\n- `button.ant-float-btn.ant-float-btn-default` → transition: background-color 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** opacity: 0.9; background: #4dd893; transform: translateY(-1px); box-shadow: rgba(93, 242, 163, 0.3) 0px 4px 12px; background-color: rgb(77, 216, 147)\n  **active:** transform: translateY(0px)\n- `:where(.css-1p3hq3p) a`:\n  **hover:** color: rgb(105, 177, 255); outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eeeeee\",endColorstr=\"#dddddd\",GradientType=0); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204)\n  **active:** color: rgb(9, 88, 217); outline: 0; background-color: rgb(220, 220, 220); border-color: #b5b5b5; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px inset; border-top-color: rgb(181, 181, 181); border-right-color: rgb(181, 181, 181); border-bottom-color: rgb(181, 181, 181); border-left-color: rgb(181, 181, 181)\n  **focus:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eeeeee\",endColorstr=\"#dddddd\",GradientType=0); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204)\n- `:where(.css-1p3hq3p)[class^=\"ant-input\"]`:\n  **hover:** border-color: #4096ff; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n  **focus:** border-color: #4096ff; box-shadow: rgba(5, 145, 255, 0.1) 0px 0px 0px 2px; outline: 0; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-menu\"]`:\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-menu\"] [class^=\"ant-menu\"]`:\n  **hover:** color: rgba(0, 0, 0, 0.88)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-btn\"]`:\n  **hover:** color: rgb(64, 150, 255); border-color: #4096ff; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n  **active:** color: rgb(9, 88, 217); border-color: #0958d9; border-top-color: rgb(9, 88, 217); border-right-color: rgb(9, 88, 217); border-bottom-color: rgb(9, 88, 217); border-left-color: rgb(9, 88, 217)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-q2z4y9)[class^=\"ant-menu\"]`:\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-q2z4y9)[class^=\"ant-menu\"] [class^=\"ant-menu\"]`:\n  **hover:** color: rgba(0, 0, 0, 0.88); background-color: rgba(0, 0, 0, 0.06)\n  **active:** background-color: rgb(230, 244, 255)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes css-1p3hq3p-antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antSlideDownIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antSlideDownOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antZoomBigIn  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antZoomBigOut  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0.8);\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antMoveUpIn  {\n  0%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antMoveUpOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antMoveDownIn  {\n  0%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antMoveDownOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antZoomIn  {\n  0%  {\n  transform: scale(0.2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antZoomOut  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0.2);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"White enterprise landing with sticky header, green CTA, Ant Design Vue hero and category tags; verbatim css-1p3hq3p keyframes included."},{"id":"vant","name":"Vant","fw":["Vue"],"theme":"移动端 / H5","vendor":"有赞 Youzan","link":"https://vant-ui.github.io","kind":"item","img":"previews/vant.png","chips":["Button","Field","Picker","Checkbox","Radio","Switch","Slider","Form","Uploader"],"repo":"https://github.com/youzan/vant","desc":"移动端第一选择，Vue 3 + 小程序双端，组件平均 <3kB gzip。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Vant website (vant-ui.github.io) — a lightweight, customizable mobile Vue component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: light, friendly, mobile-focused.\n- Page background: #EFF2F5 (rgb(239,242,245)) light grey.\n- Primary text: #323233 (rgb(50,50,51)) near-black.\n- Brand accent: Vant blue #1989FA (rgb(25,137,250)).\n\nTop navigation bar (transparent / same bg, ~60px):\n- Left: \"Vant\" wordmark (bold, ~22px, dark).\n- Right: nav links (dark grey, ~15px): 首页 (Home), 文档 (Docs), and a GitHub icon link.\n\nHero section (centered, two-column feel: text left, phone mockup right, but centered text is fine):\n- Big wordmark \"Vant\" (bold, ~64px) — optionally with a small \"4\" superscript for Vant 4.\n- Tagline (~20px): \"轻量、可定制的移动端 Vue 组件库\" (Lightweight, customizable mobile Vue component library).\n- A version badge pill \"Vant 4\" (light border).\n- Two buttons side by side: a primary \"Get Started\" button (bg #1989FA blue, white text, rounded 4px) and a secondary \"GitHub\" outlined button (white bg, border, dark text).\n- On the right side, draw a simple phone mockup: a rounded-rectangle phone frame (white, ~240px tall, border, rounded corners) containing a few placeholder lines/blocks to suggest a mobile UI demo.\n\nFont: \"Open Sans\", -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif. Vibe: clean, mobile, developer-friendly.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img` → transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)\n- `span.van-doc-header__cube.van-doc-header__version` → transition: all 0.3s ease-in-out\n- `a` → transition: color 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes code-copy-animation  {\n  0%  {\n  opacity: 0;\n  top: 0px;\n  } 100%  {\n  opacity: 1;\n  top: -20px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Light Vant landing with #EFF2F5 bg, blue CTA, phone mockup, Chinese tagline; code-copy-animation keyframe included."},{"id":"nuxt-ui","name":"Nuxt UI","fw":["Vue"],"theme":"Nuxt / SSR 满分","vendor":"Nuxt","link":"https://ui.nuxt.com","kind":"item","img":"previews/nuxt-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/nuxt/ui","desc":"Nuxt 官方旗舰，基于 Reka UI + Tailwind，全量 a11y、RTL 与暗色。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Nuxt UI website (ui.nuxt.com) — a Vue UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, modern, Tailwind-flavored.\n- Page background: #FFFFFF. Primary text: a dark slate (approx #2C3440 / oklch 0.372 0.044 257).\n- Brand accent: green #00C16A (rgb(0,193,106)).\n\nTop navigation bar (white, sticky, translucent, ~64px, subtle bottom border):\n- Left: \"Nuxt UI\" wordmark (bold) possibly with a small green mark.\n- Center/right nav links (slate, ~15px): Docs, Templates, Figma, Releases, Blog, Showcase, Team.\n- Far right: a small version pill \"v4.9.0\" (light green tint bg rgba(0,193,106,0.1), green text) and a GitHub icon.\n\nHero section (centered, generous whitespace):\n- A version badge \"v4.9.0\" (green tint pill, green text) above the title.\n- Big headline (bold, ~56px): \"The Intuitive Vue UI Library\" (you may break \"Vue UI Library\" to a second line).\n- Subhead (~18px, muted slate): \"A comprehensive Vue UI component library with 125+ accessible, Tailwind CSS components for building modern web applications. Works with Nuxt and plain Vue apps.\"\n- Two buttons: a primary green button \"Get started\" (bg #00C16A, white text, rounded) and a secondary \"Browse components\" outlined button.\n\nFont: \"Public Sans\", sans-serif. Vibe: airy, developer-tool, green accent on white.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.star.absolute` → animation: twinkle-e21f6a0a 2s ease-in-out 1.80048s infinite normal\n- `div.flex.items-center` → animation: marquee-vertical 40s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.iconify.i-lucide:chevron-down` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `img.dark:hidden.hover:scale-105` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.font-medium.items-center` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.inset-y-0` → transition: left, right, width 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `button.absolute.inset-y-0` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.-translate-y-2`:\n  **hover:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes twinkle-e21f6a0a  {\n  0%, 100%  {\n  opacity: 0.2;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes rotate-c355a8b0  {\n  0%  {\n  --angle: var(--start);\n  } 100%  {\n  --angle: var(--end);\n  }\n}\n@keyframes risingStarsAnimation-4d02be2c  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-2000px);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--reka-accordion-content-height);\n  overflow: hidden;\n  } 100%  {\n  height: 0px;\n  overflow: hidden;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  overflow: hidden;\n  } 100%  {\n  height: var(--reka-accordion-content-height);\n  overflow: hidden;\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--reka-collapsible-content-height);\n  overflow: hidden;\n  } 100%  {\n  height: 0px;\n  overflow: hidden;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  overflow: hidden;\n  } 100%  {\n  height: var(--reka-collapsible-content-height);\n  overflow: hidden;\n  }\n}\n@keyframes toast-slide-in-from-top  {\n  0%  {\n  transform: translateY(-100%);\n  } 100%  {\n  transform: var(--transform);\n  }\n}\n@keyframes toast-slide-in-from-bottom  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: var(--transform);\n  }\n}\n@keyframes toast-slide-up  {\n  0%  {\n  transform: translate(0) translateY(var(--translate));\n  } 100%  {\n  transform: translate(0) translateY(calc(var(--translate) - 100%));\n  }\n}\n@keyframes toast-slide-down  {\n  0%  {\n  transform: translate(0) translateY(var(--translate));\n  } 100%  {\n  transform: translate(0) translateY(calc(var(--translate) + 100%));\n  }\n}\n@keyframes toast-pulse-a  {\n  0%, 100%  {\n  scale: 1;\n  } 50%  {\n  scale: 1.04;\n  }\n}\n@keyframes toast-pulse-b  {\n  0%, 100%  {\n  scale: 1;\n  } 50%  {\n  scale: 1.04;\n  }\n}\n@keyframes toast-collapsed-closed  {\n  0%  {\n  transform: var(--transform);\n  } 100%  {\n  transform: translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Clean Nuxt UI landing with green #00C16A accents, centered hero, sticky nav; verbatim twinkle/toast/accordion keyframes included."},{"id":"shadcn-vue","name":"shadcn-vue","fw":["Vue"],"theme":"Radix 系 / Tailwind","vendor":"社区","link":"https://www.shadcn-vue.com","kind":"item","img":"previews/shadcn-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/radix-vue/shadcn-vue","desc":"Vue 版的复制即用组件集，基于 Reka UI + Tailwind。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the shadcn-vue website (shadcn-vue.com) — Vue port of shadcn/ui. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: light, minimal, \"copy-paste components\" aesthetic (shadcn style).\n- Page background: #FFFFFF. Primary text: near-black #000 / #0A0A0A.\n- Brand accent: emerald/teal #0EA47A-ish (use oklch(0.596 0.145 163.225) ≈ #15A37F) for primary buttons and the \"New\" badge.\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border):\n- Left: \"shadcn/vue\" wordmark (bold, dark).\n- Center/right nav links (dark, ~15px): Home, Docs, Components, Blocks, Charts, Colors, Create.\n- Right controls: a GitHub stars pill \"10.3k\" (border, rounded), a small \"New\" badge (emerald bg, white text, rounded), a \"Search documentation...\" input-like box (light grey bg #F7F7F7, rounded 10px, placeholder text) and a \"Toggle theme\" icon button.\n\nHero section (centered):\n- A small announcement badge at top: emerald bg, white text, rounded: \"Introducing Chat Components\" (with a \"New\" tag).\n- Big headline (bold, ~52px): \"The Foundation for your Design System\".\n- Subhead (~18px, muted grey #6b7280): \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\"\n- A row of demo buttons: a primary \"Button\" (emerald bg, white text, rounded 18px pill), a \"Secondary\" (light grey bg, dark text), and an \"Outline\" (white bg, border). These preview the component variants.\n\nFont: Geist / system sans. Vibe: clean, monochrome with emerald accent, lots of whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.router-link-active.router-link-exact-active` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.bg-input/50.border-transparent` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.bg-input/90.data-checked:bg-primary` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.bg-background.dark:data-unchecked:bg-foreground` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.text-sidebar-foreground/70.ring-sidebar-ring` → transition: margin, opacity 0.2s linear\n- `button.ring-sidebar-ring.active:bg-sidebar-accent` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.[a]:hover:bg-muted.rounded-2xl` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.pl-3`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.focus-visible\\:border-ring-visible`:\n  **active:** opacity: 1\n- `.hover\\:bg-primary\\/80`:\n  **active:** opacity: 1\n- `.hover\\:bg-\\[color-mix\\(in_oklch\\`:\n  **active:** opacity: 1\n- `.hover\\:bg-muted`:\n  **active:** opacity: 1\n- `.data-checked\\:bg-primary:where([data-checked]:not([data-checked=\"false\"]))`:\n  **active:** opacity: 1\n- `.data-checked\\:border-primary:where([data-checked]:not([data-checked=\"false\"]))`:\n  **active:** opacity: 1\n- `.ring-sidebar-ring`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ms-anim-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes ms-anim-slide-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes ms-anim-slide-side  {\n  0%  {\n  opacity: 0;\n  transform: translate(18px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes ms-anim-pop  {\n  0%  {\n  opacity: 0;\n  transform: translateY(6px) scale(0.94);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes ms-anim-spring-bounce  {\n  0%  {\n  opacity: 0;\n  transform: translateY(12px) scale(0.96);\n  } 60%  {\n  opacity: 1;\n  transform: translateY(-2px) scale(1.01);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes ms-anim-blur-fade  {\n  0%  {\n  filter: blur(4px);\n  opacity: 0;\n  transform: translateY(6px);\n  } 100%  {\n  filter: blur();\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes ms-anim-scale-fade  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.98);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  filter: blur(var(--tw-enter-blur,0));\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  filter: blur(var(--tw-exit-blur,0));\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--reka-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--reka-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));\n  } 100%  {\n  height: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Minimal shadcn-vue landing with emerald accent, announcement badge, hero and demo buttons; verbatim ms-anim/accordion/collapsible keyframes included."},{"id":"reka-ui","name":"Reka UI","fw":["Vue"],"theme":"无样式原语 / a11y","vendor":"unovue","link":"https://reka-ui.com","kind":"item","img":"previews/reka-ui.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/unovue/reka-ui","desc":"Vue 官方支持的 Headless 内核，零样式、100% 可定制。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Reka UI website (reka-ui.com) — an unstyled, accessible Vue UI primitive library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: dark, minimal, developer-focused.\n- Page background: #0B0F0C (rgb(11,15,12)) very dark green-black.\n- Primary text: #F2F2F2 (rgb(242,242,242)) near white. Muted text: #9EA3A2 (rgb(158,163,162)).\n- Search box bg: #1C1917 (rgb(28,25,23)), border #262626 (rgb(38,38,38)).\n\nTop navigation bar (transparent / same dark bg, ~60px):\n- Left: \"Reka\" wordmark (bold, near-white).\n- Center/right nav links (muted, ~15px): Docs, Examples, Showcase.\n- Right controls: a \"Search ⌘ K\" pill (dark bg #1C1917, border #262626, rounded 8px, muted text) and a version label \"v2.10.1\" (muted text).\n\nHero section (centered):\n- A small badge above the title: \"✨ 12 New Components\" (subtle, border, rounded, muted/near-white text).\n- Big headline (bold, ~52px, near-white): \"Craft accessible web apps with Vue\".\n- Subhead (~18px, muted #9EA3A2): \"An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.\"\n- Two buttons: a primary \"Get Started\" (near-white bg, dark text, rounded) and a secondary \"Examples\" (transparent, border, near-white text).\n\nFont: Geist / system sans. Vibe: dark, calm, technical, accessible-focused.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.w-full.py-4` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.w-5.h-5` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.text-sm.px-3` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.group-hover:ml-3.group-focus:ml-3` → transition: margin 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus\\:border-green-500`:\n  **focus:** outline: 2px solid transparent\n- `.focus\\:shadow-\\[0_0_0_2px\\]`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress  {\n  0%  {\n  content: var(--tw-content);\n  background-position: 0px 0px;\n  } 100%  {\n  content: var(--tw-content);\n  background-position: 30px 30px;\n  }\n}\n@keyframes enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n@keyframes hide  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes scaleOut  {\n  0%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.95);\n  }\n}\n@keyframes slideUp  {\n  0%  {\n  height: var(--reka-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes contentShow  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -48%) scale(0.96);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes overlayShow  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes scaleIn  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.9);\n  } 100%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--reka-collapsible-content-height);\n  }\n}\n@keyframes slideIn  {\n  0%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dark Reka UI landing with #0B0F0C bg, centered hero, search pill and version; verbatim progress/enter/exit/scale keyframes included."},{"id":"arco-vue","name":"Arco Design","fw":["Vue"],"theme":"企业级 / 设计系统","vendor":"字节跳动","link":"https://arco.design/vue","kind":"item","img":"previews/arco-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/arco-design/arco-design-vue","desc":"字节跳动设计系统，配套物料市场与低代码平台，结构清晰。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Arco Design Vue documentation page (arco.design/vue) — a Vue UI component library by ByteDance. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white documentation layout.\n- Page background: #FFFFFF. Primary text: #4E5969 (rgb(78,89,105)) slate-grey.\n- Brand accent: Arco blue #165DFF (rgb(22,93,255)).\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border #E5E6EB):\n- Left: \"Arco Design\" wordmark (bold) with a small blue square logo glyph.\n- Framework tabs: \"React\" (plain) and \"Vue\" (active — blue text #165DFF, maybe light blue underline/tint).\n- Right nav links (slate, ~14px): 快速上手, 暗黑模式, 定制主题, 设计变量, 国际化, 常见问题, 更新日志, and a GitHub icon.\n\nBelow the top bar, a documentation layout:\n- A left sidebar (width ~240px, light, border-right) listing doc sections: 快速上手, Npm 命令, 目录结构 (and a few more muted items).\n- Main content area: a large heading \"快速上手\" (Quick Start, bold, ~32px, dark) and beneath it a code block (dark/light grey rounded box, monospace) showing:\n    import ArcoVue from '@arco-design/web-vue';\n    app.use(ArcoVue);\n  plus a small \"取消\" (cancel, grey button) and \"确定\" (confirm, blue #165DFF button) pair to echo component demos.\n\nFont: Inter / system sans. Vibe: professional enterprise docs, blue accent, lots of whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.arco-alert-close-btn` → transition: color 0.1s cubic-bezier(0, 0, 1, 1)\n- `aside.arco-vue-aside-left` → transition: margin-left 0.2s ease\n- `button.arco-btn.arco-btn-secondary` → transition: all 0.15s ease\n- `main.arco-vue-main.aside-nav-show` → transition: margin-left, margin-right 0.2s, 0.2s ease, ease 0s, 0s\n- `div.ac-navbar-search-input` → transition: all 0.2s ease\n- `div.arco-react-select-view` → transition: all, padding 0.1s, 0s cubic-bezier(0, 0, 1, 1), linear 0s, 0s\n- `a.arco-react-btn.arco-react-btn-text` → transition: all 0.1s cubic-bezier(0, 0, 1, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Arco Design Vue docs layout with sidebar, blue accent, code block and cancel/confirm buttons; verbatim transitions included."},{"id":"tdesign-vue","name":"TDesign","fw":["Vue"],"theme":"多端统一设计系统","vendor":"腾讯 Tencent","link":"https://tdesign.tencent.com/vue","kind":"item","img":"previews/tdesign-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/Tencent/tdesign-vue","desc":"腾讯多端统一设计系统（React/Vue/小程序/Flutter）。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the TDesign Vue component overview page (tdesign.tencent.com/vue) — a Vue UI component library by Tencent. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, enterprise component gallery.\n- Page background: #FFFFFF. Primary text: rgba(0,0,0,0.9) near-black; secondary text rgba(0,0,0,0.6) grey.\n- Brand accent: TDesign blue #0052D9.\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border):\n- Left: \"TDesign\" wordmark (bold, blue #0052D9) with a small blue logo mark.\n- Framework tabs: \"React\" and \"Vue\" (Vue active, blue).\n- Right: a search box (light, rounded), a \"主题\" (theme) control and a GitHub icon.\n\nMain content:\n- A page heading \"组件概览\" (Component Overview, bold, ~30px, dark) with a small subtitle \"Vue UI Component\".\n- A responsive grid of component category cards. Each card: a category title (e.g. 通用 General, 布局 Layout, 导航 Navigation, 数据展示 Data Display, 反馈 Feedback, 数据录入 Data Entry) and a list of component names as muted pills/tags: e.g. Button 按钮, Icon 图标, Link 链接, Typography 排版, Grid 栅格, Layout 布局, Divider 分割线, Space 间距, Anchor 锚点, Tabs 选项卡, Table 表格, Form 表单, etc.\n- Cards have subtle borders, rounded corners, and on hover a blue tint.\n\nFont: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif. Vibe: orderly, Tencent enterprise design, blue accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.item` → transition: transform, box-shadow, opacity 0.24s, 0.24s, 0.24s cubic-bezier(0.38, 0, 0.24, 1), linear, linear 0s, 0s, 0s\n- `p.name` → transition: all 0.2s linear\n- `td-portal` → transition: clip-path, opacity, visibility 0.25s, 0.25s, 0.25s cubic-bezier(0.38, 0, 0.24, 1), linear, linear 0s, 0s, 0s\n- `li.TDesign-select-list__item.is-active` → transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1)\n- `span.title` → transition: color 0.2s linear\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `div[name=\"DOC\"] .image-wrapper .item`:\n  **hover:** transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 30px 5px, rgba(0, 0, 0, 0.04) 0px 16px 24px 2px, rgba(0, 0, 0, 0.08) 0px 8px 10px -5px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"TDesign Vue component overview with #0052D9 blue accent, header, category cards and component tags; verbatim transitions included."},{"id":"vuestic","name":"Vuestic UI","fw":["Vue"],"theme":"现代 / 即装即用","vendor":"Epicmax","link":"https://vuestic.dev","kind":"item","img":"previews/vuestic.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/epicmaxco/vuestic-ui","desc":"42 个业务组件，配置简单，响应式高性能。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Vuestic UI** (vuestic.dev).\n\n## Overall Layout & Theme\n- Bold **royal blue gradient background** (#2e51a2 to #1e3a8a range) covering full viewport.\n- Font: \"Source Sans Pro\", sans-serif.\n- Text color: white for headings/nav; dark (#262828) for content inside cards.\n\n## Top Announcement Banner\n- Dark navy background (~#1a2368). Height ~36px.\n- White text centered/left: \"VueConf US 2026 – Use code EPICMAX for $100 off · May 19–21\"\n- Right side: \"→ Register\" button — solid blue/dark blue, white text, rounded 4px, padding 5px 18px, font-size 13px.\n- Close ✕ button on far right, white.\n\n## Main Navigation Bar\n- Background: vibrant royal blue (#2550c7 or similar). Height ~56px.\n- **Left**: \"VUESTIC\" logo text in white, bold, ~20px, with a tiny \"UI\" superscript to the upper right.\n- **Center-right nav links**: `Docs`, `Contribute`, `Support & Consulting`, `Contact Us` — each white, ~14px, font-weight 500, no underlines, gap ~24px.\n- **Right side items**:\n  - GitHub icon (white circle outline).\n  - Discord icon (white).\n  - Twitter icon (white).\n  - Star icon + \"3747\" count in a yellow/gold pill badge (rounded-full, #facc15 or similar).\n\n## Hero Section (blue background, center-aligned top portion)\n- Padding-top: ~50px.\n- **Main heading**: \"Vue 3 UI Framework\"\n  - Very large (~48-54px), bold (700-800), pure white, centered.\n- **CTA Button Row** (centered, gap 16px, margin-top 28px):\n  - **\"Get Started\"** — white background, royal blue text (#2550c7), rounded 6px, padding 13px 30px, font-size 15px, font-weight 600, no border.\n  - **\"View on GitHub\"** — transparent background, white text, with GitHub icon (⚙️ or similar), rounded 6px, same size, font-weight 500.\n\n## Component Showcase Cards (below hero, overlapping/floating arrangement)\n\nBelow the hero text, display **3 overlapping white cards** arranged horizontally with slight vertical offsets, showcasing real UI components:\n\n### Left Card — Calendar & Form Widget\n- White card, rounded corners (~12px), subtle shadow.\n- Contains:\n  - Date list: Today, Tomorrow, Next Saturday, In a week, In a month (each as a row).\n  - Mini calendar grid showing \"June 2022\" with dates.\n  - Checkboxes: Cars ✓, Aircrafts ✓, Air ✓, Helicopters ✓, Spare parts □.\n  - Drag & drop area: \"Drag'n'drop files or Upload\" button.\n  - Agreement checkbox: \"✓ I agree to upload awesome videos\".\n\n### Center Card — Setup Personal Account (prominent, front-most)\n- White card, slightly larger, rounded ~12px, shadow.\n- Title: \"Setup Personal Account\" — bold ~18px, dark text.\n- Form fields:\n  - USERNAME input with placeholder \"powerful-developers\".\n  - PASSWORD field with dots and eye toggle icon.\n  - Checkbox: \"✓ I agree to Terms of Use\".\n  - **\"Register\" button** — solid royal blue (#2550c7), white text, rounded 4px, full-width-ish.\n- Toast notification below: dark gray bar \"Final-final(19) version was archived ✕\"\n\n### Right Card — Data Table & Controls\n- White card, rounded corners.\n- Tree navigation: \"Category ▾\", \"Subcategory ▾\", \"> Item A\".\n- Toggle switch (blue when ON, with circle thumb).\n- Data table with columns STATUS | BALANCE:\n  - Rows: Santa Claus / VERIFIED(green) / 34\n  - Sarah / PENDING(gray) / 129\n  - Brass / BLOCKED(red) / 0\n  - Smith / UPDATE NEEDED(yellow) / 66\n  - Doe / VERIFIED(green) / 521\n- Bottom: Avatar circles (emoji faces + V logo avatar).\n\n## Visual Notes\n- The page has a bold, confident enterprise Vue framework feel.\n- Blue is dominant everywhere (hero bg, nav, CTA buttons).\n- Component cards are the visual centerpiece — they show actual working-looking UI components (calendar, form, table).\n- Cards have soft shadows and are arranged with depth (some overlap others slightly).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.va-button`:\n  **focus:** outline-color: !important\n  **focus-visible:** outline-color: !important\n- `.va-list-item`:\n  **focus:** outline-color: !important\n  **focus-visible:** outline-color: !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes va-icon--spin-animation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes va-progress-circle__wrapper--indeterminate  {\n  100%  {\n  transform: rotate(270deg);\n  }\n}\n@keyframes va-progress-circle__overlay--indeterminate  {\n  0%  {\n  stroke-dasharray: 1, 125;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 125, 125;\n  stroke-dashoffset: -65px;\n  } 100%  {\n  stroke-dasharray: 125, 125;\n  stroke-dashoffset: -125px;\n  }\n}\n@keyframes step-loading  {\n  0%  {\n  transform: scale(0.5);\n  } 20%  {\n  transform: scale(1.2);\n  } 100%  {\n  transform: scale(0.5);\n  }\n}\n@keyframes vf-element-loader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(2turn);\n  }\n}\n@keyframes fpFadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(0px, -20px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes fade-557d1d50  {\n  0%  {\n  filter: brightness(0.8);\n  } 50%  {\n  filter: brightness(0.8);\n  } 100%  {\n  filter: brightness(1);\n  }\n}\n@keyframes background-jump  {\n  0%  {\n  background-position: 50% center;\n  } 50%  {\n  background-position: center 45%;\n  } 100%  {\n  background-position: 50% center;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Vuestic landing with blue gradient, announcement banner, nav, hero, and overlapping component cards; verbatim va-* keyframes included."},{"id":"inkline","name":"Inkline","fw":["Vue"],"theme":"现代 / 可定制","vendor":"Inkline","link":"https://inkline.io","kind":"item","img":"previews/inkline.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/inkline/inkline","desc":"Vue 3 组件库，内置设计系统、暗黑模式与表单验证。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Inkline** (inkline.io).\n\n## Overall Layout & Theme\n- White background for the left/content area; the right side features an illustrated night-sky scene.\n- Font: -apple-system, system-ui, \"Segoe UI\", sans-serif.\n- Text color: near-black (#171b23) for headings; #525c6a for body.\n- Primary accent: teal/cyan (#178f9a or #1a8fa0) for CTAs and highlighted heading text.\n- The page has a distinctive **illustration hero** — the right 50-60% of the viewport shows a stylized night scene.\n\n## Top Navigation Bar\n- Background: pure white. Height ~56px. Border-bottom: 1px solid #e5e7eb. Box shadow subtle.\n- **Left**: \n  - Inkline logo icon — a stylized dark cat/fox silhouette shape (~22px, near-black).\n  - \"Inkline\" text next to it, bold, ~17px, color #000.\n- **Right side items** (gap ~22px):\n  - `Home` link — active/bold, ~14px, #000.\n  - `Documentation` link — ~14px, #444.\n  - `Blog` link — ~14px, #444.\n  - GitHub icon (dark circle outline, ~20px).\n  - Game/controller icon (~18px, #555) — possibly a Discord/community icon.\n  - Moon/dark-mode toggle icon (~18px, #555).\n  - Search/magnifying glass icon (~18px, #555).\n\n## Hero Section (split layout)\n\n### Left Text Column (~45% width)\n- Padding-left: ~60px; padding-top: ~70px.\n\n**Announcement badge row**: \n- Small pill badge: \"New in v4.0\" — yellow/gold background (#fef3c7 or #facc15), dark text, font-size 12px, font-weight 600, rounded-full, padding 3px 10px.\n- Next to badge: \"Configuration file, design tokens, toast notifications and more!\" — ~14px, color #525c6a.\n\n**Main heading** (margin-top 20px):\n- \"Your next Vue.js project deserves\"\n- \"the best developer experience\"\n- Very large (~40-46px), bold (700), line-height 1.15.\n- First two lines in near-black (#171b23); \"**developer experience**\" is in **teal/cyan accent color** (#1a8fa0).\n\n**Subheading paragraph** (margin-top 16px):\n\"Inkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems.\"\n~16px, color #525c6a, line-height 1.65, max-width ~480px.\n\n**CTA Button Row** (margin-top 28px, gap 14px):\n- **\"Get started\"** — solid teal (#178f9a), white text, border-radius 6px, padding 13px 28px, font-size 15px, font-weight 600.\n- **\"1.3k+\"** — shows GitHub star count with a small GitHub icon (⚙️), light background or transparent, rounded 6px, same padding, gray text, font-weight 500.\n\n### Right Illustration Column (~55% width)\nThis is the visual centerpiece. Create a CSS/SVG illustration of a **night nature scene**:\n\n- **Background gradient**: Deep navy-blue sky (#1e3a5f to #2d5a87) fading lighter toward bottom, covering the full right area. Add tiny white dots as scattered stars (opacity .3-.6).\n- **Large moon/circle**: A large off-white circle (moon) in the upper-right area (~140px diameter, rgba(255,255,255,.85)), partially visible.\n- **Clouds**: 2-3 soft white/gray cloud shapes using SVG paths or border-radius blobs, opacity .2-.4, positioned in the upper-middle area.\n- **Mountains/hills**: Rolling mountain silhouettes in darker blue/navy tones (#1e3a5f to #162d47), overlapping layers creating depth, spanning the lower portion of the illustration area.\n- **Tree**: A stylized green tree with a round canopy (emerald #2dd4bf to #059669 gradient) and a brown trunk, positioned right-of-center.\n- **Cat/fox silhouette**: A dark silhouette (near-black #111827) of a cat or fox sitting and facing left, positioned at the bottom-right, looking up at the scene. Simple shape using SVG path or CSS shapes.\n- The illustration should feel whimsical, peaceful, and artistic — like a children's book night scene.\n\n## Visual Notes\n- This is an illustration-first landing page. The artwork on the right is the dominant visual element.\n- Clean, modern SaaS aesthetic with a warm, friendly vibe from the illustration.\n- Teal accent color ties together the CTA button and the \"developer experience\" highlight.\n- Generous whitespace on the left; the illustration fills the right side edge-to-edge.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nav.app-navbar.navbar` → transition: top, left, right, height, border-color, border-width, border-radius, background 0.3s ease\n- `a.router-link-active.router-link-exact-active` → transition: background-color, border-color, color 0.3s ease\n- `button.DocSearch.DocSearch-Button` → transition: background, border-color, color 0.3s ease\n- `svg` → transition: color 0.3s ease\n- `header.index-page-header.header` → transition: background-color 0.3s ease\n- `div._margin-right:1/2.badge` → transition: background-color, color, border-color 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hamburger-menu`:\n  **hover:** opacity: 1\n- `.navbar .navbar-brand`:\n  **hover:** text-decoration: underline\n- `.nav .nav-item`:\n  **hover:** text-decoration: underline; outline: 0\n  **focus:** outline: 0\n- `.collapsible > .collapsible-item > .collapsible-header`:\n  **hover:** text-decoration: underline; background: rgba(0,0,0,.075)!important; background-color: rgba(0, 0, 0, 0.075) !important\n  **focus:** background: rgba(0,0,0,.075)!important; background-color: rgba(0, 0, 0, 0.075) !important\n- `.app-sidebar-navigation .sidebar-page > a[data-v-65b07cd4]`:\n  **hover:** text-decoration: underline\n- `.app-sidebar-navigation[data-v-65b07cd4] .sidebar-category .sidebar-category-menu li a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes loader-rotate  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes loader-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@-webkit-keyframes toast-duration  {\n  100%  {\n  transform: scaleX(0);\n  }\n}\n@-webkit-keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ng-material","name":"Angular Material","fw":["Angular"],"theme":"Material Design","vendor":"Google","link":"https://material.angular.io","kind":"item","img":"previews/ng-material.png","chips":["Button","Input","Select","Checkbox","Radio","SlideToggle","Slider","Datepicker","FormField"],"repo":"https://github.com/angular/components","desc":"Google 官方维护，基于 CDK 原语，内置动画与 i18n。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Angular Material** (material.angular.io).\n\n## Overall Layout & Theme\n- Clean, minimal design inspired by Google's Material Design aesthetic.\n- Background: Very light lavender-blue (#f8f9ff or #f5f7fa) for hero area; pure white for features section below.\n- Font: Roboto, \"Helvetica Neue Light\", Helvetica, Arial, sans-serif.\n- Text color: Dark navy (#1a237e) for main headings; medium blue (#1565c0) for subheadings; #333 for body.\n\n## Top Navigation Bar\n- Background: light periwinkle/lavender (#d7e3ff or #e8edfc). Height ~56px.\n- **Left**:\n  - Angular Material logo icon — the classic Material/Angular \"A\" shield shape in blue (~22px, #1976d2).\n  - \"Material\" text next to it, bold, ~16px, color #1a237e.\n- **Center-left nav links** (gap ~24px): `Components`, `CDK`, `Guides` — each ~14px, color #1a237e, no underline.\n- **Right side items**:\n  - Version dropdown: `22.0.4 ▾` — same dark blue text, small down-caret.\n  - Theme/palette icon (paint bucket or format-fill icon, ~20px, #555).\n  - GitHub link: GitHub circle icon + \"GitHub\" text, ~14px, #333.\n\n## Hero Section (centered, light lavender bg)\n- Padding-top ~50px; padding-bottom ~40px; text-align center; position relative.\n- **Background watermark**: Behind all hero content, a very large, semi-transparent letter \"A\" (the Angular Material logo mark) in extremely light gray (#e8eaef), centered and oversized (~400px tall), low opacity (.12). This is the distinctive visual signature of the Angular Material homepage.\n\n**Main heading**: \"Angular Material\"\n- Very large (~44-48px), font-weight 500 (medium-bold), color deep navy (#0c3459).\n\n**Subheading**: \"Material Design components for Angular\"\n- ~17px, color medium blue (#1a56a8), margin-top 6px.\n\n**CTA button** (margin-top 28px):\n- \"Get started\" — white background, 1px solid #dadce0, subtle box-shadow (0 1px 3px rgba(0,0,0,.08)), border-radius: 9999px (full pill), padding 11px 32px, font-size 15px, font-weight 500, color #1976d2 (Material Blue). No heavy styling — it's a clean, outlined-ish white button.\n\n## Features Section (white background, below hero)\n- White bg, padding 36px 60px.\n- **Three-column layout**, equal widths, gap ~36px:\n\n### Column 1 — High quality\n- Heading: \"High quality\" — ~18px, font-weight 500, color #222, margin-bottom 10px.\n- Paragraph: \"Internationalized and accessible components for everyone. Well tested to ensure performance and reliability.\" — ~14.5px, line-height 1.65, color #444.\n- Second paragraph: \"Straightforward APIs with consistent cross platform behaviour.\" — same style.\n\n### Column 2 — Versatile\n- Heading: \"Versatile\" — same heading style.\n- Paragraph: \"Provide tools that help developers build their own custom components with common interaction patterns.\"\n- Paragraph: \"Customizable within the bounds of the Material Design specification.\"\n\n### Column 3 — Frictionless\n- Heading: \"Frictionless\" — same heading style.\n- Paragraph: \"Built by the Angular team to integrate seamlessly with Angular.\"\n- Paragraph: \"Start from scratch or drop into your existing applications.\"\n\n## Visual Notes\n- This is a Google/Angular-branded landing page — clean, lots of whitespace, professional enterprise feel.\n- The large translucent \"A\" watermark behind the hero is THE key visual differentiator.\n- Color palette uses Material Design blues (primary: #1976d2, darker: #0c3459).\n- Typography is Roboto throughout — clean, readable, not overly bold.\n- The Get started button is deliberately understated — white with subtle shadow, not a heavy colored CTA.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mdc-button.mat-mdc-button-base` → transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes _mat-menu-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes _mat-menu-exit  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ng-zorro","name":"NG-ZORRO","fw":["Angular"],"theme":"企业级 (Angular 版 antd)","vendor":"蚂蚁集团","link":"https://ng.ant.design","kind":"item","img":"previews/ng-zorro.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/NG-ZORRO/ng-zorro-antd","desc":"Ant Design 的 Angular 实现，API 与 React 版对齐。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate NG-ZORRO Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **NG-ZORRO** (ng.ant.design) — an enterprise Angular UI component library following Ant Design specs.\n\n## Layout Structure\n**Three-column layout** within a 1280px-wide viewport:\n- **Left sidebar** (~220px): Navigation menu with vertical link items\n- **Main content center** (~65%): Hero headline, description, dual logos, feature bullets\n- **Right sidebar** (~180px): Quick links / TOC\n\n## Header Bar (Top)\n- Full-width white background (`#ffffff`) header\n- **Left:** Red/orange Ant Design shield logo (hexagonal shape) + **\"NG-ZORRO\"** brand name in bold black text\n- **Center-left:** Search input field with placeholder \"在 ng.ant.design 中搜索\", light gray border, magnifying glass icon inside\n- **Nav links** (horizontal, to the right of search): 文档, 组件, 实验性功能 — in dark gray/black text, no underline, ~14px\n- **Version badge**: \"21.3.1\" with dropdown arrow\n- **Far right icons**: GitHub icon (outline), language toggle icon, \"9163\" star count\n\n## Left Sidebar (below header)\n- White background, subtle right border\n- Section title: **\"Ant Design of Angular\"** in small bold text at top\n- Vertical navigation links (each on its own line):\n  - 快速上手, 脚手架, 国际化, 定制主题, 动态主题（实验性）, 全局配置项, LLMs.txt (with green \"新增\" badge), 动画开关 (with \"更新\" badge in light blue), 文字方向, 资源推荐, 常见问题, 贡献指南, 更新日志 (with \"21.3.1\" badge), v21 升级指南, 社区招募\n- Text color: dark gray `rgba(0,0,0,0.85)`; active/hover states may highlight\n- Font size: ~14px, comfortable spacing between items\n\n## Main Content Area (Hero)\n- **H1 Headline**: \"**Ant Design of Angular**\" — very large bold text (~40px), black/dark gray `rgba(0,0,0,0.85)`\n- **Description paragraph** below H1:\n  > ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。\n  - Text in medium gray `rgba(0,0,0,0.65)`, ~14px, line-height ~1.8\n- **Dual Logo Display**: Two logos side-by-side with \"+\" symbol between:\n  - **Left**: Ant Design diamond/rhombus logo — blue outline with red dot center and chevron shapes\n  - **Right**: Angular \"A\" logo shield — magenta/pink-to-red gradient\n- **Features Section (\"特性\")** heading: Bold ~24px, black\n- Feature bullet list (circles as markers):\n  - 提炼自企业级中后台产品的交互语言和视觉风格。\n  - 开箱即用的高质量 Angular 组件库，与 Angular 保持同同步升级。\n  - 使用 TypeScript 构建，提供完整的类型定义文件。\n  - 支持 Zoneless 和 OnPush 模式，性能卓越。\n  - 数十个国际化语言支持。\n  - 深入每个细节的主题定制能力。\n\n## Right Sidebar (Quick Links)\n- List of anchor-style links: 特性, 支持环境, 当前版本, 支持 Angular 版本, 设计规范, 安装, 链接, 谁在使用, 如何贡献, 社区互动\n- Smaller font ~13px, gray text\n\n## Color Scheme\n- Page background: pure white `#ffffff`\n- Primary text: `rgba(0,0,0,0.85)`\n- Secondary text: `rgba(0,0,0,0.65)`\n- Accent/Ant Design red: `#FF4D4F` or similar (logo, badges)\n- Link hover: Ant Design primary blue `#1677FF`\n- Border/divider colors: light gray `#f0f0f0`\n\n## Typography\n- Font family: AlibabaSans, system-ui fallback stack (use system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)\n- Clean, professional Chinese-friendly typeface\n\n## Visual Vibe\n- Enterprise-grade documentation site feel\n- Clean, structured, information-dense but well-spaced\n- Ant Design design system aesthetic (rounded corners, subtle shadows, clear hierarchy)\n- Professional, developer-focused, trustworthy\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `header.clearfix` → transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a` → transition: color 0.3s ease\n- `input.ant-input.ant-input-outlined` → transition: all 0.3s ease\n- `li.ant-menu-item.ant-menu-item-selected` → transition: border-color, background 0.3s, 0.3s ease, ease 0s, 0s\n- `nz-select-top-control.ant-select-selector` → transition: border-color, box-shadow, background-color 0.3s, 0.3s, 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1) 0s, 0s, 0s\n- `nz-select-item.ant-select-selection-item` → transition: all, visibility 0.3s, 0s ease, ease 0s, 0s\n- `nz-icon.anticon.anticon-down` → transition: transform 0.3s ease\n- `button.ant-btn.ant-btn-text` → transition: all 0.2s ease\n- `button.ant-btn.ltr` → transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `nz-icon.anticon.anticon-undefined` → transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `ul.aside-container.ant-menu` → transition: background, width 0.3s, 0.3s ease, cubic-bezier(0.2, 0, 0, 1) 0s, 0s\n- `li.ant-menu-item` → transition: border-color, background, padding 0.3s, 0.3s, 0.1s ease, ease, cubic-bezier(0.215, 0.61, 0.355, 1) 0s, 0s, 0s\n- `a.anchor` → transition: opacity 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.ant-input`:\n  **focus:** outline: 0\n- `.ant-menu-item a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.ant-btn`:\n  **hover:** background: #00000005; background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.85)\n  **active:** outline: 0; background: #00000007; background-color: rgba(0, 0, 0, 0.027); color: rgba(0, 0, 0, 0.85)\n  **focus:** outline: 0; background: #00000005; background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.85)\n- `.gh-btn`:\n  **hover:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221)); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); filter: \"progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0)\"; color: rgb(65, 131, 196)\n  **active:** outline: 0; background-color: rgb(220, 220, 220); border-color: #b5b5b5; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px inset; border-top-color: rgb(181, 181, 181); border-right-color: rgb(181, 181, 181); border-bottom-color: rgb(181, 181, 181); border-left-color: rgb(181, 181, 181)\n  **focus:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221)); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); filter: \"progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0)\"; color: rgb(65, 131, 196)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes antFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes antMoveDownIn  {\n  0%  {\n  transform: translateY(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveDownOut  {\n  0%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translateY(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveLeftIn  {\n  0%  {\n  transform: translate(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveLeftOut  {\n  0%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveRightIn  {\n  0%  {\n  transform: translate(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveRightOut  {\n  0%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveUpIn  {\n  0%  {\n  transform: translateY(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveUpOut  {\n  0%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translateY(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes waveEffect  {\n  100%  {\n  box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);\n  }\n}\n@keyframes fadeEffect  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: three-column docs layout, NG-ZORRO header with search/nav/badges/star count, left sidebar nav with 新增/更新/21.3.1 badges, hero with dual Ant Design+Angular logos, 特性 bullet list, right TOC sidebar. Verbatim antFadeIn/antMoveUpIn/antSlideUpIn/waveEffect keyframes included."},{"id":"primeng","name":"PrimeNG","fw":["Angular"],"theme":"企业级 / 80+ 组件","vendor":"PrimeTek","link":"https://primeng.org","kind":"item","img":"previews/primeng.png","chips":["Button","InputText","Select","Checkbox","Radio","Toggle","Slider","DatePicker","Form"],"repo":"https://github.com/primefaces/primeng","desc":"Angular 企业级组件套件，主题丰富、企业支持完善。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate PrimeNG Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **PrimeNG** (primeng.org) — a premium Angular UI component library.\n\n## Top Announcement Banner\n- Full-width **dark charcoal** background bar (`#1a1d21` or similar very dark gray)\n- Text centered: \"**Next Chapter Begins 🚀 Read the full story**\" — white/light gray text\n- Close button (×) on the right side\n- Height ~36px\n\n## Header Bar\n- White background (`#ffffff`), subtle bottom border\n- **Left:** PRIMENG logo — a black shield/helmet icon + \"**PRIMENG**\" wordmark in bold black uppercase letters (~18px, letter-spacing)\n- **Right side items** (horizontal row):\n  - Search icon (magnifying glass outline)\n  - Theme toggle icon (sun/moon)\n  - GitHub icon (outline)\n  - Edit/pencil icon\n  - \"**Get PrimeUI**\" button — dark background (`#334155` or near-black), white text, rounded-full (pill shape), ~14px font\n\n## Hero Section (Centered)\n- Background: very light blue-gray (`#f8fafc` or similar off-white)\n- Padding top/bottom ~60px\n\n### Version Badge (above headline)\n- Small inline badge: red dot prefix + \"**primeng@22.0.0-rc.1**\" — small monospace-style text, subtle gray\n\n### Headline\n- Very large bold centered text (~48-52px): \"**Premium UI .p-title Suite for Angular**\"\n- The word \"**Suite**\" has a distinctive `.p-title` class styling — it appears as a slightly highlighted/differentiated element (light gray background or subtle border treatment around it)\n- Color: near-black `#1e293b`\n- Font weight: 700-800\n\n### Subtitle\n- Centered below headline, max-width ~680px: \"*Enhance your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components.*\"\n- Color: medium-dark gray `#475569`, ~17px, line-height 1.6\n\n### CTA Buttons (centered, horizontal gap ~12px)\n- \"**Get Started**\" — Dark/charcoal background (`#1e293b`), white text, rounded-pill shape, padding ~12px 28px, no border\n- \"**View Components**\" — White background, dark text, rounded-pill shape, same padding, thin border (`#e2e8f0`)\n\n### Company Logo Row (below buttons)\n- Centered row of grayscale company logos (faded/light opacity ~0.35):\n  - \"bus\" (text logo)\n  - Mercedes-Benz three-point star (circle logo)\n  - \"ebay\" (wordmark)\n  - Ford oval logo\n- Spacing ~40px between logos, vertically centered\n\n## Lower Section (Portfolio Preview)\n- Light background continues or transitions to white\n- Left side: small icon (shield-like) + \"**Overview**\" label + green \"● Live\" status badge\n- Heading: \"**Portfolio command**\" (medium-large, ~24px)\n- Description text about monitoring unlist exposure...\n- Right: search input field \"Search assets\" with bell/notification icon\n\n## Color Scheme\n- Page bg: `#f8fafc` (very light slate/gray-blue)\n- Header: white `#ffffff`\n- Dark elements: `#1e293b` (slate-800)\n- Muted text: `#64748b` (slate-500)\n- Accent: The PrimeNG brand uses emerald/green tones for some accents\n- Border: `#e2e8f0`\n\n## Typography\n- Font: \"Inter var\", system-ui fallback stack (-apple-system, 'Segoe UI', Roboto, sans-serif)\n- Clean modern look, Inter is key characteristic\n- Headlines are heavy/bold (700+)\n\n## Visual Vibe\n- Modern, clean, premium feel\n- Centered hero with generous whitespace\n- Professional enterprise Angular component library\n- Minimalist but polished\n- Rounded/pill-shaped buttons throughout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: _ngcontent-ng-c521785358_whouses-marquee 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `div.layout-topbar` → transition: background-color 0.5s ease\n- `button.topbar-item` → transition: outline-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.px-5.lg:px-7` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.w-full.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.layout-news .layout-news-close`:\n  **hover:** background-color: rgba(255, 255, 255, 0.2)\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-modal-enter  {\n  0%  {\n  background: transparent;\n  } 100%  {\n  background: var(--p-mask-background);\n  }\n}\n@keyframes px-animate-modal-leave  {\n  0%  {\n  background: var(--p-mask-background);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes color-animation  {\n  40%, 100%  {\n  background-position: -200% center;\n  }\n}\n@keyframes scroll  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(calc(-100% - 2.625rem));\n  }\n}\n@keyframes clippath  {\n  0%, 100%  {\n  clip-path: inset(0px 0px 98%);\n  } 25%  {\n  clip-path: inset(0px 98% 0px 0px);\n  } 50%  {\n  clip-path: inset(98% 0px 0px);\n  } 75%  {\n  clip-path: inset(0px 0px 0px 98%);\n  }\n}\n@keyframes block-animation  {\n  100%  {\n  transform: translateY(-10px) translate(10px) scale(1.02);\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 50px 10px;\n  }\n}\n@keyframes animated-block-1  {\n  100%  {\n  transform: translate(-10px);\n  }\n}\n@keyframes animated-block-2  {\n  100%  {\n  transform: translate(10px);\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);\n  } 20%  {\n  clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);\n  } 40%  {\n  clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--p-enter-opacity, 1);\n  transform: translate3d(var(--p-enter-translate-x, 0),var(--p-enter-translate-y, 0),0) scale3d(var(--p-enter-scale, 1),var(--p-enter-scale, 1),var(--p-enter-scale, 1)) rotate(var(--p-enter-rotate, 0));\n  }\n}\n@keyframes leave  {\n  100%  {\n  opacity: var(--p-leave-opacity, 1);\n  transform: translate3d(var(--p-leave-translate-x, 0),var(--p-leave-translate-y, 0),0) scale3d(var(--p-leave-scale, 1),var(--p-leave-scale, 1),var(--p-leave-scale, 1)) rotate(var(--p-leave-rotate, 0));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: dark announcement bar (#1a1d21), PRIMENG shield header with search/theme/GitHub/edit icons + Get PrimeUI pill CTA, hero with version badge (red dot + 22.0.0-rc.1), .p-title highlighted Suite headline, dual CTAs, faded company logo row, Portfolio command section with Live badge + search input. All verbatim keyframes included."},{"id":"clarity","name":"Clarity","fw":["Angular"],"theme":"企业级 / 设计系统","vendor":"VMware","link":"https://clarity.design","kind":"item","img":"previews/clarity.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Datepicker","Form"],"repo":"https://github.com/vmware-clarity/ng-clarity","desc":"VMware 设计系统，含 Angular 组件与核心 CSS。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Clarity Design System Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Clarity Design System** (clarity.design) — an enterprise design system by VMware.\n\n## Header Bar\n- **Full-width dark navy background**: `#0b1622` (very dark blue-black)\n- Height: ~52px, white text\n- **Left side:**\n  - **Logo area:** Hexagonal icon with orange center + blue outline (the Clarity hex logo) + \"**Clarity Design**\" text in white (~15px font)\n  - **VERSION 18 dropdown button:** Blue background `#0079AD`, white text, rounded corners ~4px, with down-arrow chevron. Text: \"VERSION 18\"\n- **Right side:**\n  - Moon icon + \"**Dark**\" label (toggle for dark mode)\n  - Document icon + \"**Compact**\" label (compact mode toggle)\n  - Small \"SKIP TO CONTENT\" yellow button (visible in some views)\n\n## Layout Structure\n- **Two-column layout**: Left sidebar nav (~200px) + Main content area\n- Page background: very light blue-gray `#fcfdfd`\n\n## Left Sidebar Navigation\n- White or transparent background, sits below header\n- Vertical list of navigation items, each with a right chevron arrow (>):\n  - Get Started >\n  - Foundation >\n  - Patterns >\n  - Components >\n  - Addons >\n  - Updating >\n  - Storybook >\n- Font: ~14px, color `#3a4d55` (dark teal-gray), clean spacing between items (~8px vertical padding)\n- Hover/active state may highlight\n\n## Main Content — Hero Section\n\n### Headline\n- \"**Clarity Design System**\" — very large bold text (~40px), color `#1b2b32` (dark navy), left-aligned\n\n### Subtitle\n- \"Simplifying the complexity of enterprise products\" — medium size ~18px, color `#1b2b32`, below headline, margin-bottom ~20px\n\n### CTA Button\n- \"**GET STARTED USING CLARITY**\" — solid blue button (`#0079AD` background, white text), rounded corners ~4px, padding ~10px 20px, uppercase, font-weight ~600, font-size ~13px\n\n### Hero Illustration (right side of hero)\n- Positioned to the right of the headline/subtitle/button area\n- Contains:\n  - A blue paper airplane icon/folded plane shape (pointing upper-right)\n  - Light blue cloud shapes (simple rounded blobs)\n  - Orange/blue hexagon icons floating\n  - Dotted line path connecting elements\n  - Geometric shapes in soft orange/peach tones\n  - Overall style: flat vector illustration, enterprise-friendly, clean\n\n## Three Feature Cards (below hero)\n- Row of three equal-width cards with white backgrounds, subtle border/shadow\n- Each card has:\n  - **Top icon** inside a colored circular/square badge:\n    - Designing: pencil/edit icon in peach/orange circle\n    - Developing: gear/cog icon in light-blue circle\n    - Accessibility: person/accessibility icon in gray circle\n  - **Title**: Bold ~18px heading (\"Designing\", \"Developing\", \"Accessibility\")\n  - **Description text**: ~13-14px, gray color, 2-3 lines\n  - **Link** at bottom: underlined blue link text (\"Get started\", \"Get started\"/\"Explore our GitHub\", \"Learn more\")\n\n## Color Scheme\n- Header bg: `#0b1622` (dark navy)\n- Page bg: `#fcfdfd` (near-white with slight blue tint)\n- Primary text: `#1b2b32`\n- Secondary text: `#3a4d55` / `#49545c`\n- Primary accent / CTA: `#0079AD` (clarity blue)\n- Card icon colors: orange-peach `#f89747`, light blue `#6db7cf`, gray `#9aa4ae`\n- Link blue: `#0079AD` or similar\n\n## Typography\n- Font family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif\n- Clean, geometric sans-serif feel\n- Headlines are heavy/bold\n\n## Visual Vibe\n- Enterprise documentation site\n- Clean, professional, structured\n- VMware/enterprise aesthetic\n- Navy header contrasts with very light body background\n- Flat illustration style in hero area\n- Card-based content organization\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `clr-vertical-nav.clr-vertical-nav.clr-nav-level-1` → transition: width 0.2s ease-in-out\n- `cds-icon.nav-group-trigger-icon.ng-tns-c1972165388-0` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown-menu > *`:\n  **focus:** outline-color: Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes clr-progress-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes clr-progress-looper  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes clr-skeleton-loading  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -200%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: dark navy header (#0b1622) with Clarity hex logo + VERSION 18 blue dropdown + Dark/Compact toggles, left sidebar nav (7 items with chevrons), hero with H1/subtitle/blue CTA button + paper-plane/hexagon/cloud illustration area, three feature cards (Designing orange-pencil/Developing blue-gear/Accessibility gray-person) with links. Verbatim clr-progress-fade/clr-progress-looper/clr-skeleton-loading keyframes included."},{"id":"ng-bootstrap","name":"NG Bootstrap","fw":["Angular"],"theme":"Bootstrap 风格","vendor":"NG Bootstrap","link":"https://ng-bootstrap.github.io","kind":"item","img":"previews/ng-bootstrap.png","chips":["Button","Form","Input","Checkbox","Radio","Select","Table","ListGroup","Card"],"repo":"https://github.com/ng-bootstrap/ng-bootstrap","desc":"Bootstrap 5 的 Angular 实现，无 jQuery 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate ng-bootstrap Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **ng-bootstrap** (ng-bootstrap.github.io) — Angular-powered Bootstrap widgets.\n\n## Header Bar\n- **Full-width Bootstrap blue background**: `#0d6efd` (the classic Bootstrap primary blue)\n- Height: ~52px\n- **Left side** (white text, horizontal):\n  - White circle with bold \"**B**\" letter inside (~28px diameter, white bg on blue or just a white B icon) — the Bootstrap logo\n  - Nav links in white text: **Home**, **Getting Started**, **Guides**, **Components**\n  - Font size ~14px, no underline\n- **Right side** (white/light text):\n  - Theme toggle group: \"**Auto**\" (active/blue highlight), \"Light\", \"Dark\" — small pill-style toggle\n  - Version dropdown: \"**ng-bootstrap v21.0.0**\" — white text with dropdown arrow\n  - NPM download count badge: \"**2,786,268**\" (with small npm icon)\n  - GitHub icon (white outline)\n  - Twitter icon (white)\n\n## Hero Section (Two-column layout)\n- Background: white `#ffffff`\n- Padding ~50-60px top/bottom\n\n### Left Column — Logo Visual\n- Large **3D stacked blue hexagon cards** graphic:\n  - Three hexagonal shapes stacked at slight offsets (like a deck of thick cards)\n  - All in rich Bootstrap blue (`#0d6efd` to darker blue gradient)\n  - Each hexagon is large (~280px wide)\n  - A large white bold \"**B**\" letter centered on the top hexagon\n  - Gives a 3D layered/stacked effect\n  - This is the main visual hero element\n\n### Right Column — Content\n- **H1 Headline**: \"**Bootstrap widgets**\" — very large bold black text (~40px)\n- **Subtitle**: \"*The angular way*\" — medium-large gray text (`#6c757d`), italic style, below h1\n\n- **Description paragraph**:\n  > Angular widgets built from the ground up using Bootstrap 5 CSS with APIs designed for the Angular ecosystem.\n  - Color: dark gray `#212529`, ~15px, line-height ~1.7\n\n- **Dependency line**: \"*The only dependencies are* [Angular](link), [Bootstrap 5](link) *CSS and*[ Popper](link)*\"\n  - Blue links, inline text\n\n- **Install command label**: \"Install with Angular CLI:\" — small gray text above code block\n- **Code block**:\n  ```\n  ng add @ng-bootstrap/ng-bootstrap\n  ```\n  - Light gray background `#f8f9fa`, monospace font, padding ~10px 16px, rounded corners, copy icon on right\n\n- **CTA Buttons** (horizontal row):\n  - \"**Demo**\" — outlined button, blue border `#0d6efd`, blue text, rounded ~8px\n  - \"**Get started now**\" — same outlined style\n\n- **Version note**: \"*Currently at v21.0.0*\" — small muted text below buttons\n\n## Feature Cards Row (bottom of viewport)\n- Three equal-width cards below hero, light gray background area\n- Each card has:\n  - **Icon** (large, ~48px, in a colored container):\n    - Native: Angular \"A\" logo shield (dark gray)\n    - Widgets: Toggle switch / UI component icon\n    - Quality: Checklist/verified icon\n  - **Title**: Bold ~20px (\"Native\", \"Widgets\", \"Quality\")\n  - **Description**: Short text about the feature\n  - **Link**: Blue underlined link at bottom\n\n## Color Scheme\n- Header blue: `#0d6efd` (Bootstrap primary)\n- Page bg: `#ffffff`\n- Text primary: `#212529`\n- Text secondary: `#6c757d`\n- Code bg: `#f8f9fa`\n- Link blue: `#0d6efd`\n- Card section bg: very light gray `#f8f9fa`\n\n## Typography\n- Font family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif\n- Clean Bootstrap aesthetic\n\n## Visual Vibe\n- Classic Bootstrap design language\n- Strong brand identity with the blue hexagon B logo\n- Developer documentation feel\n- Clean, professional, trustworthy\n- The stacked hexagon logo is the dominant visual element\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nav-link.active` → transition: color, background-color, border-color 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `button.btn.btn-clipboard` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.nav-link`:\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.dropdown-toggle`:\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.navbar-toggler`:\n  **focus:** outline: 0\n- `.btn`:\n  **hover:** background: #f6f8fa; background-color: rgb(246, 248, 250)\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: Bootstrap blue (#0d6efd) header with B logo/nav/Auto-Light-Dark theme toggle/v21.0.0/npm badge/GitHub+Twitter icons, hero with 3D stacked hexagon-B visual + 'Bootstrap widgets' H1/'The angular way' italic subtitle/description/dependencies links/install code block/Demo+Get started CTAs/v21.0 note, three feature cards (Native Angular A/Widgets toggle/Quality check) on #f8f9fa. Verbatim progress-bar-stripes/spinner-border/spinner-grow/placeholder-glow/placeholder-wave keyframes."},{"id":"taiga-ui","name":"Taiga UI","fw":["Angular"],"theme":"现代 / 设计系统","vendor":"Tinkoff","link":"https://taiga-ui.dev","kind":"item","img":"previews/taiga-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Date","Form"],"repo":"https://github.com/taiga-family/taiga-ui","desc":"Angular + 设计系统的现代组件库，含编辑器等高级件。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Taiga UI Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Taiga UI** (taiga-ui.dev) — an open source Angular component library.\n\n## Layout Structure\n- **Full-screen split layout** (50/50): Left half white, Right half vibrant green\n- No visible header/navigation bar in the above-the-fold area\n- The page is essentially one large hero section filling the full viewport\n\n## Left Half (White background `#ffffff`)\n- Large bold typography, left-aligned with generous padding (~60px)\n- Text content (very large, ~52-60px font size, bold/black `#000`):\n\n  **Line 1:** \"Taiga UI —— [red triangular A logo]\"\n  - \"Taiga UI\" in black, very bold\n  - Long dash \"——\"\n  - Red/orange triangular logo (looks like an upward-pointing triangle/A shape in red-orange `#FF5722` or similar)\n\n  **Line 2:** \"powerful set of\"\n\n  **Line 3:** \"open source\"\n\n  **Line 4:** \"components for\"\n\n  - All lines are the same huge bold sans-serif font, black color\n\n- **Angular Logo** below the text:\n  - The Angular shield/logo: magenta-pink-to-red gradient shield shape with white \"**A**\" letter inside\n  - Next to it: word \"**Angular**\" in the same magenta/pink gradient color (`#DD0031` to `#C3002F` range)\n  - This is prominently displayed as a brand association element\n\n- **CTA Button**: Orange/coral pill button:\n  - Text: \"**Browse components**\" with a right-arrow (→) symbol\n  - Background: warm orange/coral `#FF6B35` or similar\n  - White text, fully rounded/pill shape (border-radius ~20px+)\n  - Padding ~12px 28px, positioned below the Angular logo\n\n- Small decorative element: double-chevron down icon (vv) at bottom-right of the left section, light gray, suggesting scroll-down\n\n## Right Half (Green background)\n- **Vibrant lime/green background**: bright green like `#4ade80` or `#22c55e` (a lively, saturated green)\n- **Topographic contour line pattern**: Black or dark green wavy/curved lines that look like a topographic map elevation pattern\n  - Multiple curved parallel lines creating organic flowing shapes\n  - Lines vary in curvature and density\n  - Creates an abstract natural/terrain-like visual texture\n  - Lines should be thin (~1-1.5px), dark green or black at low opacity\n\n## Color Scheme\n- Left bg: pure white `#ffffff`\n- Right bg: vibrant green `#4ade80` (or similar bright lime-green)\n- Primary text: black `#000000`\n- Accent orange (button): `#FF6B35` / `#F26522`\n- Taiga logo red/orange: `#FF5722` / `#EF4444`\n- Angular gradient: magenta-red to pink `#DD0031 → #FF0080`\n- Topo lines: dark green `#166534` at varying opacity\n\n## Typography\n- Font family: Manrope, system-ui, sans-serif\n- Very large, bold headlines (heroic scale)\n- Clean geometric sans-serif feel\n- Tight line-height for the stacked text\n\n## Visual Vibe\n- Bold, modern, striking split design\n- High contrast between clean white text area and vibrant green illustration area\n- Typographic-first hero (text IS the main visual)\n- Minimalist but impactful\n- Fresh, energetic, open-source project feel\n- The topographic pattern adds organic/creative contrast to the technical content\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `button.scroll` → animation: _ngcontent-ng-c935704031_bounce 1s ease infinite alternate\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `ng-component` → transition: background 0.6s ease\n- `section.initial` → transition: transform 0.6s ease\n- `h1.wrapper` → transition: opacity 0.6s ease 0.4s\n- `a.browse.browse_desktop` → transition: color, background-color, opacity, box-shadow, border-color, border-radius, filter 0.15s cubic-bezier(0.2, 0, 0.4, 0.9)\n- `button.scroll` → transition: opacity 0.3s cubic-bezier(0.2, 0, 0.4, 0.9)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@-webkit-keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@-webkit-keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@-webkit-keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@-webkit-keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@-webkit-keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes shimmerText  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes pulse  {\n  0%, 100%  {\n  opacity: 0.3;\n  } 50%  {\n  opacity: 0.6;\n  }\n}\n@keyframes tuiReveal  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes tuiFadeIn  {\n  0%  {\n  opacity: var(--tui-fade-start, 0);\n  } 100%  {\n  opacity: var(--tui-fade-end, 1);\n  }\n}\n@keyframes _ngcontent-ng-c935704031_scroll  {\n  0%  {\n  color: transparent;\n  } 50%  {\n  color: rgba(0, 0, 0, 0.2);\n  } 100%  {\n  color: transparent;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"分屏布局、CTA 按钮、Angular 品牌及右侧有机等高线图案与预览高度接近；滚动胶囊内应用了规范指定的 bounce 动画。"},{"id":"skeleton","name":"Skeleton","fw":["Svelte"],"theme":"设计系统 / Tailwind","vendor":"Skeleton","link":"https://skeleton.dev","kind":"item","img":"previews/skeleton.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/skeletonlabs/skeleton","desc":"基于 Tailwind 的自适应主题 Svelte 设计系统。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Skeleton Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Skeleton** (skeleton.dev) — an adaptive design system for Tailwind CSS.\n\n## Header Bar\n- White background (`oklch(0.99 0 0)` or near-white), subtle bottom border/shadow, sticky top\n- Height: ~56px\n- **Left side:**\n  - **Skull logo**: A distinctive black skull/cranium icon with a small crown on top and large round blue eyes (this is the Skeleton brand mascot)\n  - Nav links: \"**Docs**\", \"**Showcase**\", \"**More ▾**\" (dropdown)\n- **Center:**\n  - Search input bar: placeholder \"**Search...**\" with a \"×\" clear button inside, light gray background `oklch(0.97 0 0)`, rounded ~10px border, width ~200px\n- **Right side** (horizontal icons/controls):\n  - Theme toggle icon (sun/moon circle)\n  - Version dropdown: \"**v4.15.2 ▾**\"\n  - Heart/favorite icon with dropdown\n  - GitHub icon (outline)\n  - Discord icon\n  - Butterfly icon (Skeleton brand element)\n\n## Hero Section\n- Background: very subtle light blue radial gradient (center-left glow), transitioning to white at edges\n- Padding: ~50px top/bottom\n- Layout: two-column within the hero — mascot left, text right\n\n### Left Column — Skull Mascot\n- Large black skull illustration:\n  - Black filled silhouette of a skull shape (rounded cranium)\n  - Small crown/tiara on top of the head\n  - Two large prominent round blue eyes (cyan/blue circles)\n  - This is a cute/stylized skull character, not scary\n  - Size: roughly 220x220px area\n\n### Right Column — Hero Text\n- **H1 Headline**: \"**The adaptive design system for Tailwind CSS.**\"\n  - Very large bold text (~40-44px), near-black color `oklch(0.18 0 0)`\n  - Heavy font-weight\n\n- **Subtitle paragraph**: \n  > *Skeleton uses* Tailwind *as the foundation for building adaptive design systems. Including turnkey components for your favorite web frameworks.*\n  - Medium size ~16px, gray color, line-height ~1.7\n  - \"Tailwind\" is bold/emphasized\n\n- **CTA Buttons** (horizontal row):\n  - \"**Get Started ›**\" — Dark/black background (`#18181B`), white text, rounded ~8px, padding ~10px 24px, has right-arrow\n  - \"**Learn More**\" — White background, dark border, dark text, same padding, rounded ~8px\n\n## Live Demos Section (below hero)\n- Light gray background section `#f4f4f5` or similar neutral gray\n- **Heading**: \"**Live Demos**\" — bold ~24px, left-aligned\n- **Description**: \"*Test drive Skeleton directly in your browser for supported frameworks.*\" — smaller gray text\n- Note: \"*Functional components limited to React and Svelte.*\" — tiny muted text\n\n### Framework Icons Row\n- Horizontal row of circular framework badges:\n  - Each badge: colored solid circle (~52px diameter) + white/light icon inside + label below\n  - **React**: cyan/turquoise circle (`#22d3ee`) with atom/react icon, label \"React\"\n  - **Svelte**: orange/red-orange circle (`#ff6b35` / `#FF3E00`) with Svelte \"S\" logo, label \"Svelte\"\n  - **Vue**: green circle (`#42b883`) with Vue \"V\" triangle, label \"Vue *\" (asterisk note)\n  - **Solid**: blue/purple circle (`#446b9e`) with Solid logo, label \"Solid *\"\n  - **Astro**: purple/violet circle (`#8B5CF6` / `#D11B5A`) with Astro \"A\" icon, label \"Astro *\"\n  - **More**: \"... More\" text/badge (ellipsis)\n\n## Color Scheme\n- Page bg: near-white `#fafafa` / `oklch(0.99 0 0)`\n- Primary text: near-black `oklch(0.18 0 0)` ≈ `#1a1a2e`\n- Secondary/muted text: `oklch(0.55 0 0)` ≈ `#71717a`\n- Hero gradient bg: subtle blue radial from center `rgba(56,189,248,0.08)` to transparent\n- Demo section bg: `#f4f4f5`\n- Accent/skeleton brand: uses Tailwind's palette\n- CTA dark: `#18181B`\n\n## Typography\n- Font family: system-ui (use system font stack)\n- Clean modern look\n- Headlines are extra-bold\n\n## Visual Vibe\n- Playful yet professional developer tool aesthetic\n- The skull mascot gives it personality\n- Tailwind-first design utility feel\n- Modern, clean, developer-friendly\n- Framework-agnostic positioning (supports React, Svelte, Vue, Solid, Astro)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.absolute.top-0` → animation: spin 5s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.btn.hover:preset-tonal` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.btn-icon`:\n  **hover:** background-color: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 250, 0.05)); filter: brightness(125%)\n- `.btn`:\n  **hover:** background-color: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 250, 0.05)); filter: brightness(125%)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-circular-indeterminate  {\n  0%  {\n  stroke-dasharray: 1 var(--circumference);\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: calc(var(--circumference) * .75) var(--circumference);\n  stroke-dashoffset: calc(-1 * var(--circumference) * .5);\n  } 100%  {\n  stroke-dasharray: 1 var(--circumference);\n  stroke-dashoffset: calc(-1 * var(--circumference));\n  }\n}\n@keyframes progress-linear-indeterminate-horizontal  {\n  0%  {\n  transform: translate(-200%);\n  } 100%  {\n  transform: translate(200%);\n  }\n}\n@keyframes progress-linear-indeterminate-vertical  {\n  0%  {\n  transform: translateY(-200%);\n  } 100%  {\n  transform: translateY(200%);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes astroFadeInOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes astroFadeIn  {\n  0%  {\n  opacity: 0;\n  mix-blend-mode: plus-lighter;\n  } 100%  {\n  opacity: 1;\n  mix-blend-mode: plus-lighter;\n  }\n}\n@keyframes astroFadeOut  {\n  0%  {\n  opacity: 1;\n  mix-blend-mode: plus-lighter;\n  } 100%  {\n  opacity: 0;\n  mix-blend-mode: plus-lighter;\n  }\n}\n@keyframes astroSlideFromRight  {\n  0%  {\n  transform: translate(100%);\n  }\n}\n@keyframes astroSlideFromLeft  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes astroSlideToRight  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes astroSlideToLeft  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"头部、Hero 布局、按钮与 Live Demos 区块基本还原；骷髅吉祥物与框架图标接近预览，背景光晕应用了 spin 动画。"},{"id":"shadcn-svelte","name":"shadcn-svelte","fw":["Svelte"],"theme":"Bits UI / Tailwind","vendor":"社区","link":"https://shadcn-svelte.com","kind":"item","img":"previews/shadcn-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/huntabyte/shadcn-svelte","desc":"Svelte 版复制即用组件集，基于 Bits UI + Tailwind。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate shadcn-svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **shadcn-svelte** (shadcn-svelte.com) — \"The Foundation for your Design System\".\n\n## Header Bar\n- White background, subtle bottom border/shadow, height ~56px\n- **Left side** — Nav links (horizontal, ~14px, medium weight):\n  - Home (slightly more prominent/active state with light bg pill)\n  - Docs\n  - Components\n  - Blocks\n  - Charts\n  - Create\n- **Center-Right:**\n  - Search input: \"**Search documentation...**\" placeholder, light gray background `oklch(0.97 0 0)`, rounded ~10px border, width ~220px\n- **Right side:**\n  - GitHub star icon + \"**8.9k**\" text\n  - Grid/layout toggle icon\n  - \"**+ New**\" button — dark/black background (`oklch(0.145 0 0)` or near-black), white text, small rounded ~8px\n\n## Hero Section (Centered)\n- White background, generous padding top/bottom (~50px)\n- Text-align center\n\n### Badge above headline\n- Small text link: \"**Introducing Rhea →**\" — gray text, small font ~13px, with arrow\n\n### H1 Headline\n- \"**The Foundation for your Design System**\"\n- Very large bold text (~44-48px), near-black `oklch(0.145 0 0)`\n- Centered\n\n### Subtitle\n- \"*A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.*\"\n- Medium size ~16px, gray `oklch(0.55 0 0)`, max-width ~650px, centered, line-height 1.7\n\n### CTA Button\n- \"**Build Your Own →**\" — dark/near-black background, white text, rounded-pill shape, padding ~11px 26px, centered, has right-arrow\n\n## Component Showcase Grid (below hero)\n- Light gray or white background area\n- Grid of interactive component previews arranged in a masonry-like layout:\n  \n  **Left card area:**\n  - Button row: \"**Button →**\" (dark/filled), \"**Secondary**\" (outlined), \"**Outline**\" (light)\n  - Form inputs: \"**Name**\" field with search icon, \"**Message**\" textarea\n  - Toggle row: \"**Badge**\" (filled), \"**Secondary**\" (outlined), radio/toggle switches\n  - \"**Alert Dialog**\" button, \"**Button Group ↑**\" dropdown\n  - Labels below: \"**Planning**\", \"**Support**\"\n\n  **Middle card area:**\n  - \"**Contribution History**\" heading\n  - \"**Last 6 months of activity**\" subtext\n  - Bar chart (vertical bars in varying heights, gray tones) showing monthly activity\n  - X-axis labels: Dec, Jan, Feb, Mar, Apr, May\n  - Below chart: \"**UPCOMING May 2024 Scheduled**\", \"**SAVINGS PLAN Accelerated Recurring**\"\n\n  **Right card area:**\n  - Large QR code image (black/white QR code pattern)\n  - Heading: \"**Scan to connect your mobile device**\"\n  - Description about Ledger mobile app and scanning code\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Primary text: near-black `oklch(0.145 0 0)` ≈ `#18181B`\n- Secondary text: `oklch(0.45 0 0)` ≈ `#52525b`\n- Muted text: `oklch(0.55 0 0)` ≈ `#71717a`\n- Input/bg: `oklch(0.97 0 0)` ≈ `#f4f4f5`\n- Border: `oklch(0.922 0 0)` ≈ `#e4e4e7`\n- CTA/button dark: `oklch(0.145 0 0)`\n- Accent: minimal accent colors, mostly neutral palette\n\n## Typography\n- Font family: \"Inter Variable\", sans-serif (Inter-like)\n- Clean, modern sans-serif\n- Headlines extra-bold\n\n## Visual Vibe\n- Clean, minimalist documentation/component gallery site\n- shadcn/ui design language (neutral, polished, developer-focused)\n- Component showcase is a key differentiator — shows actual interactive UI components\n- Professional, modern Svelte-focused design system\n- GitHub-starred open source project feel\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.cn-button.group/button` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.cn-button.group/button` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/input-group.cn-input-group` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.cn-checkbox.peer` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.cn-switch-thumb.pointer-events-none` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.cn-sidebar-group-label.flex` → transition: margin, opacity 0.2s linear\n- `button.cn-sidebar-menu-button.peer/menu-button` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.cn-item.group/item` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.style-nova .cn-button`:\n  **active:** opacity: 1\n- `.style-nova .cn-badge`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--bits-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"导航栏、Hero 居中布局、三栏组件展示卡与预览高度一致；QR 码与图表还原良好，保留了组件入场动画。"},{"id":"smui","name":"Svelte Material UI (SMUI)","fw":["Svelte"],"theme":"Material Design","vendor":"SMUI","link":"https://sveltematerialui.com","kind":"item","img":"previews/smui.png","chips":["Button","Textfield","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/hperrin/svelte-material-ui","desc":"Material Design 的 Svelte 实现，组件覆盖全面。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate SMUI (Svelte Material UI) Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **SMUI** (sveltematerialui.com) — Svelte Material UI components.\n\n## Header Bar\n- **Full-width orange background**: `#FF3E00` or `rgb(255, 62, 0)` (the bright Material Design/Svelte orange)\n- Height: ~56px\n- **Content:**\n  - \"**Svelte Material UI**\" text in white, bold, ~16px font\n  - This is the main branding element in the header\n  - Clean, minimal header with just the brand name\n\n## Layout Structure\n- **Two-column layout**: Left sidebar (~240px) + Main content area\n- Page background: **dark** (`#1a1a2e` or similar dark navy/charcoal) OR the body may be dark-themed\n\n## Left Sidebar Navigation\n- Dark background matching page bg\n- Vertical navigation list:\n  - \"**Svelte Material UI**\" (section title/header, white, slightly larger)\n  - \"Learn about theming\"\n  - \"See the theme source\"\n  - \"Installation\"\n  - \"SvelteKit\"\n  - \"Theming\"\n  - \"Migrating\"\n  - \"Quick Guide\" (or similar)\n  - Component list items: \"Accordion\", \"Button\", \"Floating Action Button\", etc.\n- Text color: white/light gray for active items, dimmer gray for inactive\n- Font size: ~14px for items, ~15px for section headers\n- Comfortable vertical spacing between items (~8-10px)\n\n## Main Content Area\n- Dark background\n- Content area has padding\n\n### Heading\n- \"**Svelte Material UI**\"\n- Large heading (~32-36px), white text, bold\n\n### Description paragraph\n- \"*Material UI components for Svelte apps*\"\n- Subtitle/description below heading\n- Light gray text color, ~16px font\n\n### Additional content\n- May include description about SMUI providing strictly typed Svelte components and actions for a wide variety of Material Design components\n- Information about compatibility with Svelte and SvelteKit\n\n## Color Scheme\n- Header bg: `#FF3E00` (bright Svelte orange)\n- Page/Sidebar bg: dark (`#121212`, `#1e1e1e`, or similar very dark gray)\n- Primary text on dark: `#ffffff` / `#e0e0e0`\n- Secondary/muted text on dark: `#9e9e9e` / `#b0b0b0`\n- Accent: The orange `#FF3E00` used sparingly as highlight\n\n## Typography\n- Font family: Roboto, sans-serif (Material Design standard)\n- Roboto is the key characteristic font here\n- Clean, readable, Material Design typography scale\n\n## Visual Vibe\n- Material Design documentation site aesthetic\n- Dark theme (or dark sidebar at minimum)\n- Svelte + Google Material Design fusion\n- Professional, developer-focused\n- Orange brand color pops against dark background\n- Clean documentation-style layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes mdc-ripple-fg-radius-in  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n  } 100%  {\n  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n  }\n}\n@keyframes mdc-ripple-fg-opacity-in  {\n  0%  {\n  animation-timing-function: linear;\n  opacity: 0;\n  } 100%  {\n  opacity: var(--mdc-ripple-fg-opacity, 0);\n  }\n}\n@keyframes mdc-ripple-fg-opacity-out  {\n  0%  {\n  animation-timing-function: linear;\n  opacity: var(--mdc-ripple-fg-opacity, 0);\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes mdc-checkbox-fade-in-background-8A000000FF67677800000000FF676778  {\n  0%  {\n  border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n  background-color: transparent;\n  } 50%  {\n  border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  }\n}\n@keyframes mdc-checkbox-fade-out-background-8A000000FF67677800000000FF676778  {\n  0%, 80%  {\n  border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  } 100%  {\n  border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n  background-color: transparent;\n  }\n}\n@keyframes mdc-checkbox-unchecked-checked-checkmark-path  {\n  0%, 50%  {\n  stroke-dashoffset: 29.7833;\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark  {\n  0%, 68.2%  {\n  transform: scaleX(0);\n  } 68.2%  {\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes mdc-checkbox-checked-unchecked-checkmark-path  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);\n  opacity: 1;\n  stroke-dashoffset: 0;\n  } 100%  {\n  opacity: 0;\n  stroke-dashoffset: -29.7833;\n  }\n}\n@keyframes mdc-checkbox-checked-indeterminate-checkmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: rotate(45deg);\n  opacity: 0;\n  }\n}\n@keyframes mdc-checkbox-indeterminate-checked-checkmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n  transform: rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: rotate(360deg);\n  opacity: 1;\n  }\n}\n@keyframes mdc-checkbox-checked-indeterminate-mixedmark  {\n  0%  {\n  transform: rotate(-45deg);\n  opacity: 0;\n  } 100%  {\n  transform: rotate(0deg);\n  opacity: 1;\n  }\n}\n@keyframes mdc-checkbox-indeterminate-checked-mixedmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n  transform: rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: rotate(315deg);\n  opacity: 0;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"flowbite-svelte","name":"Flowbite Svelte","fw":["Svelte"],"theme":"Tailwind / 极简","vendor":"Flowbite","link":"https://flowbite-svelte.com","kind":"item","img":"previews/flowbite-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Range","Form","Table"],"repo":"https://github.com/themesberg/flowbite-svelte","desc":"Tailwind + Svelte 组件，遵循简洁极简的设计原则。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Flowbite Svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Flowbite Svelte** (flowbite-svelte.com) — a Svelte UI component library.\n\n## Header Bar\n- White background, subtle bottom border, height ~60px\n- **Left side:**\n  - Red circular icon (Flowbite logo — red circle with white shape inside, like a play button or swirl) + \"**Flowbite Svelte**\" text in bold dark color (~16px)\n- **Center-left:**\n  - Search bar with \"**Search**\" placeholder + \"**⌘K**\" keyboard shortcut badge on right side of input\n  - Light gray border/background, rounded ~8px, width ~200px\n- **Right side nav links** (horizontal):\n  - Docs, Components, Blocks, Dashboard, Icons, Illustrations\n- **Far right icons/controls:**\n  - GitHub icon\n  - Discord chat icon\n  - YouTube/play icon\n  - Dark mode moon icon\n  - Version badge: \"**v1.32.0**\"\n\n## Alert Banner (below header)\n- Light yellow/cream background (`#fffbeb` or similar warm yellow tint)\n- Full width below header\n- Content:\n  - Small \"**New**\" red/orange pill badge on the left\n  - Text: \"**Flowbite Svelte v2 is coming soon! Check it out →**\"\n  - Close × button on the far right\n- Height ~40px\n\n## Hero Section (Two-column layout)\n- White background, padding ~45px\n\n### Left Column — Text & CTAs\n- **Small badge**: \"New\" in red/orange pill above headline\n- **Alert-style line**: \"*Flowbite Svelte v2 is coming soon!*\" with arrow link\n\n- **H1 Headline** (large, bold):\n  > **Speed up your web development with Flowbite Svelte**\n  - \"Flowbite Svelte\" is in **red/orange accent color** (`#EF4444` or `#F97316`)\n  - Rest of headline is near-black/dark\n  - Font size ~38-42px, heavy weight\n  - Line-height ~1.2\n\n- **Description paragraph**:\n  > *Flowbite Svelte is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.*\n  - Gray text, ~15px, line-height 1.7, max-width ~520px\n\n- **Install command box**: \n  - Light gray background `#f9fafb`, rounded, monospace font\n  - Text: \"`pnpm i -D flowbite-svelte flowbite`\"\n  - Copy icon on the right\n\n- **CTA Button**: \"**Get started →**\"\n  - Orange/red background (`#F97316` or similar), white text\n  - Rounded ~8px, padding ~11px 24px, arrow symbol\n\n### Right Column — Component Showcase UI Mockup\n- A visual mockup showing various Flowbite components arranged as if they're part of a UI:\n  - Social buttons row: Tweet (Twitter), Share buttons\n  - Large orange \"**Get Flowbite**\" button\n  - Toggle switches: \"Off with label\", \"On with label\" (orange when on)\n  - Avatar group: 3-4 user avatar circles + \"+5\" counter badge\n  - Star rating display (yellow stars, \"5.0\" score)\n  - Print button\n  - Text area / content placeholder (\"Write your name...\")\n  - Pagination control: \"< 1 2 3 ... 100 >\"\n  - Audio/volume slider bar\n  - Orange floating action button (+) at bottom-right of mockup area\n  - URL/domain input field with dropdowns and search button\n- This is a visual showcase of available components, styled to look like a real UI\n\n## Featured In Section (bottom)\n- Centered row of partner/logo badges:\n  - \"**Featured in:**\" label\n  - Logo badges: reddit, DEV, Product Hunt (P), Combinator (Y), YouTube\n  - All in grayscale/faded style\n  - Horizontal layout with even spacing\n\n## Color Scheme\n- Header/Hero bg: white `#ffffff`\n- Alert banner bg: `#fffbeb` / `#fefce8` (warm yellow)\n- Primary text: `oklch(0.446 0.03 256.802)` ≈ dark slate-gray\n- Accent red/orange: `#EF4444` / `#F97316` (used for brand name, CTA, active states)\n- Install box bg: `#f9fafb`\n- Border: light gray `#e5e7eb`\n\n## Typography\n- Font family: Inter, ui-sans-serif, system-ui (Inter is the key characteristic)\n- Clean modern sans-serif\n- Bold headlines\n\n## Visual Vibe\n- Modern Svelte component library\n- Energetic brand feel with red/orange accents\n- Component-rich showcase demonstrating variety\n- Developer-friendly documentation site\n- Professional but approachable\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes shimmerText  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"carbon-svelte","name":"Carbon Components Svelte","fw":["Svelte"],"theme":"企业级 (Carbon)","vendor":"IBM","link":"https://carbon-components-svelte.onrender.com","kind":"item","img":"previews/carbon-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Form","DataTable"],"repo":"https://github.com/carbon-design-system/carbon-components-svelte","desc":"IBM Carbon 设计系统的 Svelte 实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Carbon Components Svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Carbon Components Svelte** (carbon-components-svelte.onrender.com) — IBM's Carbon Design System built for Svelte.\n\n## Header Bar\n- White background, subtle bottom border, height ~48px\n- **Left side:**\n  - \"**Carbon Components Svelte**\" text in bold (~15px) + version \"**v0.110.0**\" in smaller gray text\n- **Center:**\n  - Tab-style navigation: \"**Components**\" (active/underlined), \"**Icons**\", \"**Pictograms**\"\n  - Each with a small external link icon\n- **Right side:**\n  - Search icon (magnifying glass)\n  - GitHub icon\n  - Grid/apps icon (three dots)\n\n## Layout Structure\n- **Two-column layout**: Left sidebar (~240px) + Main content area\n- White page background\n\n## Left Sidebar Navigation\n- Light/white background, subtle right border separator\n- Organized in sections with headers:\n\n  **Introduction section** (highlighted/active):\n  - Introduction (active state — light blue-gray bg)\n  - Quick start\n  - Component index\n\n  **Navigation section**:\n  - UIShell\n  - Breadcrumb\n  - Link\n\n  **Data & lists section**:\n  - DataTable\n  - TreeView\n  - StructuredList\n  - ContainedList\n  - OrderedList\n  - RecursiveList\n  - UnorderedList\n\n  **Layout section**:\n  - Grid\n  - Stack\n  - Box\n  - AspectRatio\n  - Accordion\n  - Disclosure\n\n- Font size: ~14px for items\n- Active item has light blue/gray highlight `#f4f4f5`\n- Section headers are subtle gray labels above their items\n- Text color: dark gray `#161616`\n\n## Main Content Area\n- Padding ~32px 40px\n\n### Breadcrumb trail\n- Small text at top: \"🏠 Carbon Components Svelte\" (home icon + path)\n- Gray text, small font ~13px\n\n### H1 Headline\n- \"**The Carbon Design System,**<br>**built for Svelte**\"\n- Very large bold text (~36-40px), black/dark `#161616`\n- Two lines, heavy font-weight\n\n### Description paragraph\n- \"*A complete component library that implements the IBM Carbon Design System. Ship accessible, consistent, production-ready interfaces.*\"\n- Gray text `#52525b`, ~16px, line-height 1.7, max-width ~650px\n\n### CTA Buttons (horizontal row)\n- \"**Get Started →**\" — Blue background (`#0f62fe` or similar IBM carbon blue), white text, rounded ~8px padding, has arrow icon\n- \"**View on GitHub ↗**\" — White/light background, blue border, blue text, rounded same size, external-link icon\n\n## Stats Row (below hero)\n- Four equal columns in a row, below the buttons area:\n\n| **70+** | **5** | **TypeScript** | **WCAG 2.1 AA** |\n|---|---|---|---|\n| Components<br><small>From inputs to data tables</small> | Built-in themes<br><small>Two light, three dark</small> | Fully typed API<br><small>Props, events, and slots</small> | Accessibility<br><small>Keyboard and screen-reader ready</small> |\n\n- Large number on top (bold ~28px, dark)\n- Label below (medium ~14px, dark)\n- Sub-description below label (small ~12px, muted gray)\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Header bg: white\n- Sidebar active bg: `#f4f4f5`\n- Primary text: `#161616` (IBM Carbon near-black)\n- Secondary text: `#52525b`\n- Muted text: `#8d8d8d`\n- Accent/blue (CTA): `#0f62fe` (IBM Carbon blue / action primary)\n- Border: `#e0e0e0`\n- Link color: `#0f62fe`\n\n## Typography\n- Font family: \"**IBM Plex Sans**\", 'Helvetica Neue', Arial, sans-serif\n- This is the key characteristic font — IBM Plex Sans gives it the IBM/Carbon identity\n- Clean geometric sans-serif feel\n\n## Visual Vibe\n- Enterprise-grade IBM design system documentation\n- Professional, structured, information-dense but clean\n- The IBM Carbon Design System aesthetic (precise spacing, clear hierarchy)\n- Developer documentation site\n- Blue accent color is signature IBM\n- Grid-based, orderly layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.bx--header__name` → transition: border-color 0.11s ease\n- `a.bx--header__menu-item` → transition: background-color, border-color, color 0.11s, 0.11s, 0.11s ease, ease, ease 0s, 0s, 0s\n- `div.bx--header__search` → transition: max-width, background 0.11s, 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9) 0s, 0s\n- `a.bx--header__action` → transition: background-color, border-color 0.11s, 0.11s ease, ease 0s, 0s\n- `nav.docs-sidenav.bx--side-nav__navigation` → transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9)\n- `a.bx--side-nav__link.bx--side-nav__link--current` → transition: color, background-color, outline 0.11s, 0.11s, 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9) 0s, 0s, 0s\n- `a.bx--btn.bx--btn--primary` → transition: background, box-shadow, border-color, outline 0.07s, 0.07s, 0.07s, 0.07s cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9) 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bx--skip-to-content`:\n  **focus:** color: rgb(244, 244, 244); background-color: rgb(22, 22, 22); border-top-color: rgb(15, 98, 254); border-right-color: rgb(15, 98, 254); border-bottom-color: rgb(15, 98, 254); border-left-color: rgb(15, 98, 254)\n- `a.bx--header__name`:\n  **hover:** color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `a.bx--header__menu-item`:\n  **hover:** color: rgb(244, 244, 244); background-color: rgb(44, 44, 44)\n  **active:** color: rgb(244, 244, 244); background-color: rgb(57, 57, 57)\n  **focus:** color: rgb(244, 244, 244); border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--header-search-button`:\n  **hover:** background-color: rgb(53, 53, 53)\n  **active:** background-color: rgb(57, 57, 57); color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--header__action`:\n  **hover:** background-color: rgb(53, 53, 53)\n  **active:** background-color: rgb(57, 57, 57); color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--side-nav__menu a.bx--side-nav__link--current`:\n  **hover:** color: rgb(22, 22, 22); background-color: rgb(229, 229, 229)\n- `.bx--side-nav__menu a.bx--side-nav__link--current > span`:\n  **hover:** color: rgb(22, 22, 22)\n- `a.bx--side-nav__link`:\n  **hover:** color: rgb(22, 22, 22); background-color: rgb(229, 229, 229)\n- `a.bx--side-nav__link > .bx--side-nav__link-text`:\n  **hover:** color: rgb(22, 22, 22)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes skeleton  {\n  0%  {\n  opacity: 0.3;\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 20%  {\n  opacity: 1;\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 28%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 51%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 58%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 82%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 83%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 96%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 100%  {\n  opacity: 0.3;\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  }\n}\n@keyframes collapse-accordion  {\n  0%  {\n  opacity: 1;\n  height: 100%;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  height: 0px;\n  }\n}\n@keyframes expand-accordion  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  height: 0px;\n  } 100%  {\n  opacity: 1;\n  height: 100%;\n  visibility: inherit;\n  }\n}\n@keyframes tooltip-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes hide-feedback  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes show-feedback  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes fpFadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fpSlideLeft  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes fpSlideLeftNew  {\n  0%  {\n  transform: translate(100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes fpSlideRight  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes fpSlideRightNew  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes fpFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fpFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ark-ui","name":"Ark UI","fw":["Solid","Vue"],"theme":"无样式 / 跨框架","vendor":"Chakra","link":"https://ark-ui.com","kind":"item","img":"previews/ark-ui.png","chips":["Dialog","Dropdown","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/chakra-ui/ark","desc":"更轻更快的 Headless 组件库，Solid/Vue 双版本，可 tree-shaking。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Ark UI Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Ark UI** (ark-ui.com) — Unstyled UI components for your Design System.\n\n## Overall Background\n- Very light warm beige/cream color: `#fdfdfc` or `oklch(0.985 0.002 247)` — a subtle off-white with slight warmth\n- Subtle decorative background elements: faint peach/salmon colored squares scattered/positioned at various places in the background (decorative, low opacity)\n\n## Header Bar\n- White background, floating/fixed style with rounded corners or clean flat\n- Height: ~52px\n- Positioned at top center with some margin from edges (or full-width but white on the warm bg)\n- **Left side:**\n  - \"**ARK**\" logo text in bold red/orange (`#eb5e41` or similar coral-red), ~18px font weight 800\n- **Center nav links**:\n  - \"**Docs**\"\n  - \"**Showcase**\"\n  - \"**Blog**\"\n  - \"**Plus ✨**\" (with sparkle/star icon)\n  - Font size ~14px, dark gray color\n- **Right side icons:**\n  - GitHub icon (outline)\n  - Dark mode / moon toggle icon\n\n## Hero Section\n- Centered layout, generous padding ~60-70px top\n\n### Badge above headline\n- Pill-shaped badge with light border: \"**[New] Date Input component →**\"\n  - Has a small sparkle/fireworks icon prefix\n  - Light background, small font ~13px, gray/dark text\n  - Rounded pill shape\n\n### H1 Headline (very large)\n- \"**Unstyled UI components**<br>**for your Design System**\"\n- The words \"**Unstyled**\" and \"**Design System**\" are highlighted in **red/orange accent color** (`#eb5e41` or `#EB5E41`)\n- Rest of text is near-black `#202020`\n- Font size ~48-54px, bold/heavy weight (700-800)\n- Line-height: ~1.15\n- Centered alignment\n\n### Description paragraph\n- \"*A headless library with 45+ accessible components. Bring your own styles and build a design system that works across React, Solid, Vue, and Svelte.*\"\n- Gray text color `#5f5f5f`, ~16-17px, max-width ~640px, centered\n- Line-height ~1.7\n\n### CTA Buttons (centered horizontal row)\n- \"**Get Started**\" button:\n  - Red/orange background (`#eb5e41`), white text\n  - Rounded corners ~6px\n  - Padding ~12px 28px\n  - Font size ~15px, font-weight 600\n  \n- \"**Show Components**\" button:\n  - White/light background, thin border (~1px solid #dcdcdc)\n  - Dark text, same padding and rounding\n  - Same font styling\n\n### Framework Pills Row\n- Below buttons, centered row of framework badges:\n  - Each is a colored circle/pill with an icon + label\n  - \"**React**\" — light blue icon (`#60a5fa`) + \"React\" label\n  - \"**Solid**\" — blue icon (`#446b9e`) + \"Solid\" label  \n  - \"**Vue**\" — green icon (`#42b883`) + \"Vue\" label\n  - \"**Svelte**\" — red/coral icon (`#ff3e00`) + \"Svelte\" label\n  - Small icons (snowflake-like or framework logo shapes) inside each pill\n  - Even spacing between pills\n\n## Decorative Background Elements\n- Faint peach/salmon-colored squares (`rgba(235,94,101,0.08)` or similar) positioned at:\n  - Upper right area (one larger square)\n  - Middle-right area (one medium square)\n  - Lower area (one smaller square)\n  - These create visual interest without being distracting\n  - Squares have no border, just solid fill at very low opacity\n\n## Bottom Tab Bar (floating)\n- Dark bar (near-black `#1a1a1a`) floating at bottom-right or bottom-center\n- Contains tabs: \"**React**\", \"**Solid**\", \"**Vue**\", \"**Svelte**\"\n- Active tab has lighter/highlighted appearance\n- Small chat/feedback icon (red circular button with speech bubble) attached to the tab bar's right edge\n\n## Color Scheme\n- Page bg: `#fdfdfc` (warm off-white)\n- Primary text: `#202020`\n- Secondary/muted: `#5f5f5f`\n- Accent/red: `#eb5e41` (ark-ui brand coral-red)\n- Border: `#e8e3df` or similar warm light gray\n- CTA bg: `#eb5e41`\n- Framework colors: blue, green, red per framework identity\n- Decorative squares: `rgba(235,94,101,0.06)`\n\n## Typography\n- Font family: \"**Wix Madefor Text**, Wix Madefor Text Fallback, ui-sans-serif, ...\"\n- Clean modern sans-serif\n- Headlines very bold and large\n- This font gives it a distinctive friendly-yet-professional feel\n\n## Visual Vibe\n- Warm, friendly, approachable design\n- Not cold/clinical — the warm bg tone makes it inviting\n- Headless/unstyled component library positioning\n- Multi-framework (React, Solid, Vue, Svelte) emphasis\n- Modern, clean, minimal but not sterile\n- The decorative squares add playful character\n- Coral/red accent gives energy without being aggressive\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.button.button--variant_ghost` → transition: background, border-color, color, box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.tt_capitalize.c_gray.dark.11` → transition: color, background, border-color 0.2s cubic-bezier(0.2, 0, 0, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"kobalte","name":"Kobalte","fw":["Solid"],"theme":"无样式 / a11y","vendor":"Kobalte","link":"https://kobalte.dev","kind":"item","img":"previews/kobalte.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/kobaltedev/kobalte","desc":"SolidJS 的无样式可访问组件原语。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Kobalte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Kobalte** (kobalte.dev) — A UI toolkit for building accessible web apps and design systems.\n\n## Header Bar\n- White background, subtle bottom border, height ~52px\n- **Left side:**\n  - \"**Kobalte.**\" brand name in bold black text (~16px), with a period/dot\n  - \"**Menu**\" dropdown button/link next to it\n- **Center area:**\n  - Search bar: \"**Search**\" placeholder + \"**⌘K**\" keyboard shortcut badge\n    - Light gray background `rgb(246, 246, 247)`, rounded ~8px border, width ~220px\n- **Right side nav:**\n  - \"**Components**\" link\n  - \"**Changelog**\" link\n- **Far right icons:**\n  - GitHub icon (outline)\n  - External link / window icon\n\n## Layout Structure\n- **Three-column layout**: Left sidebar (~230px) + Main content (center, ~55%) + Right TOC sidebar (~180px)\n- White page background\n\n## Left Sidebar Navigation\n- White background, right border separator\n- Organized in sections:\n\n  **Overview section header**:\n  - Introduction (active — blue text or highlighted)\n  - Getting started\n  - Styling\n  - Animation\n  - Polymorphism\n  - Server side rendering\n\n  **Components section header**:\n  - Accordion\n  - Alert\n  - Alert Dialog\n  - Badge\n  - Breadcrumbs\n  - Button\n  - Checkbox\n  - Collapsible\n  - Color Area\n  - Color Channel Field\n  - (more items continuing...)\n\n- Font size: ~14px for items\n- Section headers are small uppercase labels (`Overview`, `Components`) in muted color\n- Active item (\"Introduction\") is blue/underlined/highlighted\n- Text color: dark gray `#3f3f46` for normal, blue `#2563eb` for active\n\n## Right Sidebar — \"On this page\" TOC\n- Header: \"**On this page**\" in small bold text\n- List of anchor links:\n  - Introduction (blue/active)\n  - Key features\n  - Accessible\n  - Composable\n  - Unstyled\n  - Acknowledgment\n- Smaller font ~13px, lighter text color for inactive items\n- Compact vertical list\n\n## Main Content Area\n- Padding ~32px 40px\n\n### H1 Heading\n- \"**Introduction**\"\n- Large bold text (~32-36px), near-black `#18181B`\n- Top of main content area\n\n### Description paragraph(s)\n- \"*Kobalte is a UI toolkit for building accessible web apps and design systems with Solid.JS. It provides a set of low-level UI components and primitives which can be the foundation for your design system implementation.*\"\n- Gray text `#52525b`, ~15px, line-height ~1.7\n\n### \"Key features\" section heading\n- Bold ~22px heading below description\n\n### Feature subsections (each has heading + paragraph):\n\n**Accessible**\n- Subheading: \"**Accessible**\" (~18px)\n- Paragraph: \"*Components follow the WAI-ARIA Authoring Practices whenever possible. Kobalte handle accessibility implementation details like ARIA attributes, focus management, and keyboard navigation.*\"\n\n**Composable**\n- Subheading: \"**Composable**\"\n- Paragraph: \"*Kobalte provides granular access to each component parts, so you can wrap them and add your own event listeners, props, etc.*\"\n\n**Unstyled**\n- Subheading: \"**Unstyled**\"\n- Paragraph: \"*Components are shipped with zero styles, allowing you to completely customize the look and feel. Bring your preferred styling solution (vanilla CSS, Tailwind, CSS-in-JS libraries, etc...).*\"\n\n- Links within paragraphs (like \"WAI-ARIA Authoring Practices\") are blue underlined\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Primary text: `#18181B` (near-black)\n- Secondary text: `#52525b` / `#71717a` (gray)\n- Link/accent blue: `#2563eb` (for active items, links)\n- Search bg: `rgb(246, 246, 247)`\n- Border: `#e4e4e7` (light gray)\n- Sidebar active: blue highlight or blue text\n\n## Typography\n- Font family: Inter, ui-sans-serif, system-ui (Inter is the key characteristic)\n- Clean modern sans-serif similar to Vercel/design-system sites\n- Readable body text size\n\n## Visual Vibe\n- Clean documentation site aesthetic\n- Similar to Vercel/Radix/shadcn style documentation pages\n- Three-column doc layout (nav + content + TOC)\n- Professional, developer-focused\n- Accessible/unstyled/headless component library positioning\n- Minimalist, information-dense but well-spaced\n- Inter font gives it a modern tech-doc feel\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.sticky.top-0` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.DocSearch.DocSearch-Button` → transition: border-color 0.25s ease\n- `svg` → transition: color 0.5s ease\n- `kbd.DocSearch-Button-Key` → transition: color, border-color 0.5s, 0.5s ease, ease 0s, 0s\n- `a.px-3.py-2` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.DocSearch-Button`:\n  **focus:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes _hide_e3sag_1  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes _slideIn_e3sag_1  {\n  0%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes _swipeOut_e3sag_1  {\n  0%  {\n  transform: translate(var(--kb-toast-swipe-end-x));\n  } 100%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"solid-headless","name":"Solid Bootstrap","fw":["Solid"],"theme":"Bootstrap 风格","vendor":"SolidJS","link":"https://www.solid-bootstrap.com","kind":"item","img":"previews/solid-headless.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/solidjs/solid-bootstrap","desc":"Bootstrap 5 的 Solid 实现，API 贴近 React-Bootstrap。","prompt":""},{"id":"shoelace","name":"Shoelace (Web Awesome)","fw":["Web Components"],"theme":"框架无关 / 标准化","vendor":"Web Awesome","link":"https://shoelace.style","kind":"item","img":"previews/shoelace.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Range","Form","FileUpload"],"repo":"https://github.com/shoelace-style/shoelace","desc":"标准 Web Components，任意框架可用，框架无关首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Shoelace (Web Awesome) — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width that looks like a macOS window or browser preview frame showing UI components.\n\n## Overall Layout\n- **Background**: Very dark navy/almost-black (#161622 or #1a1a2e) filling the entire viewport\n- **Card container**: A rounded-corner panel (border-radius ~12px) with a subtle border, centered with padding\n- **Window chrome**: Top-left has three small colored dots (red #FF5F57, yellow #FEBC2E, green #28C840) like macOS traffic lights\n- Below the dots is a title bar area\n\n## Header Section (inside card top)\n- **Title text**: \"Shoelace (Web Awesome)\" — bold white, ~20-22px font-size, sans-serif\n- **Subtitle line** below title: \"Web Components · 框架无关 / 标准化\" — smaller (~13-14px), gray color (#9ca3af or similar)\n\n## Component Showcase Area (below header, inside card)\nThis section shows example components in a dark container:\n\n1. **Primary button**: Solid purple background (#9b5de5 / #a78bfa), white text \"Primary\", rounded corners (~8px), no border\n2. **Default button**: Dark background (#252535), light gray/white text \"Default\", subtle border (#3a3a4a), same size as Primary\n3. **Input field placeholder**: Dark background (#252535), rounded, placeholder text \"Type here...\" in muted gray, thin border\n4. **Toggle switch**: A toggle switch in ON position — purple track (#9b5de5) with a white circular knob on right side\n5. **Badge button**: Teal/dark cyan background (#0d7377 or #115e59), white text \"Badge\", small, rounded\n6. **Select dropdown**: Dark background, white text \"Select\" with a down-chevron/triangle icon on right\n\n## Card Preview Section\n- A bordered box (subtle border #2a2a3a) containing:\n  - Heading \"Card title\" — white, bold, ~16px\n  - Body text \"This is a preview of the component look.\" — gray (#9ca3af), ~13px\n\n## Bottom Tag Pills Row\nA row of small pill/tag buttons with dark backgrounds and light borders:\n- First row: Button | Input | Select | Checkbox | Radio | Switch | Range | Form\n- Second row: FileUpload\nEach tag is a small rounded rectangle with thin border, light text, compact padding.\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif\n- Text colors: White (#fff) for headings, gray (#9ca3af or #a0a0b0) for secondary/muted text\n- Accent color: Purple (#9b5de5) used for Primary button and toggle switch\n- Background layers: Card inner bg slightly lighter than page bg (~#1e1e30 vs #161622)\n- Borders: Subtle dark (#2e2e42 or #33334a)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: opacity 0.1s ease\n- `sl-button` → transition: scale 0.25s ease\n- `aside` → transition: translate 0.25s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.visually-hidden:not(-within)`:\n  **focus:** border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important\n- `button`:\n  **hover:** scale: 1.1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、配色和组件结构均与预览图接近；三处过渡动画（div opacity 0.1s、button scale 0.25s、aside translate 0.25s）已按规范实现。"},{"id":"material-web","name":"Material Web (MWC)","fw":["Web Components"],"theme":"Material Design","vendor":"Google","link":"https://material-web.dev","kind":"item","img":"previews/material-web.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","List"],"repo":"https://github.com/material-components/material-web","desc":"Google 官方 Material Design 3 的 Web Components。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Material Web (MWC) — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width that looks like a macOS window or browser preview frame showing UI components.\n\n## Overall Layout\n- **Background**: Very dark navy/almost-black (#161622 or #1a1a2e) filling the entire viewport\n- **Card container**: A rounded-corner panel (border-radius ~12px) with a subtle border, centered with padding\n- **Window chrome**: Top-left has three small colored dots (red #FF5F57, yellow #FEBC2E, green #28C840) like macOS traffic lights\n\n## Header Section (inside card top)\n- **Title text**: \"Material Web (MWC)\" — bold white, ~20-22px font-size, sans-serif\n- **Subtitle line** below title: \"Web Components · Material Design\" — smaller (~13-14px), gray color (#9ca3af)\n\n## Component Showcase Area\n1. **Primary button**: Solid purple background (#9b5de5), white text \"Primary\", rounded corners (~8px), no border\n2. **Default button**: Dark background (#252535), light gray text \"Default\", subtle border (#3a3a4a)\n3. **Input field placeholder**: Dark background, rounded, placeholder \"Type here...\" in muted gray\n4. **Toggle switch**: ON position — purple track (#9b5de5) with white knob on right\n5. **Badge button**: Teal/dark cyan background (#115e59), white text \"Badge\"\n6. **Select dropdown**: Dark background, white text \"Select\" with down-chevron icon\n\n## Card Preview Section\nBordered box containing:\n- Heading \"Card title\" — white bold ~16px\n- Body text \"This is a preview of the component look.\" — gray ~13px\n\n## Bottom Tag Pills Row\nSmall pill/tag buttons: Button | Input | Select | Checkbox | Radio | Switch | Slider | Form | List\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif (\"Google Sans\", Roboto preferred)\n- Text colors: White headings, gray (#9ca3af) secondary\n- Accent: Purple (#9b5de5) for Primary button and toggle\n- Background layers: Card bg ~#1c1c2a, showcase area ~#222235\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline\n  **focus-visible:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"深色卡片、组件排列与标签列表均与预览一致；按钮缩放、div 透明度、aside 位移等过渡效果已设置。"},{"id":"carbon","name":"Carbon Design System","fw":["Web Components","React","Vue","Svelte"],"theme":"企业级 (IBM)","vendor":"IBM","link":"https://carbondesignsystem.com","kind":"item","img":"previews/carbon.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Form","DataTable"],"repo":"https://github.com/carbon-design-system/carbon","desc":"IBM 企业级设计系统，含 React/Vue/Svelte/Web Components 多实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Carbon Design System — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width (macOS window style).\n\n## Layout\n- Background: #161622\n- Card: #1c1c2a, border 1px solid #2a2a3d, border-radius 14px\n- Traffic light dots: red #FF5F57, yellow #FEBC2E, green #28C840\n\n## Header\n- Title: \"Carbon Design System\" — bold white ~21px\n- Subtitle: \"Web Components · React · Vue · Svelte · 企业级（IBM）\" — gray ~13.5px\n\n## Showcase Area (#222235 bg)\n- Primary button: purple #9b5de5, white text \"Primary\"\n- Default button: #2a2a3d bg, \"Default\"\n- Input: \"Type here...\"\n- Toggle: purple ON state\n- Badge: teal #115e59, \"Badge\"\n- Select: \"Select\" with chevron\n\n## Card Section\n- \"Card title\" heading + \"This is a preview of the component look.\" description\n\n## Tag Pills\nButton | Input | Select | Checkbox | Radio | Toggle | Slider | Form | DataTable\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.Banner-module--button-banner--1c242.cds--btn` → transition: background, box-shadow, border-color, outline 0.07s, 0.07s, 0.07s, 0.07s cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9) 0s, 0s, 0s, 0s\n- `a.Header-module--headerName--d3517` → transition: opacity 0.11s cubic-bezier(0.5, 0, 0.1, 1)\n- `div.GlobalSearch-module--container--5229c.GlobalSearch-module--hidden--09bad` → transition: max-width, background 0.11s, 0.11s cubic-bezier(0.5, 0, 0.1, 1), cubic-bezier(0.5, 0, 0.1, 1) 0s, 0s\n- `button.GlobalSearch-module--searchButton--877c5` → transition: background-color, opacity 0.11s, 0.11s cubic-bezier(0.5, 0, 0.1, 1), cubic-bezier(0.5, 0, 0.1, 1) 0s, 0s\n- `button.Header-module--header-button--7135b.Header-module--switcher-button--16b3a` → transition: background-color 0.11s cubic-bezier(0.5, 0, 0.1, 1)\n- `nav.cds--side-nav__navigation.LeftNav-module--side-nav--white--647c8` → transition: inline-size, transform 0.11s, 0.11s cubic-bezier(0.2, 0, 1, 0.9), cubic-bezier(0.2, 0, 1, 0.9) 0s, 0s\n- `button.cds--side-nav__submenu` → transition: color, background-color, outline 0.11s, 0.11s, 0.11s ease, ease, ease 0s, 0s, 0s\n- `svg` → transition: transform 0.11s ease\n- `div.Container-module--overlay--d2679` → transition: all 0.15s ease\n- `main.container.container--homepage` → transition: all 0.25s ease\n- `a.cds--tile.cds--tile--clickable` → transition: background 0.07s ease\n- `button.BackToTopBtn-module--button--12d77` → transition: all 0.11s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cds--btn`:\n  **hover:** background: #ffffff1a; background-color: rgb(57, 57, 57)\n  **active:** background-color: rgb(61, 61, 61)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.cds--header *`:\n  **hover:** background-color: rgb(57, 57, 57)\n  **focus:** border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.Header-module--headerName--d3517`:\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.GlobalSearch-module--searchButton--877c5`:\n  **hover:** background-color: rgb(76, 76, 76)\n  **active:** background-color: rgb(61, 61, 61)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.Switcher-module--link--21c8c`:\n  **hover:** background: #353535; color: rgb(244, 244, 244); background-color: rgb(53, 53, 53)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a11y-status-tag-module--cds--hide-feedback--2671a  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes a11y-status-tag-module--cds--show-feedback--7fb00  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes a11y-status-tag-module--cds--skeleton--05cef  {\n  0%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 20%  {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 28%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 51%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 58%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 82%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 83%  {\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 96%  {\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 100%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  }\n}\n@keyframes Preview-module--cds--hide-feedback--17922  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes Preview-module--cds--show-feedback--079f6  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes Preview-module--cds--skeleton--e57e9  {\n  0%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 20%  {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 28%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 51%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 58%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 82%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 83%  {\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 96%  {\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 100%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  }\n}\n@keyframes Grid-module--cds--hide-feedback--b4331  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes Grid-module--cds--show-feedback--30ed0  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局与配色与预览一致；Carbon 专用的 transition 与 @keyframes 已逐字复制进 CSS，动画规格符合要求。"},{"id":"lion","name":"Lion","fw":["Web Components"],"theme":"无样式 / 表单原语","vendor":"ING","link":"https://lion-web.netlify.app","kind":"item","img":"previews/lion.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","File"],"repo":"https://github.com/ing-bank/lion","desc":"ING 出品的 Web Components 表单原语，无障碍优先。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Lion (https://lion-web.netlify.app) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, white background (#ffffff), text near-dark slate (#2c3e50), font stack \"Open Sans\", sans-serif. Minimal, flat, accessible, no heavy shadows.\n\nTop navigation bar (white background, sticky, subtle bottom border, horizontal padding ~32px, flex justify-between align-center):\n- Left: brand wordmark \"Lion\" in bold #2c3e50.\n- Center/right: nav links in #2c3e50: \"Fundamentals\", \"Guides\", \"Components\", \"Blog\", \"GitHub\", plus \"Help and Feedback\".\n- A text button \"Show Menu\" (transparent background, no border, #2c3e50 text) — likely a mobile/secondary menu trigger.\n\nHero section (centered or left-aligned, white background, generous top padding ~80px):\n- Large headline \"Lion\" in very bold #2c3e50 (~72px).\n- Subcopy / tagline from meta description: \"Fundamental white label web components for building your design system.\" in medium gray, ~18px.\n- A prominent h2 \"Why Lion?\" introducing the value props.\n\nFeature highlights (three short blocks in a row, max-width ~1100px, gap ~32px):\n- \"White Label\" — \"Style the way you need it - no need to override any opinionated existing styling.\"\n- \"Accessible\" — \"All of our components align to plat...\" (platform accessibility standards).\n- (third block continuing the accessible/modular theme).\n\nThe page should feel like a calm, developer-focused web-components design-system landing page: lots of white space, restrained typography, no gradients.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.logo-link` → transition: color 0.3s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.markdown-body *`:\n  **hover:** text-decoration: underline; background: #000\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建截图与预览图视觉一致（深色组件卡片），但与 prompt 中描述的白色首页导航/hero 布局不符；a.logo-link 过渡仅存在于 CSS 而无对应元素。"},{"id":"fast","name":"FAST (Microsoft)","fw":["Web Components"],"theme":"框架无关 / 可定制","vendor":"Microsoft","link":"https://www.fast.design","kind":"item","img":"previews/fast.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Card"],"repo":"https://github.com/microsoft/fast","desc":"微软 FAST 框架，提供可主题化的 Web Components 与设计系统基础。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# FAST — Above-the-fold Website Rebuild Prompt\n\nRebuild the FAST website's above-the-fold region at 1280px width. This is Microsoft's FAST web component library homepage.\n\n## Navigation Bar (top, full-width)\n- Background: Very dark charcoal/near-black (#242526)\n- Height: ~52px\n- **Left side items**:\n  - FAST logo: A stylized pink/magenta circular icon with a swoosh/speed line design, followed by bold italic \"FAST\" text in same pink color (#E83A7C or #D6336C)\n  - Text link \"Docs\" — light gray (#e3e3e3)\n  - Dropdown trigger \"3.x\" with down arrow — light gray\n- **Right side items**:\n  - \"Home\" link with small external-link icon — light gray\n  - \"Community\" link with external-link icon\n  - \"GitHub\" link with external-link icon\n\n## Hero Section (below nav, dark background continues)\nBackground is the same dark (#1a1a1a or #161616), content is centered.\n\n### Top tagline (small, uppercase, letter-spaced)\n- Text: \"FLEXIBLE, PERFORMANT, & INTUITIVE\"\n- Color: Pink/magenta accent (#D6336C or #E83A7C)\n- Font size: ~13px, font-weight: 600, letter-spacing: 2px\n- Centered, margin-top: ~50px\n\n### Logo + Brand name\n- Large circular pink icon (the FAST logo — a swoosh/planet-with-ring design) ~64px\n- Next to it, large text \"FAST\" in white/light gray — font size ~56px, bold, slightly italic/slanted style\n\n### Description paragraph\n- Text: \"FAST is dedicated to providing support for native Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.\"\n- Color: Light gray (#dcdcdc or #e3e3e3)\n- Font size: ~15px, line-height: 1.7\n- Max width: ~720px, centered\n- Margin top: ~20px\n\n### CTA link line\n- Text: \"For an in-depth explanation of FAST,\"\n- Then link text: \"see our docs introduction.\"\n- Link color: Pink/magenta (#D6336C)\n\n### Decorative vertical line\n- A thin pink/magenta vertical line (~2px wide, ~40px tall) below the paragraph area, centered\n- Color: #D6336C\n\n### Section divider\n- Small uppercase text: \"HOW TO\" in the pink accent color\n- Font-size: ~12px, letter-spacing: 2px, margin-top: ~40px\n\n## Getting Started Section (still visible in viewport)\n### Heading\n- \"Getting Started\" — very large, white, font-size ~44px, font-weight: 700\n\n### Subheading\n- \"Install the package\" — medium size, white, font-size ~18px, font-weight: 500\n\n### Code block\n- Dark background (#0d0d0d or #111), rounded corners\n- Monospace text: `npm install @microsoft/fast-element`\n- Green-tinted monospace text color\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif\n- Page background: #161616 / #1a1a1a (very dark)\n- Nav background: #242526\n- Accent color: #D6336C (pink/magenta) used for brand, links, highlights\n- Body text: #e3e3e3 (light gray)\n- Headings: #ffffff (white)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.navbar__brand` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navbar`:\n  **focus:** outline: 0\n- `.navbar__inner`:\n  **focus:** outline: 0\n- `.navbar__items`:\n  **focus:** outline: 0\n- `.clean-btn`:\n  **focus:** outline: 0\n- `.menu__link`:\n  **focus:** outline: 0\n- `.navbar__logo`:\n  **focus:** outline: 0\n- `.dropdown`:\n  **focus:** outline: 0\n- `.clean-list`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n  **focus:** outline: 0\n- `.icon-external-link`:\n  **focus:** outline: 0\n- `body:not(.navigation-with-keyboard) :not(input)`:\n  **focus:** outline: 0\n- `.row`:\n  **focus:** outline: 0\n- `.footer__item`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"首页导航、hero、文案、粉色强调色与代码块均与预览高度一致；a.navbar__brand 与 ul.dropdown__menu 的过渡已按规范写入 CSS。"},{"id":"bootstrap","name":"Bootstrap","fw":["CSS"],"theme":"经典 / 栅格","vendor":"Bootstrap","link":"https://getbootstrap.com","kind":"item","img":"previews/bootstrap.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/twbs/bootstrap","desc":"最流行的移动优先 CSS 框架，无 jQuery、CSS 变量主题、暗黑模式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Bootstrap — Above-the-fold Website Rebuild Prompt\n\nRebuild the Bootstrap homepage above-the-fold region at 1280px width.\n\n## Navigation Bar (top, full-width)\n- Background: Rich purple (#712cf9 or #6f42c1) — solid, no gradient\n- Height: ~56px\n- **Left side items**:\n  - \"B\" logo: White letter \"B\" inside a rounded square/pill shape (purple bg with white B), ~32x32px\n  - Nav links in white: \"Docs\", \"Examples\", \"Icons\", \"Blog\" — font-size ~15px, no underline\n- **Right side items**:\n  - Search box: Dark translucent background (rgba(0,0,0,0.15)), rounded corners (~6px), placeholder \"Search\" with a magnifying glass icon and keyboard shortcut \"⌘K\" badge\n  - GitHub icon link (white outline)\n  - Twitter/X icon link\n  - Dropdown trigger \"v5.3\" with down caret — white text\n  - Sun/moon theme toggle icon(s)\n\n## Hero Section (below nav)\n- **Background**: A soft multi-color gradient from light blue (#d4e5ff) through lavender/purple to pale yellow/cream (#fff8e1). Very subtle, almost pastel.\n- Content is centered vertically and horizontally within the hero area.\n\n### Alert banner (above main hero content)\n- Small yellow/gold pill-shaped banner: \"Get Security Updates for Bootstrap 3 & 4 →\"\n- Background: #fde68a or similar warm yellow\n- Text: dark, small font-size, arrow on right\n- Centered, margin-top from navbar\n\n### Main Logo\n- Large purple rounded-square shape (like a shield/brace shape with curved bottom corners) containing a white bold \"B\" letter\n- Size: ~120x120px approximately\n- Purple fill: #712cf9\n\n### Main Heading\n- \"Build fast, responsive sites with Bootstrap\"\n- Font size: very large (~48-52px), bold (700+), dark color (#1a1a2e or near-black), centered below logo\n- Max-width ~800px\n\n### Description paragraph\n- \"Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.\"\n- Color: Medium gray/dark gray (#495057 or similar)\n- Font-size: ~17-18px, line-height: 1.6\n- Centered, max-width ~750px\n\n## CTA Buttons Row (below description)\nTwo buttons side by side, centered:\n\n1. **Code input button**: Light gray/white-ish background, dark text showing \"$ npm i bootstrap@5.3.8\" with a copy icon on right side. Rounded corners, border. Looks like an input field that's also clickable.\n   - Background: rgba(255,255,255,0.8) or white\n   - Border: subtle gray\n   - Monospace text for the command part\n\n2. **Primary action button**: Purple background (#712cf9), white text \"📖 Read the docs\" (with book/document icon)\n   - Rounded corners, same height as code input\n   - Bold text\n\n## Version info line\nBelow the buttons: \"Currently v5.3.8 · Download · All releases\" — smaller text, gray, centered, links underlined\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif\n- Brand purple: #712cf9\n- Hero gradient: linear-gradient(170deg, #dce6ff 0%, #e0d4fc 40%, #f5ebff 70%, #fef3c7 100%)\n- Body text: #212529 (dark)\n- Secondary text: #495057 / #6c757d\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div` → animation: carbon-fade-in 0.4s ease-out 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.navbar-brand.p-0` → transition: transform 0.2s ease-in-out\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.nav-link.py-2` → transition: color, background-color, border-color 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `a.btn.btn-lg` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navbar-brand`:\n  **hover:** transform: rotate(-5deg) scale(1.1)\n- `.DocSearch-Button`:\n  **hover:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n  **active:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n  **focus:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n- `.navbar-toggler`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; color: rgb(255, 255, 255)\n- `.btn-close`:\n  **focus:** outline: 0\n- `.nav-link`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem; color: rgb(255, 255, 255)\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem; color: rgb(255, 255, 255)\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes carbon-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：紫色 #712cf9 导航 + 多色渐变 hero + 黄 alert + 大 B logo。真实 carbon-fade-in 0.4s ease-out 与 nav-link/btn 0.15s ease-in-out 过渡照抄。配色/文案一致。"},{"id":"tailwind","name":"Tailwind CSS","fw":["CSS"],"theme":"原子化 Utility","vendor":"Tailwind Labs","link":"https://tailwindcss.com","kind":"item","img":"previews/tailwind.png","chips":["Utility Classes (Grid/Flex/Spacing/Typography)","Forms Plugin","Typography Plugin","Container","Divider (Border)","Badge (via classes)","Card (via classes)","Button (via classes)"],"repo":"https://github.com/tailwindlabs/tailwindcss","desc":"原子化 CSS 引擎，高度定制，作为样式层被众多组件库采用。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailwind CSS (https://tailwindcss.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#000000) on a white/transparent background, font stack \"Inter\", system-ui, sans-serif. Utility-first aesthetic, generous whitespace, crisp typography, no heavy shadows.\n\nTop navigation bar (white background, sticky, horizontal padding ~24px, flex justify-between align-center):\n- Left: the Tailwind CSS wordmark/logo in bold black.\n- Right: a command-palette trigger styled as a faint pill \"Quick search ⌘K\" (very light gray translucent background, rounded full radius, muted black text), plus a version pill \"v4.3\" (translucent dark background, rounded 16px, light text) and a couple of small icon buttons (transparent, rounded 6px).\n\nHero section (centered, white background, large vertical padding):\n- Huge bold headline: \"Rapidly build modern websites without ever leaving your HTML.\" in black, ~56px, max-width ~900px, centered.\n- Supporting subhead echoing the meta description: \"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.\" in gray, ~18px.\n- A small green accent button \"Check availability\" (emerald-green background ~ #00d26a, white text, border-radius 8px, padding ~10px 18px).\n\nSecondary section headings below the fold to hint at structure: \"Supported by the best.\", \"Built for the modern web.\", \"Ship faster and smaller.\", \"Build whatever you want, without touching your CSS file.\"\n\nThe whole page should feel like a polished, fast-loading CSS framework landing page with a strong typographic hero and a single green call-to-action.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.size-48.shadow-xl` → transition: border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.pr-1\\.5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.075)\n- `.hover\\:bg-gray-950\\/5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.05)\n- `.sm\\:px-2`:\n  **hover:** background-color: rgba(3, 7, 18, 0.024)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes flash-code  {\n  0%  {\n  background-color: lab(63.3038 -18.433 -51.0407 / 0.1);\n  } 100%  {\n  background-color: lab(63.3038 -18.433 -51.0407 / 0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Inter 字体、sticky 导航 + ⌘K 药丸 + v4.3 版本药丸 + 大标题 hero + 绿色 #00d26a CTA。真实 img border-radius 0.35s cubic-bezier(0.4,0,0.2,1) 过渡与 ping/pulse/bounce/flash-code @keyframes 照抄。"},{"id":"tailwindui","name":"Tailwind UI","fw":["CSS"],"theme":"官方付费模板","vendor":"Tailwind Labs","link":"https://tailwindui.com","kind":"item","img":"previews/tailwindui.png","chips":["Button","Form","Card","Modal","Dropdown","Nav","Tabs","Accordion","Table"],"repo":"https://github.com/tailwindlabs/tailwindui","desc":"Tailwind 官方付费组件与模板，一次购买终身使用，质量极高。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailwind Plus / Tailwind UI (https://tailwindui.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: crisp, modern, white header on a very dark navy background for the hero (#111827-ish, derived from oklch(0.13 0.028 261.692)), dark near-black text, font stack \"InterVariable\", system-ui, sans-serif. Polished SaaS/marketing aesthetic.\n\nTop navigation bar (white background, horizontal padding ~24px, flex justify-between align-center):\n- Left: nav item \"Introducing Oatmeal / Our new multi-theme marketing site kit\" (a promo badge with small headline + subtext) followed by \"UI Blocks\", \"Templates\", \"UI Kit\".\n- Right: \"Sign in\" text link and a solid \"Get full access\" button.\n\nHero section (dark navy background, white text, centered, large vertical padding):\n- Big bold white headline: \"Build your next idea even faster.\"\n- Subcopy describing beautiful UI components and templates by the creators of Tailwind CSS.\n- A row of category tabs/pills in muted white: \"MARKETING\", \"APPLICATION UI\", and a highlighted \"UI BLOCKS\" pill in indigo (#6d5ae0-ish, from oklch(0.511 0.262 276.966)).\n\nFeature blocks (three columns on the dark background, gap ~32px):\n- \"UI BLOCKS — Beautiful UI components, built for real-world projects. A library of 500+ professionally designed, expertly crafted component examples.\"\n- \"TEMPLATES — Modern website templates, ready for your next launch. Visually-stunning, customizable site templates built with React and Next.js.\"\n- \"Testimonials — Tailwind Plus made it possible for me to ship the first version of Reflect entirely by myself, while still being immensely pro...\"\n\nFooter hint of \"Meet Catalyst, a professional-grade UI kit for React applications.\"\n\nThe page should feel like a premium, dark-hero marketing site with a single indigo accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `g` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ring`:\n  **hover:** background-color: rgba(3, 7, 18, 0.02)\n- `.hover\\:bg-gray-950\\/5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.05)\n- `.sm\\:px-6`:\n  **hover:** background-color: rgba(3, 7, 18, 0.02)\n- `.hover\\:bg-gray-950\\/2\\.5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.024)\n  **focus:** background-color: rgba(255, 255, 255, 0.75)\n  **focus-visible:** background-color: rgba(255, 255, 255, 0.75)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spin  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes nprogress-spinner  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建截图与预览图一致（深色卡片 + 橙色主按钮），但与 prompt 描述的白色导航/深色 hero 营销页不符；g 过渡与 spin 关键帧仅在 CSS 中无对应 SVG 元素。"},{"id":"daisyui","name":"daisyUI","fw":["CSS"],"theme":"Tailwind 插件","vendor":"daisyUI","link":"https://daisyui.com","kind":"item","img":"previews/daisyui.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Toggle","Table","Card"],"repo":"https://github.com/saadeghi/daisyui","desc":"Tailwind 最流行的组件插件，语义化类名、多主题，零 JS 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the daisyUI (https://daisyui.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#0d0d0d-ish, from oklch(0.21 0.006 285.885)), transparent background, font stack \"ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif\". Tailwind component-library aesthetic with multiple built-in themes.\n\nTop navigation bar (horizontal padding ~24px, flex justify-between align-center):\n- Left: a \"Docs\" / \"Changelog\" group plus a version dropdown area showing the current version \"5.6.18\" (muted text) and a \"More\" button (transparent, rounded 4px, muted borderless).\n- Center: a search trigger \"Search… ⌘K\" (transparent, 1px subtle border, rounded 4px).\n- Right: theme switch buttons as small pills — \"light\", \"dark\", \"cupcake\", \"bumblebee\" (transparent, rounded 4px, near-black text) — letting users preview themes. Plus \"Components\", \"Templates\" links and a \"Discount\" badge.\n\nHero section (centered, large vertical padding):\n- Big bold headline: \"Faster, cleaner, easier\" on one line and \"Tailwind CSS development\" on the next, in near-black, ~64px.\n- Subcopy echoing the tagline: \"Tailwind CSS component library — build faster with semantic components, built-in themes, and reusable UI blocks.\"\n\nSupporting h2 value props (three compact blocks):\n- \"don't re-invent the wheel every time\"\n- \"instead of writing 100 class names\"\n- \"use semantic class names\"\n- plus a \"Design system\" block.\n\nThe page should feel like a friendly, themeable Tailwind component library landing page with a prominent theme-switch control in the nav.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.flex.animate-[reveal-top-slow_0.5s]` → animation: reveal-top-slow 0.5s ease 1 normal\n- `div.inline-grid.w-full` → animation: reveal-slow 0.5s ease 1 normal\n- `div.justify-items-center` → animation: rotator 15s linear(0 0%, 0 32%, 0.333333 33%, 0.333333 65%, 0.666666 66%, 0.666666 99%, 1 100%, 1 100%) infinite normal\n- `div.carbon-cover--stacked` → animation: carbon-fade-in 0.4s ease-out 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.bg-base-100.text-base-content` → transition: box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.tooltip-content.text-[0.625rem]` → transition: opacity, transform 0.2s, 0.2s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `span` → transition: width 0.4s ease-out 0.2s\n- `button.input.input-sm` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.btn.group` → transition: color, background-color, border-color, box-shadow, transform 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `a.btn.btn-xs` → transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.invisible.sticky` → transition: all 0.7s ease\n- `input.toggle.toggle-xs` → transition: color, grid-template-columns 0.3s, 0.2s ease, ease 0s, 0s\n- `div.card.bg-base-100` → transition: outline 0.2s ease-in-out\n- `input.checkbox.checkbox-xs` → transition: background-color, box-shadow 0.2s, 0.2s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.link`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.tab:is(.tabs > .tab)`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes reveal  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-slow  {\n  0%, 20%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-slower  {\n  0%, 40%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-top  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes reveal-top-slow  {\n  0%, 20%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes reveal-top-slower  {\n  0%, 40%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes dropdown  {\n  0%  {\n  opacity: 0;\n  }\n}\n@keyframes rotator  {\n  89.9999%, 100%  {\n  --first-item-position: 0 0%;\n  } 90%, 99.9999%  {\n  --first-item-position: 0 calc(var(--items) * 100%);\n  } 100%  {\n  translate: 0px -100%;\n  }\n}\n@keyframes radio  {\n  0%  {\n  padding: 5px;\n  } 50%  {\n  padding: 3px;\n  }\n}\n@keyframes toast  {\n  0%  {\n  opacity: 0;\n  scale: 0.9;\n  } 100%  {\n  opacity: 1;\n  scale: 1;\n  }\n}\n@keyframes skeleton  {\n  0%  {\n  background-position: 150% center;\n  } 100%  {\n  background-position: -50% center;\n  }\n}\n@keyframes progress  {\n  50%  {\n  background-position-x: -115%;\n  }\n}\n@keyframes rating  {\n  0%, 40%  {\n  filter: brightness(1.05) contrast(1.05);\n  scale: 1.1;\n  }\n}\n@keyframes aura  {\n  100%  {\n  --aura-angle: 360deg;\n  transform: translateZ(1px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Tailwind 风导航 + 主题切换药丸 + 大标题 hero + 四价值块。真实 reveal-top-slow/reveal-slow 0.5s ease 与 theme 按钮 0.2s cubic-bezier(0,0,0.2,1) 过渡照抄。近黑 #0d0d0d 一致。"},{"id":"bulma","name":"Bulma","fw":["CSS"],"theme":"纯 CSS / Flexbox","vendor":"Bulma","link":"https://bulma.io","kind":"item","img":"previews/bulma.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Table","Card","Tag"],"repo":"https://github.com/jgthms/bulma","desc":"基于 Flexbox 的纯 CSS 框架，无 JS、轻量。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Bulma (https://bulma.io) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, body text slate (#404654, rgb(64,70,84)), font stack \"Inter, SF Pro, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif\". Light, airy Flexbox-framework landing page.\n\nTop navigation bar (white/transparent background, horizontal padding ~32px, flex justify-between align-center):\n- Left: the Bulma wordmark/logo in bold #404654.\n- Right: nav links \"Docs\", \"Expo\", \"Love\", \"Sponsor\", \"Download\".\n- A \"Dark Mode\" toggle button (dark background #2e333d rgb(46,51,61), light text #f3f4f6, border-radius 8px) and a few small icon buttons (transparent, rounded 8px, #2e333d).\n\nHero section (centered, white background, large vertical padding):\n- Large bold headline: \"The Modern\" / \"CSS Framework\" (two lines) in #404654, ~64px.\n- Subcopy / meta: \"Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.\" in gray, ~18px.\n- A primary \"Download\" button (turquoise #00d1b2 rgb(0,209,178), dark text #001f1a, border-radius 6px, padding ~12px 24px).\n\nFeature highlights (four-column row, gap ~24px):\n- \"100% Responsive\", \"Modern\", \"Easy\", \"Free\" — each with a short description and a small accent icon (turquoise #00d1b2 and amber #ffb70f accents).\n\nA feature-list strip mentioning: CSS Variables, Dark Mode, Dart Sass, Flexbox, Modular, Open Source, Responsive, Free, Smart Grid, Auto Color, Skeletons, Themes.\n\nThe page should feel like a classic, friendly, turquoise-accented CSS framework landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.bd-circle.js-animated` → animation: anim-grow 1s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `div.bd-bubble-content` → animation: anim-rise-up 0.5s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `div.bd-bubble-arrow` → animation: anim-slide-down 0.5s cubic-bezier(0, 0, 0, 1) 0.5s 1 normal both\n- `footer.bd-bubble-author` → animation: anim-pivot-up 0.5s cubic-bezier(0, 0, 0, 1) 0.7s 1 normal both\n- `h1.bd-home-title.js-animated` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `p.bd-home-tagline` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.2s 1 normal both\n- `span.thing.bd-home-knowledge` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.4s 1 normal both\n- `a.button.is-primary` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.6s 1 normal both\n- `a.button` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.8s 1 normal both\n- `div.masterclass-background` → animation: anim-fade-in 1s ease 1 normal both\n- `a.masterclass-body` → animation: anim-slide-up 1s ease 1 normal both\n- `div.shine` → animation: gradient-angle, gradient-angle 3s, 7.5s linear, linear 0s, 0s infinite, infinite normal, reverse none, none\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.launch-code.is-animated` → transition: background-color, border-color, color 0.294s ease\n- `div.bd-dot.js-ready` → transition: opacity 0.2s ease\n- `div.thing.is-cssvars` → transition: background-color, color 0.294s ease\n- `span.icon.is-small` → transition: color 0.294s ease\n- `header.bd-header` → transition: background-image 0.294s ease\n- `div.bd-nav-menu.is-more` → transition: opacity, transform 0.294s ease\n- `button.bd-cycle.js-burger` → transition: background-color 0.294s ease\n- `div.bd-cycles` → transition: transform 0.294s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bd-nav-menu`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n- `.bd-feature`:\n  **hover:** transform: translateY(-1em)\n- `.bd-best-item`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.1) 0px 1em 1em; transform: translateY(-0.5em)\n- `.bd-tw-content a`:\n  **hover:** text-decoration: underline\n- `.bd-tw-date a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@-webkit-keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@-webkit-keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@-webkit-keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@-webkit-keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@-webkit-keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes spinAround  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(359deg);\n  }\n}\n@keyframes pulsate  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes moveIndeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes anim-rise-up  {\n  0%  {\n  transform: rotateX(110deg);\n  } 100%  {\n  transform: rotateX(0deg);\n  }\n}\n@keyframes anim-pivot-up  {\n  0%  {\n  transform: rotateX(-110deg);\n  } 100%  {\n  transform: rotateX(0deg);\n  }\n}\n@keyframes anim-slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-50%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes anim-grow  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes anim-slow-intro  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.86);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Bulma 大标题 hero + turquoise #00d1b2 Download + 四特性列 + 特性条。真实 anim-slow-intro 0.5s cubic-bezier(0,0,0,1) 与 anim-grow、link 0.294s ease 过渡照抄。slate #404654 一致。"},{"id":"foundation","name":"Foundation","fw":["CSS"],"theme":"企业级 / 响应式","vendor":"ZURB / XY Grid","link":"https://get.foundation","kind":"item","img":"previews/foundation.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Accordion"],"repo":"https://github.com/foundation/foundation-sites","desc":"企业级响应式前端框架，XY Grid 灵活，语义化。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Foundation (https://get.foundation) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#0a0a0a, rgb(10,10,10)) on an off-white background (#fefefe, rgb(254,254,254)), font stack \"Proxima Nova\", proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif. Enterprise responsive-framework aesthetic.\n\nTop navigation bar (off-white background, horizontal padding ~24px, flex justify-between align-center):\n- Left: the \"Foundation\" brand wordmark in bold black (border-radius 3px).\n- Right: a dropdown nav group \"Develop\" revealing \"Foundation for Sites\", \"Foundation for Email\", \"HTML Templates\", \"Resources\", \"Building Blocks\"; plus top-level links \"Foundation Framework\", \"Showcase\", \"Brands\", \"Case Studies\", \"Buzz\", \"About Foundation\".\n\nHero section (centered, off-white background, large vertical padding):\n- Big bold headline \"Foundation\" in black, ~72px.\n- Large subhead h2: \"The most advanced responsive front-end framework in the world.\" in near-black, ~32px.\n- A primary blue \"Getting Started\" button (blue #1779ba rgb(23,121,186), light text #f5f5f5, border-radius 0, padding ~12px 24px) and a \"Download Foundation 6\" button (slightly lighter blue #1583cc rgb(21,131,204), white text, border-radius 3px).\n\nSecondary section: \"Responsive design gets a whole lot faster\" with two product columns:\n- \"Sites\" and \"Emails\", each with a \"Learn More\" blue button (#1779ba).\n\nSocial proof strip: \"29.3k GitHub stars\", \"@FoundationCSS\", and \"Brands using Foundation: See who else is using Foundation →\".\n\nThe page should feel like a mature, blue-accented, corporate front-end framework landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.off-canvas.position-left` → transition: transform 0.5s ease\n- `li.topbar-title` → transition: all 0.25s ease-in-out\n- `a.button` → transition: background-color, color 0.25s, 0.25s ease-out, ease-out 0s, 0s\n- `div.js-off-canvas-overlay.is-overlay-fixed` → transition: opacity, visibility 0.5s, 0.5s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.off-canvas a`:\n  **hover:** color: rgb(25, 126, 178)\n  **focus:** color: rgb(25, 126, 178)\n- `.title-bar-home-link`:\n  **hover:** color: rgb(254, 254, 254); opacity: 1\n  **focus:** color: rgb(25, 126, 178)\n- `.menu input`:\n  **hover:** color: rgb(25, 126, 178); opacity: 1; background: #41525e; background-color: rgb(65, 82, 94)\n  **focus:** color: rgb(25, 126, 178); background: #41525e; background-color: rgb(65, 82, 94)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes inky-float  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(2%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes purple-bubbles  {\n  0%  {\n  transform: scale(0);\n  margin-top: 0px;\n  opacity: 0;\n  } 17%  {\n  transform: scale(0.1);\n  opacity: 1;\n  } 19%  {\n  transform: scale(0.9);\n  opacity: 1;\n  } 20%  {\n  transform: scale(1);\n  } 25%  {\n  transform: scale(1.1);\n  } 30%  {\n  transform: scale(0.95);\n  } 45%  {\n  transform: scale(1.1);\n  } 91%  {\n  transform: scale(1);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  margin-top: -100px;\n  opacity: 0;\n  }\n}\n@keyframes inky-fishes  {\n  0%  {\n  transform: rotate(-15deg);\n  } 50%  {\n  transform: rotate(15deg);\n  } 100%  {\n  transform: rotate(-15deg);\n  }\n}\n@keyframes fish1  {\n  0%  {\n  transform: translateX(0%);\n  } 50%  {\n  transform: translateX(3%);\n  } 100%  {\n  transform: translateX(0%);\n  }\n}\n@keyframes small-inky  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(2%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes fish2  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(12%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes fish3  {\n  0%  {\n  transform: translateX(0%);\n  } 50%  {\n  transform: translateX(5%);\n  } 100%  {\n  transform: translateX(0%);\n  }\n}\n@keyframes inky-hover  {\n  0%  {\n  margin-top: 0px;\n  } 100%  {\n  margin-top: -25px;\n  }\n}\n@keyframes fish-hover  {\n  0%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(10px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes scroll  {\n  0%  {\n  transform: translateY(-4500px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes flicker  {\n  0%  {\n  transform: rotate(-1deg);\n  } 20%  {\n  opacity: 0.7;\n  transform: rotate(1deg);\n  } 40%  {\n  transform: rotate(-1deg);\n  } 60%  {\n  opacity: 1;\n  transform: rotate(1deg) scaleY(1.04);\n  } 80%  {\n  transform: rotate(-2deg) scaleY(0.92);\n  } 100%  {\n  transform: rotate(1deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建与预览图一致（深色组件卡片），但与 prompt 描述的白色 Foundation 首页/蓝色按钮/企业级布局差异较大；关键帧与过渡仅在 CSS 中未绑定到实际元素。"},{"id":"pico","name":"Pico.css","fw":["CSS"],"theme":"极简 / 无类","vendor":"Pico","link":"https://picocss.com","kind":"item","img":"previews/pico.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Card"],"repo":"https://github.com/picocss/pico","desc":"超轻量级语义化 CSS 框架，无需写类名，写 HTML 即得样式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Pico.css — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Pico.css design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Pico.css\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 极简 / 无类\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid yellow/orange (#F59E0B) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #F59E0B, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Switch` `Table` `Card`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: yellow/orange (#F59E0B) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: background-color, color, text-decoration, box-shadow, -webkit-text-decoration 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s\n- `circle` → transition: transform 0.26s cubic-bezier(0, 0, 0, 1.25) 0.14s\n- `a` → transition: background-color, border-color, color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `g` → transition: transform 0.2s ease-in-out\n- `input` → transition: border-radius 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **focus:** transform: translateY(0px); opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes modal-overlay  {\n  0%  {\n  backdrop-filter: none;\n  background-color: transparent;\n  }\n}\n@keyframes modal  {\n  0%  {\n  transform: translateY(-100%);\n  opacity: 0;\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes tooltip-slide  {\n  100%  {\n  transform: var(--pico-tooltip-slide-to);\n  opacity: 1;\n  }\n}\n@keyframes tooltip-caret-slide  {\n  50%  {\n  opacity: 0;\n  } 100%  {\n  transform: var(--pico-tooltip-caret-slide-to);\n  opacity: 1;\n  }\n}\n@keyframes sparkle  {\n  0%  {\n  transform: scale(0);\n  opacity: 0;\n  } 20%  {\n  transform: scale(1.25);\n  opacity: 1;\n  } 45%  {\n  transform: scale(1);\n  } 55%  {\n  transform: scale(1.25);\n  opacity: 0.75;\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes page-loading  {\n  0%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"深色卡片布局、配色、组件与标签均与预览一致；Pico 全部过渡与 @keyframes 已逐字写入 CSS，input 过渡应用到了实际输入框。"},{"id":"semantic-ui","name":"Semantic UI","fw":["CSS"],"theme":"语义化","vendor":"Semantic UI","link":"https://semantic-ui.com","kind":"item","img":"previews/semantic-ui.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Table","Card","Label"],"repo":"https://github.com/Semantic-Org/Semantic-UI","desc":"以自然语言类名组织 UI，内容驱动站点友好。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Semantic UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Semantic UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Semantic UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 语义化\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid yellow/orange (#F59E0B) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #F59E0B, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Table` `Card` `Label`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: yellow/orange (#F59E0B) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.item` → transition: background, box-shadow, color 0.1s, 0.1s, 0.1s ease, ease, ease 0s, 0s, 0s\n- `div.pusher` → transition: transform 0.5s ease\n- `div.following.bar` → transition: padding, background, box-shadow, border 0.5s, 0.5s, 0.5s, 0.5s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.item` → transition: color 0.1s ease\n- `div.ui.logo` → transition: transform, left, width, height 0.6s, 0.6s, 0.6s, 0.6s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `div.masthead.segment` → transition: background, opacity 6s, 6s cubic-bezier(0.68, -0.55, 0.265, 1.4), cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, 0s\n- `a.ui.black` → transition: background 0.1s ease\n- `a.ui.huge` → transition: opacity, background-color, color, box-shadow, background 0.1s, 0.1s, 0.1s, 0.1s, 0.1s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ui.sidebar > *`:\n  **hover:** color: rgb(255, 255, 255); background: rgba(255,255,255,.08); background-color: rgba(255, 255, 255, 0.08)\n  **active:** background: rgba(255,255,255,.08); color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.08)\n- `.ui.image`:\n  **hover:** color: rgb(30, 112, 191)\n- `.ui.menu .item > a:not(.ui)`:\n  **hover:** color: rgb(30, 112, 191)\n- `.ui.menu .item`:\n  **hover:** color: rgb(255, 255, 255); background: 0 0; background-color: rgba(255, 255, 255, 0.08)\n  **active:** background: rgba(255,255,255,.08); color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.08)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes labeled-button-icon-loading  {\n  0%  {\n  transform: translateY(-50%) rotate(0deg);\n  } 100%  {\n  transform: translateY(-50%) rotate(360deg);\n  }\n}\n@-webkit-keyframes icon-loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes loader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes placeholderShimmer  {\n  0%  {\n  background-position: -1200px 0px;\n  } 100%  {\n  background-position: 1200px 0px;\n  }\n}\n@-webkit-keyframes progress-active  {\n  0%  {\n  opacity: 0.3;\n  width: 0px;\n  } 100%  {\n  opacity: 0;\n  width: 100%;\n  }\n}\n@-webkit-keyframes browseIn  {\n  0%  {\n  transform: scale(0.8) translateZ(0px);\n  z-index: -1;\n  } 10%  {\n  transform: scale(0.8) translateZ(0px);\n  z-index: -1;\n  opacity: 0.7;\n  } 80%  {\n  transform: scale(1.05) translateZ(0px);\n  opacity: 1;\n  z-index: 999;\n  } 100%  {\n  transform: scale(1) translateZ(0px);\n  z-index: 999;\n  }\n}\n@-webkit-keyframes browseOutLeft  {\n  0%  {\n  z-index: 999;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg);\n  } 50%  {\n  z-index: -1;\n  transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  z-index: -1;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg) translateZ(-10px);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes browseOutRight  {\n  0%  {\n  z-index: 999;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg);\n  } 50%  {\n  z-index: 1;\n  transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  z-index: 1;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg) translateZ(-10px);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes dropIn  {\n  0%  {\n  opacity: 0;\n  transform: scale(0);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@-webkit-keyframes dropOut  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0);\n  }\n}\n@-webkit-keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes fadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes fadeInLeft  {\n  0%  {\n  opacity: 0;\n  transform: translateX(10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card rebuilt with exact hex colors, real copy, component showcase and tag pills; @keyframes pasted verbatim; layout/colors/components match preview."},{"id":"spectre","name":"Spectre.css","fw":["CSS"],"theme":"轻量 / 现代","vendor":"Spectre","link":"https://picturepan2.github.io/spectre","kind":"item","img":"previews/spectre.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Card"],"repo":"https://github.com/picturepan2/spectre","desc":"轻量级、现代、响应式的 CSS 框架。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Spectre.css — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Spectre.css design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Spectre.css\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 轻量 / 现代\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid blue/indigo (#6366F1) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #6366F1, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Switch` `Table` `Card`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: indigo/blue (#6366F1) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.btn.btn-primary` → transition: background, border, box-shadow, color 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `a.active`:\n  **hover:** color: rgb(48, 46, 205); text-decoration: underline\n  **active:** color: rgb(48, 46, 205); text-decoration: underline\n  **focus:** box-shadow: rgba(87, 85, 217, 0.2) 0px 0px 0px 0.1rem; color: rgb(48, 46, 205); text-decoration: underline\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255); text-decoration: underline; background: #4240d4; border-color: #3634d2; background-color: rgb(66, 64, 212); border-top-color: rgb(54, 52, 210); border-right-color: rgb(54, 52, 210); border-bottom-color: rgb(54, 52, 210); border-left-color: rgb(54, 52, 210)\n  **active:** color: rgb(255, 255, 255); text-decoration: underline; background: #3a38d2; border-color: #302ecd; background-color: rgb(58, 56, 210); border-top-color: rgb(48, 46, 205); border-right-color: rgb(48, 46, 205); border-bottom-color: rgb(48, 46, 205); border-left-color: rgb(48, 46, 205)\n  **focus:** box-shadow: rgba(87, 85, 217, 0.2) 0px 0px 0px 0.1rem; color: rgb(255, 255, 255); text-decoration: underline; background: #4240d4; border-color: #3634d2; background-color: rgb(66, 64, 212); border-top-color: rgb(54, 52, 210); border-right-color: rgb(54, 52, 210); border-bottom-color: rgb(54, 52, 210); border-left-color: rgb(54, 52, 210)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-1.6rem);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes carousel-slidein  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes carousel-slideout  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(-50%);\n  }\n}\n@keyframes first-run  {\n  0%  {\n  width: 0px;\n  } 25%  {\n  width: 2.4rem;\n  } 50%  {\n  width: 0.8rem;\n  } 75%  {\n  width: 1.2rem;\n  } 100%  {\n  width: 0px;\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes sbx-reset-in  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(-20%, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with indigo accent (#6366F1), real tags and copy; @keyframes pasted verbatim; visual match."},{"id":"atlassian","name":"Atlassian Design System","fw":["React","Web Components"],"theme":"协作工具 (Jira/Confluence)","vendor":"Atlassian","link":"https://atlassian.design","kind":"item","img":"previews/atlassian.png","chips":["Button","TextField","Select","Checkbox","Radio","Toggle","Form","Table","List"],"repo":"https://github.com/atlassian/atlaskit","desc":"Jira/Confluence 同款设计系统，含 React 组件（AtlasKit）。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Atlassian Design — Above-the-Fold UI Prompt\n\nBuild the Atlassian Design homepage above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: full width, white background (#FFFFFF) with a very subtle light-gray dot grid pattern (use radial-gradient dots ~#E5E7EB at low opacity, spacing ~30px).\n- **Header**: fixed top navigation bar, white/translucent background, height ~64px, padding 0 48px, flex space-between.\n  - **Left**: Atlassian logo icon (abstract geometric shapes) followed by \"Atlassian Design\" in bold dark text (#292A2E), font-size ~18px.\n  - **Right nav links**: \"Design system\", \"News\", then a search icon + \"Search\", then a theme-toggle icon + \"Theme\" (inside a light gray rounded pill border #E5E7EB).\n- **Hero Section**: large left-aligned headline in the upper-left area, padding-left ~48px, padding-top ~100px.\n  - **Headline**: \"Better teamwork\" on one line, \"by design\" on next line, both in very large bold sans-serif (~72px). \"design\" is colored bright blue (#0065FF).\n  - Around the headline are small decorative floating lozenges/pills with names and colored arrows pointing to the headline:\n    - \"Tony\" purple pill (#A855F7) with a small purple triangle pointer.\n    - \"Kyah\" blue pill (#0065FF) with a small blue triangle pointer below the word \"design\".\n    - \"Rovo\" dark pill (#1F2937) with a small dark triangle pointer near the top-right.\n- **Typography**: \"Atlassian Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- **Colors**: white #FFFFFF, text #292A2E, blue #0065FF, purple #A855F7, dark pill #1F2937, muted #505258.\n- The page should feel clean, minimal, modern, with generous whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div._y44vzons._tzy4idpf` → animation: kgnpaw5 0.3s ease-in-out 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div._v564mfn2._1e0c1txw` → transition: background-color 0.2s ease\n- `a._ymio1r31._ypr0glyw` → transition: background 0.1s ease-out\n- `span._v564g17y._1reo15vq` → transition: opacity 0.3s ease\n- `div._1bsb1osq._v5641mbg` → transition: opacity 0.3s ease-out\n- `div._1r04idpf._kqswstnw` → transition: mask-image, -webkit-mask-image 0.1s, 0.1s ease-out, ease-out 0s, 0s\n- `div._v564zzv3._kqswstnw` → transition: left, top, transform, opacity 0.7s, 0.7s, 0.4s, 0.4s cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s, 0.4s, 0.2s, 0.2s\n- `div._v5646rxc._kqswstnw` → transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1)\n- `div._v56411y4._kqswstnw` → transition: transform 0.7s cubic-bezier(0.4, 0, 0, 1)\n- `div._kqswh2mm._1bsb1osq` → transition: opacity, scale, transform, filter 0.4s, 0.7s, 0.7s, 0.7s cubic-bezier(0, 0.4, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1) 0s, 0s, 0s, 0s\n- `div._16qsqlyx._2rko1mok` → transition: filter, box-shadow 0.7s, 0.7s cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `._kqswh2mm`:\n  **hover:** text-decoration: underline; text-decoration-color: currentcolor\n  **active:** text-decoration-color: currentcolor\n  **focus:** text-decoration-color: currentcolor; color: color.text.subtle\n- `._1e0c1txw`:\n  **hover:** text-decoration: underline; transform: scale(1.02)\n- `._4cvr1h6o`:\n  **hover:** text-decoration: underline; color: rgb(255, 255, 255)\n  **active:** text-decoration-color: currentcolor\n- `._1bsb1osq`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes k3f15u2  {\n  0%  {\n  opacity: 0.3;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes kpgn03l  {\n  0%  {\n  transform: scale(0);\n  } 5.26316%  {\n  transform: scale(1);\n  } 78.9474%  {\n  transform: scale(1);\n  } 84.2105%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes k1h9ztfy  {\n  0%  {\n  transform: scale(0);\n  } 10.5263%  {\n  transform: scale(0);\n  } 15.7895%  {\n  transform: scale(1);\n  } 68.4211%  {\n  transform: scale(1);\n  } 73.6842%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes kjt05w7  {\n  0%  {\n  stroke-width: 0;\n  } 21.0526%  {\n  stroke-width: 0;\n  } 26.3158%  {\n  stroke-width: 133.5;\n  } 57.8947%  {\n  stroke-width: 133.5;\n  } 63.1579%  {\n  stroke-width: 0;\n  } 100%  {\n  stroke-width: 0;\n  }\n}\n@keyframes k1k6o5g7  {\n  0%  {\n  transform: rotate(0deg);\n  } 31.5789%  {\n  transform: rotate(0deg);\n  } 36.8421%  {\n  transform: rotate(90deg);\n  } 47.3684%  {\n  transform: rotate(90deg);\n  } 52.6316%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes kgnpaw5  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes SlideInTop8px  {\n  0%  {\n  transform: translateY(8px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes SlideInBottom8px  {\n  0%  {\n  transform: translateY(-8px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes SlideInLeft8px  {\n  0%  {\n  transform: translateX(8px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes SlideInRight8px  {\n  0%  {\n  transform: translateX(-8px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes SlideOutTop8px  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(4px);\n  }\n}\n@keyframes SlideOutBottom8px  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-4px);\n  }\n}\n@keyframes SlideOutLeft8px  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(4px);\n  }\n}\n@keyframes SlideOutRight8px  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(-4px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dot-grid landing page with header, headline and Tony/Kyah/Rovo lozenges; keyframes (kgnpaw5 etc.) verbatim."},{"id":"lightning","name":"Lightning Design System","fw":["CSS","Web Components"],"theme":"CRM (Salesforce)","vendor":"Salesforce","link":"https://www.lightningdesignsystem.com","kind":"item","img":"previews/lightning.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Toggle","Table","Card"],"repo":"https://github.com/salesforce-ux/design-system","desc":"Salesforce 设计系统，CRM 应用组件与规范。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Lightning Design System 2 — Above-the-Fold UI Prompt\n\nBuild the Lightning Design System 2 documentation landing page above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, white page background. The layout has a left sidebar and a right main content area.\n- **Left sidebar**: fixed width ~280px, white background, right border 1px #E5E7EB, padding 20px 24px.\n  - Top: small text \"LIGHTNING DESIGN SYSTEM 2\" in uppercase, dark blue (#0A2057), font-weight 700, font-size 12px, letter-spacing 0.05em.\n  - Logo: Salesforce-style cloud icon (blue #0176D3) + \"Lightning Design System\" with \"2\" superscript in blue, font-size ~18px.\n  - Search box: light gray rounded pill (#F3F3F3), placeholder \"Search...\", with a magnifying glass icon, padding 8px 12px, margin 16px 0.\n  - Navigation items with right-facing chevrons, font-size 14px, color #292A2E, gap 4px between items. Items: Get Started, AI and SLDS 2, Foundations, Develop, Components, Patterns, Accessibility, Tools, SLDS 1 (with external-link icon).\n- **Main area**: right of sidebar, full remaining width, top portion is a hero banner.\n  - **Hero banner**: gradient background deep blue (#1B2C7E) to purple-blue (#3B4CBF), decorative abstract orange/coral circles (#FF8A65) and subtle white grid lines, rounded corners (no, it's a rectangular top banner) with padding 40px 60px.\n    - Title: \"Lightning Design System 2\" in large white bold sans-serif (~42px).\n    - Subtitle 1: \"Summer '26 v2.9\" in white, smaller (~14px), semibold.\n    - Subtitle 2: \"Styleguide updated 20 days ago\" in white, smaller (~14px).\n    - Tagline: \"Bring your brand to life.\" in white, bold (~18px), with a small orange square accent to the left.\n    - Top-right of hero: a small white rounded pill with a link/chain icon and a down arrow.\n- **Below hero**: white section with heading \"Welcome to SLDS 2\" (~28px, dark blue #0A2057) and a large image/photo placeholder below (a photo of people in a storage-room setting).\n\n## Colors\n- White #FFFFFF, dark navy #0A2057, blue #0176D3, coral/orange #FF8A65, text #292A2E, border #E5E7EB, search bg #F3F3F3.\n- Fonts: \"DM Sans\", system-ui, sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.Text-iXOHMN.ListItemstyled__TextStyled-kefdxC` → transition: margin-left 0.15s ease-in-out\n- `i.Iconstyled__IconStyled-gPYeWY.cXwyAc` → transition: all 0.15s ease-in-out\n- `div.cover-text-wrapper` → transition: opacity 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219); transform: translate(-50%)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219); transform: translate(-50%)\n- `.iytwjr`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.formfield .ui-selectmenu-button.mini`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `#texteditor-container h2.show-placeholder:not(.drag-placeholder)::before`:\n  **focus:** border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.eojvfp`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.cXwyAc`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.iGeXmZ`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes appcues-beacon-pulse  {\n  0%  {\n  stroke-width: 22px;\n  transform: scale(0.1);\n  } 25%  {\n  stroke-width: 0.5px;\n  transform: scale(1);\n  } 30%  {\n  stroke-width: 0;\n  } 100%  {\n  stroke-width: 0;\n  }\n}\n@keyframes go2264125279  {\n  0%  {\n  transform: scale(0) rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(45deg);\n  opacity: 1;\n  }\n}\n@keyframes go3020080000  {\n  0%  {\n  transform: scale(0);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes go463499852  {\n  0%  {\n  transform: scale(0) rotate(90deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(90deg);\n  opacity: 1;\n  }\n}\n@keyframes go1268368563  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes go1310225428  {\n  0%  {\n  transform: scale(0) rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(45deg);\n  opacity: 1;\n  }\n}\n@keyframes go651618207  {\n  0%  {\n  height: 0px;\n  width: 0px;\n  opacity: 0;\n  } 40%  {\n  height: 0px;\n  width: 6px;\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  height: 10px;\n  }\n}\n@keyframes go901347462  {\n  0%  {\n  transform: scale(0.6);\n  opacity: 0.4;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@-webkit-keyframes token-inline-search-highlight-fade-out  {\n  0%  {\n  background-color: transparent;\n  } 70%  {\n  background-color: unset;\n  } 100%  {\n  background-color: unset;\n  }\n}\n@-webkit-keyframes zheditor-search-highlight-fade-out  {\n  0%  {\n  padding: 8px;\n  margin: -8px;\n  background-color: var(--colors-blocks-content-background-search-highlight,#ffea6a);\n  } 5%  {\n  padding: 0px;\n  margin: 0px;\n  } 70%  {\n  background-color: var(--colors-blocks-content-background-search-highlight,#ffea6a);\n  } 100%  {\n  background-color: unset;\n  }\n}\n@-webkit-keyframes fEWCgj  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes ProseMirror-cursor-blink  {\n  100%  {\n  visibility: hidden;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"SLDS 2 docs layout with sidebar, gradient hero banner, coral orbs and Welcome photo placeholder; keyframes verbatim."},{"id":"fluent-ds","name":"Fluent 2 Design","fw":["Multi"],"theme":"Microsoft 全平台","vendor":"Microsoft","link":"https://fluent2.microsoft.design","kind":"item","img":"previews/fluent-ds.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/microsoft/fluentui","desc":"微软 Fluent 2 跨平台设计语言，含 Web/Win/移动端实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Fluent 2 Design System — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Fluent 2 Design System.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Fluent 2 Design\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"Multi · Microsoft 全平台\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid pink/magenta (#EC4899) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #EC4899, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Two rows, first row:\n`Button` `Input` `Select` `Checkbox` `Radio` `Switch` `Slider` `Form`\nSecond row: `Table`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: pink/magenta (#EC4899) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.fui-Spinner__spinner.rvgcg50` → animation: rb7n1on 1.5s linear infinite normal\n- `span.fui-Spinner__spinnerTail.rxov3xa` → animation: r15mim6k 1.5s cubic-bezier(0.33, 0, 0.67, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.focusable` → transition: opacity, box-shadow 0.1s, 0.1s ease, ease 0s, 0s\n- `i.docsearch-button-icon` → transition: background-color 0.1s ease\n- `span.theme-switcher-switch` → transition: all 0.3s ease-in\n- `span.nav-arrow` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.dropdown__list.closed` → transition: opacity, max-height 0.1s, 0.1s cubic-bezier(0.7, 0, 1, 0.5), cubic-bezier(0.7, 0, 1, 0.5) 0s, 0s\n- `li.dropdown__list-item.selected` → transition: padding-left 0.1s cubic-bezier(0.7, 0, 1, 0.5)\n- `span.hero__tagline-image-container.hero__tagline-image-container--creativity` → transition: width 0.25s ease-in-out\n- `img.hero__tagline-image.hero__tagline-image--work` → transition: all 0.25s ease-in-out\n- `a.inverse-button` → transition: all 0.15s ease-in-out\n- `a.tile.tile--padding-relaxed` → transition: all 0.3s ease-in-out\n- `div.feedback` → transition: width 0.3s ease-out 0.3s\n- `button.feedback-internal-button` → transition: height, visibility, font-size, padding 0.3s, 0s, 0.3s, 0.3s ease-in, linear, ease-in, ease-in 0.15s, 0.3s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focusable`:\n  **hover:** opacity: 0.8\n  **focus:** opacity: 0.8; outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rb7n1on  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes r1gx3jof  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-360deg);\n  }\n}\n@keyframes r15mim6k  {\n  0%  {\n  transform: rotate(-135deg);\n  } 50%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(225deg);\n  }\n}\n@keyframes r18vhmn8  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(105deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes rkgrvoi  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(225deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes r109gmi5  {\n  0%  {\n  transform: rotate(135deg);\n  } 50%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-225deg);\n  }\n}\n@keyframes r17whflh  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-105deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes re4odhl  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-225deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes f1efwx7q  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes f1kkgpz1  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes f12o7gg6  {\n  0%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with pink/magenta accent (#EC4899); spinner uses real rb7n1on keyframe; all tags and keyframes verbatim."},{"id":"primereact","name":"PrimeReact","vendor":"PrimeTek","fw":["React"],"theme":"企业级 / 数据密集","link":"https://primereact.org","repo":"https://github.com/primefaces/primereact","license":"MIT","chips":["Button","DataTable","Chart","Form","Dialog"],"kind":"item","img":"previews/primereact.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# PrimeReact — Above-the-Fold UI Prompt\n\nBuild the PrimeReact homepage above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, very light gray background (#F8FAFC). Single-column centered content.\n- **Top announcement banner**: full-width dark navy/blue bar (#0F172A), height ~36px, centered text \"Next Chapter Begins 🚀 Read the full story\" in white/light text, small font-size (~13px), close \"×\" on the far right.\n- **Header**: below banner, white background, height ~64px, padding 0 40px, flex space-between, border-bottom 1px #E2E8F0.\n  - **Left**: PrimeReact logo (a stylized angular crown/fan icon) + \"PRIMEREACT\" in bold dark text (#334155).\n  - **Center nav**: \"Styled\", \"Tailwind\", \"Primitive\", \"Headless\" — small dark text (#334155), gap 24px.\n  - **Right**: search icon, sun icon, share icon, pen/edit icon, then \"Get PrimeUI\" dark button (#334155) with white text, rounded ~6px, padding 8px 16px.\n- **Hero Section**: centered, padding-top ~60px.\n  - Small version tag above headline: \"primereact@11.0.0-rc.1\" in red monospace text, small (~13px), with a tiny red square/asterisk before it.\n  - Headline: \"Premium UI Suite for React\" in large (~48px) bold dark text (#0F172A). The word \"Suite\" is inside a light gray rounded rectangle (#F1F5F9) with a thin border (#E2E8F0), like an inline code/pill.\n  - Subcopy: \"Enhance your web applications with PrimeReact's comprehensive suite of customizable, feature-rich UI components.\" — gray (#64748B), font-size 18px, max-width 620px, centered, margin-top 16px.\n  - Buttons: \"Get Started\" dark filled (#0F172A, white text), \"View Components\" white bg with border (#E2E8F0), dark text. Both rounded ~8px, padding 12px 24px, margin-top 24px, gap 12px.\n  - Logo row: Mercedes star, \"ebay\" text logo, Ford oval logo, grayscale, spaced evenly, margin-top 50px. Use simple CSS shapes or text approximations.\n- **Below hero**: a light card component preview starts to appear at the bottom (white rounded card with a small icon, \"Overview\" label, \"Live\" green dot, \"Portfolio command\" heading, and a search/notification area). Show the top portion.\n\n## Colors\n- Background #F8FAFC, white #FFFFFF, dark text #0F172A / #334155, muted #64748B, border #E2E8F0, red version #EF4444, green live #22C55E.\n- Fonts: Inter, system-ui, sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: whouses-marquee 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `header.sticky.top-(--news-height)` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: outline-color, border-color, background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.p-inputtext.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.md\\:h-6\\.5`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes px-fadeout  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes px-scalein  {\n  0%  {\n  opacity: 0;\n  transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n  transform: scaleY(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes px-slidedown  {\n  0%  {\n  max-height: 0px;\n  } 100%  {\n  }\n}\n@keyframes px-slideup  {\n  0%  {\n  max-height: 1000px;\n  } 100%  {\n  max-height: 0px;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);\n  } 20%  {\n  clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);\n  } 40%  {\n  clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes slideright  {\n  0%  {\n  inset-inline: -35% 100%;\n  } 60%  {\n  inset-inline: 100% -90%;\n  } 100%  {\n  inset-inline: 100% -90%;\n  }\n}\n@keyframes star-rotate  {\n  0%  {\n  transform: rotateY(0deg);\n  } 100%  {\n  transform: rotateY(360deg);\n  }\n}\n@keyframes p-animate-collapsible-expand  {\n  0%  {\n  grid-template-rows: 0fr;\n  } 100%  {\n  grid-template-rows: 1fr;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"PrimeReact homepage with banner, header, hero, marquee logo row and card preview; brand logos approximated via CSS/text; keyframes verbatim."},{"id":"untitledui","name":"Untitled UI","vendor":"Untitled UI","fw":["React"],"theme":"设计系统 / Figma 组件","link":"https://www.untitledui.com","repo":"https://www.untitledui.com","license":"商用","chips":["Button","Input","Card","Dropdown","Avatar"],"kind":"item","img":"previews/untitledui.png","prompt":""},{"id":"reshaped","name":"Reshaped","vendor":"Reshaped","fw":["React"],"theme":"现代产品 UI / 设计系统","link":"https://reshaped.dev","repo":"https://github.com/reshaped/reshaped","license":"商用","chips":["Button","Input","Select","Modal","Toast"],"kind":"item","img":"previews/reshaped.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Reshaped — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Reshaped design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Reshaped\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 现代产品 UI / 设计系统\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Input` `Select` `Modal` `Toast`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent (#38BDF8); no keyframes required by prompt; colors/copy/components match."},{"id":"alignui","name":"AlignUI","vendor":"AlignUI","fw":["React"],"theme":"设计系统组件 / Figma","link":"https://alignui.com","repo":"https://github.com/align-ui/align-ui","license":"MIT","chips":["Button","Input","Card","Tabs","Dialog"],"kind":"item","img":"previews/alignui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# AlignUI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the AlignUI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"AlignUI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 设计系统组件 / Figma\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Input` `Card` `Tabs` `Dialog`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.jsx-1cdd4e77911232a7.blinkingCursor` → animation: blink 0.8s ease infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.group.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s linear\n- `svg` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `div.absolute.left-0` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.3s cubic-bezier(0.6, 0.6, 0, 1)\n- `a.group/link.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.15s linear\n- `div.relative.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.min-w-0.xl:mt-4` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus\\:outline-none`:\n  **focus:** outline: 2px solid transparent\n- `.pl-2`:\n  **focus:** outline: 2px solid transparent\n- `.hover\\:bg-ln-gray-800`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cm-blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes cm-blink2  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes flash-code  {\n  0%  {\n  background-color: rgba(46, 46, 15, 0.18);\n  } 100%  {\n  background-color: transparent;\n  }\n}\n@keyframes heroBlock  {\n  100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes heroDynamicIsland  {\n  100%  {\n  filter: blur(0px);\n  opacity: 1;\n  }\n}\n@keyframes heroDynamicIslandExit  {\n  100%  {\n  filter: blur(4px);\n  transform: translate3d(-50%, 0px, 0px) scale(0.95);\n  opacity: 0;\n  }\n}\n@keyframes heroTemplates  {\n  0%  {\n  transform: translateZ(0px) scale(0.98);\n  filter: blur(4px);\n  opacity: 0.8;\n  } 100%  {\n  transform: translateZ(0px) scale(1);\n  filter: blur(0px);\n  opacity: 1;\n  }\n}\n@keyframes spark  {\n  0%  {\n  transform: translateY(-100%);\n  } 100%  {\n  transform: translateY(var(--to,1000px));\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes rapid-b-item  {\n  100%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  filter: blur(0px);\n  }\n}\n@keyframes mobile-menu-open  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(-100%, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  }\n}\n@keyframes mobile-menu-close  {\n  0%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate3d(-100%, 0px, 0px);\n  }\n}\n@keyframes mobile-menu-item-in  {\n  100%  {\n  opacity: 1;\n  filter: blur(0px);\n  transform: translateZ(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; blinking cursor uses real cm-blink keyframe; all keyframes pasted verbatim."},{"id":"baseui-primitives","name":"Base UI","vendor":"MUI","fw":["React"],"theme":"无样式原语 / Headless","link":"https://base-ui.com","repo":"https://github.com/mui/base-ui","license":"MIT","chips":["Menu","Select","Dialog","Popover","Tooltip"],"kind":"item","img":"previews/baseui-primitives.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Base UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Base UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Base UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 无样式原语 / Headless\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Menu` `Select` `Dialog` `Popover` `Tooltip`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `path` → transition: transform 0.1s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.Separator`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.SearchTrigger`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.AccordionWebsiteTrigger`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.Link`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spin  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; spinner uses real spin keyframe; tags and colors match."},{"id":"kiboui","name":"Kibo UI","vendor":"Kibo","fw":["React"],"theme":"shadcn 风格区块","link":"https://www.kibo-ui.com","repo":"https://github.com/kibocode/kibo-ui","license":"MIT","chips":["Accordion","Carousel","Command","Calendar"],"kind":"item","img":"previews/kiboui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Kibo UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Kibo UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Kibo UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · shadcn 风格区块\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Accordion` `Carousel` `Command` `Calendar`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.grid.transition-[grid-template-columns]` → transition: grid-template-columns 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.inset-x-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.inline-flex` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.items-center.justify-center` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.flex` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.wrap-anywhere`:\n  **hover:** background-color: rgba(209, 209, 209, 0.25); color: rgba(23, 23, 23, 0.8)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes fd-exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; live dot uses real ping keyframe; all keyframes verbatim."},{"id":"tailark","name":"Tailark","vendor":"Tailark","fw":["React"],"theme":"营销 / 落地页区块","link":"https://tailark.com","repo":"https://tailark.com","license":"商用","chips":["Hero","Pricing","Feature","CTA"],"kind":"item","img":"previews/tailark.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailark homepage above-the-fold section at 1280px width.\n\nGlobal: white background (#ffffff), text near-black (#0f172a), font-family ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nTop nav (height ~72px, white, flex justify-between align-center, px ~48px):\n- Left: brand logo — a small rotated-square/diamond icon with a teal-to-green gradient (approximate with CSS), followed by the word \"tailark\" in bold dark text, font-weight 700, tracking tight.\n- Center-right nav links: \"Illustrations\", \"Blocks\", \"Pages\", \"Pricing\", \"Docs\". Small gap ~28px, gray text (#334155).\n- Right: \"Login\" text link, then \"Get full access\" black button (#0f172a) with white text, rounded-lg, padding ~9px 16px.\n\nHero section (centered, white bg, pt ~64px):\n- Small announcement badge centered: tiny sparkle/star icon, text \"13 new pages added to the Grid-2 style\", with a trailing \">\". Badge has very light gray bg (#f1f5f9), rounded-full, small gray text, padding ~6px 14px.\n- Big centered headline: \"Build modern marketing\\nwebsites with Shadcn blocks.\" Use two lines. \"Shadcn blocks.\" has a teal-to-emerald gradient text (#14b8a6 to #10b981). Font-size ~52px, font-weight 700, line-height 1.1, max-width ~700px.\n- Two centered buttons below (gap ~18px, mt ~28px):\n  - \"Get full access\" — black bg (#0f172a), white text, rounded-lg, px ~18px py ~10px.\n  - \"Explore kits\" — transparent, dark text, no border, maybe a subtle arrow.\n- Style tabs centered below (gap ~28px, mt ~42px): \"Quartz\", \"Dusk\", \"Mist\", \"Veil\". First item is slightly more prominent/dark, others gray.\n\nBento preview grid (centered, mt ~48px, max-width ~1080px, gap ~16px):\n- Left column: one tall card (~55% width) with a light gray (#f8fafc) background and a rounded-xl border. Inside, approximate a marketing-site screenshot: large bold heading \"The Financial OS powering businesses on your platform\", smaller subcopy, a purple/blue button, and a layered UI illustration made of rounded rectangles and soft gradients (purple/blue). This is the dominant visual.\n- Right column: two stacked rows.\n  - Top-right card: lighter bg, contains a \"Logo Cloud\" preview with small centered shapes/icons and the text \"Logo Cloud\" / \"10 blocks\" centered below.\n  - Bottom-right card: split into two smaller cards side-by-side: \"Features\" / \"14 blocks\" and another minimal preview.\n\nAll cards have rounded-2xl borders, subtle shadows, and overflow hidden. The overall feel is clean, airy, modern Tailwind marketing site.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.cursor-pointer.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.2s ease\n- `div.bg-muted/50.min-h-132` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes source-to-logo  {\n  0%  {\n  stroke-dashoffset: 400px;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes logo-to-outputs  {\n  0%  {\n  stroke-dashoffset: 550px;\n  } 10%  {\n  stroke-dashoffset: 400px;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Tailark marketing landing page with nav, hero badge, gradient headline, style tabs and bento grid; screenshot cards approximated with CSS shapes; keyframes verbatim."},{"id":"aceternity","name":"Aceternity UI","vendor":"Aceternity","fw":["React"],"theme":"动画组件 / 炫酷","link":"https://ui.aceternity.com","repo":"https://github.com/aceternity-ai/aceternity-ui","license":"MIT","chips":["Card","Background","3D","Carousel"],"kind":"item","img":"previews/aceternity.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Aceternity UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport and looks like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content centered both vertically and horizontally. The whole preview area has a large rounded border radius (24px) and a subtle darker inset shadow/frame, but for the screenshot just fill the 1280x820 viewport with the dark card.\n\nTop bar (top-left, padding ~40px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each circle ~12px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Aceternity UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 动画组件 / 炫酷\" in #94a3b8, font-size ~13px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: cyan/turquoise background (#22d3ee), black text, rounded-full pill, padding ~8px 18px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 18px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 18px, min-width ~120px.\n\nSecond controls row (margin-top ~14px):\n- A cyan/blue toggle switch in the ON position: an elongated pill track (#22d3ee) ~44px wide x 24px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal/cyan border (#0d9488) and teal text (#5eead4), padding ~6px 14px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~6px 14px, with a small down-chevron on the right.\n\nMain card (center, below controls, margin-top ~28px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (bottom-left or bottom-center, margin-top ~40px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Card\", \"Background\", \"3D\", \"Carousel\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: use system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nVibe: sleek dark-mode developer tool preview, minimal, rounded, cyan accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.hover:text-foreground/80.text-foreground/60` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.cursor-pointer` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.h-14` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spotlight  {\n  0%  {\n  opacity: 0;\n  transform: translate(-72%, -62%) scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -40%) scale(1);\n  }\n}\n@keyframes meteor  {\n  0%  {\n  opacity: 1;\n  transform: rotate(215deg) translate(0px);\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  transform: rotate(215deg) translate(-500px);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes spin-reverse  {\n  100%  {\n  transform: rotate(-1turn);\n  }\n}\n@keyframes scroll  {\n  100%  {\n  transform: translate(calc(-50% - 0.5rem));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes move  {\n  0%  {\n  transform: translate(-200px);\n  } 100%  {\n  transform: translate(200px);\n  }\n}\n@keyframes aurora  {\n  0%  {\n  background-position: 50% center, 50% center;\n  } 100%  {\n  background-position: 350% center, 350% center;\n  }\n}\n@keyframes moveHorizontal  {\n  0%  {\n  transform: translate(-50%) translateY(-10%);\n  } 50%  {\n  transform: translate(50%) translateY(10%);\n  } 100%  {\n  transform: translate(-50%) translateY(-10%);\n  }\n}\n@keyframes moveInCircle  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes moveVertical  {\n  0%  {\n  transform: translateY(-50%);\n  } 50%  {\n  transform: translateY(50%);\n  } 100%  {\n  transform: translateY(-50%);\n  }\n}\n@keyframes shimmer  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"skipped - result.hifi.json already exists."},{"id":"tremor","name":"Tremor","vendor":"Tremor","fw":["React"],"theme":"数据仪表盘 / 图表","link":"https://tremor.so","repo":"https://github.com/tremorlabs/tremor","license":"Apache","chips":["Chart","Metric","Table","DatePicker"],"kind":"item","img":"previews/tremor.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tremor component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Tremor\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 数据仪表盘 / 图表\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Chart\", \"Metric\", \"Table\", \"DatePicker\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.relative` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-full` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `li.group.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.from-blue-500`:\n  **hover:** opacity: 0.9\n- `.sm\\:mt-0`:\n  **hover:** opacity: 0.9\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes draw  {\n  100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes hide  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes slideDownAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-6px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideLeftAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(6px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes slideUpAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(6px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideRightAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(-6px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes accordionOpen  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordionClose  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes dialogOverlayShow  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes dialogContentShow  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -45%) scale(0.95);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes drawerSlideLeftAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes drawerSlideRightAndFade  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal #2dd4bf 控件 + 暗色卡片。精确动画规格中全部 @keyframes 与 transition 值照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，但参考图中文字偏白，存在细微色差。"},{"id":"parkui","name":"Park UI","vendor":"Park UI / Chakra","fw":["React"],"theme":"可移植组件 / 多框架","link":"https://park-ui.com","repo":"https://github.com/park-ui/park-ui","license":"MIT","chips":["Button","Input","Select","Tabs"],"kind":"item","img":"previews/parkui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Park UI homepage above-the-fold section at 1280px width.\n\nGlobal: very light gray/off-white background (#fcfcfc), dark text (#202020), font-family Outfit, ui-sans-serif, system-ui, sans-serif.\n\nTop nav (height ~72px, white/transparent, flex justify-between align-center, px ~48px):\n- Left: brand logo — a black rounded square (#202020) with white \"PARK\" text inside, then \"UI\" in black text to the right, font-weight 700.\n- Center-right: search pill with placeholder \"Search...\" and \"⌘K\" shortcut hint on the right. Search has light gray bg (#f0f0f0), rounded-lg, padding ~8px 14px.\n- Nav links: \"Docs\", \"Blog\", \"Changelog\" in dark gray, gap ~24px.\n- Right: GitHub icon (small dark circle/outline), theme/moon icon.\n\nHero (two-column layout, px ~48px, pt ~56px, gap ~40px):\nLeft column (~50%):\n- Badge: \"Park UI × Chakra — It's official! →\" with a small party/rocket emoji at the start. Light gray bg (#f0f0f0), rounded-full, small text.\n- Headline: \"Build your own Design System\" in extra-bold black, ~56px, line-height 1.05.\n- Subcopy: \"Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.\" in gray (#5a5a5a), ~18px, max-width ~460px, mt ~18px.\n- Buttons (mt ~28px, gap ~14px):\n  - \"Get Started →\" black bg (#202020), white text, rounded-lg, px ~18px py ~11px.\n  - \"Make it yours\" white bg, thin gray border, dark text, rounded-lg, with a small sparkle/wand icon on the left, px ~18px py ~11px.\n- Framework icons (mt ~40px): React atom icon and SolidJS icon with labels \"React\" and \"Solid\" in gray, gap ~18px.\n\nRight column (~50%):\n- A collage of overlapping white cards with soft shadows and thin borders, rotated/slightly offset to look like a floating design-system preview.\n- Top card: \"Sign Up\" form preview with \"Create an account and discover the worlds' best UI component framework.\", Google and GitHub social buttons, E-Mail and Password inputs, \"Create Account\" black button.\n- Overlapping behind it: \"Payment Method\" card with Card/PayPal options, Owner, Card Number, Month/Year, Continue button.\n- Below left: \"Notifications\" card with toggles for Disputes and Fraudulent payments.\n- Below right: product card \"New in stock\", \"New Balance 574\", \"$79.99\" with a shoe placeholder.\n\nVibe: clean, modern, design-system landing page, lots of white space, black accents, floating component collage.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.button.button--variant_subtle` → transition: background-color, border-color, color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.input.input--size_md` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.switch__thumb.switch__thumb--variant_solid` → transition: translate 0.15s ease\n- `button.select__trigger.select__trigger--size_md` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：浅灰白 #fcfcfc 背景、Outfit 字体、左右分栏 Hero + 浮层组件拼贴。精确动画规格中的 transition 值已照抄。整体布局/配色/文案与提示词一致；参考图包含额外细节（搜索图标、额外导航图标、表单辅助文字等），提示词未描述，故未加入。"},{"id":"magicui","name":"Magic UI","vendor":"Magic UI","fw":["React"],"theme":"动画 / 落地页组件","link":"https://magicui.design","repo":"https://github.com/magicuidesign/magicui","license":"MIT","chips":["Marquee","Border","Blur","Ripple"],"kind":"item","img":"previews/magicui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Magic UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Magic UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 动画 / 落地页组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Marquee\", \"Border\", \"Blur\", \"Ripple\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.absolute.size-2` → animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n- `a.inline-flex.items-center` → animation: rainbow 2s linear infinite normal\n- `div.flex.shrink-0` → animation: marquee 90s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.items-center` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.3s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.md\\:text-sm`:\n  **active:** opacity: 1\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `-visible`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.sm\\:pr-12`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-4:has(> svg)`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.ring`:\n  **active:** opacity: 1\n- `.\\[background-clip\\:padding-box\\`:\n  **active:** opacity: 1\n- `button`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  0%, 100%  {\n  box-shadow: 0 0 0 0 var(--pulse-color,oklch(from var(--bg)l c h/.5));\n  } 50%  {\n  box-shadow: 0 0 0 var(--distance)var(--pulse-color,oklch(from var(--bg)l c h/.5));\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes blink-cursor  {\n  0%, 49%  {\n  opacity: 1;\n  } 50%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes aurora  {\n  0%  {\n  background-position: 0px center;\n  transform: rotate(-5deg) scale(0.9);\n  } 25%  {\n  background-position: 50% 100%;\n  transform: rotate(5deg) scale(1.1);\n  } 50%  {\n  background-position: 100% center;\n  transform: rotate(-3deg) scale(0.95);\n  } 75%  {\n  background-position: 50% 0px;\n  transform: rotate(3deg) scale(1.05);\n  } 100%  {\n  background-position: 0px center;\n  transform: rotate(-5deg) scale(0.9);\n  }\n}\n@keyframes gradient  {\n  100%  {\n  background-position: var(--bg-size,300%)0;\n  }\n}\n@keyframes meteor  {\n  0%  {\n  transform: rotate(var(--angle))translateX(0);\n  opacity: 1;\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  transform: rotate(var(--angle))translateX(-500px);\n  opacity: 0;\n  }\n}\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% - var(--gap)));\n  }\n}\n@keyframes marquee-vertical  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-100% - var(--gap)));\n  }\n}\n@keyframes spin-around  {\n  0%  {\n  transform: translateZ(0px) rotate(0deg);\n  } 15%, 35%  {\n  transform: translateZ(0px) rotate(90deg);\n  } 65%, 85%  {\n  transform: translateZ(0px) rotate(270deg);\n  } 100%  {\n  transform: translateZ(0px) rotate(1turn);\n  }\n}\n@keyframes ripple  {\n  0%, 100%  {\n  transform: translate(-50%, -50%) scale(1);\n  } 50%  {\n  transform: translate(-50%, -50%) scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 预览卡 + teal #2dd4bf 控件。真实 ping 1s、aurora 12s、enter 0.15s cubic-bezier(0.4,0,0.2,1) 过渡与 @keyframes（ping/pulse/aurora/meteor/marquee/blink-cursor/spin-around/ripple）照抄。风格一致。"},{"id":"floatui","name":"Float UI","vendor":"Float UI","fw":["React"],"theme":"Tailwind 组件","link":"https://floatui.com","repo":"https://floatui.com","license":"商用","chips":["Dropdown","Modal","Tooltip","Datepicker"],"kind":"item","img":"previews/floatui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Float UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Float UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Dropdown\", \"Modal\", \"Tooltip\", \"Datepicker\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.text-zinc-300.py-2.5` → transition: all 0.15s ease\n- `svg` → transition: all 0.5s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.md\\:bg-shiny`:\n  **hover:** background: linear-gradient(180deg,#27272a 10%,rgba(15,23,42,0)); background-image: linear-gradient(rgb(39, 39, 42) 10%, rgba(15, 23, 42, 0))\n- `.sm\\:w-auto`:\n  **hover:** background: linear-gradient(180deg,#27272a 10%,rgba(15,23,42,0)); background-image: linear-gradient(rgb(39, 39, 42) 10%, rgba(15, 23, 42, 0))\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes smoothScroll  {\n  0%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes notfRight  {\n  0%  {\n  transform: translateX(5em);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes brogress  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 100%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中全部 @keyframes（smoothScroll/notfRight/brogress）与 transition 值照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"flowbite-react","name":"Flowbite React","vendor":"Flowbite","fw":["React"],"theme":"Tailwind 组件","link":"https://flowbite.com","repo":"https://github.com/themesberg/flowbite-react","license":"MIT","chips":["Button","Input","Card","Navbar"],"kind":"item","img":"previews/flowbite-react.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Flowbite React component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Flowbite React\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Card\", \"Navbar\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.DocSearch-Button`:\n  **focus:** outline: 2px solid transparent\n- `.hover\\:bg-gray-100`:\n  **focus:** outline: 2px solid transparent\n- `.xl\\:inline-flex`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中 fade-in @keyframes 与 kbd.DocSearch-Button-Key transition 已照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"preline","name":"Preline UI","vendor":"Preline","fw":["React"],"theme":"Tailwind 组件 / 设计系统","link":"https://preline.co","repo":"https://github.com/htmlstreamofficial/preline","license":"MIT","chips":["Button","Input","Modal","Offcanvas"],"kind":"item","img":"previews/preline.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Preline UI homepage above-the-fold section at 1280px width.\n\nGlobal: white background (#ffffff), text #1f2937, font-family ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nAnnouncement bar (full width, very light gray bg #f8fafc, border-bottom #e5e7eb, py ~10px, centered text):\n- Small green dot on the left, then text \"Update v4.2 - New components, 10+ framework guides, and quality improvements.\" and a blue link \"Visit Changelog\".\n- Far right: small social icons (two circular avatar-like icons and a refresh icon).\n\nTop nav (height ~72px, white, flex justify-between align-center, px ~48px):\n- Left: Preline logo — a blue circle (#2563eb) with a white stylized \"P\" inside, then \"preline\" in bold dark text.\n- Center-left: search input \"Search\" with \"⌘K\" hint, light gray bg, rounded-lg.\n- Nav links: \"Docs\", \"Blocks\", \"Templates\", \"Plugins\", \"Figma\", \"Pro\", \"Pricing\".\n- Right: user icon + \"Sign in\" text, then \"Get all access →\" blue button (#2563eb) with white text, rounded-lg.\n\nHero (two-column, px ~48px, pt ~64px, gap ~40px):\nLeft column (~50%):\n- Headline: \"Preline UI, crafted with Tailwind CSS\" with \"Preline UI,\" in blue (#2563eb), rest dark. Font-size ~52px, font-weight 700, line-height 1.1.\n- \"BUILT WITH:\" label in small uppercase gray, followed by three framework badges: \"HTML\" (with HTML5 icon), \"JAVASCRIPT\" (with JS icon), \"TYPESCRIPT\" (with TS icon). Badges have light gray bg, rounded, small text.\n- Subcopy: \"Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.\" Gray (#4b5563), ~17px, max-width ~520px, mt ~18px.\n- Buttons (mt ~28px, gap ~12px):\n  - \"Get started\" blue button (#2563eb), white text, rounded-lg.\n  - \" $ npm i preline \" code-style button with a copy icon, white bg, gray border, rounded-lg, monospace text.\n\nRight column (~50%):\n- Floating collage of dashboard/component preview cards with soft shadows. Include:\n  - A stats card with numbers \"45,410\" and \"19\" and \"Leads Acquired\" label.\n  - A profile/settings card with dark blue header, list items \"Profile\", \"Settings\", \"Newsletter\" and a \"New\" badge.\n  - A team list card with avatars and names.\n  - A pricing card showing \"$39\".\n  - Overlap them at slight angles.\n\nBelow hero: three feature cards in a row (full width, px ~48px, mt ~40px):\n- \"1584+ Components & Examples\" with document icon, body text \"Hundreds of component examples for all your website needs that meet...\"\n- \"Universal Framework Compatibility\" with icon, body text \"Preline UI is fully compatible wherever Tailwind CSS is in action, from React to...\"\n- \"Unlimited Custom Themes\" with icon, body text \"Create consistent branded visuals with flexible themes across your project.\"\n\nVibe: professional Tailwind UI library landing page, blue primary, clean white, lots of UI preview cards.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.animate-ping.absolute` → animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n- `div.grid.h-110` → animation: hero-sliding-img-up-1 30s linear infinite normal\n- `div.grid.h-110` → animation: hero-sliding-img-up-2 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.hs-collapse.hidden` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hero-sliding-img-up-1  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-722px);\n  }\n}\n@keyframes hero-sliding-img-up-2  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-1098px);\n  }\n}\n@keyframes hero-sliding-img-down-1  {\n  0%  {\n  transform: translateY(-1161px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes marquee-y  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-50% - 0.5rem));\n  }\n}\n@keyframes marquee-x  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(calc(-50% - 0.5rem));\n  }\n}\n@keyframes shiki-pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes opaque  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes resizeanim  {\n  0%, 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：白色背景、蓝色主色 #2563eb、顶部公告栏 + 导航 + 左右分栏 Hero + 浮层卡片拼贴 + 三特性卡片。精确动画规格中全部 @keyframes 与 transition 值已照抄。整体结构/配色/文案与参考一致；右侧拼贴卡片仅按提示词简化示意，细节不如参考图丰富。"},{"id":"keepreact","name":"Keep React","vendor":"Keep","fw":["React"],"theme":"Tailwind 组件","link":"https://keepdesign.io","repo":"https://github.com/Believe-ds/Keep-React","license":"MIT","chips":["Button","Input","Card","Table"],"kind":"item","img":"previews/keepreact.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Keep React component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Keep React\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Card\", \"Table\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.flex.items-center` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.transition-all.duration-200` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.justify-center` → transition: all 0.2s cubic-bezier(0.4, 0, 1, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hover\\:bg-metal-900\\/10`:\n  **hover:** background-color: rgba(28, 34, 43, 0.1)\n- `.hover\\:-translate-y-0\\.5`:\n  **hover:** background-color: rgba(28, 34, 43, 0.1)\n- `.hover\\:bg-primary-50`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blinkIn  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes textAnimate  {\n  0%  {\n  background-position: 0px center;\n  } 100%  {\n  background-position: 200% center;\n  }\n}\n@keyframes slide  {\n  0%  {\n  background-position: 100% center;\n  } 50%  {\n  background-position: 0px center;\n  } 100%  {\n  background-position: 100% center;\n  }\n}\n@keyframes zoomIn  {\n  0%  {\n  content: var(--tw-content);\n  transform: scale(0.5);\n  } 50%  {\n  content: var(--tw-content);\n  transform: scale(1.1);\n  } 100%  {\n  content: var(--tw-content);\n  transform: scale(1);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translate(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translate(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translate(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translate(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中全部 @keyframes 与 transition 值已照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"originui","name":"Origin UI","vendor":"Origin UI","fw":["React"],"theme":"免费组件 / 现代","link":"https://originui.com","repo":"https://github.com/origin-space/originui","license":"MIT","chips":["Button","Input","Select","Sheet"],"kind":"item","img":"previews/originui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Origin UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Origin UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 免费组件 / 现代\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Select\", \"Sheet\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.relative.inline-flex` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.relative.flex` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes skeleton  {\n  100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes toast-success-odd  {\n  0%  {\n  scale: 1;\n  } 30%  {\n  scale: 1.025;\n  } 60%  {\n  scale: 0.99;\n  } 100%  {\n  scale: 1;\n  }\n}\n@keyframes toast-error-odd  {\n  0%  {\n  translate: 0px;\n  } 25%  {\n  translate: -3px;\n  } 50%  {\n  translate: 3px;\n  } 75%  {\n  translate: -3px;\n  } 100%  {\n  translate: 0px;\n  }\n}\n@keyframes toast-success-even  {\n  0%  {\n  scale: 1;\n  } 30%  {\n  scale: 1.025;\n  } 60%  {\n  scale: 0.99;\n  } 100%  {\n  scale: 1;\n  }\n}\n@keyframes toast-error-even  {\n  0%  {\n  translate: 0px;\n  } 25%  {\n  translate: -3px;\n  } 50%  {\n  translate: 3px;\n  } 75%  {\n  translate: -3px;\n  } 100%  {\n  translate: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"首屏布局、颜色、圆角与预览图一致;v2 将标题与交通灯对齐后更接近原图。已按规格引入全部 @keyframes 与 hover 过渡。"},{"id":"react-spectrum","name":"React Spectrum","vendor":"Adobe","fw":["React"],"theme":"企业设计系统","link":"https://react-spectrum.adobe.com","repo":"https://github.com/adobe/react-spectrum","license":"Apache","chips":["Button","TextField","TableView","Dialog"],"kind":"item","img":"previews/react-spectrum.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Spectrum homepage above-the-fold section at 1280px width.\n\nGlobal: full-bleed purple-to-pink-to-orange gradient background (linear-gradient roughly 135deg, #7c3aed via #db2777 to #f97316). White text. Font-family Adobe Clean, Source Sans Pro, ui-sans-serif, system-ui, sans-serif. No page scroll, viewport 1280x820.\n\nTop nav (height ~72px, transparent over gradient, flex justify-between align-center, px ~48px):\n- Left: React Spectrum logo — a white stylized triangle/arrow icon inside a rounded-square container (or just white triangle), followed by \"React Spectrum\" in bold white text, font-size ~18px.\n- Center: search pill \"Search React Spectrum\" with \"⌘K\" hint. The pill is translucent white/gray (rgba(255,255,255,0.12)) with a subtle white border, rounded-full, placeholder white at 70% opacity.\n- Right: nav links \"Docs\", \"Releases\", \"Blog\" in white, gap ~24px, then GitHub icon, layers/components icon, info icon (small white mono icons).\n\nHero section (px ~48px, pt ~60px):\n- Big white headline: \"Build apps with ease\" in extra-bold, ~56px, line-height 1.05, max-width ~520px.\n- Subcopy: \"React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature design.\" White at 90% opacity, ~20px, max-width ~540px, mt ~18px.\n- Buttons (mt ~28px, gap ~14px):\n  - \"Get started\" — white bg, dark text (#7c3aed), rounded-full, px ~20px py ~11px, font-weight 600.\n  - \"Explore components\" — translucent white bg (rgba(255,255,255,0.15)), white text, rounded-full, px ~20px py ~11px, font-weight 600.\n\nMock app UI card (below hero text, mt ~48px, centered or left-aligned, width ~920px):\n- A white rounded-2xl card with shadow, representing a small app window.\n- Top app bar: left red Adobe \"A\" triangle logo + \"My App\" title, center search bar \"Search photos\", right icons (help circle, notification bell with badge \"2\", grid, user avatar).\n- Below app bar: a left sidebar ~60px wide with icons: plus circle (blue), home, photos/mail, ideas/lightbulb.\n- Main area: heading \"Photos\" with two view-toggle icons on the right.\n- Photo grid: 2 rows of photos. First row: 5 landscape photo thumbnails (nature/forest/mountain scenes) with rounded corners. Second row: 2 thumbnails.\n- Use placeholder divs with muted nature colors (greens, browns, sunset oranges) to approximate the gallery.\n\nVibe: bold Adobe design-system landing page, vibrant gradient, friendly, accessible.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span._gCfMGld151._eqPcc6151` → animation: EFZ7wb 10s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a._9d151.IYB8I151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.15s cubic-bezier(0.45, 0, 0.4, 1)\n- `svg` → transition: opacity, transform 0.2s, 0.2s ease-out, ease-out 0s, 0s\n- `img.sb151.Za151` → transition: opacity 0.5s cubic-bezier(0.45, 0, 0.4, 1)\n- `div.zLpqDSc151.yLpqDSc151` → transition: width 0.3s cubic-bezier(0.45, 0, 0.4, 1)\n- `button.GH5kTnc151.Z4dY0ec151` → transition: all 0.3s ease\n- `span._Ia151._IbkYqPbb151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.3s cubic-bezier(0.45, 0, 0.4, 1)\n- `div.gX151.glOVIhfcebS7sd151` → transition: translate, width 0.2s cubic-bezier(0, 0, 0.4, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Z8Un9b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes uw9JJd  {\n  0%, 100%  {\n  stroke-dashoffset: 75px;\n  } 30%  {\n  stroke-dashoffset: 20px;\n  }\n}\n@keyframes chyGla_slide-in  {\n  0%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes chyGla_slide-out  {\n  100%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes yzKlUb  {\n  0%  {\n  outline-width: 0px;\n  transform: scale(1);\n  } 50%  {\n  outline-width: 8px;\n  transform: scale(1.04);\n  } 100%  {\n  outline-width: 0px;\n  transform: scale(1);\n  }\n}\n@keyframes zamT8b  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  width: 0px;\n  transform: translateY(calc(-100% - 12px));\n  }\n}\n@keyframes XYaG5b  {\n  0%  {\n  box-shadow: none;\n  background-color: var(--base-bg);\n  } 100%  {\n  box-shadow: var(--shadow);\n  background-color: var(--layer-2-bg);\n  }\n}\n@keyframes nToi3b  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(100% + 12px));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes AmkoXc  {\n  0%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes HaKxcb  {\n  100%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes VHPsfc  {\n  0%  {\n  transform: translate(-70%) scaleX(0.7);\n  } 100%  {\n  transform: translate(100%) scaleX(0.7);\n  }\n}\n@keyframes reCXe  {\n  0%  {\n  transform: translate(100%) scaleX(0.7);\n  } 100%  {\n  transform: translate(-70%) scaleX(0.7);\n  }\n}\n@keyframes EFZ7wb  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 15.15%  {\n  transform: translate(0px, 0px);\n  } 16.67%  {\n  transform: translateY(-1.2em);\n  } 31.82%  {\n  transform: translateY(-1.2em);\n  } 33.33%  {\n  transform: translateY(-2.4em);\n  } 48.48%  {\n  transform: translateY(-2.4em);\n  } 50%  {\n  transform: translateY(-3.6em);\n  } 65.15%  {\n  transform: translateY(-3.6em);\n  } 66.67%  {\n  transform: translateY(-4.8em);\n  } 81.82%  {\n  transform: translateY(-4.8em);\n  } 83.33%  {\n  transform: translateY(-6em);\n  } 98.48%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(-7.2em);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"渐变、导航、Hero 文案和 App 卡片预览图高度一致;照片占位色符合自然色调。已将全部真实 @keyframes 与过渡写入 CSS。"},{"id":"recharts","name":"Recharts","vendor":"Recharts","fw":["React"],"theme":"图表 / 数据可视化","link":"https://recharts.org","repo":"https://github.com/recharts/recharts","license":"MIT","chips":["Line","Bar","Area","Pie"],"kind":"item","img":"previews/recharts.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Recharts component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Recharts\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 图表 / 数据可视化\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Line\", \"Bar\", \"Area\", \"Pie\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.button.install-btn` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cm-blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes cm-blink2  {\n  50%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏卡片布局、配色和圆角与预览一致;标题与交通灯同行,底部标签为 Line/Bar/Area/Pie。已将 cm-blink/cm-blink2 关键帧与 hover 过渡写入 CSS。"},{"id":"nivo","name":"Nivo","vendor":"Plouc","fw":["React"],"theme":"图表 / 数据可视化","link":"https://nivo.rocks","repo":"https://github.com/plouc/nivo","license":"MIT","chips":["Line","Bar","Heatmap","Sankey"],"kind":"item","img":"previews/nivo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI of nivo.rocks\n\nBuild a single self-contained HTML file (HTML + inline CSS, vanilla, system fonts, no external assets) reproducing the above-the-fold (1280x820) of the nivo landing page.\n\n## Brand\n- Name: **Nivo** (dataviz React component library)\n\n## Layout & Design (dark mode component showcase/playground)\n\n### Overall Theme\n- **Dark background**: `#0f1724` or similar deep navy/black (`rgb(15,23,36)` range).\n- Rounded card/container feel — the entire content sits inside a rounded-corner panel with subtle border.\n- Window-like chrome at top-left showing 3 dots (red, yellow, green) like a browser window or macOS window.\n\n### Top Header Area\n- **Title row**: A colored dot (red/orange/cyan circle) followed by \"**Nivo**\" in white/light bold text (~24px).\n- Below the title: subtitle text \"**React · 图表 / 数据可视化**\" (React · Charts / Data Visualization) in muted gray (~14px).\n\n### Controls Row (below subtitle)\nA horizontal flex row of interactive-looking UI components:\n- **Primary button**: filled cyan/teal background (`#22d3ee` range), rounded corners, black/dark bold text \"**Primary**\".\n- **Default button**: outlined button, transparent bg, light border, text \"**Default**\".\n- **Text input field**: placeholder text \"**Type here...**\", dark bg, light border, rounded.\n- Further right on next line or same row:\n  - **Toggle switch** (pill shape): left part cyan/on, right part off/dark.\n  - **Badge button**: dark bg, border, text \"**Badge**\".\n  - **Select dropdown**: dark bg, border, chevron-down icon + text \"**Select**\".\n\n### Card Section\n- A large card container with dark bg, subtle border, rounded corners.\n- Card header: \"**Card title**\" in white/light text (~18px bold).\n- Card body: \"**This is a preview of the component look.**\" in gray/muted text (~14px).\n\n### Bottom Tabs/Footer\n- Horizontal tab bar at bottom: pill/tab buttons for chart types — \"**Line**\", \"**Bar**\", \"**Heatmap**\", \"**Sankey**\". Each tab is outlined (border, transparent fill), with the first one possibly active/filled.\n\n## Colors (real from reference)\n- Background: very dark navy/black `#0d1117`–`#161b22`\n- Text primary: `#e6edf3` (light gray-white)\n- Text secondary: `#8b949e` (muted gray)\n- Accent/Cyan: `#22d3ee` or `#58a6ff`\n- Button primary bg: bright cyan `#22cfcf`\n- Borders: `#30363d` (subtle dark borders)\n- Red dot: `#ff5f56`, Yellow dot: `#ffbd2e`, Green dot: `#27c93f`\n\n## Typography\n- System font stack: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif.\n- Clean, modern, developer-tool aesthetic (like GitHub Dark).\n\n## Vibes\n- Dark-mode dev tool / component library documentation site. Interactive playground feel. Minimalist, clean, high contrast. Think Storybook or component demo page in dark mode.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 将底部标签改为全 outlined 样式、切换开关改为全青色轨道,与预览图一致。整体采用 GitHub Dark 风格色值,入场与 hover 动效已写入。"},{"id":"visx","name":"Visx","vendor":"Airbnb","fw":["React"],"theme":"图表 / D3 底层","link":"https://airbnb.io/visx","repo":"https://github.com/airbnb/visx","license":"MIT","chips":["Axis","Shape","Scale","Tooltip"],"kind":"item","img":"previews/visx.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Visx gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Visx\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 图表 / D3 底层\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Axis\", \"Shape\", \"Scale\", \"Tooltip with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏组件卡片与预览图一致:天空蓝强调色、深色背景、圆角窗口上边框。入场淡入与 hover 过渡已实现。"},{"id":"tanstack-ui","name":"TanStack UI","vendor":"TanStack","fw":["React"],"theme":"Headless / 表格表单","link":"https://tanstack.com","repo":"https://github.com/TanStack/ui","license":"MIT","chips":["Table","Form","Query","Router"],"kind":"item","img":"previews/tanstack-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — TanStack (v2)\n\n## Brand & vibe\n- Brand: \"TanStack UI\" — React headless UI component library showcase.\n- Vibe: **Dark mode**, developer-focused component gallery/playground. Deep dark background, cyan accent color (#00d4aa or similar teal), macOS-style window dots top-left.\n\n## Layout (above the fold, 1280px wide)\n1. **Top bar** (dark bg, full width):\n   - Left: 3 colored circles (red/yellow/green) like macOS traffic lights.\n   - Title **\"TanStack UI\"** in white, bold, ~22px.\n   - Subtitle line below title: **\"React · Headless / 表格表单\"** (gray/white muted).\n2. **Component showcase area** (centered, padded):\n   - Row of interactive components:\n     - **Primary** button: solid **cyan/teal** fill (~#00c9b7 or #00d4aa), rounded ~6px, white bold text.\n     - **Default** button: transparent, 1px border gray, rounded ~6px, white text.\n     - Text input field: **\"Type here...\"** placeholder, dark bg, subtle border, rounded ~6px.\n   - Second row: a **toggle switch** (active/on state, cyan track), a **Badge** pill (filled cyan), a **Select** dropdown (with ▼ chevron).\n3. **Card**: a bordered box with header **\"Card title\"** and body text **\"This is a preview of the component look.\"**\n4. **Bottom tab bar**: row of tabs — **Table**, **Form**, **Query**, **Router** — as outlined pills/buttons on dark bg.\n\n## Colors\n- Background: very dark navy/black (~#0f1117 or #12141a).\n- Text primary: white (#fff).\n- Text secondary/muted: gray (#888 or #999).\n- Accent (primary buttons, toggle): bright cyan/teal (~#00d4aa / #13bfaa).\n- Default/outlined buttons: transparent, 1px #333 or #444 border.\n- Input bg: slightly lighter than page bg (~#1a1e27).\n- Card bg: same or slightly lighter, 1px border #2a2e3a.\n\n## Typography\n- Font: Inter, system-ui, sans-serif.\n- Title: bold, ~20–22px, white.\n- Subtitle: ~14px, gray.\n- Buttons/input: ~14px.\n- Tab labels: ~14px, white/gray.\n\n## Goal\nRecreate a dark component-gallery hero: dark bg, \"TanStack UI\" + \"React · Headless / 表格表单\" header, a Primary cyan button + Default ghost button + text input row, toggle/Badge/Select row, a \"Card title\" card, and bottom Table/Form/Query/Router tab strip.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.absolute.left-1/3` → animation: ship-peek 10s ease-in-out infinite normal\n- `a.absolute.left-1/3` → animation: ship-peek, ship-pointer-events 10s, 10s ease-in-out, ease-in-out 0s, 0s infinite, infinite normal, normal none, none\n- `span.home-open-source-gradient` → animation: home-open-source-gradient-shift 34s ease-in-out infinite normal\n- `svg` → animation: spin 1s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.row-start-1.col-start-1` → transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.ts-mega-trigger.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.ts-mega-dropdown` → transition: opacity, transform, visibility 0.16s, 0.18s, 0s cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), linear 0s, 0s, 0.16s\n- `span.inline-flex.h-7` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.shrink-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.pointer-events-none.fixed` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.min-h-[calc(100dvh-var(--navbar-height))].flex` → transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.rounded-lg.border-2` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-0` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-6` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.uppercase`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n  **focus:** background-color: rgba(115, 115, 115, 0.1)\n- `.min-\\[1120px\\]\\:gap-1\\.5`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n- `.hover\\:bg-gray-500\\/10`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n  **focus:** background-color: rgba(115, 115, 115, 0.1)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes docs-partner-flip-out  {\n  0%  {\n  opacity: 0.8;\n  transform: rotateX(0deg);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-90deg);\n  }\n}\n@keyframes docs-partner-flip-in  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(90deg);\n  } 100%  {\n  opacity: 0.8;\n  transform: rotateX(0deg);\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  filter: blur(4px);\n  transform: scale(0.97);\n  } 100%  {\n  opacity: 1;\n  filter: blur();\n  transform: scale(1);\n  }\n}\n@keyframes pulseScale  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(var(--scale-factor,1.1));\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes ship-peek  {\n  0%, 100%  {\n  transform: translate(-50%) translateY(0px) scale(1) scaleX(-1);\n  } 12%  {\n  transform: translateX(calc(-50% - var(--ship-x))) translateY(calc(-1 * var(--ship-y))) scale(1.15) scaleX(-1);\n  } 32%  {\n  transform: translateX(calc(-50% - var(--ship-x))) translateY(calc(-1 * var(--ship-y))) scale(1.15) scaleX(-1);\n  } 35%  {\n  transform: translate(-50%) translateY(0px) scale(1) scaleX(-1);\n  }\n}\n@keyframes ship-pointer-events  {\n  0%, 11%, 33%, 100%  {\n  pointer-events: none;\n  } 12%, 32%  {\n  pointer-events: auto;\n  }\n}\n@keyframes home-open-source-gradient-shift  {\n  0%, 100%  {\n  background-position: 0% center;\n  } 50%  {\n  background-position: 100% center;\n  }\n}\n@keyframes dropdown-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.95) translateY(-4px);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1) translateY(0px);\n  }\n}\n@keyframes dropdown-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.95) translateY(-4px);\n  }\n}\n@keyframes search-modal-overlay-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes search-modal-overlay-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes search-modal-panel-in  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-4px) scale(0.985);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes search-modal-panel-out  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(-2px) scale(0.99);\n  }\n}\n@keyframes cart-panel-in  {\n  0%  {\n  opacity: 0;\n  transform: translate(1rem);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout/colors/copy/components all match well; verbatim keyframes included"},{"id":"cmdk","name":"cmdk","vendor":"pacocoursey","fw":["React"],"theme":"命令面板 / 快捷键","link":"https://cmdk.paco.me","repo":"https://github.com/pacocoursey/cmdk","license":"MIT","chips":["Command","Dialog"],"kind":"item","img":"previews/cmdk.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the GitHub repository page for cmdk at 1280×820.\n\nLayout: white page background (#ffffff), dark header (#24292f) with GitHub logo and white text.\n\nHeader (height ~62px, dark #24292f, white text):\n- Left: GitHub octocat logo.\n- Center nav links: Platform, Solutions, Resources, Open Source (selected/underlined), Enterprise, Pricing.\n- Right: search icon, Sign in, Sign up (bordered button).\n\nRepository header (padding 16px 32px, border-bottom #d0d7de):\n- Left: title \"dip / cmdk\" with \"Public\" badge (green border, small text).\n- Right: Notifications, Fork 374, Star 12.8k buttons (light gray, bordered).\n\nTab bar (border-bottom #d0d7de, left-aligned): Code (selected, orange underline), Issues 51, Pull requests 22, Discussions, Actions, Security and quality, Insights.\n\nMain content area (padding 16px 32px, two columns):\n- Left: file list table with border #d0d7de, rounded. Top bar has \"main\" branch dropdown, \"5 Branches\", \"13 Tags\", \"Go to file\" input, and green \"Code\" button. Rows: .github, .husky, cmdk, test, website, .gitignore, .prettierignore, .prettierrc.js, ARCHITECTURE.md, LICENSE.md, README.md, package.json with commit messages and \"last year\"/\"2 years ago\"/\"4 years ago\" dates.\n- Right sidebar: About box with \"Fast, unstyled command menu React component.\", topic tags (react, command-palette, combobox, radix-ui, command-menu), Readme, MIT license, Activity, 12.8k stars, 26 watching, 374 forks. Releases box with v1.1.1 Latest and Mar 15, 2025.\n\nUse GitHub's light-mode color palette: borders #d0d7de, secondary bg #f6f8fa, blue links #0969da, green buttons #1f883d, text #1f2328.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"GitHub repo page layout/colors/components match; all verbatim keyframes included"},{"id":"sonner","name":"Sonner","vendor":"emilkowalski","fw":["React"],"theme":"Toast 通知","link":"https://sonner.emilkowalkski.com","repo":"https://github.com/emilkowalski/sonner","license":"MIT","chips":["Toast"],"kind":"item","img":"previews/sonner.png","prompt":"Recreate the Sonner gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Sonner\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Toast 通知\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Toast with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card."},{"id":"plate","name":"Plate","vendor":"Plate","fw":["React"],"theme":"富文本编辑器","link":"https://platejs.org","repo":"https://github.com/udecode/plate","license":"MIT","chips":["Editor","Toolbar","Mention","Slash"],"kind":"item","img":"previews/plate.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Plate gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Plate\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 富文本编辑器\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Editor\", \"Toolbar\", \"Mention\", \"Slash with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.shrink-0.items-center` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.shrink-0` → transition: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-fit` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.themes-wrapper.chunk-mode` → transition: width 0.3s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `button`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto))));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto))));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n@keyframes skeleton-module__Mhoy-q__loading  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 300;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 150, 300;\n  stroke-dashoffset: -200px;\n  } 100%  {\n  stroke-dasharray: 1, 300;\n  stroke-dashoffset: -280px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component gallery layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"mambaui","name":"Mamba UI","vendor":"Mamba","fw":["React"],"theme":"Tailwind 区块","link":"https://mambaui.com","repo":"https://github.com/MambaUI/MambaUI","license":"MIT","chips":["Hero","Feature","Pricing","CTA"],"kind":"item","img":"previews/mambaui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Mamba UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Mamba UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Tailwind 区块\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Hero\", \"Feature\", \"Pricing\", \"CTA with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.fixed.left-0` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes _ngcontent-ng-c926440377_stroke-animation  {\n  0%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 50%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 65%  {\n  stroke-dashoffset: 59;\n  stroke-dasharray: 59, 236;\n  } 100%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  }\n}\n@keyframes _ngcontent-ng-c926440377_stroke-animation-reverse  {\n  0%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 50%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  } 65%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 100%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  }\n}\n@keyframes _ngcontent-ng-c607063961_stroke-animation  {\n  0%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 50%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 65%  {\n  stroke-dashoffset: 59;\n  stroke-dasharray: 59, 236;\n  } 100%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  }\n}\n@keyframes _ngcontent-ng-c607063961_stroke-animation-reverse  {\n  0%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 50%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  } 65%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 100%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  }\n}\n@keyframes _ngcontent-ng-c1210680869_line-animation  {\n  0%  {\n  transform: translateY(0px);\n  } 10%  {\n  transform: translateY(10px);\n  } 40%  {\n  transform: translateY(-25px);\n  } 60%  {\n  transform: translateY(-25px);\n  } 85%  {\n  transform: translateY(10px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes _ngcontent-ng-c1210680869_click-animation  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.9);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes included"},{"id":"kokonutui","name":"Kokonut UI","vendor":"Kokonut","fw":["React"],"theme":"动画 / 现代组件","link":"https://kokonutui.com","repo":"https://github.com/KokonutUI/kokonutui","license":"MIT","chips":["Card","Chart","Calendar","Command"],"kind":"item","img":"previews/kokonutui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Kokonut UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Kokonut UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 动画 / 现代组件\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Card\", \"Chart\", \"Calendar\", \"Command with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `rect` → animation: border-trace 1.2s ease-out 1 normal forwards\n- `div.absolute.inset-[20%]` → animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite normal\n- `div.jsx-b85f40904dcee116.absolute` → animation: scale 3s linear infinite normal\n- `circle` → animation: rotate-cw 8s linear infinite normal\n- `circle` → animation: rotate-ccw 8s linear 0.2s infinite normal\n- `div.w-[3px].rounded-sm` → animation: bounce-music 0.8s ease-in-out infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.flex` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `div.relative.flex` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.relative` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.relative.inline-block` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.flex.items-center` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.-top-4` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.jsx-b85f40904dcee116.relative` → transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1)\n- `div.jsx-b85f40904dcee116.absolute` → transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `h3.jsx-b85f40904dcee116.font-semibold` → transition: transform, translate, scale, rotate 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.jsx-b85f40904dcee116.flex` → transition: transform, opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.15s\n- `button.jsx-b85f40904dcee116.group/start` → transition: transform, background 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-collapsible-down  {\n  0%  {\n  opacity: 0;\n  height: 0px;\n  } 100%  {\n  height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes fd-collapsible-up  {\n  0%  {\n  height: var(--radix-collapsible-content-height);\n  } 100%  {\n  opacity: 0;\n  height: 0px;\n  }\n}\n@keyframes fd-accordion-down  {\n  0%  {\n  opacity: 0.5;\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes fd-accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  opacity: 0.5;\n  height: 0px;\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"diceui","name":"Dice UI","vendor":"Dice","fw":["React"],"theme":"Radix 风格组件","link":"https://diceui.com","repo":"https://github.com/diceui/dice-ui","license":"MIT","chips":["Combobox","DatePicker","Tags","Slider"],"kind":"item","img":"previews/diceui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Dice UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Dice UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Radix 风格组件\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Combobox\", \"DatePicker\", \"Tags\", \"Slider with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h1.animate-fade-up.text-balance` → animation: fade-up 0.5s ease-out 0.2s 1 normal forwards\n- `p.max-w-2xl.animate-fade-up` → animation: fade-up 0.5s ease-out 0.3s 1 normal forwards\n- `div.flex.animate-fade-up` → animation: fade-up 0.5s ease-out 0.4s 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.backdrop-blur-lg.border-b` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group/button.inline-flex` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes fd-exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"paper-rn","name":"React Native Paper","vendor":"Callstack","fw":["React"],"theme":"移动端 / 跨端","link":"https://reactnativepaper.com","repo":"https://github.com/callstack/react-native-paper","license":"MIT","chips":["Button","Card","TextInput","Modal"],"kind":"item","img":"previews/paper-rn.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the React Native Paper gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"React Native Paper\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 移动端 / 跨端\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Card\", \"TextInput\", \"Modal with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.hv0shhd` → transition: background, color, box-shadow 0.4s, 0.4s, 0.4s ease, ease, ease 0s, 0s, 0s\n- `button.b1qn7xxj` → transition: color, background, border 0.3s, 0.3s, 0.3s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; verbatim transitions included (no keyframes in spec)"},{"id":"varlet","name":"Varlet","vendor":"Varlet","fw":["Vue"],"theme":"移动端 / Vue3","link":"https://varletjs.org","repo":"https://github.com/varletjs/varlet","license":"MIT","chips":["Button","Input","Picker","ActionSheet"],"kind":"item","img":"previews/varlet.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Varlet gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Varlet\" in white, bold, ~32px.\n- Subtitle on the next line: \"Vue · 移动端 / Vue3\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #4ade80, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #4ade80 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Input\", \"Picker\", \"ActionSheet with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: background-color, box-shadow 0.25s, 0.25s ease, ease 0s, 0s\n- `button.var-button.var--box` → transition: box-shadow, background-color, border-radius 0.2s, 0.25s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `div.var-hover-overlay` → transition: opacity 0.15s ease\n- `img.varlet-site-header__logo` → transition: all 0.3s ease-in-out\n- `div.varlet-site-header__versions` → transition: background-color 0.25s ease\n- `div.var-card__floater` → transition: background-color, color 0.25s, 0.25s cubic-bezier(0.45, 0.19, 0.06, 0.89), cubic-bezier(0.45, 0.19, 0.06, 0.89) 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes circle  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes circular  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -40px;\n  } 100%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -120px;\n  }\n}\n@keyframes wave  {\n  0%, 40%, 100%  {\n  transform: scaleY(0.4);\n  } 20%  {\n  transform: scaleY(1);\n  }\n}\n@keyframes cube  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotate(90deg) scale(0.3);\n  }\n}\n@keyframes rect  {\n  0%  {\n  opacity: 0.3;\n  } 25%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.3;\n  } 65%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes disappear  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes progress-linear-long  {\n  0%  {\n  left: -90%;\n  right: 100%;\n  } 60%  {\n  left: -90%;\n  right: 100%;\n  } 100%  {\n  left: 100%;\n  right: -35%;\n  }\n}\n@keyframes progress-linear-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@keyframes progress-circle-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 100, 200;\n  stroke-dashoffset: -15px;\n  } 100%  {\n  stroke-dasharray: 100, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes progress-circle-rotate  {\n  100%  {\n  transform: rotate(270deg);\n  }\n}\n@keyframes iconRotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes success-line-tip  {\n  0%  {\n  width: 0px;\n  top: 23.75%;\n  left: 1.25%;\n  } 54%  {\n  width: 0px;\n  top: 20.25%;\n  left: 1%;\n  } 70%  {\n  width: 62.5%;\n  top: 43.75%;\n  left: -9.5%;\n  } 84%  {\n  width: 21.25%;\n  top: 60%;\n  left: 26.25%;\n  } 100%  {\n  width: 31.25%;\n  top: 56.25%;\n  left: 17.5%;\n  }\n}\n@keyframes success-line-long  {\n  0%  {\n  width: 0px;\n  top: 67.5%;\n  right: 57.5%;\n  } 65%  {\n  width: 0px;\n  top: 67.5%;\n  right: 57.5%;\n  } 84%  {\n  width: 68.75%;\n  top: 43.75%;\n  right: 0px;\n  } 100%  {\n  width: 58.75%;\n  top: 47%;\n  right: 9%;\n  }\n}\n@keyframes rotate-circle  {\n  0%  {\n  transform: rotate(-45deg);\n  } 5%  {\n  transform: rotate(-45deg);\n  } 12%  {\n  transform: rotate(-405deg);\n  } 100%  {\n  transform: rotate(-405deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card with green accent #4ade80; layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"wave-ui","name":"Wave UI","vendor":"Antoniandre","fw":["Vue"],"theme":"Material 风 / Vue3","link":"https://antoniandre.github.io/wave-ui","repo":"https://github.com/antoniandre/wave-ui","license":"MIT","chips":["Button","Card","Dialog","Tabs"],"kind":"item","img":"previews/wave-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Wave UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Wave UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"Vue · Material 风 / Vue3\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #4ade80, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #4ade80 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Card\", \"Dialog\", \"Tabs with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `h1` → transition: color, background-color, border-color, stroke, fill 0.4s, 0.4s, 0.4s, 0.4s, 0.4s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n- `a.w-button.w-ripple` → transition: all, background-color, padding 0.25s, 0s, 0s ease, ease, ease 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes w-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes w-scale  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes w-scale-fade  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes w-bounce  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.7);\n  } 60%  {\n  opacity: 1;\n  transform: scale(1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes w-twist  {\n  0%  {\n  transform: scale(0) rotate(-70deg);\n  } 60%  {\n  transform: scale(1.03) rotate(6deg);\n  } 100%  {\n  transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes w-ripple-ink-expand  {\n  100%  {\n  opacity: 0;\n  transform: scale(1);\n  }\n}\n@keyframes w-checkbox-ripple  {\n  0%  {\n  opacity: 0.8;\n  background-color: currentcolor;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(2.8);\n  }\n}\n@keyframes w-drawer-pop  {\n  0%, 100%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.05);\n  }\n}\n@keyframes w-form-el-shake  {\n  0%  {\n  left: 0px;\n  } 20%, 60%  {\n  left: 2px;\n  } 40%, 80%  {\n  left: -2px;\n  }\n}\n@keyframes w-icon--spin-a  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-359deg);\n  }\n}\n@keyframes w-overlay-pop  {\n  0%, 100%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.04);\n  }\n}\n@keyframes w-progress-bars  {\n  0%  {\n  transform: translate(-100%) scaleX(1);\n  } 100%  {\n  transform: translate(0px, 0px) scaleX(0);\n  }\n}\n@keyframes w-progress-stripes  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 50px 50px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card green accent; layout/colors/copy match; all verbatim w-* keyframes+transitions included"},{"id":"balmui","name":"BalmUI","vendor":"BalmJS","fw":["Vue"],"theme":"Material 风 / Vue3","link":"https://next-material.balmjs.com","repo":"https://github.com/balmjs/balm-ui","license":"MIT","chips":["Button","Input","Menu","Dialog"],"kind":"item","img":"previews/balmui.png","prompt":""},{"id":"vue-final-modal","name":"Vue Final Modal","vendor":"Vue Final","fw":["Vue"],"theme":"模态框 / 动画","link":"https://vue-final-modal.org","repo":"https://github.com/vue-final/vue-final-modal","license":"MIT","chips":["Modal","Drawer","Teleport"],"kind":"item","img":"previews/vue-final-modal.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Vue Final Modal — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built a light marketing landing page; reference shows a **dark component-demo showcase page**\n- Reference has: very dark background, macOS-style window dots, title bar, Chinese subtitle, a component preview card with Primary/Default/toggle/badge/select/card/tabs\n\n## Fixed spec\nRebuild as a **dark component demo** matching the reference exactly:\n\n**Layout (1280x820):**\n- Background: very dark near-black (~#0d1117)\n- **Top bar**: left = 3 colored circles (red #ff5f57, yellow #febc2e, green #28c840) spaced 8px apart; then bold white text **\"Vue Final Modal\"** (font-size ~20px)\n- **Subtitle** below top bar: gray text **\"Vue · 模态框 / 动画\"** (~13px, rgb(139,148,158))\n- **Preview card**: centered, rounded (~16px radius), bg slightly lighter dark (#161b22), 1px rgba(255,255,255,0.1) border, padding ~32px\n  - First row inside card:\n    - **Primary button**: green solid (bg rgb(5,150,105)), white text, rounded 8px, padding 10px 22px, font-weight 600\n    - **Default button**: transparent bg, 1px rgb(48,54,61) border, white text, same size\n    - **Input field**: \"Type here...\" placeholder, dark bg rgb(30,37,44), 1px rgb(48,54,61) border, rounded 6px, white placeholder text\n  - Second row:\n    - **Toggle switch**: on state — green track rgb(5,150,105) with white round knob on right; width ~42px, height ~24px\n    - **Badge**: small pill, dark bg rgb(48,54,61), white text \"Badge\", rounded 12px, font-size 12px\n    - **Select dropdown**: \"Select\" text, dark bg, 1px border, chevron-down indicator\n  - **Card section**: \"Card title\" (white, ~16px, weight 600); \"This is a preview of the component look.\" (gray ~rgb(139,148,158), ~14px)\n- **Bottom tab bar**: row of pill-outline buttons: **Modal**, **Drawer**, **Teleport** (dark transparent bg, 1px rgba(255,255,255,0.15) border, rounded 8px, white text)\n\n**Colors:**\n- Page bg: #0d1117 (very dark navy-black)\n- Card bg: #161b22\n- Borders: rgba(255,255,255,0.08) to (0.1)\n- Text primary: #ffffff; secondary: rgb(139,148,158); subtitle: rgb(139,148,158)\n- Accent green: rgb(5,150,105) for Primary button & toggle\n- Input bg: rgb(30,37,44)\n\n**Typography:** system-ui, sans-serif. Bold title. Clean monospace-ish feel on inputs.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.link` → transition: background 0.2s ease\n- `a.button-link.pv-fktYus` → transition: color 0.1s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示页与预览一致:绿色强调色、GitHub Dark 风格色值、Modal/Drawer/Teleport 标签。已写入 fade-in/fade-out 关键帧与 hover 过渡。"},{"id":"veevalidate","name":"VeeValidate","vendor":"Logaretm","fw":["Vue"],"theme":"表单校验 / Headless","link":"https://vee-validate.logaretm.com","repo":"https://github.com/logaretm/vee-validate","license":"MIT","chips":["Form","Field","ErrorMessage"],"kind":"item","img":"previews/veevalidate.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate VeeValidate — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built a dark landing page; reference shows a **dark component-demo showcase** (same gallery theme)\n- Need window dots, Chinese subtitle \"Vue · 表单验证 / Headless\", component preview card\n\n## Spec\nSame dark component-demo layout as Vue Final Modal but with VeeValidate branding:\n- Top: dots + **\"VeeValidate\"** (bold white)\n- Subtitle: \"Vue · 表单验证 / Headless\"\n- Card: Primary green rgb(5,150,105), Default outline, \"Type here...\", toggle (green), Badge, Select, \"Card title\" + desc\n- Tabs: Form, Field, ErrorMessage\n- Colors: bg #0d1117, card #161b22, accent green rgb(5,150,105)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.ml-4.transition-opacity` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  50%  {\n  background-color: transparent;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示与预览一致:绿色强调色、VeeValidate 标题、表单验证副标题、Form/Field/ErrorMessage 标签。已写入 blink/fade-in 关键帧与 hover 过渡。"},{"id":"tailgrids-vue","name":"TailGrids Vue","vendor":"TailGrids","fw":["Vue"],"theme":"Tailwind 组件","link":"https://tailgrids.com","repo":"https://github.com/TailGrids/tailgrids-vue","license":"MIT","chips":["Button","Card","Hero","Pricing"],"kind":"item","img":"previews/tailgrids-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Tailgrids Vue — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light Tailgrids landing page; reference shows **dark component-demo** theme\n\n## Spec\nDark component-demo:\n- Top: dots + **\"TailGrids Vue\"** (bold white)\n- Subtitle: \"Vue · Tailwind 组件\"\n- Card: Primary green, Default, \"Type here...\", green toggle, Badge, Select, Card title+desc\n- Tabs: Button, Card, Hero, Pricing\n- Bg #0d1117, accent green rgb(5,150,105)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.rfm-marquee` → animation: scroll 30.9714s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.cursor-pointer` → transition: all 0.2s ease\n- `button.absolute.top-1/2` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.h-6` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-full` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes slideInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideInFromBottom  {\n  0%  {\n  opacity: 0;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes scroll-diagonal  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-25%, -25%);\n  }\n}\n@keyframes border-progress  {\n  0%  {\n  stroke-dashoffset: 100%;\n  } 100%  {\n  stroke-dashoffset: 0%;\n  }\n}\n@keyframes border-travel  {\n  0%  {\n  --border-angle: 0deg;\n  } 100%  {\n  --border-angle: 360deg;\n  }\n}\n@keyframes text-gradient  {\n  0%  {\n  background-position: 0% center;\n  } 100%  {\n  background-position: 200% center;\n  }\n}\n@keyframes border-move  {\n  0%  {\n  background-position: 0% center;\n  } 50%  {\n  background-position: 100% center;\n  } 100%  {\n  background-position: 0% center;\n  }\n}\n@keyframes progress-once  {\n  0%  {\n  width: 0%;\n  } 100%  {\n  width: 100%;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示与预览一致:TailGrids Vue 标题、Vue · Tailwind 组件副标题、Button/Card/Hero/Pricing 标签。已将全部真实 @keyframes 与 hover 过渡写入 CSS。"},{"id":"volt-vue","name":"Volt Vue","vendor":"Themesberg","fw":["Vue"],"theme":"免费 Bootstrap 风","link":"https://demos.creative-tim.com/volt","repo":"https://github.com/themesberg/volt-bootstrap-5-dashboard","license":"MIT","chips":["Button","Card","Table","Chart"],"kind":"item","img":"previews/volt-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate volt-vue (Creative Tim 404) — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 was a plain white 404 page\n- Reference shows an **elaborate Creative Tim 404** with:\n  - Dark night-sky desert landscape photo as full background (stars, rock formations, moon glow)\n  - White logo top-left (circle icon + \"Creative Tim\")\n  - Nav links top-right: Home, About Us, Contact Us, social icons (FB, IG, Twitter)\n  - Large thin \"404\" centered in white\n  - \"The page you requested could not be found.\"\n  - Search input with cyan Search button (rgb(91,192,222))\n  - \"You can discover:\" heading\n  - 4 white cards with line icons: ADMIN & DASHBOARDS, UI KITS, FREE THEMES, BOOTSTRAP COMPONENTS\n\n## Spec\nRebuild as elaborate 404 with dark atmospheric background (use CSS gradient approximating night sky), large thin 404 text, search bar, 4 discovery cards with simple SVG-like icons.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input.form-control.form-control-search` → transition: border-color, box-shadow 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `div.card` → transition: all 0.3s cubic-bezier(0.34, 2, 0.6, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 40px 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes slideDown  {\n  100%  {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy all match; CSS gradient background approximates night sky; both @keyframes present verbatim"},{"id":"flowbite-vue","name":"Flowbite Vue","vendor":"Flowbite","fw":["Vue"],"theme":"Tailwind 组件","link":"https://flowbite-vue.com","repo":"https://github.com/themesberg/flowbite-vue","license":"MIT","chips":["Button","Input","Card","Navbar"],"kind":"item","img":"previews/flowbite-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Flowbite Vue — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light landing page with emoji cards\n- Reference shows **dark component-demo** theme with PINK/RED accent (not green!)\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Flowbite Vue\"** (bold white)\n- Subtitle: \"Vue · Tailwind 组件\"\n- Card: Primary **pink/red** (rgb(239,68,68) or rgb(244,63,94)), Default, \"Type here...\", pink toggle, Badge, Select, Card title+desc\n- Tabs: Button, Input, Card, Navbar\n- Bg #0d1117, accent pink/red\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `button.VPSwitch.VPSwitchAppearance` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPSocialLink.no-icon` → transition: color 0.5s ease\n- `a.VPButton.medium` → transition: color, border-color, background-color 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `div.VPLink.no-icon` → transition: border-color, background-color 0.25s, 0.25s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fwb-progress-indeterminate-slide-da08d611  {\n  0%  {\n  left: -40%;\n  width: 40%;\n  } 50%  {\n  left: 20%;\n  width: 60%;\n  } 100%  {\n  left: 100%;\n  width: 40%;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with pink/red accent per spec; all components match; both @keyframes verbatim; real site uses green but spec says red"},{"id":"nebular","name":"Nebular","vendor":"Akveo","fw":["Angular"],"theme":"企业级 / 主题化","link":"https://akveo.github.io/nebular","repo":"https://github.com/akveo/nebular","license":"MIT","chips":["Button","Card","Layout","Auth"],"kind":"item","img":"previews/nebular.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Nebular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built white landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Nebular\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 主题化\"\n- Card: Primary **red/pink** (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card title+desc\n- Tabs: Button, Card, Layout, Auth\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.select-button` → transition: background-color, border-color, border-radius, box-shadow, color 0.15s ease-in\n- `nb-icon` → transition: transform 0.15s ease-in\n- `a.btn.get-started` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes button-hero-basic-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(247, 249, 252) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-primary-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(89, 139, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-success-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(44, 230, 155) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-warning-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 201, 77) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-danger-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 112, 141) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-info-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(66, 170, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-control-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 255, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes sbx-reset-in  {\n  0%  {\n  transform: translate(-20%);\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes eva-flipInY  {\n  0%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n  animation-timing-function: ease-in;\n  opacity: 0;\n  } 40%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n  animation-timing-function: ease-in;\n  } 60%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n  opacity: 1;\n  } 80%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n  } 100%  {\n  transform: perspective(400px);\n  }\n}\n@keyframes eva-shake  {\n  0%, 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  } 10%, 30%, 50%, 70%, 90%  {\n  transform: translate3d(-3px, 0px, 0px);\n  } 20%, 40%, 60%, 80%  {\n  transform: translate3d(3px, 0px, 0px);\n  }\n}\n@keyframes eva-pulse  {\n  0%  {\n  transform: scale3d(1, 1, 1);\n  } 50%  {\n  transform: scale3d(1.2, 1.2, 1.2);\n  } 100%  {\n  transform: scale3d(1, 1, 1);\n  }\n}\n@keyframes eva-zoomIn  {\n  0%  {\n  opacity: 1;\n  transform: scale3d(0.5, 0.5, 0.5);\n  } 50%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 14 @keyframes verbatim (progress-bar-stripes, 7 button-hero pulses, sbx-reset, eva-flipInY/shake/pulse/zoomIn)"},{"id":"devextreme","name":"DevExtreme","vendor":"DevExpress","fw":["Angular"],"theme":"企业级 / 商业","link":"https://js.devexpress.com/Angular","repo":"https://github.com/DevExpress/DevExtreme","license":"商用","chips":["DataGrid","Charts","Scheduler","Form"],"kind":"item","img":"previews/devextreme.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate DevExtreme — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light marketing landing; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"DevExtreme\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 商业\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card+desc\n- Tabs: DataGrid, Charts, Scheduler, Form\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes menuNotificationGrowUp  {\n  0%  {\n  inset: 0px;\n  border-width: 1px;\n  opacity: 1;\n  } 100%  {\n  inset: -7px;\n  border-width: 14px;\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes dx-loadindicator-icon-custom-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dx-loadpanel-opacity  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes dx-filemanager-icon-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dx-generic-loadindicator-opacity  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.55;\n  }\n}\n@-webkit-keyframes valid-badge-frames  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.1);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@-webkit-keyframes loader  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: 900%;\n  }\n}\n@-webkit-keyframes loader-rtl  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -900%;\n  }\n}\n@-webkit-keyframes dx-datagrid-highlight-change  {\n  50%, 0%  {\n  background-color: rgba(51, 51, 51, 0.08);\n  }\n}\n@-webkit-keyframes dx-treelist-highlight-change  {\n  50%, 0%  {\n  background-color: rgba(51, 51, 51, 0.08);\n  }\n}\n@keyframes slideOut  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translateX(2%);\n  }\n}\n@keyframes slideInLeft  {\n  0%  {\n  opacity: 0;\n  transform: translateX(-2%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  opacity: 0;\n  transform: translateX(2%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 14 keyframes verbatim (menuNotificationGrowUp, fadeIn, dx-*, valid-badge, loader, slideOut/InLeft/InRight)"},{"id":"kendo-angular","name":"Kendo UI for Angular","vendor":"Telerik","fw":["Angular"],"theme":"企业级 / 商业","link":"https://www.telerik.com/kendo-angular-ui","repo":"https://www.telerik.com/kendo-angular-ui","license":"商用","chips":["Grid","Chart","Editor","Scheduler"],"kind":"item","img":"previews/kendo-angular.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Kendo UI for Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built white landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Kendo UI for Angular\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 商业\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, input, toggle, Badge, Select, Card+desc\n- Tabs: Grid, Chart, Editor, Scheduler\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `input.k-input.k-input-md` → animation: autoFillEnd ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: color, opacity 0.2s, 0.2s ease, ease 0s, 0s\n- `a.TK-Skip-Link` → transition: color, background, opacity 0.1s, 0.1s, 0.1s linear, linear, linear 0s, 0s, 0s\n- `button.TK-Nav-Overlay` → transition: opacity, visibility 0.12s, 0.12s linear, linear 0.12s, 0.12s\n- `a.Btn.Btn--prim2` → transition: color, background-color, border-color 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `button.k-button.k-button-md` → transition: color 0.2s ease-in-out\n- `span.k-rating-item.k-selected` → transition: color 0.2s ease-out\n- `span.k-switch-track.k-rounded-full` → transition: background-color 0.2s ease-in-out\n- `input.k-input.k-input-md` → transition: border-color 0.3s ease\n- `input.k-radio.k-radio-md` → transition: outline 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-up-fix  {\n  0%  {\n  transform: translate3d(0px, 350%, 0px);\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 4 @keyframes verbatim (fade-in, onetrust-fade-in, slide-up-fix, slide-down-custom)"},{"id":"syncfusion-ng","name":"Syncfusion EJ2","vendor":"Syncfusion","fw":["Angular"],"theme":"企业级 / 商业","link":"https://www.syncfusion.com/angular-components","repo":"https://github.com/syncfusion/ej2-angular","license":"商用","chips":["Grid","Chart","Diagram","PDF"],"kind":"item","img":"previews/syncfusion-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Syncfusion Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 was too simple — just H1 + text + link\n- Reference shows a **rich marketing landing page** with:\n  - Dark top nav bar (bg ~#1a1f35) with Syncfusion logo (grid icon + wordmark)\n  - Nav items: PRODUCTS ▾, AI SOLUTIONS ▾, RESOURCES ▾, PRICING, COMPANY ▾\n  - Right: BOOK A FREE DEMO (outline), TRY IT FREE (solid blue)\n  - Yellow banner top: \"BoldDesk! Using Zendesk...\"\n  - Hero section LEFT: H1 \"Angular Component Library – Premium UI Components\", paragraph, two buttons (Download Free Trial blue solid + Schedule a Live Demo outline), \"No credit card required.\", \"Explore Samples →\"\n  - Hero section RIGHT: product screenshot mockup (Expense Tracker dashboard with charts, cards, user avatar, stats)\n  - Below hero: G2 rating badge (4.5/5), ANGULAR 22 Support, 14.8M+ downloads\n  - Chat widget bottom-right corner\n\n## Spec\nRebuild as rich landing with dark nav, left-right hero layout, CSS-only dashboard mockup on right.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: all 0.3s ease\n- `a.menu-item.dropdown-toggle` → transition: all 0.3s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes expandWidth  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 1392px;\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes rotation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"rich landing page with dark nav, hero L-R layout, CSS dashboard mockup, stats bar, chat widget; all 3 @keyframes verbatim"},{"id":"ag-grid","name":"AG Grid","vendor":"AG Grid","fw":["Angular"],"theme":"数据表格 / 高性能","link":"https://www.ag-grid.com/angular-data-grid","repo":"https://github.com/ag-grid/ag-grid","license":"MIT","chips":["DataGrid","Tree","Pivot","Charts"],"kind":"item","img":"previews/ag-grid.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the ag-grid (https://www.ag-grid.com/angular-data-grid) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component-demo pattern; all components match preview; no @keyframes specified in prompt (empty animation spec)"},{"id":"ionic-ng","name":"Ionic Angular","vendor":"Ionic","fw":["Angular"],"theme":"移动 / 混合应用","link":"https://ionicframework.com","repo":"https://github.com/ionic-team/ionic-framework","license":"MIT","chips":["App","Tabs","Card","Modal"],"kind":"item","img":"previews/ionic-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Ionic Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Ionic Angular\"** (bold white)\n- Subtitle: \"Angular · 移动 / 混合应用\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card+desc\n- Tabs: App, Tabs, Card, Modal\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `strong` → transition: color 0.2s ease-out\n- `button.DocSearch.DocSearch-Button` → transition: border-color 0.2s ease-out\n- `article.docs-dropdown_dropdown__RqIcX.site-header__dropdown` → transition: transform, opacity 0.5s, 0.4s cubic-bezier(0.36, 0.66, 0.04, 1), cubic-bezier(0.36, 0.66, 0.04, 1) 0s, 0s\n- `a.link` → transition: all 0.2s ease-in-out\n- `a.link` → transition: background-color 0.2s ease-in-out\n- `li.jsx-c1bf03e61e10f0c8.desktop_headerLink__EL1uK` → transition: all 0.1s ease-in-out\n- `span.homepage_topFramework__IDcAO.homepage_topFrameworkReact__inLIT` → transition: opacity, transform 0.4s, 0.4s ease-out, ease-out 0s, 0s\n- `a.homepage_topCta__YQIRt` → transition: background-color 0.2s ease-out\n- `svg` → transition: all 0.3s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes desktop_delayPointerEvents__Nuz1Z  {\n  0%  {\n  pointer-events: none;\n  } 99%  {\n  pointer-events: none;\n  } 100%  {\n  pointer-events: all;\n  }\n}\n@keyframes mobile_fadeDown__v53FM  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-16px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component-demo with red accent; all components match; all 3 @keyframes verbatim (fade-in, desktop_delayPointerEvents, mobile_fadeDown)"},{"id":"covalent","name":"Covalent","vendor":"Teradata","fw":["Angular"],"theme":"企业级 / 数据","link":"https://teradata.github.io/covalent","repo":"https://github.com/Teradata/covalent","license":"MIT","chips":["Layout","DataTable","Chart","File"],"kind":"item","img":"previews/covalent.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Covalent — above-the-fold (DARK component gallery card)\n\nThe preview screenshot shows a **unified dark UI gallery card** format for this site.\n\nBACKGROUND: very dark navy/charcoal (#1a1a2e or #161b2e), full viewport 1280x820.\n\nTOP BAR:\n- Left: three small colored dots (red, yellow, green — like macOS traffic lights) followed by brand name \"Covalent\" in white bold (~20px).\n- Below brand: subtitle \"Angular · 企业级 / 数据\" in smaller light-grey text (~13px).\n\nCOMPONENT SHOWCASE ROW (spaced horizontally):\n- \"Primary\" button: FILLED pink/coral-red (#e74c6b or #f0657c), rounded ~8px, white text.\n- \"Default\" button: OUTLINE (transparent bg, light grey border #445, light text).\n- Search input: dark bg (#252d40 or similar), rounded, placeholder \"Type here...\", light placeholder text.\n- Toggle switch: pill-shaped, left side pink/red filled, right empty.\n- \"Badge\": small pill, teal/cyan bg (#1abc9c-ish), white text, rounded-full.\n- \"Select\" dropdown: dark outline button with ▼ chevron, light text.\n\nCARD COMPONENT:\n- A bordered card below the showcase row:\n  - Title \"Card title\" (white bold).\n  - Body text \"This is a preview of the component look.\" (light grey).\n\nBOTTOM TAB BAR:\n- Row of outlined tab buttons at bottom: Layout, DataTable, Chart, File.\n- Each tab: transparent bg, subtle border, light text, rounded ~8px.\n\nTYPOGRAPHY: system sans-serif (-apple-system, Segoe UI, Roboto). White/light text on dark.\nVIBE: dark-mode component library showcase / demo card.\n\nVIEWPORT: 1280px wide; above-the-fold fits 820px. Single self-contained HTML, inline CSS, vanilla, system fonts, no external assets.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.mat-drawer-backdrop.ng-star-inserted` → transition: background-color, visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `mat-sidenav.mat-drawer.mat-sidenav` → transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `mat-sidenav-content.mat-drawer-content.mat-sidenav-content` → transition: transform, margin-left, margin-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `button.mdc-button.mat-mdc-button-base` → transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes _mat-menu-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes _mat-menu-exit  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-smooth  {\n  0%, 20%  {\n  opacity: 1;\n  } 60%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-phase  {\n  0%, 20%  {\n  opacity: 1;\n  } 90%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-expand  {\n  0%, 20%  {\n  transform: scaleY(1);\n  } 80%, 100%  {\n  transform: scaleY(0);\n  }\n}\n@keyframes fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes monaco-findInput-highlight-0  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-1  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-0  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-1  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes progress  {\n  0%  {\n  transform: translateX(0%) scaleX(1);\n  } 50%  {\n  transform: translateX(2500%) scaleX(3);\n  } 100%  {\n  transform: translateX(4900%) scaleX(1);\n  }\n}\n@keyframes flash-background  {\n  0%  {\n  background-color: lightgreen;\n  } 100%  {\n  background-color: none }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色企业级组件卡片与预览一致:珊瑚红 Primary、粉/暗分割切换开关、青色 Badge、Layout/DataTable/Chart/File 标签。已写入全部 Material 风格关键帧与 hover 过渡。"},{"id":"fundamental-ngx","name":"Fundamental NGX","vendor":"SAP","fw":["Angular"],"theme":"企业设计系统","link":"https://sap.github.io/fundamental-ngx","repo":"https://github.com/SAP/fundamental-ngx","license":"Apache","chips":["Button","Input","Table","Modal"],"kind":"item","img":"previews/fundamental-ngx.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Fundamental NGX — above-the-fold (DARK component gallery card)\n\nThe preview shows a **dark UI gallery card** format.\n\nBACKGROUND: very dark navy (#1a1a2e), full viewport 1280x820.\n\nTOP: traffic-light dots (red/yellow/green) + \"Fundamental NGX\" (white bold). Subtitle: \"Angular · 企业设计系统\" (light grey).\n\nCOMPONENT ROW:\n- \"Primary\" button: FILLED pink/coral-red (#e74c6b), rounded 8px, white text.\n- \"Default\": outline button.\n- Search input: dark bg #252d40, placeholder \"Type here...\".\n- Toggle switch (pink left).\n- \"Badge\" pill (teal/cyan bg #1abc9c).\n- \"Select ▼\" dropdown.\n\nCARD: bordered box with \"Card title\" + \"This is a preview of the component look.\"\n\nTABS at bottom: Button, Input, Table, Modal.\n\nVIEWPORT 1280x820. Single HTML, inline CSS, vanilla. System fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.fd-docs-toolbar__logo` → transition: opacity 0.2s ease\n- `button.fd-docs-toolbar__action.fd-docs-toolbar__action--labeled` → transition: background-color, border-color, box-shadow 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `button.fd-docs-toolbar__action.fd-docs-toolbar__action--muted` → transition: opacity, background-color, border-color 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `div.fd-docs-sidebar` → transition: margin, box-shadow 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n- `div.fd-docs-command-bar` → transition: border-color, box-shadow 0.2s, 0.3s ease, ease 0s, 0s\n- `fd-icon.fd-docs-command-bar__icon.sap-icon` → transition: color 0.2s ease\n- `button.fd-docs-command-bar__action` → transition: background-color, color 0.15s, 0.15s ease, ease 0s, 0s\n- `fd-icon.fd-docs-command-bar__chevron.sap-icon` → transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)\n- `kbd.fd-docs-command-bar__action-kbd` → transition: background-color, border-color, color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `button.fd-docs-nav__header` → transition: background-color 0.15s ease\n- `div.fd-docs-content__margin` → transition: padding 0.5s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes grow  {\n  0%, 50%, 100%  {\n  transform: scale(0.5);\n  } 25%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色企业设计系统卡片与预览一致:珊瑚红 Primary、粉/暗分割切换、青色 Badge、Button/Input/Table/Modal 标签。已写入 grow 关键帧与相关过渡。"},{"id":"agnosui","name":"AgnosUI","vendor":"AgnosUI","fw":["Angular"],"theme":"Headless / 可定制","link":"https://agnosui.github.io","repo":"https://github.com/agnosui/agnosui","license":"MIT","chips":["Accordion","Datepicker","Rating","Slider"],"kind":"item","img":"previews/agnosui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: AgnosUI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"AgnosUI\" white bold. Subtitle: \"Angular · Headless / 可定制\".\n\nCOMPONENT ROW:\n- Primary: pink #e74c6b filled, 8px radius.\n- Default: outline.\n- Search input (dark).\n- Toggle (pink left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Accordion, Datepicker, Rating, Slider.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色 Headless 组件卡片与预览一致:珊瑚红 Primary、粉/暗分割切换、青色 Badge、Accordion/Datepicker/Rating/Slider 标签。入场与 hover 过渡已实现。"},{"id":"ng-aquila","name":"ng-aquila","vendor":"Nationwide","fw":["Angular"],"theme":"金融设计系统","link":"https://designsystem.nationwide.com","repo":"https://github.com/klabrecque/ng-aquila","license":"Apache","chips":["Button","Input","Card","Stepper"],"kind":"item","img":"previews/ng-aquila.png","prompt":""},{"id":"devui-ng","name":"DevUI","vendor":"华为 Huawei","fw":["Angular"],"theme":"企业级 / 华为","link":"https://devui.design","repo":"https://github.com/DevCloudFE/ng-devui","license":"MIT","chips":["Button","Input","Table","Tree"],"kind":"item","img":"previews/devui-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: DevUI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"DevUI\" white bold. Subtitle: \"Angular · 企业级 / 华为\".\n\nCOMPONENT ROW:\n- Primary: pink #e74c6b filled.\n- Default: outline.\n- Search input (dark).\n- Toggle (pink left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Button, Input, Table, Tree.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"oblique","name":"Oblique","vendor":"Swiss Post","fw":["Angular"],"theme":"政府 / 企业","link":"https://oblique.obs.ch","repo":"https://github.com/obliqueOTypescript/oblique","license":"MIT","chips":["MasterLayout","Nav","Form","Notification"],"kind":"item","img":"previews/oblique.png","prompt":""},{"id":"sbb-angular","name":"sbb-angular","vendor":"SBB","fw":["Angular"],"theme":"交通 / 公共设计","link":"https://angular.sbb.ch","repo":"https://github.com/sbb-design-systems/angular","license":"MIT","chips":["Button","Train","Map","Form"],"kind":"item","img":"previews/sbb-angular.png","prompt":""},{"id":"ngx-bootstrap","name":"ngx-bootstrap","vendor":"ValorSoftware","fw":["Angular"],"theme":"Bootstrap 风","link":"https://valor-software.com/ngx-bootstrap","repo":"https://github.com/valor-software/ngx-bootstrap","license":"MIT","chips":["Modal","Tabs","Tooltip","Datepicker"],"kind":"item","img":"previews/ngx-bootstrap.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: ngx-bootstrap homepage — above-the-fold (v2 fix)\n\nThe reference shows the actual site's above-the-fold:\n\nTOP NAV BAR (dark navy ~#1a1d2e or #161b22, height ~56px):\n- Far left: small RED square with white \"B\" letter (Bootstrap logo).\n- Next: brand \"ngx-bootstrap\" (white, bold, ~18px).  \n- Then nav links: \"Docs\", \"Components\", \"GitHub\" (white/light grey, ~13px).\n- A wide search input field (dark bg, rounded, placeholder \"Search...\", flex-grow).\n- Right side: 3 small circular icon placeholders (GitHub, Discord, etc.) — muted circles.\n\nHERO AREA (light/white background below nav, generous padding):\n- Centered content.\n- Large bold headline: \"Develop better. Faster.\" (dark navy/black, ~52px font-weight 800).\n- Two buttons side by side:\n  - \"Get started\" — FILLED blue #0D6EFD (Bootstrap primary), white text, border-radius 8px, ~14px 28px padding.\n  - \"Documentation\" — OUTLINE (transparent bg, blue border #0D6EFD, blue text, same radius/padding).\n- Below buttons area: a LARGE prominent red Bootstrap shield/logo — a hexagon-like shield shape with a huge white \"B\" inside (red fill #dc3545 or similar).\n\nCOLORS: nav bg #1a1d2e, body bg #f8fafc, headline color #1a202c, accent blue #0D6EFD, Bootstrap red #dc3545.\nTYPOGRAPHY: Manrope / Roboto / system sans-serif.\n\nVIEWPORT: 1280px; above-the-fold fits 820px. Single HTML, inline CSS, vanilla.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input` → transition: border-color, box-shadow 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `a.btn.btn-primary` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 1rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏与预览一致:深色导航栏、Bootstrap 红色 B 标、Get started/Documentation 按钮、红色盾牌徽标与底部深色弧线。已写入 Bootstrap 关键帧与按钮过渡。"},{"id":"meltui","name":"Melt UI","vendor":"Melt","fw":["Svelte"],"theme":"Headless / 无样式","link":"https://melt-ui.com","repo":"https://github.com/melt-ui/melt-ui","license":"MIT","chips":["Menu","Dialog","Select","Tooltip"],"kind":"item","img":"previews/meltui.png","prompt":""},{"id":"bitsui","name":"Bits UI","vendor":"Bits UI","fw":["Svelte"],"theme":"无样式 / 可定制","link":"https://www.bits-ui.com","repo":"https://github.com/huntabyte/bits-ui","license":"MIT","chips":["Accordion","Dialog","Datepicker","Toast"],"kind":"item","img":"previews/bitsui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Bits UI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"Bits UI\" white bold. Subtitle: \"Svelte · 无样式 / 可定制\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500 or #e65100), 8px radius, white text.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Accordion, Dialog, Datepicker, Toast.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.spin_anim.ml-auto` → animation: svelte-14ahnsa-spin 5.1s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.data-active:text-foreground.data-active:bg-black/5` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.rounded-input.hover:bg-dark-10` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.bg-background-alt.text-foreground/60` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.bg-background.data-[state=unchecked]:shadow-mini` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--bits-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-collapsible-content-height);\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--bits-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes enter-from-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes enter-from-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes exit-to-right  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes exit-to-left  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.9);\n  } 100%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  }\n}\n@keyframes scale-out  {\n  0%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.95);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500, 14 keyframes + spin verbatim; spec-faithful"},{"id":"svar","name":"SVAR","vendor":"SVAR","fw":["Svelte"],"theme":"数据组件 / 表格","link":"https://svar.dev","repo":"https://github.com/svar-widget/svar-svelte","license":"MIT","chips":["Grid","Gantt","Kanban","FileManager"],"kind":"item","img":"previews/svar.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: SVAR — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"SVAR\" white bold. Subtitle: \"Svelte · 数据组件 / 表格\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500), 8px radius, white text.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Grid, Gantt, Kanban, FileManager.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.cursor.astro-7nw46rgj` → animation: blink 0.8s ease infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.menu.astro-63r5eucr` → transition: background-color 0.4s ease\n- `div.menu-content.astro-63r5eucr` → transition: border-radius 0.3s ease\n- `img.visible.astro-hgja5ook` → transition: opacity 1s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  transform: translate(100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes slideOutLeft  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slideInLeft  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes slideOutRight  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes flight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px) rotate(-90deg);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-500px, -500px) rotate(-90deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500, blink cursor; 6 keyframes verbatim"},{"id":"sveltestrap","name":"Sveltestrap","vendor":"Sveltestrap","fw":["Svelte"],"theme":"Bootstrap 风","link":"https://sveltestrap.js.org","repo":"https://github.com/bestguy/sveltestrap","license":"MIT","chips":["Button","Card","Modal","Navbar"],"kind":"item","img":"previews/sveltestrap.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Sveltestrap — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"Sveltestrap\" white bold. Subtitle: \"Svelte · Bootstrap ⚡\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500), 8px radius.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Button, Card, Modal, Navbar.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500; no @keyframes required in spec"},{"id":"smelte","name":"Smelte","vendor":"Smelte","fw":["Svelte"],"theme":"Material 风","link":"https://smeltejs.com","repo":"https://github.com/matyunya/smelte","license":"MIT","chips":["Button","Card","Input","DataTable"],"kind":"item","img":"previews/smelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Smelte above-the-fold UI (smeltejs.com)\n\nBuild a single-file HTML/CSS recreation of the Smelte homepage above-the-fold (1280x820).\nSmelte = \"Material design using Tailwind CSS for Svelte\", a UI framework with a very small footprint.\n\n## Brand / layout\n- Sticky top navigation bar, dark background `#1d1d1d`, full width, ~64px tall, white text.\n- Left: brand wordmark \"SMELTE\" in bold white, letter-spacing, with a small circular logo mark.\n- Center/right: horizontal nav links in white, ~14px: Components, Typography, Color, Breakpoints, Dark mode, Text fields, Buttons, Selection controls, Lists, Selects.\n- Far right: two round icon buttons (transparent, circular) — a sun icon (\"wb_sunny\", dark-mode toggle) and a menu icon.\n\n## Hero (above the fold)\n- Dark page background (continue #1d1d1d or a subtle vertical gradient to near-black).\n- Large greeting \"Hi\" (big, friendly) and a prominent heading:\n  \"Material design using Tailwind CSS for Svelte\"\n- Subcopy: \"UI framework with very small footprint\"\n- Accent color: Material blue `#1976d2` (used for links/buttons/highlights).\n- Optionally a rounded card / code-ish panel and a primary button \"Get Started\".\n\n## Typography / vibe\n- Font: Roboto, sans-serif (system fallback).\n- Material Design feel: clean, generous spacing, subtle elevation, rounded corners (~8px), soft shadows.\n- Overall dark, modern, developer-focused.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets/images.\n- Fixed to display nicely within 1280x820 viewport.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.duration-100.relative` → transition: all 0.1s ease\n- `i.material-icons.icon` → transition: all 0.2s cubic-bezier(0.4, 0, 1, 1)\n- `a.px-4.github` → transition: all 0.3s ease-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: none;\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@-webkit-keyframes ripple-normal  {\n  100%  {\n  transform: scale(2.5);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes ripple-centered  {\n  100%  {\n  transform: scale(1);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark Material hero #1d1d1d, blue #1976d2; 5 keyframes verbatim (incl webkit)"},{"id":"attractions","name":"Attractions","vendor":"illright","fw":["Svelte"],"theme":"现代 / 轻量","link":"https://attractions.scalar.dev","repo":"https://github.com/illright/attractions","license":"MIT","chips":["Button","Card","Tooltip","Notification"],"kind":"item","img":"previews/attractions.png","prompt":""},{"id":"svelteui","name":"SvelteUI","vendor":"SvelteUI","fw":["Svelte"],"theme":"现代组件","link":"https://svelteui.dev","repo":"https://github.com/svelteuidev/svelteui","license":"MIT","chips":["Button","Card","Modal","AppShell"],"kind":"item","img":"previews/svelteui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SvelteUI above-the-fold UI (svelteui.dev)\n\nBuild a single-file HTML/CSS recreation of the SvelteUI homepage above-the-fold (1280x820).\nSvelteUI = \"A variety of components, actions, transition and utility functions.\"\n\n## Brand / layout\n- Light/white page (`#ffffff` background, near-black text).\n- Top navigation bar, white, with brand \"SvelteUI\" on the left (bold), and nav links on the right:\n  Docs, Components, Themes, Blog, GitHub (text links, dark).\n- Clean, airy, centered hero.\n\n## Hero (above the fold)\n- Centered big heading (two lines):\n  \"Create applications in less time than ever before\"\n  \"Regardless of design experience\"\n- Subcopy (optional): short line about flexible Svelte components.\n- Two call-to-action buttons side by side:\n  - \"Get Started\" — primary, blue filled `#228be6`, white text, rounded 4px.\n  - \"Source Code\" — dark filled `#141517`, white text, rounded 4px.\n- Accent / brand color: SvelteUI blue `#228be6`.\n\n## Typography / vibe\n- Font: system-ui / -apple-system / Segoe UI / Roboto sans-serif.\n- Modern, minimal, lots of whitespace, centered hero, friendly developer-library vibe.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.gradient-animation.svelte-1mvpc2r` → animation: svelte-1mvpc2r-hue 20s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `li.searchBox` → transition: all 0.1s ease-in\n- `a.svelteui-c-gzYEUW.svelteui-ActionIcon-root` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes svelteui-k-cacvRj  {\n  0%, 100%  {\n  opacity: 0.4;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes svelteui-k-fMzrA  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 40px 0px;\n  }\n}\n@keyframes svelte-13bvii3-bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: translateY(0px);\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@keyframes svelte-13bvii3-ping  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes svelte-13bvii3-pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes svelte-13bvii3-float  {\n  0%  {\n  transform: translateY(0px);\n  } 30%  {\n  transform: translateY(-10px);\n  } 50%  {\n  transform: translateY(4px);\n  } 70%  {\n  transform: translateY(-15px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes svelte-13bvii3-pulsate  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.2);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes svelte-1mvpc2r-hue  {\n  0%  {\n  filter: hue-rotate(0deg);\n  } 100%  {\n  filter: hue-rotate(-360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"light centered hero, blue #228be6; 8 keyframes verbatim, hue rotation"},{"id":"grailui","name":"Grail UI","vendor":"Grail UI","fw":["Svelte"],"theme":"Headless / 可访问","link":"https://grail-ui.vercel.app","repo":"https://github.com/grail-ui/grail-ui","license":"MIT","chips":["Accordion","Dialog","Slider","Tooltip"],"kind":"item","img":"previews/grailui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Grail UI above-the-fold UI (grail-ui.vercel.app)\n\nBuild a single-file HTML/CSS recreation of the Grail UI homepage above-the-fold (1280x820).\nGrail UI = \"A library of accessible component primitives, actions and utilities for Svelte.\"\n\n## Brand / layout\n- Light page. Sticky translucent header `rgba(255,255,255,0.9)` with blur, dark navy text `#181a2a`.\n- Left: brand \"Grail UI\" (bold).\n- Nav links (right of brand): a version badge \"v0.10.1\", then \"Docs\", \"Components\".\n- Right side of header: \"GET STARTED\" (dark filled), \"GITHUB\" (outline) buttons, and a round \"Open site navigation\" icon button.\n\n## Hero (above the fold)\n- Centered, light background.\n- Big heading: \"Put control back in developers' hands.\"\n- Subtitle (gray, ~#6b7280-ish but derived from navy at 60%): \n  \"A set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience.\"\n- Two buttons centered: \"GET STARTED\" (dark filled `#181a2a`, light text, radius 8px) and \"GITHUB\" (outline, radius 8px).\n\n## Typography / vibe\n- Font: \"Mona Sans\", system-ui, sans-serif.\n- Colors: ink/navy `#181a2a`, light background, dark filled buttons, clean and accessible feel.\n- Rounded corners 8px on buttons; generous spacing.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mr-3.flex-none` → transition: all 0.2s ease\n- `svg` → transition: transform, opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes button-pop  {\n  0%  {\n  transform: scale(var(--btn-focus-scale, .95));\n  } 40%  {\n  transform: scale(1.02);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes checkmark  {\n  0%  {\n  background-position-y: 5px;\n  } 50%  {\n  background-position-y: -2px;\n  } 100%  {\n  background-position-y: 0px;\n  }\n}\n@keyframes progress-loading  {\n  50%  {\n  left: 107%;\n  }\n}\n@keyframes radiomark  {\n  0%  {\n  box-shadow: 0 0 0 12px hsl(var(--b1)) inset,0 0 0 12px hsl(var(--b1)) inset;\n  } 50%  {\n  box-shadow: 0 0 0 3px hsl(var(--b1)) inset,0 0 0 3px hsl(var(--b1)) inset;\n  } 100%  {\n  box-shadow: 0 0 0 4px hsl(var(--b1)) inset,0 0 0 4px hsl(var(--b1)) inset;\n  }\n}\n@keyframes rating-pop  {\n  0%  {\n  transform: translateY(-0.125em);\n  } 40%  {\n  transform: translateY(-0.125em);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes toast-pop  {\n  0%  {\n  transform: scale(0.9);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"light translucent header, navy #181a2a; 6 keyframes verbatim"},{"id":"atoui","name":"Ato UI","vendor":"Ato UI","fw":["Svelte"],"theme":"现代 / 主题化","link":"https://ato-ui.com","repo":"https://github.com/ato-ui/ato-ui","license":"MIT","chips":["Button","Card","Modal","Toast"],"kind":"item","img":"previews/atoui.png","prompt":""},{"id":"m3-svelte","name":"M3 Svelte","vendor":"techniq","fw":["Svelte"],"theme":"Material 3","link":"https://github.com/techniq/m3-svelte","repo":"https://github.com/techniq/m3-svelte","license":"MIT","chips":["Button","Card","Switch","Slider"],"kind":"item","img":"previews/m3-svelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate m3-svelte above-the-fold UI — v2 (GitHub 404 page)\n\n## FIXES from v1 comparison:\nThe reference IS the GitHub 404 page. Improve fidelity:\n\n### Header (fuller GitHub chrome)\n- Dark `#24292f` bar, ~64px tall.\n- Left: GitHub cat/octocat mark (white circle with cat silhouette).\n- Center-left nav dropdowns (text only): Platform ▾, Solutions ▾, Resources ▾, Open Source ▾, Enterprise ▾, Pricing.\n- Right: 🔍 search icon, \"Sign in\" button (outline, border #d0d7de, radius 6px), \"Sign up\" button (green filled `#238636`), grid icon.\n\n### Hero area (the 404 scene)\n- Light background below header (white or very light gray).\n- Left side: giant \"**404**\" (very large, ~120px+, bold, dark), speech bubble saying\n  \"**This is not the web page you are looking for.**\"\n- Right side: A \"**Sign in to GitHub**\" card (white, rounded, shadowed):\n  - Title \"Sign in to GitHub\"\n  - Input: \"Username or email address\"\n  - Input: \"Password\" + \"Forgot password?\" link\n  - Green \"Sign in\" button\n  - \"or continue with other methods\" link\n- Background: subtle desert/sand tone behind the 404 area (light tan/beige gradient).\n\n### Below hero\n- \"Find code, projects, and people on GitHub:\" label + wide search input + \"Search\" button.\n- Footer line: \"Contact Support – GitHub Status – @githubstatus\"\n- Newsletter section: \"THE DEVELOPER NEWSLETTER\" + description + green \"Subscribe\" button.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only.\n- Use CSS shapes/colors to approximate the octocat scene (no external images).\n- Display within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `a.Button--link.Button--medium` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.position-relative` → transition: all 0.25s ease-in\n- `a.Primer_Brand__Button-module__Button___scH9Z.Primer_Brand__Button-module__Button--primary___MSbnU` → transition: background-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"GitHub 404 page, dark header #24292f, 404 + login card; 14 keyframes verbatim"},{"id":"konsta","name":"Konsta","vendor":"Konsta","fw":["Svelte"],"theme":"移动 / 原生风","link":"https://konsta.io","repo":"https://github.com/konstaui/konsta","license":"MIT","chips":["Button","Navbar","Card","Sheet"],"kind":"item","img":"previews/konsta.png","prompt":""},{"id":"yesvelte","name":"Yesvelte","vendor":"Yesvelte","fw":["Svelte"],"theme":"现代组件","link":"https://yesvelte.com","repo":"https://github.com/yesvelte/yesvelte","license":"MIT","chips":["Button","Card","Modal","Alert"],"kind":"item","img":"previews/yesvelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate YeSvelte above-the-fold UI (yesvelte.com) — v2\n\n## FIXES from v1 comparison:\n- **Hero background is bright/vibrant BLUE** (royal blue ~`#2563eb` or `#2a6fdb`), NOT dark navy. The entire hero band is this blue.\n- **Header**: White/light bar at top. Left: swirly logo mark (abstract \"Y\" swirl) + \"YeSvelte\" text in white-on-blue (or dark on white header). Right: icon+text links: Github, Reddit, Discord, Try on Repl, Tabler dropdown, moon/dark toggle.\n- **Hero content** (centered on the blue background):\n  - Big white heading: \"Empower your development with our extensive UI component library\"\n  - White subtext: \"A flexible & powerful Svelte library for building web applications quickly and easily\"\n  - Two buttons side by side: a command-style input/button showing \"npm i yesvelte@next\" with copy icon + a \"Get Started\" button (white bg with blue text or vice versa)\n- **Below the hero** (still above fold): two feature cards visible:\n  - Card 1: \"Rapid application development\" — icon + title + description about CSS framework handling\n  - Card 2: \"Framework independence\" — icon + title + description about HTML/CSS without framework-specific styles\n  - Cards are white, rounded, subtle shadow, sitting on a light gray page bg below the blue wave.\n\n## Layout summary\n- Page bg below hero: light `#f6f8fb`.\n- Blue hero section takes up top ~60% of viewport.\n- White thin header bar overlaid on top of blue (or just above it).\n- The blue area has a curved/wave bottom edge transitioning to light gray.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.y-el.y-el-p-3` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `div.y-el.y-popup` → transition: opacity, scale 0.15s, 0.15s ease, ease 0s, 0s\n- `div.y-el.y-card` → transition: transform, opacity, box-shadow 0.3s, 0.3s, 0.3s ease-out, ease-out, ease-out 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 0.5rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.1;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 1;\n  transform: scale3d(0.8, 0.8, 0.8);\n  } 50%  {\n  opacity: 1;\n  transform: scaleX(1);\n  } 100%  {\n  opacity: 1;\n  transform: scale3d(0.8, 0.8, 0.8);\n  }\n}\n@keyframes tada  {\n  0%  {\n  transform: scaleX(1);\n  } 10%, 5%  {\n  transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);\n  } 15%, 25%, 35%, 45%  {\n  transform: scale3d(1.1, 1.1, 1.1) rotate(5deg);\n  } 20%, 30%, 40%  {\n  transform: scale3d(1.1, 1.1, 1.1) rotate(-5deg);\n  } 50%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes rotate-360  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes blink  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes animated-dots  {\n  0%  {\n  transform: translateX(-100%);\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%, 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@keyframes status-pulsate-main  {\n  40%  {\n  transform: scale(1.25);\n  } 60%  {\n  transform: scale(1.25);\n  }\n}\n@keyframes status-pulsate-secondary  {\n  10%  {\n  transform: scale(1);\n  } 30%  {\n  transform: scale(3);\n  } 80%  {\n  transform: scale(3);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes status-pulsate-tertiary  {\n  25%  {\n  transform: scale(1);\n  } 80%  {\n  opacity: 0;\n  transform: scale(3);\n  } 100%  {\n  opacity: 0;\n  transform: scale(3);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"bright blue hero #2563eb, npm cmd + feature cards; 14 keyframes verbatim"},{"id":"solid-ui","name":"Solid UI","vendor":"Solid UI","fw":["Solid"],"theme":"Radix 风格","link":"https://solid-ui.com","repo":"https://github.com/solidjs-community/solid-ui","license":"MIT","chips":["Dialog","Dropdown","Select","Toast"],"kind":"item","img":"previews/solid-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SolidUI above-the-fold UI (solid-ui.com) — v2\n\n## FIXES from v1 comparison:\nThe reference preview shows a **DARK-THEMED** component showcase page, NOT the white shadcn-mail layout.\nRebuild from scratch matching the dark component gallery look.\n\n## Layout (dark theme)\n- **Page background**: Dark navy/charcoal (~`#0f172a` or `#121212`), light text.\n- **Header bar**: Dark, with brand \"Solid UI\" (bold white) and subtitle/tagline \"Solid · Radix 风格\" (smaller, gray).\n- **Component demo area** (below header):\n  - A row of interactive-looking components:\n    - \"Primary\" button — filled accent blue (`#3b82f6`), rounded 8px, white text\n    - \"Default\" button — outlined (light border), dark text on slightly lighter bg\n    - Text input field: placeholder \"Type here...\", rounded, dark bg, light border\n    - Toggle switch: ON state (blue track, round knob)\n    - \"Badge\" badge pill (blue/dark)\n    - Select dropdown: \"Select\" with down arrow\n  - These sit in a subtle container/card area or directly on the dark background.\n- **Card component**: Below the demo row, a rounded card:\n  - Title: \"Card title\"\n  - Body text: \"This is a preview of the component look.\"\n  - Light card bg, dark text, subtle border/shadow on dark page.\n- **Bottom row**: Pill/category buttons: Dialog, Dropdown, Select, Toast (rounded outline pills).\n\n## Typography / vibe\n- Font: system-ui / sans-serif.\n- Dark developer-tool aesthetic. Clean spacing, rounded corners ~8px.\n- Accent: bright blue `#3b82f6`.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.transition-colors.hover:text-foreground/80` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--kb-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--kb-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy #0f172a gallery, blue #3b82f6; 6 keyframes verbatim"},{"id":"hope-ui","name":"Hope UI","vendor":"Hope UI","fw":["Solid"],"theme":"Chakra 风格","link":"https://hope-ui.com","repo":"https://github.com/hope-ui/hope-ui","license":"MIT","chips":["Button","Card","Input","Modal"],"kind":"item","img":"previews/hope-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Hope UI above-the-fold UI (hope-ui.com)\n\nNOTE: The structured read returned an essentially empty page (client-rendered SPA, no captured\ntext/colors). Recreation below is built from general knowledge of Hope UI's typical landing page.\n\n## Brand / layout\n- Dark, gradient hero background (deep navy/violet gradient).\n- Top nav: brand \"Hope UI\" left (bold, light), nav links right: Docs, Components, Themes, GitHub.\n\n## Hero (above the fold)\n- Centered.\n- Brand/logo mark \"Hope UI\" near top.\n- Big heading: \"Powerful and flexible Svelte component library\" (or similar).\n- Subheading: \"to create beautiful and accessible web applications.\"\n- Two buttons: \"Get Started\" (accent filled) and \"GitHub\" (outline / light).\n- Accent: Hope UI blue/violet (use `#4f46e5`/`#6366f1` gradient).\n\n## Typography / vibe\n- Modern, dark, gradient, glow accents, developer-library landing vibe.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark violet gradient hero; no @keyframes required in spec"},{"id":"solid-headless-ui","name":"Solid Headless","vendor":"solidjs","fw":["Solid"],"theme":"无样式原语","link":"https://github.com/solidjs/solid-headless","repo":"https://github.com/solidjs/solid-headless","license":"MIT","chips":["Disclosure","Dialog","Listbox","Menu"],"kind":"item","img":"previews/solid-headless-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Solid Headless UI above-the-fold UI — v2\n\n## NOTE: The read.json captured a GitHub 404 page (repo URL returned 404). However the reference\npreview shows the actual site content — a **dark-themed component showcase**. Rebuild to match\nthe reference visual.\n\n## Layout (dark theme)\n- **Page background**: Very dark navy (~`#0b1120` or `#0d1117`), light text.\n- **Header bar** (dark): Brand \"**Solid Headless**\" (bold white) + subtitle/tagline \"**Solid · 无样式原语**\" (smaller gray).\n- **Component demo area** (below header):\n  - A row of components:\n    - \"**Primary**\" button — filled bright blue (`#3b82f6`), rounded 8px, white text\n    - \"**Default**\" button — outlined (light border), on slightly lighter dark bg\n    - Text input: placeholder \"Type here...\", rounded, dark bg, light border\n    - Toggle switch: ON state (blue track, round knob)\n    - \"**Badge**\" badge pill (blue/dark)\n    - Select dropdown: \"Select\" with down arrow\n- **Card component**: Below demo row, rounded card:\n  - Title: \"**Card title**\"\n  - Body: \"This is a preview of the component look.\"\n  - Light card bg, subtle border/shadow.\n- **Bottom row**: Category pills: **Disclosure**, **Dialog**, **Listbox**, **Menu** (rounded outline pills).\n\n## Typography / vibe\n- Font: system-ui / ui-sans-serif.\n- Dark developer-tool aesthetic, clean spacing, rounded corners ~8px.\n- Accent blue `#3b82f6`.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `a.Button--link.Button--medium` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.position-relative` → transition: all 0.25s ease-in\n- `a.Primer_Brand__Button-module__Button___scH9Z.Primer_Brand__Button-module__Button--primary___MSbnU` → transition: background-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy #0b1120 gallery, blue #3b82f6; 14 keyframes verbatim"},{"id":"qwik-ui","name":"Qwik UI","vendor":"Qwik","fw":["Qwik"],"theme":"Headless / 可访问","link":"https://qwikui.com","repo":"https://github.com/QwikDev/qwik-ui","license":"MIT","chips":["Accordion","Dialog","Tabs","Tooltip"],"kind":"item","img":"previews/qwik-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Qwik UI above-the-fold UI (qwikui.com) — v2\n\n## FIXES from v1 comparison:\n\n### Header\n- Left: **Qwik logo mark** (a tilted diamond/rhombus shape in blue `#00bfff` or cyan-blue gradient) + \"**Qwik**\" wordmark (bold, blue).\n- Center nav: just \"Headless\" and \"Styled\" (not all those extra links).\n- Right side: \"Make it yours\" button (outlined, 6px radius), search icon, Discord icon, GitHub icon, sun/moon toggle.\n\n### Hero (centered, white bg)\n- Big heading: \"**Qwik** **UI**\" — \"Qwik\" in bright blue (`#00bfff`/`#0ea5e9`), \"UI\" in purple/violet (`#a78bfa` or similar).\n- Tagline line 1: \"Headless & styled copy-paste components\" (dark navy/black)\n- Tagline line 2: \"**automatically optimized for you**\" (in bright blue, emphasized)\n- Subtext below: \"Choose a kit and start building the future ⚡\"\n- No big CTA buttons here (the main CTA is in the header).\n\n### Below hero: Two large showcase cards (side by side)\nEach card ~45% width, rounded (~12px), with:\n- A large top image area (placeholder color block since no external assets):\n  - Left card (\"Headless\"): cool blue-toned abstract/artistic image placeholder\n  - Right card (\"Styled\"): vibrant purple/blue creative image placeholder\n- Card body: Title (\"Headless\" / \"Styled\") bold, plus description paragraph about each kit.\n- Cards sit on light gray/white background.\n\n## Typography / vibe\n- Font: ui-sans-serif, system-ui, sans-serif.\n- Clean, bright, modern. Lots of whitespace. Blue + purple accents.\n- Rounded corners 6–8px on elements, 12px on cards.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external images.\n- Use CSS gradients/solid-color blocks as image placeholders for the two showcase cards.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.transition-color.ease-step` → transition: all 0.3s ease\n- `button.group.items-center` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.rounded-base.border` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--qwikui-collapsible-content-height);\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--qwikui-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes sidebarOpen  {\n  0%  {\n  opacity: 0;\n  transform: translateX(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0%);\n  }\n}\n@keyframes sidebarClose  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0%);\n  } 100%  {\n  opacity: 0;\n  transform: translateX(100%);\n  }\n}\n@keyframes sidebarFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes sidebarFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"white hero, Qwik/UI blue+purple, 2 showcase cards; 9 keyframes verbatim"},{"id":"spectrum-wc","name":"Spectrum Web Components","vendor":"Adobe","fw":["Web Components"],"theme":"企业设计系统","link":"https://opensource.adobe.com/spectrum-web-components","repo":"https://github.com/adobe/spectrum-web-components","license":"Apache","chips":["Button","Card","Dialog","Picker"],"kind":"item","img":"previews/spectrum-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Spectrum Web Components above-the-fold UI\n\nRecreate the above-the-fold UI of Spectrum Web Components as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page. No scroll needed — everything fits within ~820px height.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10` or `#0d0e12`)\n- Top-left corner: macOS-style window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles inline with 8px gap\n- Immediately to the right of dots: **\"Spectrum Web Components\"** — white, bold, ~26px, sans-serif (system font stack)\n- Below title (line 2): **\"Web Components · 企业设计系统\"** — lighter gray `#9ca3af`, ~14px\n\n### Component Demo Section (~top third of viewport, padded ~32px from edges)\nRow of interactive-looking demo elements on the dark background:\n\n1. **Primary button**: solid violet-purple background (`#8b5cf6`), white text \"Primary\", rounded corners ~8px, padding ~12px 24px, no border, bold\n2. **Default button**: transparent/dark bg (`#1a1b23`) with subtle border `#2d2e3a`, white text \"Default\", same size/shape as Primary\n3. **Text input field**: dark bg (`#1a1b23`) with border `#2d2e3a`, rounded ~8px, placeholder \"Type here...\" in muted gray, width ~200px, padding ~10px 16px\n4. **Toggle switch**: iOS-style toggle, track is violet-purple `#8b5cf6` (ON position), circular knob on right side\n5. **Badge**: small pill/badge labeled \"Badge\" with dark bg and subtle accent border\n6. **Select dropdown**: labeled \"Select\" with down-arrow `▾`, dark-teal bg (`#1a3a3a` or similar dark tone)\n\nElements arranged in a flowing flex-wrap layout with ~12px gaps.\n\n### Card Section\n- A card container centered, max-width ~700px, with:\n  - Subtle border `#252630`, slightly lighter than bg, ~1px\n  - Rounded corners ~8px\n  - Padding ~20px\n  - Inside: **\"Card title\"** — white, bold, ~18px, margin-bottom 8px\n  - Below: **\"This is a preview of the component look.\"** — gray `#9ca3af`, ~14px\n\n### Bottom Tag/Pill Bar\n- Row of pill/tag buttons near bottom of viewport:\n  - Each pill: dark bg (`#1a1b23`), subtle border `#2d2e3a`, rounded-full or ~20px radius, white/light-gray text, padding ~8px 18px\n  - Labels: **Button**, **Card**, **Dialog**, **Picker**\n  - ~12px gaps between pills\n\n## Colors\n- Page background: `#0b0c10` (very dark, near black)\n- Surface/card bg: `#12131a`\n- Borders: `#252630` or `#2d2e3a`\n- Primary accent: `#8b5cf6` (violet-purple)\n- Text primary: `#ffffff`\n- Text secondary: `#9ca3af`\n\n## Typography\n- System fonts only: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\n- Title: 26px, weight 700\n- Subtitle: 14px, weight 400\n- Body text: 14-15px\n- Buttons: 14px, weight 600\n\n## Vibe\nDark-mode developer/design system documentation showcase. Clean, modern, minimal. Feels like a component library landing page or design system preview gallery.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `sp-button` → transition: border, color, background-color 0.13s, 0.13s, 0.13s linear, linear, linear 0s, 0s, 0s\n- `sp-link.header-anchor.spectrum-Heading` → transition: all 0.125s ease-in-out\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy/components all correct"},{"id":"ui5-wc","name":"UI5 Web Components","vendor":"SAP","fw":["Web Components"],"theme":"企业设计系统","link":"https://sap.github.io/ui5-webcomponents","repo":"https://github.com/SAP/ui5-webcomponents","license":"Apache","chips":["Button","Card","Table","Calendar"],"kind":"item","img":"previews/ui5-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate UI5 Web Components above-the-fold UI\n\nRecreate the above-the-fold UI of UI5 Web Components as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10`)\n- Top-left: macOS window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles\n- Title: **\"UI5 Web Components\"** — white, bold, ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** — lighter gray `#9ca3af`, ~14px\n\n### Component Demo Section\nRow of demo elements on dark bg:\n1. **Primary button**: violet-purple bg `#8b5cf6`, white text \"Primary\", rounded ~8px\n2. **Default button**: transparent/dark bg `#1a1b23` with border `#2d2e3a`, white text \"Default\"\n3. **Text input**: dark bg, border `#2d2e3a`, rounded ~8px, placeholder \"Type here...\"\n4. **Toggle switch**: violet-purple track `#8b5cf6` ON position\n5. **Badge**: small pill labeled \"Badge\"\n6. **Select ▾**: dark-teal bg dropdown\n\nFlex-wrap layout, ~12px gaps.\n\n### Card Section\n- Container max-width ~700px, border `#252630`, rounded ~8px, padding ~20px\n- **\"Card title\"** — white bold ~18px\n- **\"This is a preview of the component look.\"** — gray `#9ca3af`\n\n### Bottom Tag/Pill Bar\nPills: **Button**, **Card**, **Table**, **Calendar**\n\n## Colors\n- Bg: `#0b0c10`\n- Surface: `#12131a`\n- Borders: `#252630` / `#2d2e3a`\n- Primary: `#8b5cf6`\n- Text primary: `#fff`\n- Text secondary: `#9ca3af`\n\n## Typography\nSystem fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\nTitle: 26px bold; Body: 14px\n\n## Vibe\nDark-mode developer/design system showcase. Clean, minimal.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.skipToContent_G6ar` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `button.DocSearch.DocSearch-Button` → transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `div.navbar-sidebar__backdrop` → transition: opacity, visibility 0.2s ease-in-out\n- `a.button.button--primary` → transition: color, background, border-color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown__menu`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n- `.DocSearch-Button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes b  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes c  {\n  100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy/components all correct, 3 keyframes present"},{"id":"axa-pl","name":"AXA Pattern Library","vendor":"AXA","fw":["Web Components"],"theme":"金融 / 企业","link":"https://github.com/axa-ch/patterns-library","repo":"https://github.com/axa-ch/patterns-library","license":"MIT","chips":["Button","Card","Modal","Stepper"],"kind":"item","img":"previews/axa-pl.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate AXA Pattern Library above-the-fold UI\n\nRecreate the above-the-fold UI of AXA Pattern Library as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10`)\n- Top-left: macOS window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles\n- Title: **\"AXA Pattern Library\"** — white, bold, ~26px\n- Subtitle: **\"Web Components · 金融 / 企业\"** — lighter gray `#9ca3af`\n\n### Component Demo Section\nSame row of elements:\n1. **Primary button**: violet-purple `#8b5cf6`, white text, rounded\n2. **Default button**: dark outlined\n3. **Text input**: placeholder \"Type here...\"\n4. **Toggle switch**: violet-purple ON\n5. **Badge**: pill labeled \"Badge\"\n6. **Select ▾**: dark-teal\n\n### Card Section\nBorder card with \"Card title\" + description text.\n\n### Bottom Tags\n**Button**, **Card**, **Modal**, **Stepper**\n\n## Colors\nBg: `#0b0c10`, Primary: `#8b5cf6`, Borders: `#252630`, Text: `#fff` / `#9ca3af`\nSystem fonts only. Dark-mode dev showcase vibe.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: all 15 keyframes + transitions verbatim"},{"id":"brightspace-ui","name":"Brightspace UI","vendor":"D2L","fw":["Web Components"],"theme":"教育 / 企业","link":"https://github.com/BrightspaceUI/core","repo":"https://github.com/BrightspaceUI/core","license":"Apache","chips":["Button","Card","Dialog","Dropdown"],"kind":"item","img":"previews/brightspace-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Brightspace UI above-the-fold UI\n\nRecreate the above-the-fold UI of Brightspace UI as a single self-contained HTML file at 1280px width.\n\n## Layout\nDark-themed component showcase gallery. Background `#0b0c10`.\n\n### Header\n- macOS dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`)\n- Title: **\"Brightspace UI\"** — white bold ~26px\n- Subtitle: **\"Web Components · 教育 / 企业\"** — gray `#9ca3af`\n\n### Demo Row\nPrimary (purple `#8b5cf6`), Default (outlined), input (\"Type here...\"), toggle (purple ON), Badge, Select ▾\n\n### Card\nBorder `#252630`, \"Card title\", description text\n\n### Tags\n**Button**, **Card**, **Dialog**, **Dropdown**\n\n## Colors/Vibe same as other dark gallery entries.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy correct, 15 keyframes present"},{"id":"clarity-core","name":"Clarity Core","vendor":"VMware","fw":["Web Components"],"theme":"企业设计系统","link":"https://clarity.design","repo":"https://github.com/vmware-clarity/core","license":"Apache","chips":["Button","Card","Modal","Alert"],"kind":"item","img":"previews/clarity-core.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Clarity Core above-the-fold UI\n\nRecreate the above-the-fold UI of Clarity Core as a single self-contained HTML file at 1280px width.\n\n## Layout\nDark-themed component showcase. Bg `#0b0c10`.\n\n### Header\n- macOS dots (red/yellow/green)\n- Title: **\"Clarity Core\"** — white bold ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** — gray\n\n### Demo Row\nPrimary (purple `#8b5cf6`), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n\n### Card\nBorder `#252630`, \"Card title\", description\n\n### Tags\n**Button**, **Card**, **Modal**, **Alert**\n\n## Same dark-gallery style.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `clr-vertical-nav.clr-vertical-nav.clr-nav-level-1` → transition: width 0.2s ease-in-out\n- `cds-icon.nav-group-trigger-icon.ng-tns-c1972165388-0` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown-menu > *`:\n  **focus:** outline-color: Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes clr-progress-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes clr-progress-looper  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes clr-skeleton-loading  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -200%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: 3 clarity keyframes + transitions present"},{"id":"kor","name":"Kor","vendor":"Microfrontend","fw":["Web Components"],"theme":"设计系统","link":"https://kor-ui.com","repo":"https://github.com/micro-lc/kor","license":"MIT","chips":["Button","Card","Dialog","Toast"],"kind":"item","img":"previews/kor.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Kor above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Kor\"** white bold ~26px\n- Subtitle: **\"Web Components · 设计系统\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Dialog**, **Toast**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kor-app-bar` → transition: all 0.1s ease-out\n- `kor-pane` → transition: width 0.1s ease-out\n- `app-content.loaded` → transition: all 0.4s ease-out\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"momentum-ui","name":"Momentum UI","vendor":"Cisco","fw":["Web Components"],"theme":"企业设计系统","link":"https://momentum.design","repo":"https://github.com/momentum-design/momentum-ui","license":"Apache","chips":["Button","Card","Modal","Chart"],"kind":"item","img":"previews/momentum-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Momentum UI above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Momentum UI\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Modal**, **Chart**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.search-input` → transition: border-color, color 0.2s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.sr-only`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline; outline-color: currentcolor\n- `-visible`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline; outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: fade-in keyframe + transition present"},{"id":"pharos","name":"Pharos","vendor":"JSTOR","fw":["Web Components"],"theme":"学术 / 企业","link":"https://pharos.jstor.org","repo":"https://github.com/ithaka/pharos","license":"Apache","chips":["Button","Card","Dialog","Tabs"],"kind":"item","img":"previews/pharos.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Pharos above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Pharos\"** white bold ~26px\n- Subtitle: **\"Web Components · 学术 / 企业\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Dialog**, **Tabs**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** color: rgb(103, 103, 101); opacity: 1\n  **focus:** outline: 2px solid #000; outline-color: #000000\n- `#onetrust-banner-sdk.otFlat`:\n  **focus:** outline: 2px solid #000; outline-color: #000000\n- `#onetrust-banner-sdk .ot-sdk-button`:\n  **hover:** opacity: 0.9; color: rgb(51, 51, 51); border-color: #888; border-top-color: rgb(136, 136, 136); border-right-color: rgb(136, 136, 136); border-bottom-color: rgb(136, 136, 136); border-left-color: rgb(136, 136, 136); background-color: rgb(103, 103, 101); text-decoration: underline\n  **focus:** outline: 1px solid #000000; opacity: 0.9; outline-color: rgb(11, 163, 193); color: rgb(51, 51, 51); border-color: #888; border-top-color: rgb(136, 136, 136); border-right-color: rgb(136, 136, 136); border-bottom-color: rgb(136, 136, 136); border-left-color: rgb(136, 136, 136)\n- `#onetrust-banner-sdk .ot-sdk-column`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-grps-cntr *`:\n  **hover:** color: rgb(103, 103, 101)\n  **active:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n  **focus:** outline: 1px solid #000000; outline-color: #000000\n  **focus-visible:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n- `#onetrust-banner-sdk .ot-hide`:\n  **active:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n  **focus:** outline: 1px solid #000000; outline-color: rgb(16, 16, 16)\n  **focus-visible:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n- `input`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-chkbox input`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-chkbox label`:\n  **focus:** outline: 1px solid #000000\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy correct, 2 keyframes present"},{"id":"redhat-ds","name":"Red Hat Design System","vendor":"Red Hat","fw":["Web Components"],"theme":"企业 / 开源","link":"https://www.redhat.com/designsystem","repo":"https://github.com/redhat-design-system/red-hat-design-system","license":"CC-BY","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/redhat-ds.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Red Hat Design System above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Red Hat Design System\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业 / 开源\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Form**, **Modal**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.container` → transition: max-width 0.5s ease\n- `a.btn.btn-primary` → transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.visually-hidden`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.navbar-brand`:\n  **hover:** outline: 0; color: rgb(255, 255, 255)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204); color: rgb(255, 255, 255)\n- `.card`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.btn`:\n  **hover:** outline: 0; color: rgb(255, 255, 255); border-color: #000; background-color: #000\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204); color: #000; background-color: rgba(0, 0, 0, 0.08); border-color: #000; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px; background: rgba(0,0,0,.08)\n  **focus:** outline: 0; outline-color: rgb(0, 102, 204); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px; color: #000; border-color: #b00; background: rgba(0,0,0,.08); background-color: rgba(0, 0, 0, 0.08)\n- `.btn-link`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste_cursor_pointer`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste-cookie-link`:\n  **hover:** outline: 0; color: rgb(0, 64, 128); text-decoration: underline\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste-buttonsColumn button`:\n  **hover:** background: #004080 !important; background-color: rgb(0, 64, 128) !important; border-top-color: rgb(0, 64, 128) !important; border-right-color: rgb(0, 64, 128) !important; border-bottom-color: rgb(0, 64, 128) !important; border-left-color: rgb(0, 64, 128) !important\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"calcite","name":"Calcite Components","vendor":"Esri","fw":["Web Components"],"theme":"地图 / GIS","link":"https://developers.arcgis.com/calcite-design-system","repo":"https://github.com/Esri/calcite-design-system","license":"Apache","chips":["Button","Card","Map","Panel"],"kind":"item","img":"previews/calcite.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Calcite Design System above-the-fold UI\n\nRecreate the above-the-fold UI of the Calcite Design System (Esri Developer docs page) as a single self-contained HTML file at 1280px width.\n\n## Overall Layout\nLight-themed documentation site with a multi-level header structure, sidebar navigation, and main content area.\n\n### Top Header Bar (white)\n- Background: `#ffffff`\n- Height: ~48px\n- Left side: **Esri logo** — a dark circle with \"esri\" text inside, followed by **\"Developer\"** in purple/violet (`#6b21a8` or similar deep purple), bold\n- Right-side nav links (horizontal): Documentation, Features ▾, SDKs and APIs ▾, Products ▾, Support ▾ — all dark gray text ~14px, no underline\n- Far right: sparkle icon + **\"Ask AI\"** text, then a search icon/magnifying glass + **\"Search docs\"**\n\n### Secondary Navbar (dark purple/blue)\n- Background: very dark navy/indigo (`#1e1e3f` or `#2a1e4a`)\n- Height: ~52px\n- Left: **\"Calcite Design System\"** in white/light, bold ~18px\n- Right: horizontal tab links — **Home**, **Foundations**, **Components**, **Sample Code**, **Resources**, **Icons** — white/light gray text, ~14px. \"Home\" is active/underlined.\n\n### Page Layout (below header)\nTwo-column layout on light background (`#f7f7f7`):\n\n#### Left Sidebar (~220px wide)\nBackground: slightly lighter than main or same `#f7f7f7`\nNavigation items (vertical list, ~14px text, dark):\n- **Overview** (active/bold, possibly with small dot indicator)\n- Get started\n- Core concepts\n- Tutorials\n- Archived documentation\n- **Release notes** (section header, small bold)\n  - 5.1\n  - 5.0\n- Older releases (collapsible)\n\n#### Main Content Area (right of sidebar)\nPadding: ~32px\n- **H1: \"Calcite Design System\"** — large (~36px), bold, dark text\n- Below H1: thin horizontal accent line (purple/violet, ~3px thick, ~60px wide)\n- Version line: **Current version:** @esri/calcite-components: 5.1 (May 2026) — smaller text, link-colored for the package name\n- Description paragraph: \"**Calcite Design System** is a collection of design and development resources for creating beautiful, easy to use, cohesive experiences across apps with minimal effort. It includes a UI kit, icons, color schemes, and a web component library with UI elements such as buttons, panels, accordions, alerts, and many more.\" — normal weight, ~15px, dark gray `#333`\n- **H2: \"Where to start\"** — ~28px, bold\n- Intro sentence below H2\n\n#### Right Sidebar (\"On this page\")\nNarrow column (~180px) at far right of main area:\n- **On this page** heading (small bold)\n- Vertical list: \"Where to start\", \"Design System\" — indented links in lighter color\n\n### Cookie Consent Overlay (bottom-left corner)\nSemi-transparent white box overlaying bottom-left:\n- Text about cookies\n- Buttons: \"Accept All Cookies\" (light blue bg), \"Reject All\" (outline), \"Cookie Settings\"\n\n## Colors\n- Top bar bg: `#fff`\n- Navbar bg: `#2d1b69` (deep indigo/purple)\n- Page bg: `#f7f7f7`\n- Text primary: `#222`\n- Text secondary: `#555`\n- Accent purple: `#6b21a8` / `#7c3aed`\n- Link color: purple-blue\n- Sidebar text: `#444`\n\n## Typography\nSystem fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\nH1: 36px bold; H2: 28px bold; Body: 15px; Nav: 14px\n\n## Vibe\nEnterprise developer documentation. Clean, structured, professional. Feels like ArcGIS/Esri's official dev portal.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `button.ask-ai-toggle` → animation: rotateDeg 2s cubic-bezier(0.4, 0, 0.2, 1) infinite normal\n- `svg` → animation: rotateDeg 2s cubic-bezier(0.4, 0, 0.2, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nav.md:max-h-auto.absolute` → transition: all, outline, outline-offset 0.15s, 0s, 0s ease-in-out, ease, ease 0s, 0s, 0s\n- `button.ask-ai-toggle` → transition: color, background-image, border-image-source, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.h-full` → transition: border, border-width, border-color, border-radius, border-style 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.absolute.top-full` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.flex` → transition: background-position 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.topic-sidebar` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.card.is-link` → transition: outline, outline-offset, outline-color, outline-width 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.m-0.h-full` → transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus-base`:\n  **active:** border-color: oklch(41.68% .1578 287.9); border-top-color: oklch(0.4168 0.1578 287.9); border-right-color: oklch(0.4168 0.1578 287.9); border-bottom-color: oklch(0.4168 0.1578 287.9); border-left-color: oklch(0.4168 0.1578 287.9)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes in-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes in-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes in-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes rotateDeg  {\n  0%  {\n  --gradient-angle: 0deg;\n  } 100%  {\n  --gradient-angle: 360deg;\n  }\n}\n@keyframes loadingIcon  {\n  0%  {\n  background-color: var(--calcite-color-foreground-1);\n  } 50%  {\n  background-color: var(--calcite-color-foreground-2);\n  } 100%  {\n  background-color: var(--calcite-color-foreground-1);\n  }\n}\n@keyframes fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 1em;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: light docs layout, header/navbar/sidebar/content/cookie, 8 keyframes"},{"id":"vaadin-wc","name":"Vaadin Components","vendor":"Vaadin","fw":["Web Components"],"theme":"企业级","link":"https://vaadin.com/components","repo":"https://github.com/vaadin/web-components","license":"Apache","chips":["Button","Grid","Form","DatePicker"],"kind":"item","img":"previews/vaadin-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Vaadin Components above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Vaadin Components\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业级\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Grid**, **Form**, **DatePicker**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.haas-menu-primary-link-platform` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.15s linear\n- `div.haas-profile-menu` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n- `a.haas-profile-menu-link` → transition: all 0.15s ease-out\n- `a.button.large` → transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.haas-button`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid transparent\n- `.haas-wrapper *`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid transparent\n- `.paragraph-lg`:\n  **focus:** outline: 2px solid transparent\n- `.la`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"agnosticui","name":"AgnosticUI","vendor":"AgnosticUI","fw":["Web Components"],"theme":"框架无关","link":"https://agnosticui.com","repo":"https://github.com/AgnosticUI/agnosticui","license":"MIT","chips":["Button","Card","Modal","Tabs"],"kind":"item","img":"previews/agnosticui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate AgnosticUI above-the-fold UI\n\nRecreate the above-the-fold UI of AgnosticUI as a single self-contained HTML file at 1280px width.\n\n## Overall Layout\nClean, modern, light-themed landing page with a soft blue-tinted background and centered hero content.\n\n### Top Navigation Bar\n- Background: transparent or very light tinted (`#f0f4ff` or similar pale blue-white)\n- Height: ~56px\n- Padding: 0 40px\n- Left: **\"AgnosticUI\"** brand name — medium blue (`#2563eb`), ~16px, font-weight 600\n- Right side items (horizontal):\n  - **\"Components\"** link — dark text ~14px\n  - Theme toggle icon (sun/moon toggle switch appearance, subtle rounded pill shape, light gray bg)\n  - GitHub icon (dark circle with cat silhouette)\n\n### Hero Section (centered, takes up most of viewport)\n- Background: Very light blue gradient or tint (`#eef2ff` to `#f5f3ff`), maybe with subtle large blurred circles/shapes in background for depth\n- Content centered horizontally, positioned in upper-middle of viewport:\n\n#### Headline Area\n1. **\"AgnosticUI Local\"** — Large text (~42px), **gradient color** from light blue to deeper blue (like `#60a5fa` to `#2563eb`), font-weight 700\n2. **\"The AI-native UI kit\"** — Even larger text below (~48-52px), **bold black** (`#111827`), font-weight 800\n\n#### Description Paragraph\nBelow headline, centered, max-width ~600px:\n**\"Local source lives in your codebase. Our AG Context Generator arms your favorite LLM with exact component locations, types, and usage. Claude. Codex. Copilot. Gemini. And more.\"**\n- Color: dark gray (`#374151`)\n- Font size: ~17px\n- Line-height: ~1.6\n\n### Lower Section (below hero)\n#### Section Title\n**\"Get Started in Seconds\"**\n- Teal/green color (`#059669` or `#0d9488`)\n- Font size: ~30px\n- Bold, centered\n\n#### Subtitle\n**\"Three commands and your agent of choice knows your entire stack.\"**\n- Dark gray, ~16px, centered\n\n### Terminal Preview (bottom of visible area)\nA terminal/code window component:\n- macOS-style window chrome (dots red/yellow/green) at top-left of terminal frame\n- Title bar: \"terminal\" text\n- Light/grayish background\n- Rounded corners\n- Subtle shadow\n- Width: ~700px, centered\n\n## Colors\n- Page bg: `#eef2ff` (very pale blue-lavender)\n- Primary blue: `#2563eb`\n- Gradient text: `#60a5fa` → `#3b82f6`\n- Teal accent: `#059669`\n- Text dark: `#111827`\n- Text body: `#374151`\n- Terminal bg: `#f8fafc` or light gray\n\n## Typography\nSystem fonts: `Inter, ui-sans-serif, system-ui, -apple-system, sans-serif`\nHeadline gradient: large, bold\nBody: clean, readable\n\n## Vibe\nModern, clean, AI-focused dev tool landing page. Minimal, airy, confident. Soft gradients, generous whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.name.clip` → animation: fadeInUp 1s ease-out 1 normal both\n- `span.text` → animation: fadeInUp 1s ease-out 0.2s 1 normal both\n- `p.tagline` → animation: fadeInUp 1s ease-out 0.4s 1 normal both\n- `div.command-line` → animation: fadeIn-a12b4f63 0.5s ease-out 1 normal\n- `span.cursor` → animation: blink-a12b4f63 1s steps(1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `a.VPLink.link` → transition: color 0.25s ease\n- `button.VPSwitch.VPSwitchAppearance` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPSocialLink.no-icon` → transition: color 0.5s ease\n- `ag-scroll-to-button` → transition: opacity, visibility 0.48s, 0.48s ease-in-out, ease-in-out 0s, 0s\n- `div.cli-terminal` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.VPSwitch[data-v-1d5665e3]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.button[data-v-cf11d7a2]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.VPNavBarHamburger[data-v-e5dd9c1c]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes gradientShift  {\n  0%  {\n  background-position: 0% 50%;\n  filter: hue-rotate(0deg);\n  } 25%  {\n  background-position: 50% 50%;\n  filter: hue-rotate(40deg);\n  } 50%  {\n  background-position: 100% 50%;\n  filter: hue-rotate(0deg);\n  } 75%  {\n  background-position: 50% 50%;\n  filter: hue-rotate(40deg);\n  } 100%  {\n  background-position: 0% 50%;\n  filter: hue-rotate(0deg);\n  }\n}\n@keyframes float  {\n  0%, 100%  {\n  transform: translateY(0px) translate(0px);\n  } 25%  {\n  transform: translateY(-100px) translate(50px);\n  } 50%  {\n  transform: translateY(-50px) translate(-50px);\n  } 75%  {\n  transform: translateY(-80px) translate(30px);\n  }\n}\n@keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(30px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(-10px);\n  }\n}\n@keyframes message-fade-in-acf2f3d3  {\n  0%  {\n  opacity: 0;\n  transform: translateY(12px) scale(0.95);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes message-fade-out-acf2f3d3  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.95);\n  }\n}\n@keyframes custom-shimmer  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes blink-a12b4f63  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn-a12b4f63  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeInSlide-a12b4f63  {\n  0%  {\n  opacity: 0;\n  transform: translate(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: light landing page with gradient text+terminal, 12 keyframes"},{"id":"dile-wc","name":"Dile Components","vendor":"Dile","fw":["Web Components"],"theme":"框架无关","link":"https://dile.github.io","repo":"https://github.com/OpenWebComponents/dile-components","license":"MIT","chips":["Button","Card","Modal","Tabs"],"kind":"item","img":"previews/dile-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the dile-wc (https://dile.github.io) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration: underline\n- `.logo`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match confirmed; no specific animations required (empty spec)"},{"id":"wired-elements","name":"wired-elements","vendor":"wiredjs","fw":["Web Components"],"theme":"手绘风 / 趣味","link":"https://wiredjs.com","repo":"https://github.com/wiredjs/wired-elements","license":"MIT","chips":["Button","Input","Card","Slider"],"kind":"item","img":"previews/wired-elements.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Wired Elements\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Wired Elements**\n- Subtitle on the card: **Web Components · 手绘风 / 趣味**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Wired Elements\" in bold white, and the subtitle \"Web Components · 手绘风 / 趣味\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #a855f7 (purple)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #a855f7 (purple) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Input, Card, Slider.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #a855f7 (purple)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #a855f7 (purple) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match: purple card with correct brand/subtitle/tags; transitions included"},{"id":"unocss","name":"UnoCSS","vendor":"UnoCSS","fw":["CSS"],"theme":"原子化 CSS 引擎","link":"https://unocss.dev","repo":"https://github.com/unocss/unocss","license":"MIT","chips":["Utility","Icon","Attributify"],"kind":"item","img":"previews/unocss.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"UnoCSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **UnoCSS**\n- Subtitle on the card: **CSS · 原子化 CSS 引擎**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"UnoCSS\" in bold white, and the subtitle \"CSS · 原子化 CSS 引擎\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Utility, Icon, Attributify.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `button.button` → transition: color 0.5s ease\n- `span.text` → transition: color 0.25s ease\n- `div.menu` → transition: opacity, visibility, transform 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `a.VPLink.link` → transition: background-color, color 0.25s, 0.25s ease, ease 0s, 0s\n- `button.VPSwitch.RainbowAnimationSwitcher` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPButton.medium` → transition: color, border-color, background-color 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `div.image-bg` → transition: opacity 1s ease\n- `a.VPLink.link` → transition: border-color, background-color 0.25s, 0.25s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.VPNavBarSearchButton[data-v-7f1e1c77]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.button[data-v-ff973924]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match: amber card; VPNav/VPLink transitions from prompt included verbatim"},{"id":"open-props","name":"Open Props","vendor":"Open Props","fw":["CSS"],"theme":"CSS 变量 / 设计令牌","link":"https://open-props.style","repo":"https://github.com/argyleink/open-props","license":"MIT","chips":["Theme","Tokens","Gradients"],"kind":"item","img":"previews/open-props.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Open Props\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Open Props**\n- Subtitle on the card: **CSS · CSS 变量 / 设计令牌**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Open Props\" in bold white, and the subtitle \"CSS · CSS 变量 / 设计令牌\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Theme, Tokens, Gradients.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div` → animation: fade-in, slide-in-up 0.5s, 0.5s cubic-bezier(0, 0, 0, 1) 0.5s 1, 1 normal, normal forwards, forwards\n- `span` → animation: fade-in, slide-in-up 0.5s, 0.5s cubic-bezier(0, 0, 0, 1) 0.6s 1, 1 normal, normal forwards, forwards\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in-bloom  {\n  0%  {\n  opacity: 0;\n  filter: brightness(1) blur(20px);\n  } 10%  {\n  opacity: 1;\n  filter: brightness(2) blur(10px);\n  } 100%  {\n  opacity: 1;\n  filter: brightness(1) blur(0px);\n  }\n}\n@keyframes fade-out  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-out-bloom  {\n  100%  {\n  opacity: 0;\n  filter: brightness(1) blur(20px);\n  } 10%  {\n  opacity: 1;\n  filter: brightness(2) blur(10px);\n  } 0%  {\n  opacity: 1;\n  filter: brightness(1) blur(0px);\n  }\n}\n@keyframes scale-up  {\n  100%  {\n  transform: scale(1.25);\n  }\n}\n@keyframes scale-down  {\n  100%  {\n  transform: scale(0.75);\n  }\n}\n@keyframes slide-out-up  {\n  100%  {\n  transform: translateY(-100%);\n  }\n}\n@keyframes slide-out-down  {\n  100%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes slide-out-right  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes slide-out-left  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slide-in-up  {\n  0%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes slide-in-down  {\n  0%  {\n  transform: translateY(-100%);\n  }\n}\n@keyframes slide-in-right  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slide-in-left  {\n  0%  {\n  transform: translate(100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; full @keyframes set (fade-in/slide-in-up/fade-in-bloom etc.) included verbatim"},{"id":"panda-css","name":"Panda CSS","vendor":"Chakra","fw":["CSS"],"theme":"原子化 / 类型安全","link":"https://panda-css.com","repo":"https://github.com/chakra-ui/panda","license":"MIT","chips":["Utility","Recipe","Tokens"],"kind":"item","img":"previews/panda-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Panda CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Panda CSS**\n- Subtitle on the card: **CSS · 原子化 / 类型安全**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Panda CSS\" in bold white, and the subtitle \"CSS · 原子化 / 类型安全\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Utility, Recipe, Tokens.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.rfm-marquee` → animation: scroll 49.3525s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.d_flex.ai_center` → transition: background, background-color, background-image, background-position 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.d_flex`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `-visible`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_lg`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_xl`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.py_1`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_2xl`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.codeTabs [data-scope=\"tabs\"][data-part=\"trigger\"]`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.codeTabs [data-scope=\"tabs\"][data-part=\"content\"]`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.button`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_panda\\.h2`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_md`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes scroll  {\n  0%  {\n  transform: translateX(0%);\n  } 100%  {\n  transform: translateX(-100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes scroll 49.3525s linear and d_flex transition included"},{"id":"vanilla-extract","name":"Vanilla Extract","vendor":"Vanilla Extract","fw":["CSS"],"theme":"零运行时 / TS","link":"https://vanilla-extract.style","repo":"https://github.com/vanilla-extract-css/vanilla-extract","license":"MIT","chips":["Style","Theme","Recipe"],"kind":"item","img":"previews/vanilla-extract.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Vanilla Extract\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Vanilla Extract**\n- Subtitle on the card: **CSS · 零运行时 / TS**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Vanilla Extract\" in bold white, and the subtitle \"CSS · 零运行时 / TS\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Style, Theme, Recipe.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nb65gs39.nb65gs3d` → transition: transform 0.15s ease\n- `span._1gi0j5k0.nb65gs1x` → transition: transform, opacity 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.nb65gsl`:\n  **hover:** background: rgba(255,255,255,.5); background-color: rgba(255, 255, 255, 0.5)\n  **active:** transform: scale(0.98) translateZ(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes fade-in + nb65gs39 transitions from prompt included"},{"id":"stylex","name":"StyleX","vendor":"Meta","fw":["CSS"],"theme":"原子化 / 规模化","link":"https://stylexjs.dev","repo":"https://github.com/facebook/stylex","license":"MIT","chips":["Style","Create","Attrs"],"kind":"item","img":"previews/stylex.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the stylex (https://stylexjs.dev) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.owner-error` → transition: all 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** border-bottom-color: rgb(0, 112, 243)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; a.owner-error transition 0.2s ease included; inferred spec from preview"},{"id":"lightning-css","name":"Lightning CSS","vendor":"Lightning CSS","fw":["CSS"],"theme":"CSS 编译器 / 工具","link":"https://lightningcss.dev","repo":"https://github.com/parcel-bundler/lightningcss","license":"MIT","chips":["Bundler","Minify","Transform"],"kind":"item","img":"previews/lightning-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Lightning CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Lightning CSS**\n- Subtitle on the card: **CSS · CSS 编译器 / 工具**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Lightning CSS\" in bold white, and the subtitle \"CSS · CSS 编译器 / 工具\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Bundler, Minify, Transform.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: text-decoration-color 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration-color: lch(90 50.34 80.104); text-decoration: underline\n- `.warp p a`:\n  **hover:** text-decoration: underline\n- `.future a`:\n  **hover:** text-decoration: underline\n- `.crush p a`:\n  **hover:** text-decoration: underline\n- `.parser a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; text-decoration-color 0.15s ease transition on 'a' included verbatim"},{"id":"halfmoon","name":"Halfmoon","vendor":"Halfmoon","fw":["CSS"],"theme":"框架 / 暗色","link":"https://www.gethalfmoon.com","repo":"https://github.com/halfmoonui/halfmoon","license":"MIT","chips":["Button","Card","Form","Navbar"],"kind":"item","img":"previews/halfmoon.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Halfmoon\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Halfmoon**\n- Subtitle on the card: **CSS · 框架 / 暗色**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Halfmoon\" in bold white, and the subtitle \"CSS · 框架 / 暗色\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Form, Navbar.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.animate-ping.d-block` → animation: ping-animation 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input.form-check-input` → transition: background-position 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.btn`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.nav-link`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.dropdown-toggle`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.form-control`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 0.625rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes ping-animation  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; full keyframes set (ping-animation/fa-beat/fa-shake/spinner etc.) included verbatim"},{"id":"milligram","name":"Milligram","vendor":"Milligram","fw":["CSS"],"theme":"极简 / 轻量","link":"https://milligram.io","repo":"https://github.com/milligram/milligram","license":"MIT","chips":["Button","Card","Form","Table"],"kind":"item","img":"previews/milligram.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Milligram\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Milligram**\n- Subtitle on the card: **CSS · 极简 / 轻量**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Milligram\" in bold white, and the subtitle \"CSS · 极简 / 轻量\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Form, Table.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `path` → animation: a 7s ease 1 normal forwards\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navigation .navigation-title`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); background-color: rgb(96, 108, 118); border-color: #606c76; outline: 0; border-top-color: rgb(96, 108, 118); border-right-color: rgb(96, 108, 118); border-bottom-color: rgb(96, 108, 118); border-left-color: rgb(96, 108, 118)\n  **focus:** color: rgb(255, 255, 255); background-color: rgb(96, 108, 118); border-color: #606c76; outline: 0; border-top-color: rgb(96, 108, 118); border-right-color: rgb(96, 108, 118); border-bottom-color: rgb(96, 108, 118); border-left-color: rgb(96, 108, 118)\n- `.navigation .navigation-link`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.popover .popover-link`:\n  **hover:** color: rgb(255, 255, 255); background: #9b4dca; border-bottom-color: rgb(155, 77, 202); background-color: rgb(155, 77, 202)\n  **focus:** color: rgb(96, 108, 118)\n- `-visible`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.carbonads .carbon-img`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.carbonads .carbon-poweredby`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  fill-opacity: 0;\n  stroke-dashoffset: 38321;\n  } 25%  {\n  fill-opacity: 0;\n  stroke: rgb(155, 77, 202);\n  } 100%  {\n  fill-opacity: 1;\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes b  {\n  0%, 50%  {\n  transform: rotate(0deg);\n  } 25%, 75%  {\n  transform: rotate(-25deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes a (SVG stroke-dashoffset) and @keyframes b included verbatim"},{"id":"beer-css","name":"Beer CSS","vendor":"Beer","fw":["CSS"],"theme":"Material 风","link":"https://www.beercss.com","repo":"https://github.com/beercss/beercss","license":"MIT","chips":["Button","Card","Dialog","App"],"kind":"item","img":"previews/beer-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Beer CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Beer CSS**\n- Subtitle on the card: **CSS · Material 风**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Beer CSS\" in bold white, and the subtitle \"CSS · Material 风\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Dialog, App.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `i.page.top` → animation: to-page 0.4s ease 1 normal\n- `img.active` → animation: logo-intro 1s ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.extra.circle` → transition: all 0.1s ease\n- `div.overlay` → transition: all, background-color 0.3s, 0s ease, ease 0s, 0s\n- `button.chip.circle` → transition: transform, border-radius, padding 0.3s, 0.3s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `button.circle.transparent` → transition: transform, border-radius, padding 0.3s, 0.2s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `menu.max` → transition: all 0.2s ease 0.2s\n- `li` → transition: border-radius 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes to-page  {\n  0%  {\n  opacity: 0;\n  transform: var(--_transform);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes to-linear-progress  {\n  0%  {\n  margin: 0px 0px 0px -100%;\n  } 50%  {\n  margin: 0px;\n  } 100%  {\n  margin: 0px 0px 0px 100%;\n  }\n}\n@keyframes to-indeterminate-progress  {\n  0%  {\n  padding: 0px 100% 0px 0px;\n  } 50%  {\n  padding: 0px;\n  } 100%  {\n  padding: 0px 0px 0px 100%;\n  }\n}\n@keyframes to-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes to-ripple  {\n  100%  {\n  opacity: 0;\n  transform: scale(4);\n  }\n}\n@keyframes logo-intro  {\n  0%  {\n  opacity: 0;\n  transform: rotate(-90deg) scale(0.5) translateY(25%);\n  } 75%  {\n  opacity: 1;\n  transform: rotate(0deg) scale(1.1) translateY(0px);\n  } 100%  {\n  opacity: 1;\n  transform: rotate(0deg) scale(1) translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; to-page/logo-intro/to-ripple keyframes + Material transitions included"},{"id":"materialize","name":"Materialize","vendor":"Materialize","fw":["CSS"],"theme":"Material 风","link":"https://materializecss.com","repo":"https://github.com/Dogfalo/materialize","license":"MIT","chips":["Button","Card","Modal","Carousel"],"kind":"item","img":"previews/materialize.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Materialize\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Materialize**\n- Subtitle on the card: **CSS · Material 风**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Materialize\" in bold white, and the subtitle \"CSS · Material 风\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Modal, Carousel.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.search-wrapper` → transition: margin 0.25s ease\n- `input` → transition: box-shadow, border, -webkit-box-shadow 0.3s, 0.3s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `a.waves-effect.waves-teal` → transition: all 0.3s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.sidenav li > a`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.dropdown-trigger`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.dropdown-content`:\n  **focus:** outline: 0\n- `.dropdown-content li`:\n  **hover:** background-color: rgb(238, 238, 238)\n- `.dropdown-content li > a`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `#nav-mobile li.search .search-wrapper input#search`:\n  **focus:** box-shadow: rgb(38, 166, 154) 0px 1px 0px 0px; border-bottom-color: rgb(38, 166, 154)\n- `.waves-effect`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes indeterminate  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%  {\n  left: 100%;\n  right: -90%;\n  } 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@-webkit-keyframes indeterminate-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@-webkit-keyframes container-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes fill-unfill-rotate  {\n  12.5%  {\n  transform: rotate(135deg);\n  } 25%  {\n  transform: rotate(270deg);\n  } 37.5%  {\n  transform: rotate(405deg);\n  } 50%  {\n  transform: rotate(540deg);\n  } 62.5%  {\n  transform: rotate(675deg);\n  } 75%  {\n  transform: rotate(810deg);\n  } 87.5%  {\n  transform: rotate(945deg);\n  } 100%  {\n  transform: rotate(1080deg);\n  }\n}\n@-webkit-keyframes blue-fade-in-out  {\n  0%  {\n  opacity: 1;\n  } 25%  {\n  opacity: 1;\n  } 26%  {\n  opacity: 0;\n  } 89%  {\n  opacity: 0;\n  } 90%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes red-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 15%  {\n  opacity: 0;\n  } 25%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 1;\n  } 51%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes yellow-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 40%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 75%  {\n  opacity: 1;\n  } 76%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes green-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 65%  {\n  opacity: 0;\n  } 75%  {\n  opacity: 1;\n  } 90%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes pulse-animation  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 50%  {\n  opacity: 0;\n  transform: scale(1.5);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.5);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @-webkit-keyframes (indeterminate/container-rotate/color-fades) + transitions included"},{"id":"chota","name":"Chota","vendor":"Chota","fw":["CSS"],"theme":"微框架 / 极简","link":"https://jenil.github.io/chota","repo":"https://github.com/jenil/chota","license":"MIT","chips":["Button","Card","Grid","Nav"],"kind":"item","img":"previews/chota.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Chota as a dark gallery card (1280px)\n\nBrand: **Chota**. Tech/theme tagline: `CSS · 微框架 / 极简`. Component chips: `Button · Card · Grid · Nav`.\n\n## Layout\n- A single rounded dark card (almost fills the viewport) on a dark background (#0b0c14). The card has a subtle top border in the accent color.\n- Top-left: three macOS-style traffic-light dots (red #ff5f57, yellow #febc2e, green #28c840) followed by the brand name **Chota** (white, 24px, bold).\n- Below brand: small tagline `CSS · 微框架 / 极简` (gray #9ca3af, 14px).\n- Controls row: a **Primary** button (yellow #fbbf24 bg, dark text, rounded-lg), a **Default** button (dark gray #1f2937 bg, white text, rounded-lg), and a text input with placeholder `Type here...` (dark gray bg, light gray text).\n- Second controls row: a colored toggle switch (knob on the left, yellow #fbbf24 track), a **Badge** pill (teal/cyan #0e7490 bg, white text, rounded), and a **Select** dropdown (dark gray bg, white text, rounded-lg).\n- A **Card** component: dark surface (#13141f), rounded-xl, border (#1f2937), with title \"Card title\" (white, 18px, bold) and body text \"This is a preview of the component look.\" (gray #9ca3af).\n- Bottom chip row: four small rounded chips (`Button`, `Card`, `Grid`, `Nav`) on dark gray (#1f2937) with light gray text (#d1d5db).\n\n## Colors\n- Background: #0b0c14\n- Card surface: #11121c with subtle border #1f2937\n- Primary accent: #fbbf24 (yellow)\n- Badge: #0e7490 (teal)\n- Default/Select/Input: #1f2937\n- Text: white #fff for headings, #9ca3af for body/placeholder\n- Traffic lights: #ff5f57 / #febc2e / #28c840\n\n## Typography\n- System font stack, sans-serif. Brand 24px bold; tagline 14px; buttons 15px; card title 18px; chips 14px.\n\n## Vibe\nDark-mode UI gallery card, clean, modern, minimal, rounded corners, generous spacing. No external images — pure CSS shapes and typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.tabs a`:\n  **hover:** opacity: 1\n- `a:not(.button)`:\n  **hover:** opacity: 0.75\n- `.button`:\n  **hover:** opacity: 0.8\n  **active:** transform: scale(0.98)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"close match after v2; fixed toggle knob and select chevron"},{"id":"pure-css","name":"Pure.css","vendor":"Yahoo","fw":["CSS"],"theme":"极简 / 模块化","link":"https://purecss.io","repo":"https://github.com/pure-css/pure","license":"BSD","chips":["Button","Grid","Form","Menu"],"kind":"item","img":"previews/pure-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Pure.css as a dark gallery card (1280px)\n\nBrand: **Pure.css**. Tech/theme tagline: `CSS · 极简 / 模块化`. Component chips: `Button · Grid · Form · Menu`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent yellow.\n- Top-left: macOS dots (red/yellow/green) + brand **Pure.css** (white, 24px bold).\n- Tagline: `CSS · 极简 / 模块化` (gray, 14px).\n- Controls: **Primary** button (yellow #fbbf24, dark text), **Default** button (dark gray #1f2937), input placeholder `Type here...`.\n- Second row: yellow toggle, **Badge** pill (teal #0e7490), **Select** dropdown.\n- Card panel: dark surface, title \"Card title\", body \"This is a preview of the component look.\".\n- Bottom chips: `Button`, `Grid`, `Form`, `Menu`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary yellow #fbbf24, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: all 0.2s ease-out\n- `a.pure-menu-heading` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.menu__link`:\n  **hover:** background: #333; color: rgb(153, 153, 153); background-color: rgb(51, 51, 51); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n  **active:** border-color: #000; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 0px 6px inset\n  **focus:** background: #333; color: rgb(153, 153, 153); background-color: rgb(51, 51, 51); outline: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n- `.admonitionHeading_Gvgb code`:\n  **hover:** background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n  **active:** border-color: #000; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 0px 6px inset\n  **focus:** outline: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy and components match preview"},{"id":"tachyons","name":"Tachyons","vendor":"Tachyons","fw":["CSS"],"theme":"原子化 / 古典","link":"https://tachyons.io","repo":"https://github.com/tachyons-css/tachyons","license":"MIT","chips":["Utility","Layout","Type"],"kind":"item","img":"previews/tachyons.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Tachyons as a dark gallery card (1280px)\n\nBrand: **Tachyons**. Tech/theme tagline: `CSS · 原子化 / 古典`. Component chips: `Utility · Layout · Type`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent yellow.\n- Top-left: macOS dots + brand **Tachyons** (white, 24px bold).\n- Tagline: `CSS · 原子化 / 古典` (gray, 14px).\n- Controls: **Primary** (yellow #fbbf24), **Default** (dark gray #1f2937), input `Type here...`.\n- Second row: yellow toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Utility`, `Layout`, `Type`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary #fbbf24, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nowrap.dib` → transition: color 0.15s ease-in\n- `a.f6.fw6` → transition: transform, -webkit-transform 0.25s, 0.25s ease-out, ease-out 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dib`:\n  **hover:** color: rgb(53, 126, 221); opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** outline-color: currentcolor; color: rgb(53, 126, 221); opacity: 0.5\n- `.br2`:\n  **hover:** opacity: 0.5; transform: scale(1.05)\n  **active:** opacity: 0.8; transform: scale(0.9)\n  **focus:** outline-color: currentcolor; opacity: 0.5; transform: scale(1.05)\n- `.dn`:\n  **hover:** color: rgb(53, 126, 221)\n  **focus:** outline-color: currentcolor; color: rgb(53, 126, 221)\n- `.ba`:\n  **hover:** transform: scale(1.05)\n  **active:** transform: scale(0.9)\n  **focus:** transform: scale(1.05)\n- `.black`:\n  **hover:** opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** opacity: 0.5\n- `.link`:\n  **hover:** opacity: 0.5; color: rgb(0, 27, 68)\n  **active:** opacity: 0.8\n  **focus:** outline-color: currentcolor; opacity: 0.5; color: rgb(0, 27, 68)\n- `.db`:\n  **hover:** opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy and components match preview"},{"id":"material-design","name":"Material Design","vendor":"Google","fw":["Multi"],"theme":"设计语言 / 规范","link":"https://m3.material.io","repo":"https://m3.material.io","license":"Apache","chips":["Button","Card","Color","Type"],"kind":"item","img":"previews/material-design.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Material Design 3 (m3.material.io) above-the-fold UI (1280px)\n\nBrand: **Material Design**. Tagline: \"Material Design 3 is Google's open-source design system for building beautiful, usable products.\"\n\n## Layout\n- **Left rail** (white/light gray, width ~84px, icons + labels): top search icon, then Home, Get started, Develop, Foundations, Styles, Components, Blog (each with a simple icon and label). Bottom: two theme icons (light/dark). Use the icon names from read.json: material_design, apps, code, book, palette, add_circle, pages.\n- **Top app bar** (white, left of rail): \"Material Design\" logo/wordmark. Right: nav links Develop, Foundations, Styles, Components, Blog, and a **Get started** pill button (purple #6442d6, white, radius 48px).\n- **Hero** (light purple/lavender bg gradient): huge heading \"Material Design\" (~56px, bold, dark). Subcopy: \"Material Design 3 is Google's open-source design system for building beautiful, usable products.\" (~20px). Purple **Get started** pill button.\n- **Showcase gallery** (below hero, purple background): a grid of phone/device mockups showing various Material UI screens (use CSS rectangles with colored/gradient screens and text). The gallery should visually suggest multiple mobile app screenshots in a collage.\n\n## Colors (real)\n- Page bg: #ffffff / light lavender #f3e8ff\n- Text: #1f1f1f\n- Primary purple: #6442d6 (buttons)\n- Hero bg: soft lavender/purple gradient (#f3e8ff to #e9d5ff)\n- Gallery bg: purple/violet tones\n- Rail: #f9f5ff\n\n## Typography\n- \"Google Sans Text\", sans-serif. Hero ~56px/700; nav ~15px; body ~20px.\n\n## Vibe\nGoogle's modern design system site: soft purple, friendly, image-heavy hero gallery. Use CSS shapes for phones, no external images. Single self-contained HTML + inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.google-symbols.notranslate` → transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `mio-toggle-switch.section-menu.active` → transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `div.track.ng-star-inserted` → transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `a` → transition: border-radius 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.mio-button` → transition: all 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `div.state-overlay` → transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.ally-container.ally-container-align` → transition: transform 0.2s linear\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-link[_ngcontent-ocy-c44]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n- `.section-fab[_ngcontent-ocy-c39]`:\n  **hover:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus-visible:** outline: 0\n- `.section-link[_ngcontent-ocy-c39]`:\n  **hover:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus-visible:** outline: 0\n- `-visible`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.ctas[_ngcontent-ocy-c28] a[_ngcontent-ocy-c28]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.split-asset-video[_ngcontent-ocy-c28] .video-container button`:\n  **hover:** filter: brightness(0.95); outline: 0\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.feature-block[_nghost-ocy-c19] a[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `[size=\"small\"][_nghost-ocy-c19] a.thumbnail[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `[_nghost-ocy-c26] .block p`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n- `mio-card-set.stack[_nghost-ocy-c19] a[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `.about[_ngcontent-ocy-c29] a[_ngcontent-ocy-c29]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blur  {\n  0%  {\n  filter: blur(50px);\n  } 100%  {\n  filter: blur(8px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 matches layout, colors, copy and @keyframes blur; gallery simplified vs real"},{"id":"sap-fiori","name":"SAP Fiori","vendor":"SAP","fw":["Multi"],"theme":"企业设计系统","link":"https://experience.sap.com/fiori-design","repo":"https://experience.sap.com/fiori-design","license":"Apache","chips":["Launchpad","Card","List","Object"],"kind":"item","img":"previews/sap-fiori.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the sap-fiori (https://experience.sap.com/fiori-design) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 matches dark gallery card preview; prompt lacked base description"},{"id":"sap-fundamental","name":"SAP Fundamental","vendor":"SAP","fw":["Multi"],"theme":"企业样式","link":"https://sap.github.io/fundamental-styles","repo":"https://github.com/SAP/fundamental-styles","license":"Apache","chips":["Button","Card","Table","Modal"],"kind":"item","img":"previews/sap-fundamental.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SAP Fundamental Styles (sap.github.io/fundamental-styles) above-the-fold UI (1280px)\n\nBrand: **Fundamental Library Styles** — \"Lightweight, framework-agnostic CSS component library.\"\n\n## Layout (Storybook docs site)\n- **Top toolbar** (white, border-bottom): left = Fundamental Library logo + search box \"Find components\"; right = toolbar icons and buttons (Left-to-Right, Cozy, fullscreen, version v0.41.8).\n- **Left sidebar** (white, width ~260px): search box at top, then Docs group with items: Introduction (active, SAP blue highlight), Content Density, MCP Server, Skills; Common CSS group; CX group; SAP Design group. Active item has a blue background and left border.\n- **Main area** (light gray #f7f8fa): h1 \"Fundamental Library Styles\" (dark, ~36px), h2 \"Lightweight, framework-agnostic CSS component library\" (gray, ~18px). A row of colored badges (npm package, version, build passing, downloads, slack, ui-fundamentals, REUSE compliant, Storybook, Hosted on Netlify). Below, a paragraph description and a \"Quick Start\" h2 with a code block showing HTML/CSS imports.\n- Below that: an \"Installation\" h2.\n\n## Colors (real)\n- Page bg: #f7f8fa\n- Text: #32363a (dark), #6a6d70 (muted)\n- SAP blue accent: #0a6ed1 (active sidebar, links)\n- Badge colors: dark gray, green, blue, purple, red, etc. (use typical Storybook/SAP badge palette)\n\n## Typography\n- \"72\",\"72full\", Arial, Helvetica, sans-serif. h1 ~36px; h2 ~18px; body ~15px; code ~13px monospace.\n\n## Vibe\nEnterprise Storybook documentation, clean, light gray, functional, with a code snippet. No external images. Single self-contained HTML + inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.css-164ijz2` → transition: background, box-shadow 0.15s ease-out\n- `input.css-1yx1as5` → transition: all 0.15s ease\n- `div.css-u5496d` → transition: transform 0.1s ease-out\n- `div.css-wgmxay` → transition: opacity 0.2s ease-in-out\n- `div.css-9joh7c` → transition: border-color, box-shadow 0.2s, 0.2s ease, ease 0s, 0s\n- `iframe.css-1yxjmlr` → transition: background-position, visibility 0s, 0s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-efrm2i`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); opacity: 1\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-6bhde1 > *`:\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-164ijz2`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-9i3510`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.sidebar-item`:\n  **hover:** background: rgb(10, 110, 209); background-color: rgb(10, 110, 209)\n  **focus:** background: rgb(10, 110, 209); background-color: rgb(10, 110, 209)\n- `.css-1tgvuaz`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); opacity: 1; background: white; color: rgb(10, 110, 209); background-color: white\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-wgmxay`:\n  **hover:** opacity: 1\n  **focus:** opacity: 1; outline: transparent solid 2px; box-shadow: rgb(10, 110, 209) 0px 0px 0px 4px inset\n  **focus-visible:** opacity: 1; outline: transparent solid 2px; box-shadow: rgb(10, 110, 209) 0px 0px 0px 4px inset\n- `.css-1gdpbrl`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-cnfdwd`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-bnoxje`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-qh61eq`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); transform: translateY(0px)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes animation-r0iffl  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@-webkit-keyframes animation-u07e3c  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局与预览高度一致：toolbar、sidebar（SAP蓝色active项）、主区域标题/badges/代码块/Installation均正确还原。色彩#0a6ed1使用准确。两个@keyframes及全部verbatim transitions已包含，reveal入场动画实现良好。badge排列与预览略有差异但不影响整体通过。"},{"id":"oracle-redwood","name":"Oracle Redwood","vendor":"Oracle","fw":["Multi"],"theme":"企业设计系统","link":"https://www.oracle.com/redwood","repo":"https://www.oracle.com/redwood","license":"商用","chips":["Button","Card","Form","Page"],"kind":"item","img":"previews/oracle-redwood.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the oracle-redwood (https://www.oracle.com/redwood) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：深色主题窗口布局与预览高度一致，macOS风格chrome栏、magenta主色按钮、toggle开关、badge按钮、select下拉、card组件及底部tab导航均正确还原。入场fadeInUp动画已实现，hover过渡效果齐全。"},{"id":"twilio-paste","name":"Twilio Paste","vendor":"Twilio","fw":["React"],"theme":"通信 / 企业","link":"https://paste.twilio.com","repo":"https://github.com/twilio-labs/paste","license":"Apache","chips":["Button","Card","Form","Grid"],"kind":"item","img":"previews/twilio-paste.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Twilio Paste as a dark gallery card (1280px)\n\nBrand: **Twilio Paste**. Tech/theme tagline: `React · 通信 / 企业`. Component chips: `Button · Card · Form · Grid`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **Twilio Paste** (white, 24px bold).\n- Tagline: `React · 通信 / 企业` (gray, 14px).\n- Controls: **Primary** button (light blue #7dd3fc, dark text), **Default** (dark gray #1f2937), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Form`, `Grid`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Swiper。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.experiencefragment.global-header` → transition: transform, -webkit-transform 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n- `div.select-arrow` → transition: transform, -webkit-transform 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `nav.navigation-v2__nav` → transition: opacity 0.3s ease-in-out\n- `a.button.button-secondary` → transition: background-color, color, border-color, box-shadow, color, border-color 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s, 0s\n- `wistia-player.cmp-media-video__thumbnail.cmp-media-video__thumbnail--wistia-video` → transition: opacity, visibility 0.2s, 0.2s ease, ease 0s, 0s\n- `path` → transition: color 0.3s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.paragraph-small-medium`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.utility-nav__link`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.paragraph-large-semibold`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.cmp-linklist__dropdown-button__title`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.paragraph-small-semibold`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes blink  {\n  0%, 100%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes code-snippet-cursor-blink  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes cube-float-1  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg);\n  } 50%  {\n  transform: translate(0.3rem, -0.5rem) rotate(5deg);\n  }\n}\n@-webkit-keyframes cube-float-2  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg);\n  } 50%  {\n  transform: translate(-0.3rem, 0.5rem) rotate(-5deg);\n  }\n}\n@-webkit-keyframes cube-float-3  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg) scale(1);\n  } 50%  {\n  transform: translate(0.2rem, 0.3rem) rotate(3deg) scale(1.05);\n  }\n}\n@-webkit-keyframes chat-message-in  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.8rem);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes modal-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes slide-up  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(0px, 2rem, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@-webkit-keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes react-vanilla-styles-8d753j0  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes react-vanilla-styles-1pcw8yy0  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes react-vanilla-styles-1pcw8yy1  {\n  0%, 60%, 100%  {\n  transform: translateY(0px);\n  } 30%  {\n  transform: translateY(-10px);\n  }\n}\n@-webkit-keyframes loading-dual-ring  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，顶部light-blue边框、macOS chrome栏、浅蓝色Primary按钮/开关、teal badge圆点及底部chip导航（Button/Card/Form/Grid）均正确还原。slide-up入场动画已实现，过渡效果齐全。"},{"id":"hubspot-canvas","name":"HubSpot Canvas","vendor":"HubSpot","fw":["React"],"theme":"营销 / 企业","link":"https://canvas.hubspot.com","repo":"https://github.com/HubSpot/canvas","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/hubspot-canvas.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for HubSpot Canvas as a dark gallery card (1280px)\n\nBrand: **HubSpot Canvas**. Tech/theme tagline: `React · 营销 / 企业`. Component chips: `Button · Card · Form · Modal`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **HubSpot Canvas** (white, 24px bold).\n- Tagline: `React · 营销 / 企业` (gray, 14px).\n- Controls: **Primary** (light blue #7dd3fc), **Default** (dark gray), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Form`, `Modal`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `button`:\n  **hover:** background-color: rgba(255, 255, 255, 0.9) !important; text-decoration: underline !important\n- `-visible`:\n  **hover:** text-decoration: underline !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes banner_animation  {\n  0%  {\n  transform: translateY(200vh) translateZ(3e+09px);\n  opacity: 0;\n  } 99%  {\n  opacity: 0;\n  } 100%  {\n  transform: translateY(var(--hs-banner-translate-y,0)) translateZ(3000000000px);\n  opacity: 1;\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-left  {\n  0%  {\n  transform: translate(0px, 100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-left  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, 100%);\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-right  {\n  0%  {\n  transform: translate(0px, 100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-right  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, 100%);\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-top  {\n  0%  {\n  transform: translate(0px, -100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-top  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, -100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，顶部light-blue边框、HubSpot Canvas品牌、营销/企业标签、Primary按钮/开关/badge/select/card组件及底部chip导航（Button/Card/Form/Modal）均正确还原。slide-up入场动画及HubSpot特有feedback-slide-in/banner_animation关键帧已包含。"},{"id":"audi-ui","name":"Audi UI","vendor":"Audi","fw":["Multi"],"theme":"汽车 / 品牌","link":"https://www.audi.com/ci","repo":"https://www.audi.com/ci","license":"商用","chips":["Button","Card","Grid","Type"],"kind":"item","img":"previews/audi-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Audi UI as a dark gallery card (1280px)\n\nBrand: **Audi UI**. Tech/theme tagline: `Multi · 汽车 / 品牌`. Component chips: `Button · Card · Grid · Type`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent pink.\n- Top-left: macOS dots + brand **Audi UI** (white, 24px bold).\n- Tagline: `Multi · 汽车 / 品牌` (gray, 14px).\n- Controls: **Primary** (pink #f472b6, dark text), **Default** (dark gray), input `Type here...`.\n- Second row: pink toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Grid`, `Type`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary pink #f472b6, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.h-4.w-4` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.z-5` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.bottom-0` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.po-brandportal__row-container.cm-blockmanager__section` → transition: all 0.2s linear\n- `div.pb-text-image__text-inner.js-pb-text-image__editor` → transition: background 0.2s linear\n- `button.co-viewer__close.js-co-viewer__close` → transition: background-color, color 0.2s, 0.2s linear, linear 0s, 0s\n- `div.cm-modal__overlay.js-cm-modal__overlay` → transition: all 0.3s ease\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，粉色顶部边框与Primary按钮/开关（#f472b6）、Audi UI品牌、汽车/品牌标签、teal badge及底部chip导航（Button/Card/Grid/Type）均正确还原。Audi特有cubic-bezier过渡时序已包含，slide-up入场动画实现良好。"},{"id":"backpack","name":"Backpack","vendor":"Skyscanner","fw":["React"],"theme":"旅行 / 企业","link":"https://backpack.github.io","repo":"https://github.com/Skyscanner/backpack","license":"Apache","chips":["Button","Card","Breadcrumb","Dialog"],"kind":"item","img":"previews/backpack.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Backpack as a dark gallery card (1280px)\n\nBrand: **Backpack**. Tech/theme tagline: `React · 旅行 / 企业`. Component chips: `Button · Card · Breadcrumb · Dialog`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **Backpack** (white, 24px bold).\n- Tagline: `React · 旅行 / 企业` (gray, 14px).\n- Controls: **Primary** (light blue #7dd3fc), **Default** (dark gray), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Breadcrumb`, `Dialog`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.site-logo` → transition: all 0.2s ease-in-out\n- `a.copy-anchor` → transition: opacity, transform 0.2s, 0.2s ease-in-out, ease-in-out 0s, 0s\n- `a` → transition: all, color 0.05s, 0.2s ease-in-out, ease-in-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@-webkit-keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@-webkit-keyframes slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes lds-ellipsis1  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes lds-ellipsis3  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes lds-ellipsis2  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(24px, 0px);\n  }\n}\n@keyframes lds-dual-ring  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1, 1);\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1, 1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  }\n}\n@keyframes rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes prixClipFix  {\n  0%  {\n  clip-path: polygon(50% 50%, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px);\n  } 25%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 0px, 100% 0px, 100% 0px);\n  } 50%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 100% 100%, 100% 100%);\n  } 75%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 0px);\n  }\n}\n@-webkit-keyframes blink  {\n  50%  {\n  background-color: transparent;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，light-blue顶部边框与Primary按钮/开关、Backpack品牌、旅行/企业标签、teal badge及底部chip导航（Button/Card/Breadcrumb/Dialog）均正确还原。fade-in(scale入场)动画及Backpack特有spinner-border/slide-down/prixClipFix等关键帧已包含。"},{"id":"devui-design","name":"DevUI Design","vendor":"华为 Huawei","fw":["Vue"],"theme":"企业级 / 华为","link":"https://devui.design","repo":"https://github.com/DevCloudFE/devui","license":"MIT","chips":["Button","Card","Table","Tree"],"kind":"item","img":"previews/devui-design.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for DevUI Design as a dark gallery card (1280px)\n\nBrand: **DevUI Design**. Tech/theme tagline: `Vue · 企业级 / 华为`. Component chips: `Button · Card · Table · Tree`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent green.\n- Top-left: macOS dots + brand **DevUI Design** (white, 24px bold).\n- Tagline: `Vue · 企业级 / 华为` (gray, 14px).\n- Controls: **Primary** (green #4ade80, dark text), **Default** (dark gray), input `Type here...`.\n- Second row: green toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Table`, `Tree`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary green #4ade80, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.header-logo-container` → transition: color 0.3s ease\n- `div.logo` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes devuiDiffusion  {\n  0%  {\n  box-shadow: rgba(37, 43, 58, 0.3) 0px 0px;\n  } 100%  {\n  box-shadow: rgba(37, 43, 58, 0) 0px 0px 0px 4px;\n  }\n}\n@keyframes card-scale  {\n  0%  {\n  clip-path: circle(0px at 50% 50%);\n  } 100%  {\n  clip-path: circle(200px at 50% 50%);\n  }\n}\n@keyframes logo-scale  {\n  0%  {\n  clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);\n  } 50%  {\n  clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);\n  } 100%  {\n  clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);\n  }\n}\n@keyframes arrow-move  {\n  0%  {\n  transform: translate(-150%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，绿色顶部边框与Primary按钮/开关（#4ade80）、DevUI Design品牌、Vue/企业级/华为标签、teal badge及底部chip导航（Button/Card/Table/Tree）均正确还原。DevUI特有devuiDiffusion/card-scale/logo-scale关键帧已包含，fade-up入场动画实现良好。"},{"id":"mand-mobile","name":"Mand Mobile","vendor":"滴滴 Didi","fw":["Vue"],"theme":"移动端 / 滴滴","link":"https://didi.github.io/mand-mobile","repo":"https://github.com/didi/mand-mobile","license":"Apache","chips":["Button","Tab","Toast","Popup"],"kind":"item","img":"previews/mand-mobile.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Mand Mobile homepage (https://didi.github.io/mand-mobile). It is a dark-themed Vue.js 2 mobile UI toolkit landing page; the hero is a component demo panel, not a marketing headline.\n\n[v1 content preserved, but override with these fixes:]\n\nBRAND / VIBE:\n- Brand: \"Mand Mobile\" — DiDi mobile UI toolkit for financial scenarios.\n- Dark background: #0d0f14 (near black), white text.\n- Clean, modern component-demo aesthetic.\n\nTOP-LEFT \"WINDOW\" TITLE BAR (above the demo panel):\n- Red, yellow, green traffic-light dots (#ff5f57, #ffbd2e, #28c840) in a row, then white text \"Mand Mobile\".\n- Below the title: small gray text \"Vue · 移动端 / 滴滴\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, centered, padding 30px):\n- Row 1: green pill button \"Primary\" (bg #3ccf4a, text black/dark), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded).\n- Row 2: green ON toggle switch, small blue pill badge \"Badge\" (bg #2563eb), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Tab\", \"Toast\", \"Popup\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.pace-activity` → animation: pace-spinner 0.4s linear infinite normal\n- `div.pic.backboard` → animation: fadeIn-data-v-03e4d946 0.7s ease-in-out 1 normal forwards\n- `div.pic.list` → animation: list-data-v-03e4d946 0.7s ease-in-out 1 normal forwards\n- `div.pic.mr-king` → animation: mrKing-data-v-03e4d946, fadeIn-data-v-03e4d946 1s, 1s ease-in-out, ease-in-out 0s, 0s 1, 1 normal, normal forwards, forwards\n- `div.pic.icon` → animation: icon-move0-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `img` → animation: flutter-up-data-v-03e4d946 3s ease-in-out 0.8s infinite alternate\n- `div.pic.icon` → animation: icon-move1-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `img` → animation: flutter-down-data-v-03e4d946 3s ease-in-out 0.8s infinite alternate\n- `div.pic.icon` → animation: icon-move2-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move3-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move4-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move5-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.default-header-container` → transition: width, height, all 0s, 0.5s, 0.5s ease, ease, ease 0s, 0s, 0s\n- `img.logo-img` → transition: all 0.3s ease\n- `div.default-header-github.default-header-operater` → transition: opacity 0.3s ease\n- `div.pic.list` → transition: transform 1s ease\n- `div.hover-wrap` → transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)\n- `div.characteristic-card.home-characteristic-card` → transition: background-color 0.3s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes icon-move0-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-2em);\n  }\n}\n@-webkit-keyframes icon-move1-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-1.61803em, -1.17557em);\n  }\n}\n@-webkit-keyframes icon-move2-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-0.618034em, -1.90211em);\n  }\n}\n@-webkit-keyframes icon-move3-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0.618034em, -1.90211em);\n  }\n}\n@-webkit-keyframes icon-move4-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(1.61803em, -1.17557em);\n  }\n}\n@-webkit-keyframes icon-move5-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(2em);\n  }\n}\n@-webkit-keyframes flutter-down-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(0.1em);\n  }\n}\n@-webkit-keyframes flutter-up-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-0.1em);\n  }\n}\n@-webkit-keyframes list-data-v-03e4d946  {\n  0%  {\n  opacity: 0.4;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(-0.06em);\n  }\n}\n@-webkit-keyframes mrKing-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0.1em);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@-webkit-keyframes fadeIn-data-v-03e4d946  {\n  0%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark window panel matches preview exactly; all 12 verbatim @keyframes present"},{"id":"ke-design","name":"Ke.Design","vendor":"贝壳 Beike","fw":["React"],"theme":"房产 / 企业","link":"https://ke.design","repo":"https://github.com/ke-cloud/ke-design","license":"MIT","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/ke-design.png","prompt":""},{"id":"vercel-geist","name":"Vercel Geist","vendor":"Vercel","fw":["Multi"],"theme":"极简 / 开发者","link":"https://vercel.com/geist","repo":"https://github.com/vercel/geist","license":"MIT","chips":["Button","Card","Font","Color"],"kind":"item","img":"previews/vercel-geist.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Vercel Geist preview. It is a dark-themed component-demo landing page (not the live docs page).\n\nBRAND / VIBE:\n- Brand: \"Vercel Geist\" — developer tool design system.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic.\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"Vercel Geist\".\n- Below the title: small gray text \"Multi · 极简 / 开发者\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, centered, padding 30px):\n- Row 1: pink pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: pink ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #0d9488), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Font\", \"Color\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n- Place the demo panel in the upper-left area, leaving plenty of dark background on the right/bottom (like a desktop window preview).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `kbd.font-sans!.[&>span]:font-inherit` → animation: search-module__HXqoSW__fadeIn 0.2s ease 0.5s 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.group-hover:text-gray-1000.transition-colors` → transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.hover:opacity-80.outline-none` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.outline-none.m-0` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.transition-all` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.flex.flex-1` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.-translate-y-1\\/2`:\n  **hover:** opacity: 0.8\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes playground-module__0igO8W__rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-360deg);\n  }\n}\n@keyframes glyph-module__bcZODG__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes stroke-detail-module__IOyybW__float  {\n  0%  {\n  transform: translate(0px);\n  } 50%  {\n  transform: translate(var(--x), var(--y));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes hero-module__G2XgCG__fadeIn  {\n  0%  {\n  opacity: 0;\n  transform: scaleY(0);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes hero-module__G2XgCG__fadeInDelayed  {\n  0%  {\n  visibility: visible;\n  opacity: 0;\n  transform: scaleY(0);\n  } 100%  {\n  visibility: visible;\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes with-redirect-module__disV0a__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes videos-module__X7uD1W__scroll  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes search-module__HXqoSW__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes soft-fade-in  {\n  0%  {\n  opacity: 0.3;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes show  {\n  0%  {\n  transform: translate3d(0, var(--translate-y-start), 0);\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0, var(--translate-y-end), 0);\n  opacity: 1;\n  }\n}\n@keyframes hide  {\n  0%  {\n  transform: translate3d(0, var(--translate-y-end), 0);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0, var(--translate-y-start), 0);\n  opacity: 0;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes spinner-opacity  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.15;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary dark window matches preview; upper-left placement correct; 15 keyframes present"},{"id":"workday-canvas","name":"Workday Canvas","vendor":"Workday","fw":["React"],"theme":"企业 HR","link":"https://designsystem.workday.com","repo":"https://github.com/Workday/canvas-kit","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/workday-canvas.png","prompt":""},{"id":"zendesk-garden","name":"Zendesk Garden","vendor":"Zendesk","fw":["React"],"theme":"企业 / 客服","link":"https://garden.zendesk.com","repo":"https://github.com/zendeskgarden/react-components","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/zendesk-garden.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Zendesk Garden preview.\n\nBRAND / VIBE:\n- Brand: \"Zendesk Garden\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"Zendesk Garden\".\n- Below the title: small gray text \"React · 企业 / 客服\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #67e8f9, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #67e8f9, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Modal\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.StyledNavigationLink__StyledGatsbyLink-sc-1a9tae1-0.jVjhwX` → transition: background-color, color 0.25s, 0.25s ease-in-out, ease-in-out 0s, 0s\n- `div.StyledTextInput-sc-1r6733h-0.StyledTextFauxInput-sc-yqw7j9-0` → transition: border-color, box-shadow, background-color, color, z-index 0.25s, 0.1s, 0.25s, 0.25s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s\n- `svg` → transition: transform, color 0.25s, 0.25s ease-in-out, ease-in-out 0s, 0s\n- `button.StyledButton-sc-qe3ace-0.StyledIconButton-sc-1t0ughp-0` → transition: border-color, box-shadow, background-color, color, outline-color, z-index 0.25s, 0.1s, 0.25s, 0.25s, 0.1s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s, 0s\n- `div.StyledFloatingListbox-sc-1cp6spf-0.StyledFloatingMenu-sc-1rc7ahb-0` → transition: opacity, visibility 0.2s, 0.2s ease-in-out, linear 0s, 0s\n- `img` → transition: opacity 0.25s linear\n- `h1.StyledFont-sc-1iildbo-0.daCbxZ` → transition: color 0.1s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `div`:\n  **focus:** outline: none!important\n- `.fHLPCH`:\n  **hover:** background-color: rgba(31, 115, 183, 0.08); color: rgb(57, 67, 75)\n  **active:** background-color: rgba(31, 115, 183, 0.16); color: rgb(41, 50, 57)\n  **focus:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.jVjhwX`:\n  **hover:** color: rgb(19, 69, 109); background-color: rgba(31, 115, 183, 0.08); text-decoration: underline\n  **active:** color: rgb(15, 54, 85); background-color: rgba(31, 115, 183, 0.24)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.hSxPeo`:\n  **hover:** border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n  **focus:** outline: transparent solid 2px; border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n  **focus-visible:** outline: transparent solid 2px; border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n- `.kAnOZO`:\n  **hover:** background-color: rgba(31, 115, 183, 0.08); color: rgb(57, 67, 75)\n  **active:** background-color: rgba(31, 115, 183, 0.16); color: rgb(41, 50, 57)\n  **focus:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.fEvSYX`:\n  **focus:** outline: none!important\n- `.leRdEp`:\n  **hover:** text-decoration: underline; color: rgb(19, 69, 109)\n  **active:** text-decoration: underline; color: rgb(15, 54, 85)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: rgb(31, 115, 183)\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: rgb(31, 115, 183)\n- `.dffvio`:\n  **hover:** color: rgb(19, 69, 109); text-decoration: underline\n  **active:** color: rgb(15, 54, 85)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes gSzxJj  {\n  0%  {\n  transform: translateY(-20px);\n  pointer-events: none;\n  } 100%  {\n  pointer-events: auto;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"cyan primary window panel matches preview; gSzxJj keyframe present"},{"id":"bbc-gel","name":"BBC GEL","vendor":"BBC","fw":["Multi"],"theme":"媒体 / 公共","link":"https://www.bbc.co.uk/gel","repo":"https://www.bbc.co.uk/gel","license":"CC-BY","chips":["Button","Card","Grid","Type"],"kind":"item","img":"previews/bbc-gel.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the BBC GEL preview.\n\nBRAND / VIBE:\n- Brand: \"BBC GEL\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"BBC GEL\".\n- Below the title: small gray text \"Multi · 媒体 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Grid\", \"Type\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.gel-billboard__link` → transition: all 0.1s ease\n- `a.gel-promo__meta-item-label.gel-promo__meta-item-link` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.b-r a`:\n  **hover:** border-bottom-color: rgb(0, 109, 239)\n  **active:** border-bottom-color: rgb(0, 109, 239)\n  **focus:** outline: 0; border-bottom-color: rgb(0, 109, 239)\n- `.orbit-header-account a#idcta-link`:\n  **hover:** background: #e6e8ea; background-color: rgb(230, 232, 234)\n  **focus:** background: #e6e8ea; background-color: rgb(230, 232, 234)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary window panel matches preview; prompt has only transitions (no keyframes block)"},{"id":"uswds","name":"U.S. Web Design System","vendor":"U.S. GSA","fw":["Web Components"],"theme":"政府 / 公共","link":"https://designsystem.digital.gov","repo":"https://github.com/uswds/uswds","license":"CC0","chips":["Button","Card","Form","Banner"],"kind":"item","img":"previews/uswds.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the U.S. Web Design System preview.\n\nBRAND / VIBE:\n- Brand: \"U.S. Web Design System\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"U.S. Web Design System\".\n- Below the title: small gray text \"Web Components · 政府 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #a78bfa, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #a78bfa, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Banner\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.usa-overlay` → transition: opacity 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.usa-site-alert--info .usa-alert .usa-alert__body .usa-link`:\n  **hover:** color: rgb(26, 68, 128)\n  **active:** color: rgb(22, 46, 81)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); background: #fff; background-color: rgb(255, 255, 255)\n- `.usa-accordion__button`:\n  **hover:** text-decoration: underline; color: rgb(0, 94, 162); background-color: rgb(240, 240, 240); background-image: url(\"../img/usa-icons/add.svg\"), linear-gradient(transparent, transparent)\n  **active:** color: rgb(22, 46, 81); text-decoration: underline\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n- `.usa-link`:\n  **hover:** color: rgb(255, 255, 255); text-decoration: underline\n  **active:** color: rgb(22, 46, 81)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255)\n- `.usa-menu-btn`:\n  **hover:** text-decoration: underline; background-color: rgb(26, 68, 128); color: rgb(255, 255, 255)\n  **active:** text-decoration: underline; color: rgb(255, 255, 255)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n- `.usa-nav__close`:\n  **hover:** text-decoration: underline; color: currentcolor\n  **active:** color: rgb(22, 46, 81); text-decoration: underline\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes slidein-left  {\n  0%  {\n  transform: translateX(15rem);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple primary window panel matches preview; slidein-left keyframe present"},{"id":"govuk","name":"GOV.UK Design System","vendor":"UK Gov","fw":["Multi"],"theme":"政府 / 公共","link":"https://design-system.service.gov.uk","repo":"https://github.com/alphagov/govuk-frontend","license":"MIT","chips":["Button","Card","Form","Footer"],"kind":"item","img":"previews/govuk.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the GOV.UK Design System preview.\n\nBRAND / VIBE:\n- Brand: \"GOV.UK Design System\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"GOV.UK Design System\".\n- Below the title: small gray text \"Multi · 政府 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Footer\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.govuk-button`:\n  **hover:** color: rgb(255, 255, 255); background-color: rgb(11, 92, 62)\n  **active:** color: rgb(255, 255, 255)\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n- `.app-prose-scope a`:\n  **hover:** color: rgb(255, 255, 255)\n  **active:** color: rgb(255, 255, 255)\n  **focus:** outline: 3px solid rgba(0,0,0,0); color: rgb(11, 12, 12)\n- `.govuk-skip-link`:\n  **focus:** outline: 3px solid\n- `.govuk-header__homepage-link`:\n  **hover:** border-bottom-color: currentcolor\n  **active:** border-bottom-color: currentcolor\n  **focus:** outline: 3px solid rgba(0,0,0,0); border-bottom-color: currentcolor\n- `.govuk-service-navigation__toggle`:\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n- `.govuk-service-navigation__link`:\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary window panel matches preview; no keyframes in prompt (empty spec)"},{"id":"nord","name":"Nord Design System","vendor":"Nordhealth","fw":["React"],"theme":"医疗 / 企业","link":"https://nordhealth.design","repo":"https://github.com/nordhealth-design/nord","license":"MIT","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/nord.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Nord Design System homepage. v2 fixes: headline line breaks should match the reference exactly (four lines: \"The design / system behind / Nordhealth's / products\"), and sidebar icons should be simple thin-line SVG icons (not emojis) to match the clinical UI style.\n\nBRAND / VIBE:\n- Clean, clinical, healthcare design system.\n- White/light gray background, navy blue text (#0c1a3d), blue accent (#3559c7).\n- System sans-serif font, crisp spacing.\n\nTOP ANNOUNCEMENT BANNER (full width, very light gray bg #f6f8fb, text #0c1a3d, small padding 10px 24px, border-bottom #e2e8f0):\n- Text: \"Components v3.8.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.\"\n- Blue underlined link \"See what's new\".\n- Close \"×\" on the far right.\n\nLEFT SIDEBAR (width 250px, white bg, border-right #e2e8f0, padding 60px 0 20px 20px):\n- Top: blue/gray square icon + \"Nord Design System\".\n- Search bar with magnifying glass icon and ⌘K.\n- Navigation items with simple thin-line icons (magnifying glass, wrench, paintbrush, gear, puzzle, tokens, wind, grid, document, star, play, etc.) and right chevrons for collapsible sections.\n\nMAIN HERO (padding 90px 60px):\n- Left column headline (four lines, very large bold ~54px, line-height 1.1):\n  \"The design\n   system behind\n   <blue>Nordhealth's</blue>\n   products\"\n- Subtitle, Get started / Browse components buttons, \"Works with any framework\" note.\n- Right column: white card \"New appointment\" with Patient name \"Eric Duna\", Appointment type \"Vaccination\", blue ON toggle, Cancel / Save appointment buttons.\n\nBELOW HERO:\n- Blue uppercase label \"EXPLORE CORE\" and heading \"Find any component in a keystroke\".\n\nSingle self-contained HTML, inline CSS, system fonts, no external assets.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nord-tooltip` → transition: opacity, visibility 0.2s, 0.2s ease 0s, 0s\n- `nord-item.n:bg-surface` → transition: opacity, transform 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hp-marquee-left-84c762a8  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-50%);\n  }\n}\n@keyframes hp-marquee-right-84c762a8  {\n  0%  {\n  transform: translate(-50%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"full sidebar+hero+card layout matches preview closely; marquee keyframes present"},{"id":"proj-2021-two-good-co","name":"Two Good Co","agency":"Two Good Co","year":2021,"award":"Awwwards SOTD","theme":"作品集 / 电商","tech":["Next.js","GSAP","平滑动画"],"link":"https://www.twogoodco.com","img":"previews/proj-2021-two-good-co.png","kind":"proj","fw":[],"vendor":"Two Good Co","prompt":""},{"id":"proj-2023-atmos","name":"Atmos","agency":"Wawa","year":2023,"award":"Awwwards","theme":"3D / WebGL","tech":["React Three Fiber","GLSL","GSAP"],"link":"https://atmos.studio","img":"previews/proj-2023-atmos.png","kind":"proj","fw":[],"vendor":"Wawa","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the atmos.studio landing page as captured by the read (a parked/for-sale domain page).\n\nBRAND / VIBE:\n- Plain white background (#ffffff), simple sans-serif text, minimal registrar-style landing page.\n- Centered content, calm and neutral.\n\nHERO (centered in viewport):\n- Large heading: \"atmos.studio\" (black/near-black #111111, ~48px, bold).\n- Subheading in Chinese: \"此域名已注册，但仍可购买。\" (gray #555555, ~18px, below the heading with 16px gap).\n- Primary button: \"获得此域名\" (Get this domain) — black background (#111111), white text, rounded corners 6px, padding ~12px 24px, centered below the subheading.\n\nTOP (optional tiny skip-link or nav can be omitted; keep page minimal).\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif stack (Helvetica Neue, Arial, sans-serif).\n- All content vertically and horizontally centered in the viewport.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.ux-text.ux-button` → transition: all 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ux-button:where([data-version=\"2400\"])`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.ms-3`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes reveal  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes pulse-animation  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes circle-animation  {\n  0%  {\n  stroke-dashoffset: 192;\n  transform: rotate(0deg);\n  } 50%  {\n  stroke-dashoffset: 96;\n  transform: rotate(180deg);\n  } 100%  {\n  stroke-dashoffset: 192;\n  transform: rotate(1turn);\n  }\n}\n@keyframes BuyNowActionBox_reveal__SW4z_  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes BuyNowActionBox_pulse-animation__M8reV  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes AfternicLogo_reveal__G2Igw  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes AfternicLogo_pulse-animation__GMlAo  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes AfternicLogoV2_reveal__CHGst  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes AfternicLogoV2_pulse-animation__jD0ZB  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes TrustPilotWidget_reveal__OnrNq  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes TrustPilotWidget_pulse-animation__BbLqK  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes LeaseToOwnCalculator_reveal__mHXuU  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes LeaseToOwnCalculator_pulse-animation__Hw_n3  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes Survey_reveal__zAFcM  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"centered domain page matches preview; all reveal/pulse keyframes from prompt present"},{"id":"proj-2023-obys","name":"Obys Agency","agency":"Obys","year":2023,"award":"Awwwards","theme":"创意机构","tech":["Vanilla JS","GSAP","WebGL"],"link":"https://obys.agency","img":"previews/proj-2023-obys.png","kind":"proj","fw":[],"vendor":"Obys","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Obys Agency homepage (https://obys.agency). v2 fixes: nav links should be title-case (not uppercase), tagline should be a single compact line/stacked block matching the reference, and overall proportions should match the screenshot.\n\nBRAND / VIBE:\n- Premium creative design agency, dark near-black background (#111111), white text.\n- Editorial serif typography, generous whitespace, elegant minimal layout.\n\nTOP NAV / HEADER (full width, white text, padding ~40px 60px, flex between):\n- Left: hamburger menu icon (three horizontal white lines) followed by lowercase wordmark \"obys\" (sans-serif bold, ~22px).\n- Center: tiny stacked text \"Obys — Creative Design Agency\" (10px, line-height 1.4, left of logo or to its right; in the reference it sits immediately to the right of the logo in a compact 4-line stack).\n- Right: nav links \"Works\", \"About\", \"Contacts\" (small, title-case, ~13px, spaced ~30px).\n\nHERO (left-aligned, large serif headline, padding-left ~60px, padding-top ~120px):\n- Small label \"01\" top-left of headline block (white, ~18px, same x-position as headline).\n- Headline stacked in large white serif type (~82px, line-height 1.05, uppercase):\n  \"WE DESIGN\n   UNIQUE\n   WEB/GRAPHIC\n   EXPERIENCE\"\n- The word \"WEB/GRAPHIC\" has a white underline rule directly beneath it (3–4px thick, spanning the word width).\n\nTYPOGRAPHY:\n- Headline font: Times / Times New Roman / Georgia serif.\n- Logo and nav: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `figure.ho-wo-2-r` → transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `img` → transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.l` → transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)\n- `a` → transition: max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.is-intro` → transition: color 0.4s ease-out\n- `g` → transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1)\n- `div` → transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"serif headline+underline+nav layout matches preview; CSS transitions from prompt applied"},{"id":"proj-2024-gentlerain","name":"Gentle Rain","agency":"Manish","year":2024,"award":"Awwwards","theme":"3D / WebGL","tech":["R3F","GLSL","Lenis"],"link":"https://gentlerain.ai","img":"previews/proj-2024-gentlerain.png","kind":"proj","fw":[],"vendor":"Manish","prompt":""},{"id":"proj-2025-adidas","name":"Adidas (Clone)","agency":"Ali Sanati","year":2025,"award":"Awwwards","theme":"产品落地页","tech":["Three.js","GSAP","Lenis"],"link":"https://github.com/Ali-Sanati/awwwards-adidas","img":"previews/proj-2025-adidas.png","kind":"proj","fw":[],"vendor":"Ali Sanati","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Adidas 3D Landing Page Preview\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full-viewport height, pure black background (#0a0a0a or #000)\n- Content is perfectly centered both horizontally and vertically\n- No header, no nav, no footer — just a single centered block\n\n## Typography (system fonts only)\n- Use system monospace for code blocks (`-apple-system`, `Menlo`, `Consolas`, monospace)\n- Body text uses system sans-serif stack\n\n## Hero Section (centered)\n1. **Main heading**: \"Adidas 3D 落地页\" — white (#fff), bold, large (~32-36px), centered\n2. **Subheading line 1**: \"该项目需要构建后才能预览。在本地执行：\" — light gray (#999 or #aaa), ~16px, centered, margin-top ~16px\n3. **Code block**: Dark background (#1a1a1a or #111), rounded corners (~6px), padding ~12px 20px, inline-block style, contains text:\n   `cd source/2025-adidas && npm install && npm run dev`\n   - Text color: light greenish-white (#e0e0e0), monospace font, ~14px\n4. **Subheading line 2**: \"源码已原样保存在 source/2025-adidas/, 可逐文件查看/复制。\" — dimmer gray (#666 or #777), ~14px, centered, margin-top ~16px\n\n## Vibe\n- Minimalist developer preview page\n- Dark mode, terminal-like aesthetic\n- Clean, lots of empty space around center block\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `nav.prc-components-UnderlineWrapper-eT-Yj.prc-UnderlineNav-UnderlineWrapper-GWONT` → animation: prc-UnderlineNav-detect-overflow-6HuSH auto linear 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dev preview code-block page matches preview; all 15 GitHub-style keyframes present"},{"id":"proj-template-portfolio","name":"Portfolio Template","agency":"Community","year":2024,"award":"模板","theme":"作品集模板","tech":["Vite","GSAP","Three.js"],"link":"https://github.com","img":"previews/proj-template-portfolio.png","kind":"proj","fw":[],"vendor":"Community","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate GitHub Homepage Preview\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full viewport, appears mostly blank/white in the reference\n- No visible header, nav, hero text, or buttons in the reference capture\n- Essentially an empty/minimal page\n\n## Content\n- Reference shows a blank/white page with no discernible UI elements\n- Create a minimal empty page matching this appearance\n\n## Vibe\n- Blank / placeholder appearance\n- White or near-white background\n- No visible content elements\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 6 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `label.Primer_Brand__FormControl-module__FormControl-label___meeuB.Primer_Brand__FormControl-module__FormControl-label--medium___inrKd` → transition: transform 0.3s cubic-bezier(0.5, 0.16, 0.1, 1)\n- `span.Primer_Brand__TextInput-module__TextInput-wrapper___HgxNu.Primer_Brand__TextInput-module__TextInput-wrapper--medium___K9iTj` → transition: border 0.08s cubic-bezier(0.33, 1, 0.68, 1)\n- `input.Primer_Brand__TextInput-module__TextInput___EtKj3.TextInput` → transition: color, background-color, box-shadow 0.08s cubic-bezier(0.33, 1, 0.68, 1)\n- `button.Primer_Brand__Button-module__Button___lDruK.Primer_Brand__Button-module__Button--primary___xIC7G` → transition: background-color 0.48s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div.lp-HeroCarousel-visual` → transition: opacity, transform 0.2s, 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s\n- `div.BackToTop` → transition: opacity 0.2s ease-out\n- `a` → transition: color 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"blank white page matches empty reference preview; keyframes included per prompt"},{"id":"proj-bruno-folio-2019","name":"Bruno Simon Folio 2019","agency":"Bruno Simon","year":2019,"award":"Awwwards SOTM","theme":"3D / WebGL 标杆","tech":["Three.js","Cannon.js","GSAP"],"link":"https://bruno-simon.com","img":"previews/proj-bruno-folio-2019.png","kind":"proj","fw":[],"vendor":"Bruno Simon","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Bruno Simon folio 2019 Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark navy/purple background (#1a1625 or #16131f)\n- Content area looks like a card or panel within the page\n- Padding around content ~24-32px\n\n## Top Bar (window chrome)\n- Left side: Three colored circles (red #ff5f57, yellow #febc2e, green #28c840) — macOS-style window controls\n- Right of circles: \"★ Bruno Simon folio 2019\" — white text, ~18px bold\n- Below title: \"外部开源 · WebGL 标杆\" — gray text (~#999), smaller (~13px)\n\n## Action Buttons Row\n- Horizontal row of buttons below subtitle:\n  - \"Live Demo\" — solid purple/violet button (~#8b5cf6 or similar), white text, rounded corners (~8px), padding ~10px 20px\n  - \"Source\" — outlined button, border ~#444, light text, rounded corners\n  - \"获奖级 UI 效果\" — outlined button, same style as Source\n\n## Toggle / Filter Bar\n- Below buttons: A toggle switch (purple/pill shaped, active/on state) on left\n- Next to it: \"Awwwards\" text in white/light\n- On right: \"▼ 分类\" dropdown trigger (bordered pill)\n\n## Preview Placeholder Section\n- Header: \"预览图占位\" — white bold, ~16px\n- Subtext: \"真实截图在右侧画廊中替换显示。\" — gray (~#888), ~14px\n- This section has a subtle border or background card appearance\n\n## Bottom Tags Row\n- Row of tag pills at bottom:\n  - \"3D\", \"WebGL\", \"滚动\", \"动效\"\n  - Each tag: small rounded pill, dark bg (~#2a2535), light gray border, white/light text, ~12px font\n\n## Typography\n- System sans-serif fonts only\n- Clean, modern feel\n- Chinese text throughout except English brand names\n\n## Vibe\n- Dark mode dashboard/gallery card aesthetic\n- Purple accent color scheme\n- Clean spacing, organized layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes map-player-animation  {\n  0%  {\n  transform: scale(1);\n  } 20%  {\n  transform: scale(1.2);\n  } 40%  {\n  transform: scale(1);\n  } 60%  {\n  transform: scale(1.2);\n  } 80%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple gallery card with buttons/tags matches preview; map-player-animation keyframe present"},{"id":"proj-bruno-folio-2025","name":"Bruno Simon Folio 2025","agency":"Bruno Simon","year":2025,"award":"Awwwards SOTM","theme":"3D / WebGL 标杆","tech":["React Three Fiber","Rapier","GSAP"],"link":"https://bruno-simon.com","img":"previews/proj-bruno-folio-2025.png","kind":"proj","fw":[],"vendor":"Bruno Simon","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Bruno Simon folio 2025 Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark navy/purple background (#1a1625 or #16131f)\n- Content area looks like a card/panel within the page\n- Padding around content ~24-32px\n\n## Top Bar (window chrome)\n- Left side: Three colored circles (red #ff5f57, yellow #febc2e, green #28c840) — macOS window controls\n- Right of circles: \"★ Bruno Simon folio 2025\" — white text, ~18px bold\n- Below title: \"外部开源 · WebGL 标杆\" — gray text (~#999), smaller (~13px)\n\n## Action Buttons Row\n- Horizontal row of buttons below subtitle:\n  - \"Live Demo\" — solid purple/violet button (~#8b5cf6), white text, rounded corners (~8px), padding ~10px 20px\n  - \"Source\" — outlined button, border ~#444, light text, rounded corners\n  - \"获奖级 UI 效果\" — outlined button, same style\n\n## Toggle / Filter Bar\n- Toggle switch (purple pill, active/on state) on left\n- Next to it: \"Awwwards\" text in white/light\n- On right: \"▼ 分类\" dropdown trigger (bordered pill)\n\n## Preview Placeholder Section\n- Header: \"预览图占位\" — white bold, ~16px\n- Subtext: \"真实截图在右侧画廊中替换显示。\" — gray (~#888)\n- Subtle border/background card appearance\n\n## Bottom Tags Row\n- Tag pills: \"3D\", \"WebGL\", \"滚动\", \"动效\"\n- Dark bg (~#2a2535), light gray border, white/light text, ~12px font\n\n## Typography & Vibe\n- System sans-serif fonts\n- Dark mode dashboard/gallery card aesthetic\n- Purple accent color scheme\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes map-player-animation  {\n  0%  {\n  transform: scale(1);\n  } 20%  {\n  transform: scale(1.2);\n  } 40%  {\n  transform: scale(1);\n  } 60%  {\n  transform: scale(1.2);\n  } 80%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dashboard card with macOS chrome, purple accent, map-player-animation verbatim applied to pulsing preview node"},{"id":"awd-lusion-oryzo","name":"Lusion — Oryzo AI","agency":"Lusion","year":2024,"award":"Awwwards SOTM","theme":"WebGL / AI","tech":["Three.js"],"link":"https://lusion.com/work/oryzo","accent":"#6ee7b7","kind":"proj","fw":[],"vendor":"Lusion","img":"previews/awd-lusion-oryzo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Lusion — Oryzo AI Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full viewport with a subtle dark teal/navy gradient background (from ~#0d1419 at top-left to #1a252e at bottom-right)\n- Content sits inside a centered card-like container with:\n  - Rounded corners (~16px)\n  - Subtle border (~1px solid rgba(255,255,255,0.06))\n  - Padding ~40px horizontal, ~32px vertical\n  - Margin from edges ~40px\n\n## Top Bar (inside card)\n- Left side: \"AWARD–WINNING\" text — teal/cyan color (#4ecdc4 or #3dd9b5), uppercase, small (~11-12px), letter-spacing ~2px, monospace or sans-serif\n- Right side: \"★ Awwwards SOTM\" badge — small pill shape, teal/greenish bg (~rgba(78,205,196,0.15)), same teal text, rounded corners (~20px), padding ~6px 14px\n\n## Hero / Main Content (centered vertically within card)\n1. **Main Heading**: \"Lusion — Oryzo AI\" — pure white (#fff), very large bold (~52-58px), clean sans-serif, em-dash between words\n2. **Sub-line**: \"Lusion · 2024\" — gray text (~#888 or #999), ~15px, below heading with margin ~12px\n3. **Tech Tag**: \"Three.js\" — small pill/tag, dark background (~#1a1f28), light gray border (~#333), white/light text, rounded (~6px), padding ~5px 12px, ~13px font\n\n## Bottom Footer (inside card)\n- Bottom-left area: \"实验不可用 · 信号丢失\" — very dim gray (~#555 or #606060), ~12px, small text\n\n## Typography & Vibe\n- System fonts only (sans-serif stack)\n- Minimalist, premium award-showcase feel\n- Lots of breathing room / whitespace around content\n- Subtle gradient gives depth without being distracting\n- Clean, editorial typography\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes ping  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.5;\n  }\n}\n@-webkit-keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: translateY(0px);\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal award card, AWARD-WINNING + SOTM badge, ping/pulse/bounce keyframes verbatim applied to signal dots and bounce arrow"},{"id":"awd-immersive-gq","name":"Immersive Garden — GQ&AP","agency":"Immersive Garden","year":2023,"award":"Awwwards","theme":"创意机构","tech":["WebGL"],"link":"https://www.immersive-garden.com","accent":"#ff6b9d","kind":"proj","fw":[],"vendor":"Immersive Garden","img":"previews/awd-immersive-gq.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Cloudflare 521 Error Page\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Light gray background (#f2f2f2 or #f5f5f5) overall\n- Top section: white/light background area\n- Below that: a lighter gray section separated by subtle divider\n\n## Top Section (white bg)\n1. **Main heading**: \"Web server is down\" — dark gray (#333 or #404040), large (~36-40px), bold, left-aligned with padding ~40px top/left\n2. **Error badge**: Next to heading on same line — \"Error code 521\" — small pill/tag, light gray bg (~#e0e0e0), rounded corners (~4px), small text (~13px)\n3. **Subtext line**: \"Visit cloudflare.com for more information.\" — \"cloudflare.com\" is blue link (#0051c3 or similar), rest is gray text (~#666), ~15px\n4. **Timestamp**: \"2026-07-12 22:33:12 UTC\" — smaller gray text (~#888), ~13px\n\n## Status Icons Row (centered, in white area)\nThree columns showing connection status:\n1. **Left**: Monitor/browser icon (gray outline) with green checkmark circle overlay → Label \"You\", sub-labels \"Browser\" (lighter gray) / \"Working\" (green #2ecc71)\n2. **Center**: Cloud icon (gray) with green checkmark circle overlay → Label \"Kuala Lumpur\", sub-labels \"Cloudflare\" (blue link) / \"Working\" (green)\n3. **Right**: Server/host icon (gray) with red X circle overlay → Label \"www.immersive-garden.com\", sub-labels \"Host\" (lighter gray) / \"Error\" (red #e74c3c)\n\nIcons should be simple geometric shapes rendered in CSS/SVG:\n- Browser = rectangle with small dots (browser chrome)\n- Cloud = fluffy cloud shape\n- Server = rectangle (server box)\n\n## Bottom Section (lighter gray bg, ~#fafafa)\nTwo-column layout below a subtle separator line:\n- **Left column**: \"What happened?\" heading (~20px bold) + paragraph text: \"The web server is not returning a connection. As a result, the web page is not displaying.\"\n- **Right column**: \"What can I do?\" heading + two sections:\n  - \"If you are a visitor of this website:\" → \"Please try again in a few minutes.\"\n  - \"If you are the owner of this website:\" → \"Contact your hosting provider letting them know your web server is not responding. Additional troubleshooting information.\"\n\nText color ~#555, body text ~14px, headings ~18px.\n\n## Typography & Vibe\n- System sans-serif fonts\n- Clean, technical/error-page aesthetic\n- Lots of whitespace\n- Professional, informative tone\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n- `button.cf-footer-ip-reveal-btn` → transition: color 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** color: #f68b1f\n- `.cf-error-footer .cf-footer-ip-reveal-btn`:\n  **hover:** color: rgb(238, 115, 10)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Cloudflare 521 error page, light theme, status icon row with green/red overlays, a + cf-footer-ip-reveal-btn transitions verbatim (no @keyframes in spec)"},{"id":"awd-immersive-cartier","name":"Immersive Garden — Cartier","agency":"Immersive Garden","year":2022,"award":"Awwwards","theme":"奢侈品牌","tech":["Three.js"],"link":"https://www.cartier.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Immersive Garden","img":"previews/awd-immersive-cartier.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Immersive Garden — Cartier Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark background (#0a0b0d or similar near-black)\n- Subtle golden/yellow gradient glow at the very top edge (from gold/amber fading into black)\n- Content sits inside a card container with rounded corners (~12-16px), subtle border (~1px solid rgba(212,175,55,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆 style or CSS-drawn) in gold/yellow color (#d4af37 or #c9a84c)\n- **Right**: \"★ AWARD\" badge — pill shape, outlined border in gold/yellow, transparent bg, gold/yellow text, rounded corners (~20px)\n\n## Main Content (below top bar)\n1. **Main heading**: \"Immersive Garden — Cartier\" — pure white (#fff), large bold (~36-42px), clean sans-serif, em-dash between words\n2. **Sub-line**: \"Immersive Garden · 2022\" — gray (#888 or #999), ~15px, margin ~10px below heading\n3. **Award tag**: \"Awwwards\" — pill/tag with GOLD/YELLOW background (#d4af37 or similar), dark/black text inside, rounded corners (~6-8px), padding ~6px 18px, inline-block, margin ~12px below sub-line\n4. **Chinese label**: \"奢侈品\" — gray text (~#777), ~14px, below Awwwards tag\n\n## Bottom Tag\n- \"Three.js\" — small tag pill, dark bg (~#151518), subtle border (~#2a2a30), light gray text, rounded ~6px, positioned lower in card\n\n## Typography & Vibe\n- System sans-serif fonts only\n- Luxury/premium feel from gold accent colors on dark background\n- Minimalist but elegant\n- Award-showcase card aesthetic\n- Golden trophy icon as key visual element\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gold luxury award card, gold trophy + AWARD badge, Awwwards gold pill, 奢侈品 + Three.js tags (no @keyframes in spec)"},{"id":"awd-resn-tracing","name":"Resn — Tracing Art","agency":"Resn","year":2023,"award":"FWA","theme":"实验 / WebGL","tech":["Canvas"],"link":"https://www.resn.co.nz","accent":"#ff3e00","kind":"proj","fw":[],"vendor":"Resn","img":"previews/awd-resn-tracing.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Resn — Tracing Art Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Near-black base (#0c0a0a or #0e0b0b) with a strong RED/ORANGE radial or linear gradient glow from the TOP edge (deep red #c0392b / #d4380d fading to black downward)\n- Content inside a rounded card (~12-16px corners), subtle border (~1px solid rgba(220,80,50,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆) in gold color (#d4af37), medium-large size (~36-40px)\n- **Right**: \"★ AWARD\" badge — outlined pill, border color is red-orange (#d44a1f or similar), transparent bg, red-orange text, rounded corners (~20px)\n\n## Main Content\n1. **Main heading**: \"Resn — Tracing Art\" — pure white (#fff), large bold (~36-42px), sans-serif, em-dash between words\n2. **Sub-line**: \"Resn · 2023\" — gray text (#888-999), ~15px, margin ~10px below heading\n3. **Award tag**: \"FWA\" — pill tag with ORANGE/RED background (#e65100 or #d4380d), WHITE text inside, bold, rounded corners (~8px), padding ~7px 20px, ~14px font\n4. **Chinese label**: \"实验 / WebGL\" — gray text (~#888), ~14px, below FWA tag\n\n## Bottom Tag\n- \"Canvas\" — small tag pill, dark bg (~#181515), subtle border (~#333), light gray text, rounded ~6px, positioned at bottom area of card\n\n## Typography & Vibe\n- System sans-serif fonts\n- Bold, energetic feel from the red/orange accent\n- Award showcase aesthetic\n- Dark + warm contrast palette\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.rootNode h1`:\n  **hover:** outline: 0\n  **active:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loadingRing  {\n  0%  {\n  stroke-dashoffset: 0;\n  } 100%  {\n  stroke-dashoffset: -120;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"near-black card with red/orange top glow, gold trophy + loading ring (loadingRing keyframe verbatim), FWA orange pill, 实验/WebGL + Canvas tags"},{"id":"awd-noomo","name":"Noomo Agency","agency":"Noomo","year":2023,"award":"Awwwards","theme":"机构作品集","tech":["Nuxt3","Three"],"link":"https://noomo.agency","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Noomo","img":"previews/awd-noomo.png","prompt":""},{"id":"awd-unknown","name":"THE UN KNOWN","agency":"The Unknown","year":2023,"award":"Awwwards","theme":"创意机构","tech":["Astro"],"link":"https://www.the-unknown.studio","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"The Unknown","img":"previews/awd-unknown.png","prompt":""},{"id":"awd-jeton","name":"Jeton","agency":"Bürocratik","year":2022,"award":"Awwwards","theme":"金融科技","tech":["WebGL"],"link":"https://jeton.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Bürocratik","img":"previews/awd-jeton.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Jeton Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark background (#0c0b09 or similar near-black) with GOLDEN/YELLOW gradient glow at the TOP edge (from warm gold/amber #d4a520 fading down to black)\n- Content inside a rounded card (~12-16px corners), subtle border (~1px solid rgba(212,175,55,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆) — gold color (#d4af37), ~36-40px\n- **Right**: \"★ AWARD\" badge — outlined pill, gold border (#d4af37 or #c9a84c), transparent bg, gold text, rounded corners (~20px)\n\n## Main Content\n1. **Main heading**: \"Jeton\" — pure white (#fff), large bold (~38-44px), clean sans-serif\n2. **Sub-line**: \"Bürokratik · 2022\" — gray text (#888-999), ~15px, margin ~10px below heading\n3. **Award tag**: \"Awwwards\" — pill/tag with GOLD/YELLOW bg (#d4a520 or #e6b422), DARK/BLACK text inside, bold, rounded corners (~8px), padding ~7px 20px, ~14px font\n4. **Chinese label**: \"金融科技\" — gray text (~#888), ~14px, below Awwwards tag\n\n## Bottom Tag\n- \"WebGL\" — small tag pill, dark bg (~#161513), subtle border (~#2a2825), light gray text, rounded ~6px, positioned lower in card\n\n## Typography & Vibe\n- System sans-serif fonts\n- Premium fintech award feel\n- Gold accent on dark base\n- Minimalist, elegant showcase\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 6 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span` → animation: coin-loop-neutral 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.333333s infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.background.absolute` → transition: opacity, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `span._icon` → transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.slot` → transition: transform, box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1)\n- `a.link.body` → transition: opacity 0.2s ease\n- `div.label.flex` → transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div._menu-page-thumbnail` → transition: transform, opacity 0.6s, 0.2s ease, cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.15s\n- `div.shade.fixed` → transition: opacity 0.3s ease-in-out\n- `div` → transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `video._video-asset.h-full` → transition: opacity 1.2s ease-out\n- `button._scroll-hint.caption` → transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `button._zendesk-launcher` → transition: transform, opacity 0.6s ease\n- `div.background.absolute` → transition: transform 0.2s ease\n- `div._drawer` → transition: opacity 0.001s linear 1s\n- `div.shade.absolute` → transition: opacity 0.7s ease 0.2s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `._menu-button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `.-book`:\n  **hover:** outline: 0; opacity: 1\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._menu-drawer .link .label`:\n  **hover:** transform: translate(0.61875em)\n- `._menu-page-thumbnail`:\n  **hover:** opacity: 1; transform: scale(1)\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._app-button[data-button]`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._scroll-hint`:\n  **hover:** background-color: rgba(255, 255, 255, 0.2)\n  **active:** background-color: rgba(255, 255, 255, 0.25)\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 3px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 3px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading-icon  {\n  0%  {\n  stroke-dasharray: 74.9124, 14.9825px;\n  stroke-dashoffset: 74.9124;\n  transform: rotate(0deg) scaleY(-1);\n  } 50%  {\n  stroke-dasharray: 74.9124, 22.4737px;\n  } 100%  {\n  stroke-dasharray: 74.9124, 14.9825px;\n  transform: rotate(1turn) scaleY(-1);\n  }\n}\n@keyframes coin-loop-orange  {\n  0%  {\n  background-color: rgb(247, 69, 34);\n  opacity: 1;\n  transform: translateY(0px) scaleY(1);\n  z-index: 1;\n  } 60%  {\n  opacity: 1;\n  } 80%  {\n  background-color: rgb(253, 214, 206);\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  transform: translateY(200%) scaleY(0);\n  z-index: 7;\n  }\n}\n@keyframes coin-loop-neutral  {\n  0%  {\n  background-color: rgb(255, 255, 255);\n  opacity: 1;\n  transform: translateY(0px) scaleY(1);\n  z-index: 1;\n  } 48%  {\n  opacity: 1;\n  } 80%  {\n  background-color: rgb(245, 177, 163);\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  transform: translateY(200%) scaleY(0);\n  z-index: 7;\n  }\n}\n@keyframes skeleton-background-loop  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 100% 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gold fintech award card, trophy + coin-stack(coin-loop-neutral on span) + loading-icon, Awwwards gold pill, 金融科技 + WebGL tags; 4 keyframes verbatim"},{"id":"awd-activetheory","name":"Active Theory","agency":"Active Theory","year":2023,"award":"Awwwards / FWA","theme":"互动体验","tech":["WebGL"],"link":"https://activetheory.net","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Active Theory","img":"previews/awd-activetheory.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — activetheory.net Awwwards Gallery Card\n\nGoal: single self-contained HTML file (inline CSS, system fonts, no external assets) recreating the Awwwards gallery card for Active Theory (1280x820).\n\nThis is an Awwwards award gallery card, not the live website. It has a dark gradient background with a consistent card layout.\n\nLayout:\n- Full-viewport dark gradient background: radial from top-left purple-magenta to deep black. Approximate: `background: radial-gradient(ellipse at top left, #4a1942, #1a0a24 55%, #0a0510);`\n- Top-right corner: an outline-only ★ AWARD badge pill — white border, transparent bg, rounded-full, ~14px uppercase, star icon + \"AWARD\"\n- Content area (left side, ~60px from left edge):\n  - Large gold trophy icon 🏆 (emoji or CSS shape) — ~52px\n  - Headline below: **\"Active Theory\"** in white, ~38px, bold, sans-serif\n  - Subtitle line: \"Active Theory · 2023\" in light gray/white ~16px, regular weight\n  - Colored badge pill below: pink/magenta fill (#d94b8e), white text, \"Awwwards / FWA\", rounded-full, ~14px padding 6px 18px\n  - Chinese tagline below badge: \"互动体验\" in muted gray-white ~16px\n- Bottom-left corner (~30px from edges): a small tech label pill — semi-transparent dark bg (rgba(255,255,255,0.08)), thin white/gray border, white text \"WebGL\", rounded, ~13px padding 5px 12px\n\nTypography: system sans-serif (Helvetica, Arial). No external fonts.\nNo scrollbars, no overflow.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h1.fade-in` → animation: fadeInOpacity 2s ease-in 1 normal\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fadeInOpacity  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple-magenta radial gradient, gold trophy, fadeInOpacity keyframe applied to h1.fade-in, pink Awwwards/FWA pill, 互动体验 + WebGL tags"},{"id":"awd-cuberto","name":"Cuberto","agency":"Cuberto","year":2022,"award":"Awwwards","theme":"创意机构","tech":["GSAP"],"link":"https://cuberto.com","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Cuberto","img":"previews/awd-cuberto.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — cuberto.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Cuberto (1280x820). This is an Awwwards award gallery card, not the live site.\n\nLayout:\n- Full-viewport dark teal-to-black gradient background: `radial-gradient(ellipse at top left, #0d4a4a, #072222 55%, #041014)`\n- Top-right: ★ AWARD outline badge pill (white border, transparent bg, rounded-full)\n- Content area left (~60px from edge):\n  - Gold trophy 🏆 ~52px\n  - Headline \"**Cuberto**\" white ~38px bold sans-serif\n  - Subtitle \"Cuberto · 2022\" light gray ~16px\n  - Badge pill: cyan fill (#1bb8b8), white text \"Awwwards\", rounded-full\n  - Chinese tag: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: semi-transparent bg, thin border, white text \"GSAP\"\nTypography: Helvetica, Arial system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `svg` → animation: cb-fx-rotating-360 15s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.cb-navbar-fill` → transition: transform, visibility 0.3s, 0s ease, ease 0s, 0.3s\n- `div.cb-navbar-strip` → transition: transform 0.3s ease\n- `span` → transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.cb-intouch-outline` → transition: transform 0.4s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cb-btn`:\n  **hover:** transform: scaleX(1.02)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cb-fx-blink  {\n  0%, 100%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes cb-fx-rotating-360  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes cb-btn_menu-open-top  {\n  0%  {\n  top: calc(50% - 1px - 0.3rem);\n  clip-path: inset(0px);\n  transform: rotate(0deg);\n  } 30%  {\n  top: calc(50% - 1px - 0.3rem);\n  clip-path: inset(0px 100% 0px 0px);\n  transform: rotate(0deg);\n  } 30.01%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px 100% 0px 0px);\n  transform: rotate(45deg);\n  } 100%, 80%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px);\n  transform: rotate(45deg);\n  }\n}\n@keyframes cb-btn_menu-open-bottom  {\n  0%  {\n  top: calc(50% - 1px + 0.3rem);\n  clip-path: inset(0px);\n  transform: rotate(0deg);\n  } 50%  {\n  top: calc(50% - 1px + 0.3rem);\n  clip-path: inset(0px 0px 0px 100%);\n  transform: rotate(0deg);\n  } 50.1%, 55%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px 0px 0px 100%);\n  transform: rotate(-45deg);\n  } 100%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px);\n  transform: rotate(-45deg);\n  }\n}\n@keyframes cb-overview-icon-stroka  {\n  0%  {\n  stroke-dashoffset: 0;\n  stroke-dasharray: 148, 10;\n  } 50%  {\n  stroke-dasharray: 135, 30;\n  } 100%  {\n  stroke-dashoffset: 157;\n  stroke-dasharray: 148, 10;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal radial gradient, trophy rotating via cb-fx-rotating-360(15s), cyan Awwwards pill, 创意机构 + GSAP; all 5 cb-* keyframes verbatim"},{"id":"awd-akqa","name":"AKQA","agency":"AKQA","year":2023,"award":"Awwwards","theme":"数字代理","tech":["WebGL"],"link":"https://www.akqa.com","accent":"#ef4444","kind":"proj","fw":[],"vendor":"AKQA","img":"previews/awd-akqa.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — akqa.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for AKQA (1280x820). This is an Awwwards award gallery card, not the live site.\n\nLayout:\n- Full-viewport dark red/maroon-to-black gradient: `radial-gradient(ellipse at top left, #5c1818, #240808 55%, #0e0303)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**AKQA**\" white ~38px bold\n  - \"AKQA · 2023\" light gray ~16px\n  - Badge pill: red fill (#c43d3d), white \"Awwwards\", rounded-full\n  - Chinese: \"数字代理\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.component.header-component` → transition: all 1.5s cubic-bezier(0.35, 1, 0.45, 1) 0.11s\n- `nav.navigation-component` → transition: padding-top 0.75s ease\n- `a.navigation-link` → transition: color 0.75s ease\n- `main.main-container` → transition: background 2s ease\n- `div.component.cardblock-component` → transition: opacity 2s ease\n- `div.card-element.featured-color-white` → transition: all, transform, -webkit-transform 1.5s, 1.5s, 1.5s cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1) 0.33s\n- `img.aspect-image` → transition: transform, -webkit-transform 1s, 1s ease, ease 0s, 0s\n- `section.cookie-banner.hide` → transition: transform, -webkit-transform 1.5s, 1.5s cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1) 0s, 0s\n- `button.cookie-prefs-manage` → transition: all 0.75s ease\n- `button.cta.cta-component` → transition: all 0.375s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.header-component .nav-wrapper`:\n  **focus:** outline: 0\n- `.header-component .akqa-logo`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.header-component .navigation-component`:\n  **focus:** outline: 0\n- `.header-component .navigation-list`:\n  **focus:** outline: 0\n- `.header-component .navigation-component .navigation-item`:\n  **focus:** outline: 0\n- `.header-component .navigation-list .navigation-link`:\n  **hover:** text-decoration: underline; color: rgb(18, 18, 18)\n  **focus:** outline: 0\n- `article`:\n  **focus:** outline: 0\n- `div`:\n  **focus:** outline: 0\n- `.column-grid-wrapper`:\n  **focus:** outline: 0\n- `.card-element`:\n  **focus:** outline: 0\n- `.card-image`:\n  **focus:** outline: 0\n- `.style--featured .card-element .card-content-wrap`:\n  **focus:** outline: 0\n- `.card-content`:\n  **focus:** outline: 0\n- `.card-cta`:\n  **focus:** outline: 0\n- `.theme-light main a`:\n  **hover:** text-decoration: underline; color: rgb(18, 18, 18)\n  **focus:** outline: 0\n- `.cardblock-component .grid-item`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes shake  {\n  20%, 60%  {\n  transform: translate3d(2px, 0px, 0px);\n  } 40%  {\n  transform: translate3d(-2px, 0px, 0px);\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@-webkit-keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@-webkit-keyframes color  {\n  100%, 0%  {\n  stroke: rgb(65, 65, 65);\n  } 40%  {\n  stroke: rgb(65, 65, 65);\n  } 66%  {\n  stroke: rgb(65, 65, 65);\n  } 80%, 90%  {\n  stroke: rgb(65, 65, 65);\n  }\n}\n@-webkit-keyframes shootStar  {\n  0%  {\n  transform: translate(-800px, 0px);\n  opacity: 0;\n  } 20%  {\n  opacity: 1;\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  transform: translate(800px, 0px);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark red radial gradient, gold trophy + rotate/dash spinner, red Awwwards pill, 数字代理 + WebGL; 5 webkit keyframes shake/rotate/dash/color/shootStar verbatim"},{"id":"awd-hellomonday","name":"Hello Monday","agency":"Hello Monday","year":2022,"award":"Awwwards","theme":"品牌体验","tech":["Three.js"],"link":"https://hellomonday.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Hello Monday","img":"previews/awd-hellomonday.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — hellomonday.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Hello Monday (1280x820). This is an Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark green-teal-to-black gradient: `radial-gradient(ellipse at top left, #0a3d3d, #051c1c 55%, #030b0b)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Hello Monday**\" white ~38px bold\n  - \"Hello Monday · 2022\" light gray ~16px\n  - Badge pill: green fill (#2eb87e), white \"Awwwards\", rounded-full\n  - Chinese: \"品牌体验\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"Three.js\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes vjs-spinner-show  {\n  100%  {\n  visibility: visible;\n  }\n}\n@keyframes vjs-spinner-fade  {\n  0%  {\n  border-top-color: rgb(255, 255, 255);\n  } 20%  {\n  border-top-color: rgb(255, 255, 255);\n  } 35%  {\n  border-top-color: rgb(255, 255, 255);\n  } 60%  {\n  border-top-color: rgb(255, 255, 255);\n  } 100%  {\n  border-top-color: rgb(255, 255, 255);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark green-teal radial gradient, gold trophy + vjs spinner, green Awwwards pill, 品牌体验 + Three.js; vjs-spinner-show/vjs-spinner-fade keyframes verbatim"},{"id":"awd-dogstudio","name":"Dogstudio","agency":"Dogstudio","year":2021,"award":"Awwwards","theme":"创意机构","tech":["WebGL"],"link":"https://dogstudio.co","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Dogstudio","img":"previews/awd-dogstudio.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — dogstudio.co Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Dogstudio (1280x820). This is an Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark navy-blue-to-black gradient: `radial-gradient(ellipse at top left, #1a2a4a, #0c1525 55%, #060a12)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Dogstudio**\" white ~38px bold\n  - \"Dogstudio · 2021\" light gray ~16px\n  - Badge pill: blue fill (#3b7dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.site-header` → transition: transform, background-color, -webkit-transform 1s, 0.6s, 1s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s, 0s\n- `svg` → transition: fill 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `button.site-header-button` → transition: transform, -webkit-transform 0.6s, 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s\n- `span.button-bar.button-bar--1` → transition: transform, opacity, background-color, -webkit-transform 0.6s, 0.3s, 0.6s, 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s, 0s, 0s\n- `span.pulsing-ui` → transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `span.site-loader-sprite` → transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s\n- `circle` → transition: stroke-dashoffset 0.7s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `a` → transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `picture.home-background.js-in-view` → transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s\n- `span` → transition: opacity, transform, -webkit-transform 0.8s, 0.8s, 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s\n- `div.showreel.js-showreel` → transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div.plyr.plyr--full-ui` → transition: box-shadow 0.3s ease\n- `div.plyr__controls` → transition: opacity, transform, -webkit-transform 0.4s, 0.4s, 0.4s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `button.plyr__control` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.site-menu-item a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n- `.site-menu-content a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n- `.home-hero-content a`:\n  **hover:** color: rgba(255, 255, 255, 0.7)\n  **focus:** color: rgba(255, 255, 255, 0.7)\n- `.home-cases-list a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes plyr-progress  {\n  100%  {\n  background-position: 25px 0px;\n  }\n}\n@-webkit-keyframes plyr-popup  {\n  0%  {\n  opacity: 0.5;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes plyr-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes u571deb2c  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes ud40f256c  {\n  0%  {\n  opacity: 0;\n  transform: translateY(50px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes ub8d47c1d  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@-webkit-keyframes u2e54375a  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(-50px);\n  }\n}\n@-webkit-keyframes uecdad3ae  {\n  0%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0.9);\n  }\n}\n@-webkit-keyframes ub2cf2481  {\n  0%  {\n  transform: translateX(-100%);\n  } 50%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@-webkit-keyframes uba4b19ff  {\n  0%  {\n  transform: translateY(40px);\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  opacity: 1;\n  }\n}\n@-webkit-keyframes u8edc4e88  {\n  0%  {\n  transform: translate(-50%, -50%) scale(0);\n  opacity: 1;\n  } 100%  {\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes u4adca01f  {\n  0%  {\n  transform: translateX(-100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@-webkit-keyframes uf2ba92f5  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@-webkit-keyframes udefbcafc  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: -2080px 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy radial gradient, gold trophy, blue Awwwards pill, 创意机构 + WebGL; all 14 webkit keyframes (plyr-* + u*) verbatim applied as entrance/loader animations"},{"id":"awd-makemepulse","name":"Makemepulse","agency":"Makemepulse","year":2022,"award":"Awwwards","theme":"创意机构","tech":["GSAP"],"link":"https://www.makemepulse.com","accent":"#fb7185","kind":"proj","fw":[],"vendor":"Makemepulse","img":"previews/awd-makemepulse.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — makemepulse.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Makemepulse (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark magenta-red-to-black gradient: `radial-gradient(ellipse at top left, #5c1a3d, #2a0a1e 55%, #0f0510)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Makemepulse**\" white ~38px bold\n  - \"Makemepulse · 2022\" light gray ~16px\n  - Badge pill: pink fill (#d94b8e), white \"Awwwards\", rounded-full\n  - Chinese: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"GSAP\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `path` → transition: fill 0.166s linear\n- `button.app-header__burger.relative` → transition: color 0.166s linear\n- `a.app-header__nav__menu__link.block` → transition: all 0.15s ease-in-out\n- `img.prismic-img.is-loaded` → transition: opacity 0.8s cubic-bezier(0.26, 1, 0.48, 1)\n- `span.c-scrollbar` → transition: transform, opacity 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.lg\\:self-start`:\n  **focus:** outline: 0\n- `.lg\\:p-20`:\n  **hover:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes spinner-translate  {\n  0%  {\n  transform: translateX(-250%);\n  } 100%  {\n  transform: translateX(250%);\n  }\n}\n@-webkit-keyframes spinner-scale  {\n  0%  {\n  transform: scale(1.5);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark magenta-red radial gradient, gold trophy + spinner(transl/scale), pink Awwwards pill, 创意机构 + GSAP; spinner-translate/spinner-scale keyframes verbatim"},{"id":"awd-rga","name":"R/GA","agency":"R/GA","year":2021,"award":"Awwwards","theme":"数字代理","tech":["Web"],"link":"https://www.rga.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"R/GA","img":"previews/awd-rga.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — rga.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for R/GA (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark orange-brown-to-black gradient: `radial-gradient(ellipse at top left, #6b4a1a, #2a1a08 55%, #100a02)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**R/GA**\" white ~38px bold\n  - \"R/GA · 2021\" light gray ~16px\n  - Badge pill: orange/gold fill (#c88a20), dark text or white \"Awwwards\", rounded-full\n  - Chinese: \"数字代理\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"Web\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.header_header__9V_Wd` → transition: background-color 0.15s ease-in-out\n- `svg` → transition: all 0.6s ease-in-out\n- `li.header-desk-nav-list_title__Tp4__.header-desk-nav-list_--dark__T_Kcd` → transition: color, opacity 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cookies-consent_text__8QPpi a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.cookies-consent_text__8QPpi button`:\n  **focus:** outline: 1px solid #666; outline-color: rgb(102, 102, 102)\n  **focus-visible:** outline: 1px solid #666; outline-color: rgb(102, 102, 102)\n- `.layout_jump__IEKgY`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.rga-logo_root__Fr8WS`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 1px solid #000\n  **focus-visible:** outline: 1px solid #000\n- `.header-desk-nav_navbar__y0Phm`:\n  **focus:** outline: 0\n- `.header-desk-nav_navbar__y0Phm .header-desk-nav_navbarGroup__EGRXU`:\n  **focus:** outline: 0\n- `.header-desk-nav-list_title__Tp4__`:\n  **hover:** color: rgb(255, 255, 255); opacity: 0.7\n  **focus:** outline: 0\n- `.header-desk-nav-list_title__Tp4__ a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n  **focus-visible:** border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.list-wrapper_list__XXQen .list-wrapper_cards__0on_5`:\n  **focus:** outline: 0\n- `.module-card_root__TJIKy`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.module-card_workCard__u_W6M`:\n  **focus:** outline: 0\n- `.module-card_workCard__container__dP__U`:\n  **focus:** outline: 0\n- `.module-card_workCard__description__tRiIA`:\n  **focus:** outline: 0\n- `.service-how-we-help_titleArrow__eKvOQ`:\n  **hover:** border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n  **focus:** outline: 0; border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n  **focus-visible:** border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n- `article`:\n  **focus:** outline: 0\n- `.info-video_links__wBHsq`:\n  **focus:** outline: 0\n- `.service-how-we-help_list--light__jWDDf a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.info-video_linkArrow__CHfLn`:\n  **hover:** color: red\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes logo-live_blink__osdZs  {\n  15%  {\n  opacity: 1;\n  } 45%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 0;\n  } 85%  {\n  opacity: 1;\n  }\n}\n@keyframes spinner_square-loader__faKpL  {\n  0%  {\n  transform: rotate(0deg);\n  } 25%  {\n  transform: rotate(180deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 75%  {\n  transform: rotate(1turn);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes spinner_square-loader-inner__Aui8a  {\n  0%  {\n  height: 0px;\n  } 25%  {\n  height: 0px;\n  } 50%  {\n  height: 100%;\n  } 75%  {\n  height: 100%;\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes video-hover_fade-in__8tqnO  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes cannes-login_spinn__HYGFP  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes hero_fadeIn__l4XKb  {\n  0%  {\n  pointer-events: none;\n  } 100%  {\n  pointer-events: inherit;\n  }\n}\n@keyframes independence-day-splash_fadeIn__2ktoK  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes independence-day-splash_fadeOut__VsBXz  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes passphrase_fadeIn__ZSgvA  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout colors copy components match; all keyframes present"},{"id":"awd-webflow","name":"Webflow","agency":"Webflow","year":2023,"award":"Awwwards","theme":"建站平台","tech":["WebGL"],"link":"https://webflow.com","accent":"#4353ff","kind":"proj","fw":[],"vendor":"Webflow","img":"previews/awd-webflow.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — webflow.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Webflow (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport deep navy-blue-to-black gradient: `radial-gradient(ellipse at top left, #1a2a5c, #0a1028 55%, #040610)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Webflow**\" white ~38px bold\n  - \"Webflow · 2023\" light gray ~16px\n  - Badge pill: blue fill (#3b5dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"建站平台\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-waaark","name":"Waaark","agency":"Waaark","year":2020,"award":"Awwwards","theme":"作品集","tech":["GSAP"],"link":"https://waaark.com","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Waaark","img":"previews/awd-waaark.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — waaark.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Waaark (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark purple-to-black gradient: `radial-gradient(ellipse at top left, #3a2a5c, #18102e 55%, #08050f)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Waaark**\" white ~38px bold\n  - \"Waaark · 2020\" light gray ~16px\n  - Badge pill: purple fill (#7b5dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"作品集\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"GSAP\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.line` → animation: open-in 0.3s cubic-bezier(0.18, 0.89, 0.67, 1.16) 0.3s 1 normal forwards\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n- `.nav-main .nav-container .menu-item > a`:\n  **hover:** outline: 0; color: rgb(48, 63, 128)\n  **active:** outline: 0\n- `.nav-main .nav-container .links a`:\n  **hover:** outline: 0; color: rgb(125, 84, 84)\n  **active:** outline: 0\n- `.nav-main .language-selector a`:\n  **hover:** outline: 0; color: rgb(250, 171, 171)\n  **active:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes open-in  {\n  0%  {\n  transform: scaleX(0);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-out-1  {\n  0%  {\n  transform: scaleY(1) translateY(0px);\n  transform-origin: 100% 100%;\n  } 100%  {\n  transform: scaleY(0) translateY(10px);\n  transform-origin: 100% 100%;\n  }\n}\n@-webkit-keyframes close-out-2  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 100% 100%;\n  } 100%  {\n  transform: scaleX(0) translateX(10px);\n  transform-origin: 100% 100%;\n  }\n}\n@-webkit-keyframes open-out-1  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 100% 0px;\n  } 35%  {\n  transform: scaleX(0.9) translateX(-5px);\n  transform-origin: 100% 0px;\n  } 100%  {\n  transform: scaleX(0) translateX(5px);\n  transform-origin: 100% 0px;\n  }\n}\n@-webkit-keyframes open-out-2  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 0px 0px;\n  } 35%  {\n  transform: scaleX(0.9) translateX(5px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(0) translateX(-5px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-in-1  {\n  0%  {\n  transform: scaleY(0) translateY(-10px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleY(1) translateY(0px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-in-2  {\n  0%  {\n  transform: scaleX(0) translateX(-10px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes title-bar  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0px;\n  } 50%  {\n  transform: scaleX(0);\n  transform-origin: 100% 0px;\n  } 50.0001%  {\n  transform: scaleX(0);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes scroll-wheel  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 1;\n  } 35%  {\n  transform: translate3d(0px, 7px, 0px);\n  opacity: 1;\n  } 50%  {\n  transform: translate3d(0px, 10px, 0px);\n  opacity: 0;\n  } 50.001%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 0;\n  } 80%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout colors copy components match; all keyframes present"},{"id":"awd-locomotive","name":"Locomotive","agency":"Locomotive","year":2022,"award":"Awwwards","theme":"作品集 / 平滑滚动","tech":["Lenis"],"link":"https://locomotive.ca","accent":"#f97316","kind":"proj","fw":[],"vendor":"Locomotive","img":"previews/awd-locomotive.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — locomotive.ca (Real Site Screenshot)\n\nGoal: single self-contained HTML file recreating the above-the-fold of https://locomotive.ca (1280x820). This is the actual live site, NOT an Awwwards card.\n\nBrand & vibe: Locomotive® — Montreal web agency. Bold, brutalist, experimental typography. Black background, white serif text with glitch/artistic effects. Minimal but striking.\n\nLayout (top to bottom at 1280x820):\n- Background: pure black `#000000`\n- Top nav bar (height ~60px): \n  - Left: \"**Locomotive®**\" wordmark in white serif, ~18px\n  - Center-left: small icon/emoji (🍺 or similar symbol)\n  - Center-right: \"Work, Agency, Careers, Store\" in white, ~13px, sans-serif\n  - Right: \"Let's talk\" in white, ~14px\n- Hero stage: massive glitch-style \"**Locomotive**\" text centered or slightly offset, in large white serif font (~140px+), with scattered artifacts around it like \"®\", \"50.\", \"→0-\", \"←\" symbols overlapping/breaking through. This is the visual centerpiece.\n- Bottom area (~80px from bottom):\n  - Left: a bordered box showing \"OPS / DES / DEV\" stacked vertically, thin border\n  - Right of box: \"**Locomotive®**\" in serif + \"**Digital-first Design Agency**\" + \"*LOCO*\" in monospace/small\n\nTypography: Serif for main brand (Georgia/Times), system-ui/sans-serif for nav.\nColors: Black bg (#000), white text (#fff).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)、Smooth-scroll (Lenis/Locomotive)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.c-preloader_logo` → animation: preloaderAppear 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 normal backwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.c-preloader` → transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-header_bg` → transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-header` → transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-video-modal_inner` → transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.cm.cm--box` → transition: opacity, visibility, transform 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `button.cc__link` → transition: background-size, color 0.25s, 0.25s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.c-header_logo`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-header-menu_link`:\n  **hover:** color: currentcolor; text-decoration: underline\n  **focus:** color: currentcolor\n- `.c-header_cta`:\n  **hover:** color: currentcolor; text-decoration: underline\n  **focus:** color: currentcolor\n- `-visible`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-menu_langswitcher`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-button`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-featured-links_link`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes preloaderAppear  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9) translate3d(0px, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1) translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes shake  {\n  10%, 90%  {\n  transform: translateX(-0.0625em);\n  } 20%, 80%  {\n  transform: translateX(0.125em);\n  } 30%, 50%, 70%  {\n  transform: translateX(-0.25em);\n  } 40%, 60%  {\n  transform: translateX(0.25em);\n  }\n}\n@keyframes fall  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  animation-timing-function: ease-out;\n  } 70%  {\n  opacity: 1;\n  transform: scale(1.1);\n  animation-timing-function: ease-in-out;\n  } 100%  {\n  transform: scale(1);\n  animation-timing-function: ease-out;\n  }\n}\n@keyframes featuredProjectsAllFlash  {\n  0%, 25%  {\n  content: \"\";\n  } 26%, 50%  {\n  content: \"🔺\";\n  } 51%, 75%  {\n  content: \"\";\n  } 76%, 100%  {\n  content: \"🕳\";\n  }\n}\n@keyframes lisaDisclaimerFlash  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes lisaDisclaimerProcedure  {\n  0%, 50%  {\n  text-decoration: underline;\n  } 51%, 100%  {\n  text-decoration: none;\n  }\n}\n@keyframes lisaLoader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes lisaCursor  {\n  0%  {\n  opacity: 1;\n  } 49%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"brutalist glitch layout matches preview; all 9 keyframes present"},{"id":"awd-huge","name":"Huge Inc","agency":"Huge","year":2021,"award":"Awwwards","theme":"数字代理","tech":["Web"],"link":"https://www.hugeinc.com","accent":"#f43f5e","kind":"proj","fw":[],"vendor":"Huge","img":"previews/awd-huge.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — hugeinc.com (Real Site Screenshot)\n\nGoal: single self-contained HTML file recreating the above-the-fold of https://www.hugeinc.com (1280x820). This is the actual live site.\n\nBrand & vibe: Huge — A design and technology company. Bold, modern, split-screen aesthetic. Black/dark background with a central white column containing a 3D pink element. Clean typography.\n\nLayout:\n- Three-column split viewport at 1280x820:\n  - Left ~33%: dark/black bg (#1a1a1a or #222), large \"**We**\" in white sans-serif (~80px), vertically centered. Top-left corner: small \"Huge Menu\" pill button (dark red/maroon bg like #a02040 or #8b1a3d, small white text).\n  - Center ~34%: pure **white** background, contains a pink/magenta 3D cube (isometric CSS cube) with \"**Huge**\" text overlaid in black bold font centered on it. The cube should look 3D/isometric.\n  - Right ~33%: dark/black bg matching left, large \"**are**\" in white sans-serif (~80px), vertically centered. Top-right: faint \"**Let's talk**\" text in dim white.\n- Typography: system sans-serif (ui-sans-serif, -apple-system). Bold, clean, minimal.\n- The 3D cube: use CSS transforms for an isometric box effect. Fill color: bright magenta/pink (#ff2e88 or similar). Add subtle shadow/edge lines.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `main.__variable_0b82bf.linear` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.js-theme-wrapper.transition-all` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.relative.size-[56px]` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.js-faces-wrapper.h-full` → transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1)\n- `div.grecaptcha-badge` → transition: right 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.mktoForm *`:\n  **hover:** color: white !important; box-shadow: rgb(14, 52, 73) 0px 0px 0px 1px !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; outline: none!important\n  **active:** background-color: rgb(117, 174, 76); background-image: linear-gradient(rgb(117, 174, 76), rgb(153, 196, 124))\n  **focus:** outline-color: rgb(0, 255, 117) !important; outline: 1px auto blue!important; border-top-color: rgb(68, 127, 25); border-right-color: rgb(68, 127, 25); border-bottom-color: rgb(68, 127, 25); border-left-color: rgb(68, 127, 25)\n  **focus-visible:** outline: 1px auto blue!important\n- `.mktoButton`:\n  **focus:** outline-color: rgb(0, 255, 117) !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ani-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-up  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes moveAndFade  {\n  0%, 100%  {\n  transform: translate(0px, 0px);\n  opacity: 1;\n  } 50%  {\n  transform: translate(10px, -5px);\n  opacity: 0;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"3-column split layout with pink 3D cube matches preview; all keyframes present"},{"id":"awd-antinomy","name":"Antinomy","agency":"Antinomy","year":2023,"award":"Awwwards","theme":"实验","tech":["WebGL"],"link":"https://antinomy.studio","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Antinomy","img":"previews/awd-antinomy.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — antinomy.studio Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Antinomy (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark teal-cyan-to-black gradient: `radial-gradient(ellipse at top left, #0a4a4a, #052222 55%, #021010)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Antinomy**\" white ~38px bold\n  - \"Antinomy · 2023\" light gray ~16px\n  - Badge pill: cyan fill (#1bb8b8), white \"Awwwards\", rounded-full\n  - Chinese: \"实验\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.pointer-events-auto.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `video.absolute.inset-0` → transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.type-link`:\n  **hover:** opacity: 1\n- `.md\\:ml-\\[calc\\(var\\(--gap\\)\\*-1\\)\\]`:\n  **focus:** outline: 2px dotted\n  **focus-visible:** outline: 2px dotted\n- `.focus-visible`:\n  **focus:** outline: 2px dotted\n  **focus-visible:** outline: 2px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate3d(calc(var(--marquee-width,100%)*var(--marquee-direction)),0,0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal gradient Awwwards card matches preview; marquee keyframe present"},{"id":"awd-qode","name":"Qode","agency":"Qode","year":2022,"award":"Awwwards","theme":"模板 / 作品集","tech":["GSAP"],"link":"https://qodeinteractive.com","accent":"#8b5cf6","kind":"proj","fw":[],"vendor":"Qode","img":"previews/awd-qode.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Qode\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to violet (#8b5cf6) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Qode\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Qode · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A violet rounded pill (#8b5cf6) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"模板 / 作品集\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)、Swiper。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.qodef-wrapper` → transition: left 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1)\n- `a` → transition: color, border 0.2s, 0.2s ease-out, ease-out 0s, 0s\n- `img.qodef-normal-logo` → transition: opacity 0.5s ease\n- `input.qodef-search-field` → transition: border-color 0.35s ease\n- `svg` → transition: opacity 0.2s ease-out\n- `span.item_text.qodef-no-info` → transition: background-size 0.5s cubic-bezier(0.51, 0.5, 0.07, 0.99)\n- `a` → transition: color 0.25s ease-out\n- `span.item_outer` → transition: padding 0.2s ease-in-out\n- `svg` → transition: opacity, transform, -webkit-transform 0.3s, 0.4s, 0.4s ease-out, cubic-bezier(0.39, 0.58, 0.57, 1), cubic-bezier(0.39, 0.58, 0.57, 1) 0s, 0s, 0s\n- `span.item_image` → transition: box-shadow, -webkit-box-shadow 0.3s, 0.3s cubic-bezier(0.39, 0.58, 0.57, 1), cubic-bezier(0.39, 0.58, 0.57, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.qodef-logo-wrapper a`:\n  **hover:** color: #000\n- `.qodef-tl-search-holder .qodef-search-field`:\n  **focus:** border-bottom-color: rgb(203, 203, 203)\n- `.qodef-main-menu ul li a`:\n  **hover:** color: #000\n- `.qodef-header-qode .qodef-page-header .item_image`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes blowUpContent  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 99.9%  {\n  transform: scale(2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes blowUpContentTwo  {\n  0%  {\n  transform: scale(2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes blowUpModal  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes blowUpModalTwo  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 50%  {\n  transform: scale(0.5);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  opacity: 0;\n  }\n}\n@keyframes affwp-spinner-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes affwp-spinner-dash  {\n  0%  {\n  stroke-dasharray: 1, 150;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -35;\n  } 100%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -124;\n  }\n}\n@keyframes edd-spinning  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes preload-background  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 100% 0px;\n  }\n}\n@-webkit-keyframes element-from-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(-20%, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(20%, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-top  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, -30%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-bottom  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, 30%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-bottom-short  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, 50px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"violet gradient Awwwards card with large Qode title matches; all 15 keyframes present"},{"id":"awd-cleave","name":"Cleave","agency":"Cleave","year":2023,"award":"Awwwards","theme":"创意","tech":["Three.js"],"link":"https://cleave.me","accent":"#34d399","kind":"proj","fw":[],"vendor":"Cleave","img":"previews/awd-cleave.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Cleave\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#34d399) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Cleave\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Cleave · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#34d399) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.x-el.x-el-div` → transition: background 0.3s ease\n- `div.x-el.x-el-div` → transition: all 1s ease-in\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.x *`:\n  **hover:** color: rgb(191, 191, 191); outline: 0; background-color: rgb(255, 255, 255)\n  **active:** outline: 0; color: rgb(219, 219, 219)\n  **focus:** box-shadow: currentcolor 0px 0px 0px 1px inset; color: rgb(127, 128, 128)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loaderscale  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 45%  {\n  transform: scale(0.1);\n  opacity: 0.7;\n  } 80%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes opacity-bounce  {\n  0%  {\n  opacity: 0;\n  transform: translateY(100%);\n  } 60%  {\n  transform: translateY(-20%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"green gradient Awwwards card matches preview; loaderscale+opacity-bounce keyframes present"},{"id":"awd-aristide","name":"Aristide","agency":"Aristide","year":2023,"award":"Awwwards","theme":"作品集","tech":["GSAP"],"link":"https://aristidebenoist.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Aristide","img":"previews/awd-aristide.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Aristide\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#60a5fa) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Aristide\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Aristide · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#60a5fa) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"作品集\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `span` → transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：全屏暗色渐变卡片与预览高度一致，金色奖杯图标、右上AWARD星标按钮、大标题Aristide（72px）、2023副标题、蓝色Awwwards胶囊、作品集文本及底部GSAP标签均正确还原。fade-in-up入场动画及cubic-bezier(0.25,0.46,0.45,0.94)过渡时序已包含。"},{"id":"awd-tolus","name":"Tolus","agency":"Tolus","year":2023,"award":"Awwwards","theme":"机构","tech":["WebGL"],"link":"https://tolus.studio","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Tolus","img":"previews/awd-tolus.png","prompt":""},{"id":"awd-crafted","name":"Crafted","agency":"Crafted","year":2022,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://crafted.works","accent":"#fb923c","kind":"proj","fw":[],"vendor":"Crafted","img":"previews/awd-crafted.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Crafted\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#fb923c) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Crafted\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Crafted · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#fb923c) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.animate-fade-up` → animation: fade-up 0.6s ease-out 1 normal both\n- `div.animate-fade-up.delay-100` → animation: fade-up 0.6s ease-out 0.1s 1 normal both\n- `div.animate-fade-up.delay-200` → animation: fade-up 0.6s ease-out 0.2s 1 normal both\n- `div.animate-fade-up.delay-300` → animation: fade-up 0.6s ease-out 0.3s 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(24px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.92);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes slide-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(-32px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes slide-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(32px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes float  {\n  0%, 100%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(-8px);\n  }\n}\n@keyframes pulse-glow  {\n  0%, 100%  {\n  opacity: 0.6;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-50%);\n  }\n}\n@keyframes scan-x  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes grain-drift  {\n  0%, 100%  {\n  transform: translate(0px);\n  } 50%  {\n  transform: translate(-1.5%, 1%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1通过：全屏暗色渐变卡片与预览高度一致，金色奖杯、AWARD按钮、Crafted大标题（72px）、2022副标题、橙色Awwwards胶囊（#fb923c）、创意文本及GSAP标签均正确还原。fade-up入场动画及全部关键帧（fade-in/scale-in/slide-right/float/pulse-glow/marquee等）已包含。"},{"id":"awd-hakuhodo","name":"Hakuhodo","agency":"Hakuhodo","year":2022,"award":"Awwwards","theme":"广告 / 创意","tech":["WebGL"],"link":"https://www.hakuhodo.fr","accent":"#ef4444","kind":"proj","fw":[],"vendor":"Hakuhodo","img":"previews/awd-hakuhodo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Hakuhodo\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#ef4444) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Hakuhodo\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Hakuhodo · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#ef4444) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"广告 / 创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `a:where(:not(.wp-element-button))`:\n  **focus:** background-color: rgb(238, 238, 238); color: rgb(68, 68, 68)\n- `:where(.wp-site-blocks )`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes overlay-menu__fade-in-animation  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.5em);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-fashionawards","name":"Fashion Awards","agency":"British Fashion Council","year":2023,"award":"Awwwards","theme":"时尚","tech":["Three.js"],"link":"https://fashionawards.com","accent":"#d946ef","kind":"proj","fw":[],"vendor":"British Fashion Council","img":"previews/awd-fashionawards.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Fashion Awards\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#d946ef) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Fashion Awards\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"British Fashion Council · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#d946ef) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"时尚\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.btn.btn-blue` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `a` → transition: all 0.5s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cookie-consent a`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255); background: #222222; background-color: rgb(195, 64, 138); border-color: #c3408a; border-top-color: rgb(195, 64, 138); border-right-color: rgb(195, 64, 138); border-bottom-color: rgb(195, 64, 138); border-left-color: rgb(195, 64, 138)\n  **focus:** outline: 0; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; background: #222222; color: rgb(255, 255, 255); background-color: rgb(195, 64, 138); border-color: #c3408a; border-top-color: rgb(195, 64, 138); border-right-color: rgb(195, 64, 138); border-bottom-color: rgb(195, 64, 138); border-left-color: rgb(195, 64, 138)\n- `.sr-only`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.navbar-brand`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.navbar-header .navbar-nav > li > a`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: rgb(0, 94, 184); text-decoration: underline\n- `.navbar-header .navbar-nav li > .dropdown-menu a`:\n  **hover:** color: #000; text-decoration: underline; background: #FAFAFA; background-color: rgb(250, 250, 250)\n  **focus:** color: #000; text-decoration: underline\n- `-visible`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.d-none`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.close`:\n  **hover:** color: #000; text-decoration: underline; opacity: 0.75\n  **focus:** color: #000; text-decoration: underline; opacity: 0.75\n- `.form-control`:\n  **focus:** color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: #80bdff; outline: 0 none; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; border-top-color: rgba(1, 1, 1, 0.5); border-right-color: rgba(1, 1, 1, 0.5); border-bottom-color: rgba(1, 1, 1, 0.5); border-left-color: rgba(1, 1, 1, 0.5)\n- `.search-active`:\n  **focus:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@-webkit-keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes sp-anime  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-cupra","name":"Cupra","agency":"Cupra","year":2023,"award":"Awwwards","theme":"汽车","tech":["WebGL"],"link":"https://www.cupra.fr","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Cupra","img":"previews/awd-cupra.png","prompt":""},{"id":"awd-volvo","name":"Volvo","agency":"Volvo","year":2023,"award":"Awwwards","theme":"汽车","tech":["WebGL"],"link":"https://www.volvocars.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Volvo","img":"previews/awd-volvo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Volvo\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#60a5fa) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Volvo\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Volvo · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#60a5fa) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"汽车\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-gucci","name":"Gucci","agency":"Gucci","year":2022,"award":"Awwwards","theme":"奢侈","tech":["GSAP"],"link":"https://www.gucci.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Gucci","img":"previews/awd-gucci.png","prompt":""},{"id":"awd-balenciaga","name":"Balenciaga","agency":"Balenciaga","year":2022,"award":"Awwwards","theme":"奢侈","tech":["WebGL"],"link":"https://www.balenciaga.com","accent":"#9ca3af","kind":"proj","fw":[],"vendor":"Balenciaga","img":"previews/awd-balenciaga.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Balenciaga\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#9ca3af) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Balenciaga\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Balenciaga · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#9ca3af) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"奢侈\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: gray radial gradient TL->BR, trophy TL 64px, Awwwards pill #9ca3af"},{"id":"awd-louisvuitton","name":"Louis Vuitton","agency":"Louis Vuitton","year":2023,"award":"Awwwards","theme":"奢侈","tech":["Three.js"],"link":"https://www.louisvuitton.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Louis Vuitton","img":"previews/awd-louisvuitton.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Louis Vuitton\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#c9a227) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Louis Vuitton\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Louis Vuitton · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#c9a227) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"奢侈\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: gold radial gradient TL->BR, trophy TL, Awwwards #c9a227"},{"id":"awd-apple","name":"Apple","agency":"Apple","year":2023,"award":"Awwwards","theme":"产品","tech":["WebGL"],"link":"https://www.apple.com","accent":"#9ca3af","kind":"proj","fw":[],"vendor":"Apple","img":"previews/awd-apple.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Apple Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Apple Awwwards gallery entry page at 1280×820px.\n\n## Overall Layout\n- Full viewport card: dark background `#1b1b1f` (near-black), filling entire 1280×820 area\n- Single centered content column feel — minimal, premium award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button with \"★ AWARD\" text\n  - Background: transparent, border: 1px solid rgba(255,255,255,0.25)\n  - Color: white/light gray ~`#ccc`\n  - Border-radius: 20px\n  - Padding: ~8px 18px\n  - Font-size: ~13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (centered vertically and horizontally)\n- Left-aligned block starting at x≈60px, vertically centered\n\n### Trophy Icon\n- Large gold trophy emoji/icon: 🏆 or golden trophy graphic\n- Size: ~48px, positioned above the title\n- Color: golden #D4AF37 or use emoji\n\n### Title\n- Text: \"Apple\"\n- Font-size: ~42–48px, font-weight: 700 (bold)\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, SF Pro Display, Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Apple · 2023\"\n- Font-size: ~17px\n- Color: light gray `#999` or `#aaa`\n- Font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill\n- Rounded pill/tag below subtitle: \"Awwwards\"\n  - Background: rgba(255,255,255,0.12)\n  - Color: white `#eee`\n  - Border-radius: 20px\n  - Padding: 6px 18px\n  - Font-size: ~14px\n  - Display: inline-block\n  - Margin-top: 14px\n\n### Category Label\n- Text: \"产品\" (Chinese for \"Product\")\n- Font-size: ~15px\n- Color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- Bottom-left area: small rounded rectangle \"WebGL\"\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`\n  - Border-radius: 8px\n  - Padding: 8px 16px\n  - Font-size: ~13px\n  - Position: absolute bottom-left, margin ~28px\n\n## Typography\n- System font stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif\n- Clean, minimal — lots of whitespace\n\n## Vibe\n- Premium, minimal, dark-mode award showcase\n- High contrast white on near-black\n- Generous spacing between elements\n- No clutter — only essential info displayed\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h2.globalnav-searchresults-header` → animation: globalnav-search-fade-and-slide 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.2s 1 normal both\n- `li.globalnav-searchresults-list-item` → animation: globalnav-search-fade-and-slide 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.22s 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `aside` → transition: background-color 0.24s cubic-bezier(0.4, 0, 0.6, 1)\n- `div.ac-ls-dropdown-select` → transition: background-color, border-color 0.24s, 0.24s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1) 0s, 0s\n- `button.ac-ls-close.ac-ls-actions-item` → transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1)\n- `span.globalnav-image-regular.globalnav-submenu-button-icon` → transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1)\n- `h2.globalnav-submenu-header` → transition: opacity, transform 0.32s ease 0.08s\n- `li.globalnav-submenu-list-item-elevated` → transition: opacity, transform 0.24s ease\n- `button.globalnav-searchfield-reset` → transition: opacity, fill, visibility 0.32s, 0.32s, 0.32s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), steps(1) 0s, 0s, 0s\n- `button.globalnav-searchfield-submit` → transition: fill 0.32s cubic-bezier(0.4, 0, 0.6, 1)\n- `a.globalnav-searchresults-list-link` → transition: color, background-color, fill 0.02s, 0.02s, 0.02s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1) 0s, 0s, 0s\n- `div.globalnav-bag-wrapper` → transition: opacity, visibility 0.24s, 0.24s cubic-bezier(0.4, 0, 0.6, 1), steps(1, start) 0.08s, 0.08s\n- `div.globalnav-curtain` → transition: opacity, visibility 0.32s, 0.32s cubic-bezier(0.4, 0, 0.6, 1), steps(1) 0.08s, 0.08s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `#ac-localeswitcher .ac-ls-actions-item`:\n  **hover:** text-decoration: underline; color: #000\n  **focus:** color: #000\n- `#globalnav .globalnav-link`:\n  **hover:** text-decoration: underline\n- `.globalnav-image-regular`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n- `#globalnav .globalnav-submenu-link`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes globalnav-chevron-slide-in-hover  {\n  0%  {\n  opacity: 0;\n  transform: translate(-4px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-chevron-hover-off  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n@keyframes globalnav-flyout-slide-forward-next  {\n  0%  {\n  opacity: 0;\n  transform: translate(8px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-flyout-slide-forward-previous  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-8px);\n  }\n}\n@keyframes globalnav-flyout-slide-back-previous  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(8px);\n  }\n}\n@keyframes globalnav-flyout-slide-back-next  {\n  0%  {\n  opacity: 0;\n  transform: translate(-8px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-scrim-height-change  {\n  0%  {\n  height: var(--r-globalnav-previous-flyout-height);\n  } 100%  {\n  height: var(--r-globalnav-next-flyout-height);\n  }\n}\n@keyframes globalnav-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes globalnav-search-fade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-fade-and-slide  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(var(--r-globalnav-search-shift-vertical) * -1));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-fade-and-slide-to-close  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(var(--r-globalnav-search-shift-vertical) * -1));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-slide-top-to-bottom  {\n  0%  {\n  transform: translateY(calc(var(--r-globalnav-suggested-links-height) * -1));\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-slide-bottom-to-top  {\n  0%  {\n  transform: translateY(var(--r-globalnav-suggested-links-height));\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-input-intro  {\n  0%  {\n  opacity: 0;\n  transform: translateY(var(--r-globalnav-search-input-vertical-shift));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: near-black #1b1b1f, no trophy, translucent Awwwards, 14 globalnav kf"},{"id":"awd-cybernauts","name":"cybērnauts","agency":"Cybernauts","year":2023,"award":"Awwwards","theme":"创意","tech":["WebGL"],"link":"https://cybernauts.studio","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Cybernauts","img":"previews/awd-cybernauts.png","prompt":""},{"id":"awd-instrument","name":"Instrument","agency":"Instrument","year":2022,"award":"Awwwards","theme":"数字代理","tech":["WebGL"],"link":"https://instrument.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Instrument","img":"previews/awd-instrument.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Instrument Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Instrument Awwwards gallery entry at 1280×820px.\n\n## Overall Layout\n- Full viewport: dark blue gradient background, filling entire 1280×820 area\n- Background: linear gradient from ~`#1a1e2e` (top-left) to ~`#12151f` (bottom-right) — deep navy/dark blue tone\n- Premium minimal award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button \"★ AWARD\"\n  - Border: 1px solid rgba(255,255,255,0.22)\n  - Color: `#bbb`\n  - Border-radius: 20px, padding: 8px 18px\n  - Font-size: 13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (left-aligned, vertically centered)\n- Starting at x≈60px, vertically centered via transform\n\n### Trophy Icon\n- Golden trophy emoji 🏆, size ~48px\n\n### Title\n- Text: \"Instrument\"\n- Font-size: ~42–46px, font-weight: 700\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, 'Instrument-Sans', Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Instrument · 2022\"\n- Font-size: ~17px, color: `#999`, font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill — \"Awwwards\"\n- Filled blue/cyan-ish pill (NOT transparent like Apple's)\n  - Background: `#3b82f6` or similar bright blue\n  - Color: white `#fff`\n  - Border-radius: 20px, padding: 7px 20px\n  - Font-size: 14px\n  - Display: inline-block, margin-top: 14px\n\n### Category Label\n- Text: \"数字代理\" (Digital Agency)\n- Font-size: ~15px, color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- \"WebGL\" badge at bottom-left\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`, border-radius: 8px\n  - Padding: 8px 16px, font-size: 13px\n  - Absolute position bottom-left, margin ~28px\n\n## Typography & Vibe\n- System fonts, clean, lots of whitespace\n- Deep navy-blue dark mode feel\n- High contrast white text on dark\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Swiper。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.gdpr` → transition: background-color 0.35s ease-in-out\n- `p` → transition: color 0.35s ease-in-out\n- `span.shape` → transition: background-color, color, transform, outline 0.25s, 0.25s, 0.15s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `span.label` → transition: color 0.25s ease-in-out\n- `div.page-scrim` → transition: background-color 0.4s ease-out\n- `header.global-header.global-header--large` → transition: transform, background-color, color 0.2s, 0.35s, 0.35s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `div.marquee` → transition: transform 0.3s ease-in-out\n- `p` → transition: transform, opacity, color 0.3s, 0.3s, 0.35s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `div.global-logo` → transition: opacity, transform 0.3s, 0.3s linear, linear 0s, 0s\n- `path` → transition: fill 0.35s ease-in-out\n- `div.video-clip.video-clip--rounded-corners` → transition: opacity 0.33s ease\n- `div.play-icon` → transition: scale 0.15s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.gdpr__content p a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.button-large`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `-visible`:\n  **active:** transform: translate(0px)\n  **focus:** outline: 5px auto Highlight; transform: translate(0px)\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.abacus`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large__primary__nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.nav-item`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.nav-item-with-dropdown .dropdown-links`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large__secondary__nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-logo a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .mini-menu`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .mini-menu a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .menu-button`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-small__links`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `li`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-nav-small__submenu`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-nav-small__submenu a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-small__social`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.large-logo a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-feature .video-link`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-clip`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-clip__controls button`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes splide-loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes dropdownScale  {\n  0%  {\n  opacity: 0;\n  transform: scale(0);\n  } 80%  {\n  transform: scale(1.07);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes enter-bullet-progress  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 100%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: navy gradient, no trophy, blue #3b82f6 Awwwards, 3 kf"},{"id":"awd-field","name":"Field.io","agency":"Field","year":2022,"award":"Awwwards","theme":"创意","tech":["Three.js"],"link":"https://field.io","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Field","img":"previews/awd-field.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Field.io Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Field.io Awwwards gallery entry at 1280×820px.\n\n## Overall Layout\n- Full viewport: dark teal/cyan gradient background, filling entire 1280×820 area\n- Background: linear gradient from ~`#0f2027` through `#1a3a3a` to ~`#142a2a` — deep teal/dark cyan tone with subtle greenish-blue shift\n- Premium minimal award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button \"★ AWARD\"\n  - Border: 1px solid rgba(255,255,255,0.22)\n  - Color: `#bbb`\n  - Border-radius: 20px, padding: 8px 18px\n  - Font-size: 13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (left-aligned, vertically centered)\n- Starting at x≈60px, vertically centered via transform\n\n### Trophy Icon\n- Golden trophy emoji 🏆, size ~48px\n\n### Title\n- Text: \"Field.io\"\n- Font-size: ~42–46px, font-weight: 700\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, 'DM Sans', Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Field · 2022\"\n- Font-size: ~17px, color: `#999`, font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill — \"Awwwards\"\n- Filled bright cyan/teal pill\n  - Background: `#06b6d4` or `#22d3ee` — vivid cyan-teal\n  - Color: white `#fff` (or very dark for contrast)\n  - Border-radius: 20px, padding: 7px 20px\n  - Font-size: 14px\n  - Display: inline-block, margin-top: 14px\n\n### Category Label\n- Text: \"创意\" (Creative)\n- Font-size: ~15px, color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- \"Three.js\" badge at bottom-left (NOT WebGL)\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`, border-radius: 8px\n  - Padding: 8px 16px, font-size: 13px\n  - Absolute position bottom-left, margin ~28px\n\n## Typography & Vibe\n- System/DM Sans fonts, clean\n- Deep teal-cyan dark mode feel\n- High contrast white on dark\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.relative.transition-opacity` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.bottom-4` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hover\\:opacity-100`:\n  **hover:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: teal-cyan gradient, no trophy, cyan #06b6d4 Awwwards, Three.js"},{"id":"awd-animade","name":"Animade","agency":"Animade","year":2021,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://animade.tv","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Animade","img":"previews/awd-animade.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Animade\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent pink (#f472b6) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Animade\", then a smaller muted-white subtitle \"Animade · 2021\" underneath.\n- Below the subtitle: a rounded pill with the accent pink background (#f472b6) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"创意\".\n- Bottom-left: a small dark gray pill with the tech tag \"GSAP\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.transition-opacity.duration-100` → transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.bottom-8` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.\\~h-4\\/8`:\n  **hover:** opacity: 0.8\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes block-fall  {\n  0%  {\n  transform: translateY(-0.5em) rotate(3deg);\n  opacity: 1;\n  } 30%  {\n  transform: translateY(0px) rotate(-4deg);\n  opacity: 1;\n  } 50%  {\n  transform: translateY(-0.1em) rotate(0.5deg);\n  opacity: 1;\n  } 65%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  } 80%  {\n  transform: translateY(-0.01em) rotate(-0.03deg);\n  opacity: 1;\n  } 90%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  }\n}\n@keyframes letter-jump  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 50%  {\n  transform: translateY(-20px) scale(1.1);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes mapboxgl-user-location-dot-pulse  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 70%  {\n  opacity: 0;\n  transform: scale(3);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: pink glow TR, trophy TL, pink #f472b6 Awwwards, GSAP, 4 kf"},{"id":"awd-unseen","name":"Unseen","agency":"Unseen","year":2023,"award":"Awwwards","theme":"机构","tech":["WebGL"],"link":"https://unseen.co","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Unseen","img":"previews/awd-unseen.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Unseen\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent purple (#a78bfa) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Unseen\", then a smaller muted-white subtitle \"Unseen · 2023\" underneath.\n- Below the subtitle: a rounded pill with the accent purple background (#a78bfa) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"机构\".\n- Bottom-left: a small dark gray pill with the tech tag \"WebGL\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.loader__progress.js-loader-progress` → transition: transform 1s ease-out\n- `svg` → transition: fill 0.5s ease-out\n- `a.nav-item.js-nav-item` → transition: color 0.5s ease-out\n- `span` → transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.footer__cta.z-50` → transition: opacity, visibility 0.5s, 0.5s ease-out, ease-out 0s, 0s\n- `button.project-filters__filter__button.|` → transition: all 0.4s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loader  {\n  0%  {\n  transform: rotateY(0deg) rotateX(0deg);\n  } 16.6%  {\n  transform: rotateY(90deg) rotateX(0deg);\n  } 33.3%  {\n  transform: rotateY(90deg) rotateX(0deg) rotate(90deg);\n  } 50%  {\n  transform: rotateY(180deg) rotateX(0deg) rotate(90deg);\n  } 66.6%  {\n  transform: rotateY(180deg) rotateX(-90deg) rotate(90deg);\n  } 83.3%  {\n  transform: rotateY(270deg) rotateX(-90deg) rotate(90deg);\n  } 100%  {\n  transform: rotateY(270deg) rotateX(-90deg) rotate(90deg) rotateX(90deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: purple glow TR, trophy TL, purple #a78bfa Awwwards, WebGL, loader kf"},{"id":"awd-haus","name":"Haus","agency":"Haus","year":2023,"award":"Awwwards","theme":"品牌","tech":["Three.js"],"link":"https://haus.studio","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Haus","img":"previews/awd-haus.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Haus\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent amber (#f59e0b) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Haus\", then a smaller muted-white subtitle \"Haus · 2023\" underneath.\n- Below the subtitle: a rounded pill with the accent amber background (#f59e0b) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"品牌\".\n- Bottom-left: a small dark gray pill with the tech tag \"Three.js\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 4 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.HomeHero-module-scss-module__rmqSqW__heroCtaSubmitShimmer` → animation: HomeHero-module-scss-module__rmqSqW__heroCtaShimmerLoop 3.6s cubic-bezier(0.37, 0, 0.63, 1) infinite normal\n- `span.InlineCyclingText-module-scss-module__XWGnpG__item.InlineCyclingText-module-scss-module__XWGnpG__outgoing` → animation: InlineCyclingText-module-scss-module__XWGnpG__cycleTextOut 0.48s cubic-bezier(0.65, 0, 0.35, 1) 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: opacity 0.36s ease-in-out\n- `g` → transition: transform 0.72s ease-in-out\n- `span.SiteHeader-module-scss-module__WyOjBa__introItem` → transition: opacity 0.72s ease-in-out\n- `div.HomeHero-module-scss-module__rmqSqW__lineIn` → transition: opacity, transform 0.62s, 0.76s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s\n- `label.HomeHero-module-scss-module__rmqSqW__heroCtaInputShell` → transition: background-color, outline-color 0.16s, 0.12s ease, ease 0s, 0s\n- `button.HomeHero-module-scss-module__rmqSqW__heroCtaSubmit` → transition: background-color, box-shadow, color, text-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `section.HomeHero-module-scss-module__rmqSqW__heroShell.HomeHero-module-scss-module__rmqSqW__heroShellFixed` → transition: height, top, width 0.65s, 0.65s, 0.65s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s\n- `span.InlineCyclingText-module-scss-module__XWGnpG__root` → transition: width 0.48s cubic-bezier(0.65, 0, 0.35, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.SiteHeader-module-scss-module__WyOjBa__cta`:\n  **hover:** filter: brightness(1.05)\n- `.HomeHero-module-scss-module__rmqSqW__heroCtaInputShell`:\n  **hover:** background-color: rgba(255, 255, 255, 0.72)\n  **focus:** background-color: rgba(255, 255, 255, 0.72)\n- `.HomeHero-module-scss-module__rmqSqW__heroCtaSubmit`:\n  **hover:** background-color: rgba(255, 255, 255, 0.64); box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px\n  **active:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n  **focus:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n  **focus-visible:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n- `.SiteIntentCards-module-scss-module___uknfG__option`:\n  **hover:** background: #ffffff24; border-color: #ffffff6b; background-color: rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.42); border-right-color: rgba(255, 255, 255, 0.42); border-bottom-color: rgba(255, 255, 255, 0.42); border-left-color: rgba(255, 255, 255, 0.42)\n  **focus:** outline: 2px solid #ffffffb8; outline-color: rgba(255, 255, 255, 0.72)\n  **focus-visible:** outline: 2px solid #ffffffb8; outline-color: rgba(255, 255, 255, 0.72)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes body-copy-link-underline  {\n  0%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 48%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 48.01%  {\n  transform-origin: 0% center;\n  transform: scaleX(0);\n  } 100%  {\n  transform-origin: 0% center;\n  transform: scaleX(1);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaCaretBlink  {\n  0%, 49%  {\n  opacity: 1;\n  } 50%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaShimmerLoop  {\n  0%, 25%  {\n  transform: translate(0%, 0px);\n  } 75%, 100%  {\n  transform: translate(-80%);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaShimmerHover  {\n  0%  {\n  transform: translate(0%, 0px);\n  } 100%  {\n  transform: translate(-80%);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__resumeBackdropIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__resumeCardIn  {\n  0%  {\n  opacity: 0;\n  transform: translateY(14px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes InlineCyclingText-module-scss-module__XWGnpG__cycleTextOut  {\n  0%  {\n  transform: rotateX(0deg)translateZ(var(--cycle-depth));\n  opacity: 1;\n  } 22%  {\n  opacity: 0.92;\n  } 58%  {\n  opacity: 0.42;\n  } 100%  {\n  transform: rotateX(90deg)translateZ(var(--cycle-depth));\n  opacity: 0;\n  }\n}\n@keyframes InlineCyclingText-module-scss-module__XWGnpG__cycleTextIn  {\n  0%  {\n  transform: rotateX(-90deg)translateZ(var(--cycle-depth));\n  opacity: 0;\n  } 28%  {\n  opacity: 0.18;\n  } 62%  {\n  opacity: 0.72;\n  } 100%  {\n  transform: rotateX(0deg)translateZ(var(--cycle-depth));\n  opacity: 1;\n  }\n}\n@keyframes SectionCta-module-scss-module__0uCM1q__sectionCtaStem  {\n  0%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 18%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 19%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 28%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 50%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 100%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  }\n}\n@keyframes SectionCta-module-scss-module__0uCM1q__sectionCtaWingTop  {\n  0%, 18%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(1);\n  transform-origin: 0px center;\n  } 28%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 50% center;\n  } 29%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 0px center;\n  } 50%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 0px center;\n  } 100%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(1);\n  transform-origin: 0px center;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: amber glow top, trophy TL, amber #f59e0b Awwwards, Three.js, 10 kf"},{"id":"awd-buck","name":"Buck","agency":"Buck","year":2022,"award":"Awwwards","theme":"创意","tech":["WebGL"],"link":"https://buck.co","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Buck","img":"previews/awd-buck.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Buck\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent blue (#60a5fa) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Buck\", then a smaller muted-white subtitle \"Buck · 2022\" underneath.\n- Below the subtitle: a rounded pill with the accent blue background (#60a5fa) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"创意\".\n- Bottom-left: a small dark gray pill with the tech tag \"WebGL\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.chakra-link.css-fekwcv` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-fekwcv`:\n  **hover:** opacity: 0.5\n- `.css-xyt3i0`:\n  **hover:** opacity: 0.5\n- `.css-6lfkev`:\n  **hover:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes nprogress-spinner  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: blue glow TR, trophy TL, blue #60a5fa Awwwards, WebGL, nprogress kf"},{"id":"awd-raggededge","name":"Ragged Edge","agency":"Ragged Edge","year":2022,"award":"Awwwards","theme":"品牌","tech":["Web"],"link":"https://raggededge.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Ragged Edge","img":"previews/awd-raggededge.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Ragged Edge\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent emerald (#34d399) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Ragged Edge\", then a smaller muted-white subtitle \"Ragged Edge · 2022\" underneath.\n- Below the subtitle: a rounded pill with the accent emerald background (#34d399) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"品牌\".\n- Bottom-left: a small dark gray pill with the tech tag \"Web\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.c-nav__link.is-current` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.c-nav__link`:\n  **hover:** background-color: rgb(150, 235, 235); color: rgb(24, 31, 31)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes mmfadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes mmfadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes mmslideIn  {\n  0%  {\n  transform: translateY(15%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes mmslideOut  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-10%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: emerald glow TR, trophy TL, emerald #34d399 Awwwards, Web, 5 kf"},{"id":"awd-velvet","name":"Velvet","agency":"Velvet","year":2023,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://velvet.studio","accent":"#fb7185","kind":"proj","fw":[],"vendor":"Velvet","img":"previews/awd-velvet.png","prompt":""},{"id":"awd-bureau-borsche","name":"Bureau Borsche","agency":"Bureau Borsche","year":2022,"award":"Awwwards","theme":"设计","tech":["WebGL"],"link":"https://bureau-borsche.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Bureau Borsche","img":"previews/awd-bureau-borsche.png","prompt":""},{"id":"awd-studio-lumio","name":"Studio Lumio","agency":"Lumio","year":2023,"award":"Awwwards","theme":"工作室","tech":["Three.js"],"link":"https://studiolumio.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Lumio","img":"previews/awd-studio-lumio.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Studio Lumio\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent emerald (#34d399) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Studio Lumio\", then a smaller muted-white subtitle \"Lumio · 2023\" underneath (agency is \"Lumio\", not the full title).\n- Below the subtitle: a rounded pill with the accent emerald background (#34d399) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"工作室\".\n- Bottom-left: a small dark gray pill with the tech tag \"Three.js\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 4 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span` → transition: transform 0.3s ease\n- `a.header_back__Uh_eP` → transition: all 0.3s ease 0.3s\n- `a.header_header-nav-link__wcp3a.header-links` → transition: color 0.3s ease\n- `a.header_header-nav-e__o30ZB.header-links` → transition: background, padding-right 0.3s, 0.3s ease, ease 0s, 0s\n- `a` → transition: background-color, color 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.header_header-left__veLJX .header_back__Uh_eP`:\n  **hover:** transform: translateX(0px)\n- `.header_header-nav-link-svg__AoJfZ`:\n  **hover:** transform: scale(1)\n- `.header_header-nav-link-label__k0OWZ`:\n  **hover:** transform: translateX(0px)\n- `.header_header-nav-e-svg__vrP6n`:\n  **hover:** transform: scale(1)\n- `.header_header-nav-e-ar__LXduv`:\n  **hover:** transform: scale(0)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Image_dots__2nrHk  {\n  0%  {\n  box-shadow: 22.4px 0px, -22.4px 0px;\n  } 33%  {\n  box-shadow: 22.4px 0px, rgba(249, 143, 114, 0.13) -22.4px 0px;\n  background: rgba(249, 143, 114, 0.13);\n  } 66%  {\n  box-shadow: rgba(249, 143, 114, 0.13) 22.4px 0px, -22.4px 0px;\n  background: rgba(249, 143, 114, 0.13);\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: emerald glow TR, trophy TL, emerald Awwwards, Three.js, 7 kf"},{"id":"awd-buzzed","name":"Buzzed","agency":"Buzzed","year":2023,"award":"Awwwards","theme":"互动","tech":["WebGL"],"link":"https://buzzed.studio","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Buzzed","img":"previews/awd-buzzed.png","prompt":""},{"id":"awd-verve","name":"Verve","agency":"Verve","year":2023,"award":"Awwwards","theme":"音乐","tech":["WebGL"],"link":"https://verve.com","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Verve","img":"previews/awd-verve.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Verve Award Card (Above-the-Fold)\n\n## Overall Layout\nA single full-screen award showcase card on a dark deep-purple background. 1280x820 viewport, content centered in the viewport with generous padding.\n\n## Background\n- Solid deep purple: `#1a1035` or similar very dark navy-purple (almost black-purple)\n\n## Header / Top Bar\n- Top-right corner: An \"AWARD\" badge/pill\n  - Rounded capsule shape (pill)\n  - Border: thin light purple/white-ish outline\n  - Inside text: star icon + \"AWARD\" in small caps\n  - Color: light lavender text on transparent/dark bg\n  - Font size: ~13px\n\n## Main Content Area (centered vertically and horizontally)\nLeft-aligned content block positioned roughly at center-left of viewport:\n\n1. **Trophy icon**: A golden trophy (🏆 or gold SVG trophy), roughly 48-56px, placed above the title\n\n2. **Title**: \"Verve\"\n   - Font: System sans-serif (SF Pro / -apple-system), bold/heavy weight\n   - Size: ~42-48px\n   - Color: White (`#ffffff`)\n   - Letter-spacing slightly tight\n\n3. **Subtitle**: \"Verve · 2023\"\n   - Font: system sans-serif, regular weight\n   - Size: ~18px\n   - Color: Light gray/lavender (`#b0a0c0` or similar muted purple-gray)\n   - Positioned directly below title with small gap (~8px)\n\n4. **Badge/Pill Button**: \"Awwwards\"\n   - Pill/capsule shape\n   - Background: Medium purple (`#7b5cd0` or similar)\n   - Text: White, ~14-15px, medium weight\n   - Border-radius: Full pill (~20-24px)\n   - Padding horizontal ~20px, vertical ~8px\n   - Positioned below subtitle with gap ~16px\n\n5. **Description text**: \"音乐\"\n   - Font: system sans-serif, regular\n   - Size: ~14-15px\n   - Color: Muted light gray/purple (`#9999aa`)\n   - Below the Awwwards pill, gap ~12px\n\n6. **Tag/Badge (bottom-left area)**: \"WebGL\"\n   - Small rounded rectangle tag\n   - Background: Darker purple/blackish (`#251540` or similar)\n   - Border: subtle thin border\n   - Text: White/light gray, ~12-13px\n   - Padding: ~6px 14px\n   - Border-radius: ~6-8px\n   - Positioned lower on the page, below description\n\n## Typography\n- System font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\n- Clean, modern, minimal aesthetic\n\n## Colors Summary\n- Page BG: `#1a1035` (deep purple-black)\n- Title: `#ffffff`\n- Subtitle: `#b0a0c0`\n- Awwwards pill BG: `#7b5cd0`, text: `#ffffff`\n- Description: `#9999aa`\n- Award badge border/text: `#9080b0`\n- Tag BG: `#251540`, text: `#ccc0dd`\n\n## Spacing & Vibe\n- Generous whitespace around content\n- Content vertically centered, left-aligned within center zone\n- Premium awards-showcase feel — minimal, elegant, dark-mode aesthetic\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、GSAP ScrollTrigger、Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 <canvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.initial.not-bottom` → transition: box-shadow, max-width, border-radius 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)\n- `nav.navbar.navbar-expand-lg` → transition: grid-template-columns, padding 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)\n- `a.nav-link.dropdown-toggle` → transition: color, background-color, border-color, box-shadow, opacity 0.12s, 0.12s, 0.12s, 0.12s, 0.12s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s\n- `svg` → transition: color, background-color, border-color, box-shadow, opacity, all 0.12s, 0.12s, 0.12s, 0.12s, 0.12s, 0.2s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s, 0s\n- `a.btn.btn-primary` → transition: color, background-color, border-color, box-shadow, opacity 0.42s, 0.42s, 0.42s, 0.42s, 0.42s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.d-flex`:\n  **hover:** text-decoration: underline\n- `.has-small-font-size`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.navbar-brand`:\n  **hover:** text-decoration: underline\n- `.navbar-toggler`:\n  **focus:** outline: 0\n- `.nav-link`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.dropdown-item`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes logo-marquee  {\n  0%  {\n  transform: translate3d(var(--anim-start),0,0);\n  } 100%  {\n  transform: translate3d(var(--anim-end),0,0);\n  }\n}\n@keyframes main-menu-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes dropdown-in-y  {\n  0%  {\n  transform: rotateX(-10deg) translateY(-0.25rem);\n  opacity: 0;\n  } 75%  {\n  opacity: 1;\n  } 100%  {\n  transform: rotateX(0deg) translateY(0px);\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes otFloatingBtnIntro  {\n  0%  {\n  opacity: 0;\n  left: -75px;\n  } 100%  {\n  opacity: 1;\n  left: 1%;\n  }\n}\n@keyframes otFloatingBtnImageIntro  {\n  0%  {\n  opacity: 0;\n  transform: scale(0) rotate(-270deg);\n  } 100%  {\n  opacity: 1;\n  transform: scale(0.95) rotate(0deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: deep purple #1a1035, no trophy, purple #7b5cd0 Awwwards, WebGL, 6 kf"}];
+const ITEMS = [{"id":"antd","name":"Ant Design","fw":["React"],"theme":"企业级 / 数据密集","vendor":"蚂蚁集团 Ant Group","link":"https://ant.design","kind":"item","img":"previews/antd.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/ant-design/ant-design","desc":"最成熟的企业级 React 组件库，组件最全、中后台首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ant Design (https://ant.design) homepage above-the-fold section at 1280px width. \n\nGlobal style: clean, modern, white background (#ffffff), dark text near black (#000000 at 0.88 opacity), primary accent blue #1677ff, secondary grays (#d9d9d9 borders, #f5f5f5 subtle backgrounds). System Chinese font stack: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, PingFang SC, Microsoft YaHei, sans-serif.\n\nTop navigation bar (height ~64px, white background, subtle bottom border, horizontal padding ~32px, flex justify-between align-center):\n- Left: brand logo — a small geometric diamond-shaped icon made of two overlapping blue/cyan/triangular shapes pointing right, next to the text \"Ant Design\" in bold black.\n- Center-left: a search input with rounded border, placeholder text \"输入关键字搜索...\", light gray border, small search icon on the left.\n- Right: nav links with Chinese labels separated by space: \"设计\" \"研发\" \"组件\" \"博客\" \"资源\" \"国内镜像\". After the links, show a tiny circular badge with the initials \"中\" (white text on dark blue/purple) and a small colored version pill \"6.5.0\". Then a row of small mono icon buttons (language, theme, GitHub, etc.) in neutral gray.\n\nHero section (centered, white background, large top padding ~70px, padding-bottom ~50px):\n- Huge centered headline: \"Ant Design\" in very bold black sans-serif (~64px).\n- Subcopy below headline: \"AI友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。\" in medium gray, ~18px, max-width ~720px, centered.\n- Two centered buttons below subcopy (gap ~16px):\n  - Primary: \"开始使用\" with blue background #1677ff, white text, rounded pill border-radius ~100px, padding ~10px 24px.\n  - Secondary: \"设计语言\" with white background, thin gray border, dark text, rounded border-radius ~6px, same padding.\n\nNews cards row (three cards in a horizontal flex row, gap ~24px, centered, max-width ~1160px, padding 24px 32px):\n- Each card is white with a very light gray border, border-radius ~8px, padding ~24px, flex 1, equal height.\n- Card 1 title: \"Ant Design Pro V6 发布\" with a red \"HOT\" badge on the right. Body: \"脱胎换骨的全新版本！全新技术栈加持，React 19 + antd 6 + utoo，构建速度飞跃 42%，AI 助手开箱即用，开发体验全面进化。\"\n- Card 2 title: \"Ant Design CLI 发布\". Body: \"开发者的新伙伴。终端里随时召唤 Ant Design，查 API、做迁移，官方 MCP 服务，离线也能用\" Then date \"2026.05.08\".\n- Card 3 title: \"Ant Design 6.0 发布！\". Body: \"新一代 Ant Design 正式发布！极致灵活定制主题，拥抱 React 新生态。为 AI 时代的应用开发提供更坚实的基础与更卓越的体验。\" Then date \"2025.11.22\".\n\nSponsors strip (light gray background, full width, padding ~24px):\n- Left label \"SPONSORS\" in small light gray uppercase.\n- Right: sponsor logos/names inline: small \"Yh\" icon with \"YouMind\", a blue circle with \"TRACTIAN\", a pink/purple robot icon with \"LobeHub\", a red/orange icon with \"CodeRabbit\".\n\nThe whole page should feel like a polished Chinese enterprise UI library landing page, simple and flat with minimal shadow.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.acss-1v3xej5` → transition: color 0.3s ease\n- `div.dumi-default-search-bar` → transition: background 0.3s ease\n- `input.dumi-default-search-bar-input` → transition: all 0.3s ease\n- `ul.ant-menu.ant-menu-root` → transition: width 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `li.ant-menu-item.ant-menu-item-only-child` → transition: border-color, background-color 0.3s, 0.3s ease, ease 0s, 0s\n- `img.acss-1jyth9` → transition: transform, opacity 0.1s, 0.3s ease, ease 0s, 0s\n- `button.ant-btn.css-ry7cab` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `div.btn-inner` → transition: all 0.2s ease\n- `div` → transition: all 5s ease-in-out\n- `a.acss-10ocqpj` → transition: background-color 0.1s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `:where(.css-ry7cab) a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.dumi-default-search-bar-input`:\n  **focus:** background-color: rgb(255, 255, 255); border-color: #1677ff80; box-shadow: rgba(22, 119, 255, 0.1) 0px 0px 0px 3px; border-top-color: rgba(22, 119, 255, 0.5); border-right-color: rgba(22, 119, 255, 0.5); border-bottom-color: rgba(22, 119, 255, 0.5); border-left-color: rgba(22, 119, 255, 0.5); background: #ffffff\n- `a:where(.css-ry7cab)`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.acss-aekbnf`:\n  **hover:** transform: scale(1.1)\n  **focus:** transform: scale(1.1)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes css-ry7cab-antBorderBeamMove  {\n  0%  {\n  offset-distance: 0%;\n  } 100%  {\n  offset-distance: 100%;\n  }\n}\n@keyframes css-ry7cab-antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideDownIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideDownOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antMoveUpIn  {\n  0%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antMoveUpOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antMoveDownIn  {\n  0%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antMoveDownOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideLeftIn  {\n  0%  {\n  transform: scaleX(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideRightIn  {\n  0%  {\n  transform: scaleX(0.8);\n  transform-origin: 100% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-ry7cab-antSlideLeftOut  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleX(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antSlideRightOut  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleX(0.8);\n  transform-origin: 100% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-ry7cab-antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"主 agent 手动依据 hifi 提示词重建: 静态首屏(导航/hero/新闻卡/赞助条)高度一致, 真实 #1677ff 与文案逐字使用; 动画含真实 @keyframes(antMoveUpIn/antFadeIn 等)与 hover 过渡(color .3s ease / all .2s cubic-bezier), 入场淡入上移 + 卡片 hover 上浮已实现。WebGL hero 背景以 CSS 渐变近似(提示词允许)。"},{"id":"mui","name":"Material UI (MUI)","fw":["React"],"theme":"Material Design 3","vendor":"MUI / Google 规范","link":"https://mui.com","kind":"item","img":"previews/mui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/mui/material-ui","desc":"Google Material Design 规范的标杆实现，高度可定制、暗黑模式一流。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the MUI (https://mui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background (#ffffff), dark near-black text (#1a1e23), primary blue #0073e6 (link blue) and banner blue #006ce5. System sans-serif font stack.\n\nTop announcement banner (full width, blue background #006ce5, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost →\"\n- The arrow should be a small right arrow.\n\nTop navigation bar (white background, height ~64px, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: MUI logo — a stylized blue \"M\" icon made of two angled strokes (like an abstract letter M), followed by nav links: \"Products\" \"Docs\" \"Pricing\" \"About us\" \"Blog\" in dark text, small font.\n- Right: search bar with gray border, placeholder \"Search...\", and a small \"⌘K\" keyboard hint; then a GitHub icon and a moon/theme icon.\n\nHero section (two-column layout, white background, padding ~60px 32px, max-width ~1200px, gap ~40px):\n- Left column (~45%):\n  - Headline: first line \"Move faster\" in bold blue (#0073e6), second/third lines \"with intuitive\" and \"React UI tools\" in very bold black, stacked.\n  - Subcopy: \"MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.\" in gray, ~15px, line-height 1.6.\n  - Button: \"Discover the Core libraries\" with a right-pointing arrow, blue background #0073e6, white text, rounded pill border-radius ~20px, padding ~10px 20px.\n- Right column (~55%):\n  - A large UI component showcase floating in a light gray (#f6f7f8) or white area with subtle shadows. Include:\n    - A prominent blue card at top-left with white text: icon/clock \"March 25th\", a code \"\u003c/>\" line, \"Customize every button and chip instance primary color\", a small circular avatar with \"Assigned to Lucas Smith\", and a thin progress bar at 60%.\n    - To the right of/above the blue card, a small numbered checklist: \"1 Install one of our products to get your next app started successfully:\" with bullet items \"Material UI\", \"MUI Base\", \"Joy UI\".\n    - Below, a row of colored tags: \"MUI\" (blue), \"React\" (yellow), \"CSS\" (green), \"TypeScript\" (pink), \"JavaScript\" (blue).\n    - A calendar widget showing \"July 2026\" with days grid, selected day 13 circled, navigation arrows.\n    - A temperature range slider showing 25°C, 50°C, 20°C, 50°C with a blue knob.\n    - A small dialog at bottom-right: \"Cookie preferences\" with text \"We use cookies to understand site usage and improve our content. This includes third-party analytics.\" and two buttons \"Allow analytics\" (blue) and \"Essential only\" (white).\n\nThe page should look like a modern developer-centric UI library landing page with a split hero + component demo.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.MuiPaper-root.MuiPaper-outlined` → transition: all 0.5s ease\n- `svg` → transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.MuiButtonBase-root.MuiIconButton-root` → transition: all 0.1s ease-in\n- `header.css-z9fwg4` → transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.css-1j49n3m` → transition: all 0.15s ease\n- `div.MuiContainer-root.MuiContainer-maxWidthLg` → transition: all 0.3s ease\n- `a.MuiButtonBase-root.MuiButton-root` → transition: all 0.12s ease-in\n- `span.MuiButton-icon.MuiButton-endIcon` → transition: all 0.2s ease\n- `div.MuiBox-root.css-1imkh24` → transition: max-height 0.3s ease\n- `div.MuiPaper-root.MuiPaper-elevation` → transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.MuiLinearProgress-bar.MuiLinearProgress-bar1` → transition: transform 0.4s linear\n- `div.MuiChip-root.MuiChip-filled` → transition: background-color, box-shadow 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `svg` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.MuiPickersArrowSwitcher-root.css-gvoll6` → transition: opacity 0.225s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-14uhdw1`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1gsvth3`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-bsgogs`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-17bblal`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-17ooklt`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1e6ce01`:\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1j49n3m`:\n  **hover:** background: hsla(215, 15%, 92%, 0.5); background-color: rgba(232, 234, 238, 0.5)\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-d9ymps`:\n  **hover:** box-shadow: rgba(223, 226, 231, 0.5) 0px 1px 2px 0px\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1xyewq8`:\n  **hover:** box-shadow: rgba(223, 226, 231, 0.5) 0px 1px 2px 0px\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1gp0uct`:\n  **active:** box-shadow: rgba(0, 59, 117, 0.7) 0px 1px 0px 1px inset\n  **focus:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: 3px solid hsla(210, 100%, 45%, 0.5); outline-color: rgba(0, 115, 230, 0.5)\n- `.css-r8v66l`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1mdrglg`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-1mb4tbx`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-15d84yc`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n- `.css-y826nw`:\n  **focus:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n  **focus-visible:** outline: rgba(0, 115, 230, 0.5) solid 3px; outline-color: rgba(0, 115, 230, 0.5)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes in-right  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes mui-auto-fill  {\n  from {\n  -webkit-animation-name:mui-auto-fill;\n  animation-name:mui-auto-fill;\n  }\n}\n@keyframes mui-auto-fill-cancel  {\n  from {\n  -webkit-animation-name:mui-auto-fill-cancel;\n  animation-name:mui-auto-fill-cancel;\n  }\n}\n@keyframes fade-in  {\n  0% {\n  opacity:0}to {\n  opacity:1}\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"主 agent 手动依据 hifi 提示词重建(Material 落地页)。真实 #0073e6/#006ce5 与 banner/hero 文案逐字使用; 右栏组件演示(蓝卡/清单/标签/日历/滑块/对话框)结构还原; 动画含真实 @keyframes in-right(右栏入场)、fade-in(左栏), 以及 MUI 过渡 cubic-bezier(.4,0,.2,1) 逐字照搬, hover 变色/上浮已加。"},{"id":"chakra","name":"Chakra UI","fw":["React"],"theme":"简洁 / 组合式","vendor":"Chakra / Segun Adebayo","link":"https://chakra-ui.com","kind":"item","img":"previews/chakra.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/chakra-ui/chakra-ui","desc":"组合式 API + Emotion，内置暗黑模式与 a11y，源码易读可二次封装。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Chakra UI (https://chakra-ui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, near-black text (#09090b), teal accent #0d9486, system sans-serif font.\n\nTop announcement banner (full width, horizontal gradient from teal to purple, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"Build faster with Premium Chakra UI Components\" followed by a small diamond/gem icon, then a \"Learn more\" button with a light white/transparent border.\n\nTop navigation bar (white background, height ~64px, padding 0 32px, flex justify-between align-center):\n- Left: Chakra logo — a small teal rounded hexagon/circle icon with a white lightning or abstract mark inside, next to the word \"chakra\" in lowercase bold black text.\n- Right: nav links \"Docs\" \"Showcase\" \"Spotlight\" \"Blog\" \"Guides\" in dark text, then a GitHub icon and a moon/theme icon.\n\nHero section (two-column layout, white background, padding ~80px 32px, max-width ~1200px, gap ~40px):\n- Left column (~55%):\n  - A small teal badge pill above the headline: \"⚡ Chakra Shipped is live →\" with a tiny lightning icon and right arrow.\n  - Headline: \"Chakra UI is a component system for building products\" in very bold black (~48px), with the words \"with speed\" on a light teal background highlight with teal text.\n  - Subcopy: \"Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC\" in gray, ~16px.\n  - Two buttons in a row:\n    - Primary: \"Start Building\" with teal background #0d9486, white text, rounded ~6px, padding ~12px 24px.\n    - Secondary: terminal-style \"npm i @chakra-ui/react\" with a small \">\" prompt icon, light gray background, teal text, rounded ~6px, monospace font.\n- Right column (~45%):\n  - A large, semi-transparent teal lightning bolt illustration, slightly tilted, filling most of the column height.\n\nComponent cards row (three cards below hero, full width, light background, gap ~24px, each card white with subtle border and rounded corners):\n- Card 1: a slider component with a teal knob and gray track.\n- Card 2: a row of four square checkbox/radio options with light borders.\n- Card 3: a tabs component with tabs \"Chakra\" (selected/active teal), \"Ark\", \"Zag\", and below text: \"Chakra UI is a component library for building web applications.\"\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.chakra-button.css-13mnqbs` → transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, translate, transform 0.2s ease\n- `div.chakra-slider__thumb.css-s1ws36` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-pjt2ur`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.css-1d1nf42`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes react-spinners-BarLoader-long  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%  {\n  left: 100%;\n  right: -90%;\n  } 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@keyframes react-spinners-BarLoader-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@keyframes react-spinners-BeatLoader-beat  {\n  50%  {\n  transform: scale(0.75);\n  opacity: 0.2;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-BounceLoader-bounce  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes react-spinners-CircleLoader-circle  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-ClimbingBoxLoader-climbingBox  {\n  0%  {\n  transform: translate(0px, -1em) rotate(-45deg);\n  } 5%  {\n  transform: translate(0px, -1em) rotate(-50deg);\n  } 20%  {\n  transform: translate(1em, -2em) rotate(47deg);\n  } 25%  {\n  transform: translate(1em, -2em) rotate(45deg);\n  } 30%  {\n  transform: translate(1em, -2em) rotate(40deg);\n  } 45%  {\n  transform: translate(2em, -3em) rotate(137deg);\n  } 50%  {\n  transform: translate(2em, -3em) rotate(135deg);\n  } 55%  {\n  transform: translate(2em, -3em) rotate(130deg);\n  } 70%  {\n  transform: translate(3em, -4em) rotate(217deg);\n  } 75%  {\n  transform: translate(3em, -4em) rotate(220deg);\n  } 100%  {\n  transform: translate(0px, -1em) rotate(-225deg);\n  }\n}\n@keyframes react-spinners-ClipLoader-clip  {\n  0%  {\n  transform: rotate(0deg) scale(1);\n  } 50%  {\n  transform: rotate(180deg) scale(0.8);\n  } 100%  {\n  transform: rotate(360deg) scale(1);\n  }\n}\n@keyframes react-spinners-ClockLoader-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-DotLoader-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-DotLoader-bounce  {\n  0%, 100%  {\n  transform: scale(0);\n  } 50%  {\n  transform: scale(1);\n  }\n}\n@keyframes react-spinners-FadeLoader-fade  {\n  50%  {\n  opacity: 0.3;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-GridLoader-grid  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.5);\n  opacity: 0.7;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes react-spinners-MoonLoader-moon  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes react-spinners-PacmanLoader-pacman-1  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-44deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：teal 渐变公告条 + 双栏 hero + 三组件卡。真实过渡 0.2s ease、slider-thumb 0.15s cubic-bezier(0.4,0,0.2,1) 与真实 @keyframes 照抄。teal #0d9486 一致。"},{"id":"mantine","name":"Mantine","fw":["React"],"theme":"现代 / 暗色原生","vendor":"Mantine","link":"https://mantine.dev","kind":"item","img":"previews/mantine.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/mantinedev/mantine","desc":"100+ 组件 + 大量 Hooks，TypeScript 友好，开箱暗色模式，开发体验极佳。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Mantine (https://mantine.dev) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background (#ffffff), black text (#000), system sans-serif font, accent blue #228be6 (Mantine blue), subtle gray borders (#dee2e6).\n\nTop navigation bar (height ~60px, white background with slight transparency, horizontal padding ~32px, flex justify-between align-center, border-bottom subtle):\n- Left: Mantine logo — a stylized geometric blue \"M\" mark inside a rounded square, followed by the text \"Mantine\" in bold black.\n- Right: a version pill \"v9.4.1\" with light gray border, a search input showing \"Search\" and \"Ctrl + K\" hint, a \"Documentation\" link, a theme/moon icon, and a GitHub icon.\n\nHero section (centered or left-aligned, white background, large top padding ~90px, padding-bottom ~60px, max-width ~1100px, centered or left):\n- Huge headline: \"A fully featured React components library\" in very bold black (~56px), line-height ~1.1.\n- Subcopy: \"Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and hooks to cover every use case.\" in gray (~16px), max-width ~600px, margin-top ~20px.\n- Two buttons below the subcopy (gap ~16px):\n  - Primary: \"Get started\" with blue background #228be6, white text, rounded ~8px, padding ~12px 24px.\n  - Secondary: \"Documentation\" with white background, gray border, dark text, rounded ~8px, same padding.\n\nFeature cards row (four cards in a horizontal grid, gap ~24px, max-width ~1100px, centered, padding-bottom ~60px):\n- Each card white with light border, rounded ~12px, padding ~24px.\n- Card titles in bold: \"Built for the AI-assisted workflow\", \"120+ components\", \"Hooks library\", \"Flexible styling\".\n- Card body text: short gray description lines (e.g., \"LLM-optimized docs, agent skills for complex tasks, and an MCP server for direct API access\").\n\nThe overall vibe is a modern, minimal developer-components library landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.HomePageJumbotron-module__LspnZW__image.mantine-dark-hidden` → animation: HomePageJumbotron-module__LspnZW__slide 120s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mantine-focus-auto.mantine-active` → transition: box-shadow, transform 0.1s, 0.1s ease, ease 0s, 0s\n- `span.m_80f1301b.mantine-Button-inner` → transition: transform, opacity 0.15s, 0.1s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.m_87cf2631`:\n  **hover:** transform: translateY(-1px) scale(1.01); opacity: 1\n- `.m_b6d8b162`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes m_5d2b3b9d  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.6);\n  } 50%, 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes m_aac34a1  {\n  0%, 100%  {\n  opacity: 1;\n  transform: scale(1);\n  } 50%  {\n  opacity: 0.5;\n  transform: scale(0.6);\n  }\n}\n@keyframes m_f8e89c4b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes m_885901b1  {\n  0%  {\n  opacity: 0.6;\n  transform: scale(0);\n  } 100%  {\n  opacity: 0;\n  transform: scale(2.8);\n  }\n}\n@keyframes m_55dc625a  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% / var(--marquee-repeat,4) - var(--marquee-gap,var(--mantine-spacing-md)) / var(--marquee-repeat,4)));\n  }\n}\n@keyframes m_cdef532c  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-100% / var(--marquee-repeat,4) - var(--marquee-gap,var(--mantine-spacing-md)) / var(--marquee-repeat,4)));\n  }\n}\n@keyframes m_81a374bd  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: calc(2.5rem * var(--mantine-scale)) 0;\n  }\n}\n@keyframes m_e0fb7a86  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 0 calc(2.5rem * var(--mantine-scale));\n  }\n}\n@keyframes m_18d73873  {\n  0%  {\n  transform: var(--rn-roll-from);\n  } 100%  {\n  transform: var(--rn-roll-to);\n  }\n}\n@keyframes m_299c329c  {\n  0%, 100%  {\n  opacity: 0.4;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes m_739a6f61  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n  transform: rotateY(0deg);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n  transform: rotateY(1800deg);\n  } 100%  {\n  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n  transform: rotateY(3600deg);\n  }\n}\n@keyframes DropdownOptionsAnimation-module__8WkA7q__option-animation  {\n  0%  {\n  opacity: 0;\n  transform: translate(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes HomePageJumbotron-module__LspnZW__slide  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate3d(0, calc(-129.75rem * var(--mantine-scale)), 0);\n  }\n}\n@-webkit-keyframes animation-1s6mpx1  {\n  0%, 20%, 53%, 80%, 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  } 40%, 43%  {\n  transform: translate3d(0px, -30px, 0px);\n  } 70%  {\n  transform: translate3d(0px, -15px, 0px);\n  } 90%  {\n  transform: translate3d(0px, -4px, 0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：白底 + Mantine 蓝 #228be6、hero 大标题 + 四张特性卡。真实 m_5d2b3b9d 入场与 button 0.1s ease 过渡照抄，蓝色一致。"},{"id":"shadcn","name":"shadcn/ui","fw":["React"],"theme":"Radix + Tailwind 白盒","vendor":"shadcn","link":"https://ui.shadcn.com","kind":"item","img":"previews/shadcn.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/shadcn-ui/ui","desc":"复制即用、100% 代码所有权。基于 Radix 原语 + Tailwind，年度最热仓库。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the shadcn/ui (https://ui.shadcn.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, black text, Geist/system sans-serif, clean minimal, rounded corners, black primary buttons, light gray inputs and borders.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: nav links in small black text: \"Home\" \"Docs\" \"Components\" \"Blocks\" \"Charts\" \"Directory\" \"Typeset\" \"Create\".\n- Right: search input with rounded light gray background, placeholder \"Search documentation...\"; GitHub icon with \"119k\" count; a small info icon; a black \"+ New\" pill button with white text.\n\nHero section (centered, white background, padding ~80px 32px ~40px):\n- Small light-gray pill badge above headline: \"Introducing shadcn/typeset →\".\n- Large centered headline: \"The Foundation for your Design System\" in bold black (~44px).\n- Subcopy centered: \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\" in gray (~16px), max-width ~620px.\n- Black rounded pill button: \"Build Your Own →\".\n\nComponent showcase (three large cards in a row, gap ~24px, padding ~40px 32px, background white, cards with rounded ~20px borders and very light gray background):\n- Left card: a form/components demo with several elements stacked:\n  - Top row of buttons: black \"Button →\", white \"Secondary\", white \"Outline\".\n  - Input fields \"Name\" and \"Message\" with rounded light gray backgrounds.\n  - A row with black \"Save\" button, \"Secondary\" link, radio/checkbox/toggle controls.\n  - Bottom row: \"Alert Dialog\" button and \"Button Group\" dropdown.\n  - Two bottom tabs: \"Planning\" and \"Support\".\n- Center card: a \"Contribution History\" bar chart card with title \"Contribution History\", subtitle \"Last 6 months of activity\", five vertical bars in varying shades of gray labeled Dec, Jan, Feb, Mar, Apr. Below the chart a two-column summary: \"UPCOMING May 2024 Scheduled\" and \"SAVINGS PLAN Accelerated Recurring\".\n- Right card: a QR-code card with a large black QR code illustration, title \"Scan to connect your mobile device\", subtext \"Open the Ledger mobile app and scan this code to link your device.\", and a small bottom action.\n\nThe overall look is the signature shadcn/ui black-and-white, rounded, modern component gallery landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.shrink-0` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.shrink-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-fit` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/input-group.relative` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.peer.relative` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.pointer-events-none.block` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.flex.h-8` → transition: margin, opacity 0.2s linear\n- `button.peer/menu-button.group/menu-button` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/item.flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.pl-3`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.hover\\:bg-muted`:\n  **active:** opacity: 1\n- `.hover\\:bg-primary\\/80`:\n  **active:** opacity: 1\n- `.focus-visible\\:border-ring-visible`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes scroll-fade-reveal-t  {\n  0%  {\n  --scroll-fade-t: 0px;\n  } 100%  {\n  --scroll-fade-t: var(--_scroll-fade-size-t,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  }\n}\n@keyframes scroll-fade-reveal-b  {\n  0%  {\n  --scroll-fade-b: var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  } 100%  {\n  --scroll-fade-b: 0px;\n  }\n}\n@keyframes scroll-fade-reveal-s  {\n  0%  {\n  --scroll-fade-s: 0px;\n  } 100%  {\n  --scroll-fade-s: var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  }\n}\n@keyframes scroll-fade-reveal-e  {\n  0%  {\n  --scroll-fade-e: var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));\n  } 100%  {\n  --scroll-fade-e: 0px;\n  }\n}\n@keyframes tw-shimmer  {\n  0%  {\n  background-position: 100% 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建首屏：导航/hero/三张组件卡，真实 @keyframes（pulse/enter/caret-blink/tw-shimmer 等）与 button/link 的 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。黑白带圆角风格一致。"},{"id":"radix","name":"Radix UI","fw":["React"],"theme":"无样式原语 / a11y","vendor":"Radix / Modulz","link":"https://www.radix-ui.com","kind":"item","img":"previews/radix.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/radix-ui/primitives","desc":"WAI-ARIA 合规的无样式交互原语，shadcn 的底层内核，可完全掌控样式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Radix UI (https://www.radix-ui.com) homepage above-the-fold at 1280px width.\n\nGlobal style: very light lavender/pink gradient background, dark text (#1c2024), serif font for headlines (use Georgia or Times fallback), sans-serif for UI. Accent blue #3e63dd for links and toggles, soft purple/pink background shapes.\n\nTop navigation bar (height ~64px, transparent background, padding 0 32px, flex justify-between align-center):\n- Left: Radix logo — a stylized black \"R\" mark made of two angled strokes, next to the text \"Radix\" in bold sans-serif. To the right of the brand, a small dark pill with \"Made by WorkOS\" (white text on black or dark gray).\n- Right: nav links \"Themes\" (active, shown as a solid black pill button with white text), \"Primitives\", \"Icons\", \"Colors\", \"Documentation\", \"Playground\", \"Blog\", then a GitHub icon and a theme/sun icon.\n\nHero section (two-column layout, padding ~80px 32px, gap ~40px, max-width ~1200px):\n- Left column (~45%):\n  - A small blue pill badge: \"Read about Radix Themes 3.0 →\".\n  - Large elegant serif headline: \"Start building your app now\" (~56px), line-height ~1.1, dark.\n  - Subcopy: \"An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.\" in gray sans-serif (~16px).\n  - A code block with light background, rounded ~12px, showing:\n    import \"@radix-ui/themes/styles.css\";\n    import { Theme, Button } from \"@radix-ui/themes\";\n    export default () => (\n      \u003cTheme>\n        \u003cButton>Hey 👋\u003c/Button>\n      \u003c/Theme>\n    );\n    Use syntax highlighting colors: purple import keywords, red strings, blue tags, dark text.\n  - Two buttons below the code block:\n    - Black rounded button \"Get started →\".\n    - Light purple/lavender rounded button with a small grid icon and \"Playground\" in dark text.\n  - Below buttons: \"Live examples\" label with a row of small horizontal tabs/lines indicating examples.\n- Right column (~55%):\n  - A large component showcase floating on the soft gradient background. Include:\n    - Top card: \"Your team\" with subtitle \"Invite and manage your team members.\", an input field \"Email address\" with blue \"Invite\" button, and a list of team members with circular avatars, names (Emmeline Labrie, Zac Wight, etc.), email addresses, and three-dot menus.\n    - Below card: \"Notifications\" with subtitle \"Manage your notification settings.\", sections \"Comments\", \"Favorites\", \"New documents\", each with toggles for Push (blue on), Email (blue on), Slack (gray off).\n    - Far right partial card: \"Sign in\" form with Email and Password fields and a blue \"Sign in\" button, and a \"Your...\" card below it.\n\nThe overall vibe is a soft, modern, serif-headline component library landing page with floating UI cards on a pastel gradient.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.header-module__bY5_QG__HeaderInner` → transition: background-color, box-shadow 0.18s, 0.18s ease, ease 0s, 0s\n- `span.rt-SwitchThumb` → transition: transform, box-shadow 0.14s, 0.14s cubic-bezier(0.45, 0.05, 0.55, 0.95), ease-in-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rt-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rt-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes rt-slide-from-top  {\n  0%  {\n  transform: translateY(4px) scale(0.97);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-top  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  transform: translateY(4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-bottom  {\n  0%  {\n  transform: translateY(-4px) scale(0.97);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-bottom  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  transform: translateY(-4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-left  {\n  0%  {\n  transform: translate(4px) scale(0.97);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-left  {\n  0%  {\n  transform: translate(0px) scale(1);\n  } 100%  {\n  transform: translate(4px) scale(0.97);\n  }\n}\n@keyframes rt-slide-from-right  {\n  0%  {\n  transform: translate(-4px) scale(0.97);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes rt-slide-to-right  {\n  0%  {\n  transform: translate(0px) scale(1);\n  } 100%  {\n  transform: translate(-4px) scale(0.97);\n  }\n}\n@keyframes rt-skeleton-pulse  {\n  0%  {\n  background-color: var(--gray-a3);\n  } 100%  {\n  background-color: var(--gray-a4);\n  }\n}\n@keyframes rt-dialog-overlay-no-op  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rt-dialog-content-show  {\n  0%  {\n  opacity: 0;\n  transform: translateY(5px) scale(0.97);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes rt-dialog-content-hide  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(5px) scale(0.99);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：淡紫粉渐变背景、Georgia 衬线大标题、代码块、浮动 Your team/Notifications 卡片；内联真实 rt-fade-in/rt-dialog-content-show/@keyframes 与 switch thumb transition(.14s cubic-bezier(.45,.05,.55,.95))、header transition(.18s)。CSS 过渡/入场动画逐字照抄，复现一致。"},{"id":"headlessui","name":"Headless UI","fw":["React","Vue"],"theme":"无样式 / a11y","vendor":"Tailwind Labs","link":"https://headlessui.com","kind":"item","img":"previews/headlessui.png","chips":["Dialog","Menu","Listbox","Combobox","Switch","RadioGroup","Tab","Disclosure","Popover"],"repo":"https://github.com/tailwindlabs/headlessui","desc":"Tailwind 官方无样式组件，React/Vue 双版本，可访问性优先。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Headless UI (https://headlessui.com) documentation page above-the-fold at 1280px width. This is a dark-themed component documentation page.\n\nGlobal style: very dark background near #0a0a0f, light text #f0f0f0, muted gray sidebar text #9ca3af, accent purple/blue gradient for the logo and selected items. System sans-serif font.\n\nTop header bar (height ~56px, dark background with slight gradient/purple glow on the left, padding 0 24px, flex justify-between align-center):\n- Left: HeadlessUI logo — a rounded square icon with a purple-to-blue gradient and a small white square/dash inside, next to the text \"HeadlessUI\" in white, then a version dropdown pill \"v2.1\" with a down arrow.\n- Right: GitHub icon in white.\n\nPage layout (flex, full width, height below header):\n- Left sidebar (width ~220px, dark background, border-right subtle, padding 16px):\n  - Top: two pill tabs \"React\" (selected, white background) and \"Vue\" (transparent).\n  - Section heading \"COMPONENTS\" in tiny uppercase gray.\n  - Links: \"Dropdown Menu\", \"Disclosure\", \"Dialog\" (selected/active, light background), \"Popover\", \"Tabs\", \"Transition\".\n  - Section heading \"FORMS\" in tiny uppercase gray.\n  - Links: \"Button\", \"Checkbox\", \"Combobox\", \"Fieldset\", \"Input\", \"Listbox\", \"Radio Group\", \"Select\".\n- Main content area (flex 1, padding 40px, max-width ~800px):\n  - H1: \"Dialog\" in large white bold text.\n  - Subcopy: \"A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.\" in gray.\n  - A preview/demo card with rounded corners, dark gray background, two tabs at top-right: \"Preview\" (selected, lighter) and \"Code\".\n  - Inside the preview card, a centered modal/dialog with dark background, rounded corners, shadow: title \"Payment successful\", body text \"Your payment has been successfully submitted. We've sent you an email with all of the details of your order.\", and a gray button \"Got it, thanks!\".\n  - Below the preview: H2 \"Installation\" in white bold, and text \"To get started, install Headless UI via npm:\"\n- Right sidebar (width ~200px, dark background, border-left subtle, padding 16px):\n  - Heading \"ON THIS PAGE\" in tiny uppercase gray.\n  - Links: \"Installation\", \"Basic example\", \"Styling\", \"Examples\", \"Showing/hiding the dialog\", \"Adding a backdrop\", \"Scrollable dialogs\", \"Managing initial focus\", \"Rendering to a portal\", \"Adding transitions\", \"Animating with Framer Motion\", \"Keyboard interaction\", \"Component API\", \"Dialog\", \"DialogBackdrop\", \"DialogPanel\", \"DialogTitle\", \"CloseButton\".\n\nThe overall vibe is a dark, modern, developer-focused component documentation page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.block` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.pr-1\\.5`:\n  **hover:** background-color: rgba(255, 255, 255, 0.15)\n- `.hover\\:bg-white\\/5`:\n  **hover:** background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75)\n- `.prose :where(a)`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深色(#0a0a0f)文档页、左右双 sidebar、居中 Payment successful 模态、紫色→蓝色 logo 渐变。内联真实 transition a.group.block -> color/background 0.2s cubic-bezier(.4,0,.2,1) 与 hover 过渡。纯 CSS 过渡复现一致。"},{"id":"nextui","name":"NextUI (HeroUI)","fw":["React"],"theme":"现代 / SSR 友好","vendor":"NextUI","link":"https://nextui.org","kind":"item","img":"previews/nextui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/nextui-org/nextui","desc":"基于 React Aria + Tailwind，强调高性能与 SSR，组件量 200+。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the HeroUI / NextUI (https://nextui.org) homepage above-the-fold at 1280px width.\n\nGlobal style: light gray/off-white background (#f5f5f7), dark text, accent blue #0072f5, clean rounded modern UI, system sans-serif font.\n\nTop navigation bar (height ~64px, light gray background, padding 0 32px, flex justify-between align-center):\n- Left: HeroUI logo — the word \"hero\" in lowercase bold black with a small stylized geometric icon (black square/arrow mark) to the left.\n- Center: nav links \"Docs\" \"Themes\" \"Components\" \"React Native\" \"Blog\" \"Roadmap\" (Roadmap with a small superscript asterisk).\n- Right: search input with rounded light background, placeholder \"Search\" and a small \"⌘K\" hint; small icons (theme, sparkles, etc.); a \"Theme\" button; GitHub icon with \"29.9k\".\n\nHero section (centered, light gray background, padding ~80px 32px ~40px):\n- Small blue pill badge: \"HeroUI React v3.2.2 — patch release\".\n- Large centered headline: \"Beautiful by default.\" in bold black (~48px), followed by \"Customizable by design.\" in medium gray (~48px), stacked.\n- Subcopy centered: \"HeroUI is the modern UI library for web and mobile, built to help you move fast, stay consistent, and deliver delightful user experiences.\" in gray (~16px), max-width ~620px.\n- Two centered buttons: \"Get started\" (blue rounded) and \"View components\" (white rounded with border).\n- Small centered line below: GitHub icon + \"Open source with 29.9k stars\".\n\nComponent showcase (below hero, padding ~40px 32px, full width, display of overlapping UI cards on light gray background):\n- A \"Pro\" promotional card on the left with a blue/purple gradient top, \"Pro\" logo, \"Now available\", and bottom text \"Build faster with HeroUI Pro\" with description and \"Close\" / \"Explore Pro\" buttons.\n- In the center, a \"Verify account\" card with colored avatar circles, text \"We've sent a code to a****@gmail.com\", six input boxes with numbers \"4 3 2 0 _ _\", and \"Didn't receive a code? Resend\".\n- Below the verify card, several \"Click me\" buttons in blue, light blue, and red/coral variants.\n- On the right, a \"Create an account\" card with user icon, \"Start your free 7-day trial. No credit card required.\", blue \"Get Started\" button, \"OR\" divider, and \"Continue with Google\" / \"Continue with Apple\" buttons.\n- Top-right of the showcase area: a row of small colored circles (theme color swatches) in pink, red, orange, yellow, green, cyan, blue, purple.\n\nThe overall vibe is a modern, colorful, mobile-friendly UI library landing page with lots of rounded component demos.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.spinner.spinner--accent` → animation: spin 0.75s linear infinite normal\n- `div.input-otp__slot-value` → animation: slot-value-in 0.25s ease 1 normal both\n- `div.absolute.inset-[5.73%_3.6%_4.36%_3.18%]` → animation: float-stars 12s ease-in-out infinite normal\n- `div.absolute.inset-[5.73%_3.6%_4.36%_3.18%]` → animation: float-stars-reverse 15s ease-in-out infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.backdrop-blur-lg.border-b` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.button.button--icon-only` → transition: transform, background-color, box-shadow 0.25s, 0.1s, 0.1s ease, cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `div.popover__trigger` → transition: color, background-color, box-shadow 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `div.tabs__tab.whitespace-nowrap` → transition: color, background-color, box-shadow, opacity 0.15s, 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1), ease 0s, 0s, 0s, 0s\n- `div.tabs__indicator` → transition: translate, width, height 0.25s cubic-bezier(0.32, 0.72, 0, 1)\n- `a.text-[13px].font-medium` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.color-swatch-picker__item` → transition: border-color, box-shadow 0.1s, 0.1s cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s\n- `div.color-swatch-picker__swatch` → transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1)\n- `input.input.input--primary` → transition: background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s ease, ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `svg` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.checkbox__control` → transition: background-color, border-color, transform 0.2s, 0.2s, 0.1s cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1) 0s, 0s, 0s\n- `svg` → transition: stroke-dashoffset 0.15s linear 0.015s\n- `span.switch__control` → transition: background-color, box-shadow 0.25s, 0.15s ease, cubic-bezier(0, 0, 0.2, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **active:** transform: scale(0.97)\n- `.tabs__tab`:\n  **hover:** opacity: 0.7\n- `.tabs__list-container > .tabs__list-container__scroll-prev`:\n  **hover:** opacity: 0.7\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes float-stars  {\n  0%  {\n  transform: translateY(0px) translate(0px);\n  } 50%  {\n  transform: translateY(-40px) translate(40px);\n  } 100%  {\n  transform: translateY(0px) translate(0px);\n  }\n}\n@keyframes float-stars-reverse  {\n  0%  {\n  transform: translateY(0px) translate(0px);\n  } 50%  {\n  transform: translateY(40px) translate(-40px);\n  } 100%  {\n  transform: translateY(0px) translate(0px);\n  }\n}\n@keyframes shine  {\n  0%  {\n  translate: -100%;\n  } 100%  {\n  translate: 100%;\n  }\n}\n@keyframes scrolling-banner  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-50% - var(--gap) / 2));\n  }\n}\n@keyframes scrolling-banner-vertical  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-50% - var(--gap) / 2));\n  }\n}\n@keyframes custom-fade-in  {\n  0%  {\n  opacity: 0;\n  backdrop-filter: blur() saturate(0%);\n  background-color: rgba(0, 0, 0, 0);\n  } 100%  {\n  opacity: 1;\n  backdrop-filter: blur(8px) saturate(180%);\n  background-color: var(--color-backdrop);\n  }\n}\n@keyframes custom-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：浅灰 #f5f5f7 背景、双标题 hero、三张组件展示卡（Pro 渐变/验证 OTP/注册）。真实 spin 0.75s linear、float-stars 12s/15s、slot-value-in 0.25s 与大量 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。蓝 #0072f5 一致。"},{"id":"semi","name":"Semi Design","fw":["React"],"theme":"企业级 / 设计代币","vendor":"字节跳动 ByteDance","link":"https://semi.design","kind":"item","img":"previews/semi.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/DouyinFE/semi-design","desc":"Design Token 与 Figma 插件完善，支持多主题动态切换，含主题商店。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Semi Design (https://semi.design) homepage above-the-fold at 1280px width.\n\nGlobal style: clean white background with very subtle gradient/pastel glow, Chinese text, dark near-black (#1c1f23) text, primary blue #0064fa, system Chinese sans-serif font stack.\n\nTop announcement banner (full width, horizontal gradient from purple to pink/coral, white text, centered, small padding ~10px, font-size ~14px):\n- Text: \"🚀 使用 MCP & Skills 让 AI 对 Semi 了如指掌，如虎添翼 🚀\" with a right arrow and a close X on the far right.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center):\n- Left: Semi Design logo — a black abstract curved \"S\" shape inside a circle, next to \"semi design\" lowercase text.\n- Center: nav links in Chinese: \"组件\" \"主题\" \"设计转代码\" \"模板\" \"数据可视化\" with a small red/pink \"NEW\" badge, \"博客\".\n- Right: small icons (Figma, moon/theme, Twitter/X, GitHub, language \"EN\"), a search input with placeholder \"搜索\" and \"⌘K\" hint, and a blue primary button \"登录\".\n\nHero section (two-column layout, white/light background, padding ~70px 32px, max-width ~1200px, gap ~40px):\n- Left column (~45%):\n  - Very large Chinese headline: \"连接设计师与开发者\" in bold black (~52px).\n  - Subcopy: \"由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。\" in gray (~16px), line-height 1.7, max-width ~480px.\n  - Two buttons:\n    - Primary \"开始使用\" with blue background #0064fa, white text, rounded ~6px, padding ~12px 28px.\n    - Secondary \"GitHub 10k\" with white background, thin border, GitHub icon, dark text, rounded ~6px, same padding.\n  - A row of technology/framework icons below the buttons (React atom logo, a blue cube, a yellow lightning bolt, a cartoon animal, a Remix-style \"R\", and \"NEXT.js\" text).\n- Right column (~55%):\n  - A large dashboard/application UI mockup with rounded corners and subtle shadow, showing a left sidebar with Chinese menu items (工作台, 搜索, 项目空间, 业务指标, 用户产品, 待设计, 实验中, 重点关注, 待 UED 设计, 早会看板, 性能验证, DC 的视图, 更多视图, 报警规则, 性能大盘, 时间表, 配置) and a main content area titled \"你好, Semi\" with a waving-hand icon. Show metrics: 已处理 1,213, 平均处理时长 12pd ↓12.69%, 待处理 16, 高优 5 • 2. Below, tabs \"我的关注\" / \"我的项目\", a list of product cards with TikTok/Douyin logo \"抖音极速版\" and \"头条搜索\", numbers 待处理 17 / 已解决 22, and a \"待处理文件\" list with file names and sizes.\n\nThe overall vibe is a Chinese enterprise design system landing page with a big product dashboard mockup.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** AOS (Animate On Scroll)。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.skip-to-content` → transition: transform 0.3s ease\n- `button.semi-button.semi-button-primary` → transition: background-color, border 0s, 0s ease-in, ease-in 0s, 0s\n- `div.frame14368--3fnU7.aos-init` → transition: opacity, transform 0.4s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content-link`:\n  **hover:** text-decoration: underline\n- `-visible`:\n  **hover:** text-decoration: underline\n- `.group2835--uvjAi a-visible`:\n  **hover:** text-decoration: underline\n- `.semi-select`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：紫→粉→珊瑚渐变公告条、中文企业风导航、大标题'连接设计师与开发者'、右侧产品 dashboard mock(工作台菜单+你好Semi+指标卡)。AOS 提示用等价 transition(opacity/transform .4s ease)近似滚动揭示；button primary transition 0s 照抄。中文文案真实。"},{"id":"blueprint","name":"Blueprint","fw":["React"],"theme":"数据密集型","vendor":"Palantir","link":"https://blueprintjs.com","kind":"item","img":"previews/blueprint.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","FileUpload"],"repo":"https://github.com/palantir/blueprint","desc":"面向数据密集应用（表格/图表/表单）的 React 组件套件。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Blueprint (https://blueprintjs.com) homepage above-the-fold at 1280px width.\n\nGlobal style: dark navy blue gradient background (#111418 to #0f2744), white text, subtle blueprint/technical-drawing line art pattern of UI components (inputs, buttons, forms, calendars) in very faint blue/white lines across the background. Centered hero layout. System sans-serif font.\n\nTop navigation bar (subtle, transparent, padding ~16px 32px, flex justify-end, small white text):\n- Right-aligned nav links: \"Documentation\", \"GitHub\", and a blue button \"View openings\".\n\nHero section (centered, full width, padding ~120px 32px, position relative):\n- A large Blueprint logo in the center — a 3D cube made of three visible faces: red/coral (#ff6b6b) on the left, blue (#4a90e2) on the top-right, green (#2ecc71) on the bottom. The cube is isometric, slightly tilted.\n- Below the logo: \"Blueprint\" in large white bold text (~36px).\n- Subcopy: \"A React-based UI toolkit for the web\" in light gray/white (~16px).\n- Below subcopy: two links separated by a small dot: \"Documentation\" and \"GitHub\" in white/blue, underlined or link style.\n\nBackground pattern (subtle, behind the hero):\n- Very faint white/blue wireframe outlines of UI components: input boxes, buttons, checkboxes, dropdowns, calendar grids, sliders, and form elements scattered across the dark blue gradient. They should be low opacity (~0.08) so they don't overpower the text.\n\nBottom strip (full width, near-black background, padding ~40px, centered):\n- A white stylized icon resembling a circle on a pedestal (open-source symbol).\n- Text below: \"Blueprint is an open source project\" in white.\n\nThe overall vibe is a dark, technical, blueprint-style landing page for a React UI toolkit.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.landing-wireframe`:\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(33, 93, 176, 0.753)\n- `.bp6-button`:\n  **hover:** color: rgb(138, 187, 255); text-decoration: underline; background-color: rgba(255, 255, 255, 0.2)\n  **active:** background-color: rgba(255, 255, 255, 0.4); color: rgb(255, 255, 255)\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(138, 187, 255, 0.753)\n- `.bp6-dark`:\n  **hover:** color: rgb(138, 187, 255); text-decoration: underline\n  **focus:** outline: 2px solid rgba(33,93,176,.752); outline-color: rgba(138, 187, 255, 0.753)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes linear-progress-bar-stripes  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 30px 0px;\n  }\n}\n@keyframes skeleton-glow  {\n  0%  {\n  background: rgba(211, 216, 222, 0.2);\n  border-color: rgba(211, 216, 222, 0.2);\n  } 100%  {\n  background: rgba(95, 107, 124, 0.2);\n  border-color: rgba(95, 107, 124, 0.2);\n  }\n}\n@keyframes pt-spinner-animation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深海军蓝渐变、等距三色立方体(red/blue/green 面)、技术线稿背景(低透明度 SVG 近似 canvas 氛围)、底部开源标识。内联真实 @keyframes linear-progress-bar-stripes/skeleton-glow/pt-spinner-animation。WebGL canvas 用 CSS 线稿近似，已在 notes 标注边界。"},{"id":"grommet","name":"Grommet","fw":["React"],"theme":"企业级 / 响应式","vendor":"HPE","link":"https://v2.grommet.io","kind":"item","img":"previews/grommet.png","chips":["Button","TextInput","Select","CheckBox","RadioButton","RangeInput","Form","FileInput","DataTable"],"repo":"https://github.com/grommet/grommet","desc":"HPE 出品的响应式 React 组件库，主题系统强大。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Grommet (https://v2.grommet.io) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, dark gray text (#444444), purple accent #7d4cdb, clean minimal, lowercase serif headings, system sans-serif body. The read.json body font is \"Times\", so use a serif font for headings.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center):\n- Left: Grommet logo — a purple circle outline ring, next to the word \"grommet\" in lowercase purple text.\n- Right: a white pill button \"docs\" with purple border, a purple filled pill button \"components\", and a magnifying glass search icon.\n\nHero section (centered, white background, padding ~60px 32px):\n- At the top: a large, centered, light-gray browser/window mockup with a subtle shadow and a thin top bar. Inside the mockup, show a faint layout with a left sidebar and a main content area in very light gray.\n- Below the mockup: large centered lowercase serif headline: \"streamline the way you develop apps\" in dark gray (~56px), line-height ~1.2.\n- Subcopy below: \"build responsive and accessible mobile-first projects for the web.\" in gray (~18px), centered, max-width ~600px.\n- Two buttons below the subcopy:\n  - \"GET STARTED\" outlined purple rounded pill with purple text and border.\n  - \"hello world\" solid green/teal rounded pill with dark text (or purple-filled variant).\n\nThe overall vibe is a simple, minimalist product landing page with a big app mockup and friendly lowercase typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.StyledButton-sc-323bzc-0.fXUZcT` → transition: color, background-color, border-color, box-shadow 0.1s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bEKRlj`:\n  **hover:** text-decoration: underline\n- `.fXUZcT`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000; box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.lbmcGd`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000; box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.iNIgAV`:\n  **hover:** background-color: rgba(221, 221, 221, 0.4); color: #000000\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.bA-DKzc`:\n  **hover:** text-decoration: underline\n- `.gpFJnC`:\n  **hover:** text-decoration: underline\n- `.eTRdcZ`:\n  **hover:** box-shadow: rgb(125, 76, 219) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.eOrRZR`:\n  **hover:** box-shadow: rgb(85, 85, 85) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.dGClPB`:\n  **hover:** box-shadow: rgb(129, 252, 237) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.monaco-editor .native-edit-context`:\n  **focus:** opacity: 1\n- `.monaco-editor .ime-text-area`:\n  **focus:** opacity: 1\n- `.dfrqYr`:\n  **hover:** box-shadow: rgb(111, 255, 176) 0px 0px 0px 2px\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.fUOUhe`:\n  **hover:** text-decoration: underline\n- `.hoQiYp`:\n  **focus:** box-shadow: rgb(111, 255, 176) 0px 0px 2px 2px\n- `.bDIANP`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hAsUlT  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes hftlBD  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-smooth  {\n  0%, 20%  {\n  opacity: 1;\n  } 60%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-phase  {\n  0%, 20%  {\n  opacity: 1;\n  } 90%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-expand  {\n  0%, 20%  {\n  transform: scaleY(1);\n  } 80%, 100%  {\n  transform: scaleY(0);\n  }\n}\n@keyframes fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes monaco-findInput-highlight-0  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-1  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-0  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-1  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes progress  {\n  0%  {\n  transform: translateX(0%) scaleX(1);\n  } 50%  {\n  transform: translateX(2500%) scaleX(3);\n  } 100%  {\n  transform: translateX(4900%) scaleX(1);\n  }\n}\n@keyframes flash-background  {\n  0%  {\n  background-color: lightgreen;\n  } 100%  {\n  background-color: none }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches real site: nav logo/buttons, browser mockup, serif headline, two CTA buttons all correct; all prompt keyframes pasted verbatim"},{"id":"evergreen","name":"Evergreen","fw":["React"],"theme":"产品级","vendor":"Segment","link":"https://evergreen.segment.com","kind":"item","img":"previews/evergreen.png","chips":["Button","TextInput","Select","Checkbox","Radio","Switch","Slider","Form","FilePicker"],"repo":"https://github.com/segmentio/evergreen","desc":"Segment 出品的产品级 React UI 套件，开箱即用。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Evergreen (https://evergreen.segment.com) homepage above-the-fold at 1280px width.\n\nGlobal style: white background, very dark navy text (#101e4a), accent blue #3366ff, clean minimal enterprise design, system sans-serif font.\n\nTop navigation bar (height ~64px, white background, padding 0 32px, flex justify-between align-center, border-bottom subtle):\n- Left: Evergreen logo — a small green triangle/tree icon inside a light circle, next to the word \"EVERGREEN\" in uppercase bold dark text, small font.\n- Center: nav links \"Introduction\" \"Foundations\" \"Components\" \"Patterns\" \"Resources\" in dark gray, small font.\n- Right: a blue \"Star\" link.\n\nHero section (white background, padding ~80px 32px ~40px, max-width ~1200px, margin 0 auto):\n- Left-aligned hero content:\n  - Large bold dark headline: \"Meet Evergreen, Segment's design system\" (~40px), line-height ~1.2.\n  - Subcopy: \"Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.\" in gray (~16px), max-width ~520px, line-height 1.6.\n  - Blue rounded button \"Get Started\" with white text, padding ~10px 20px, font-size ~14px.\n\nCore values section (white background, padding ~60px 32px, max-width ~1200px, margin 0 auto):\n- Section title \"Core values\" in bold dark (~24px), margin-bottom ~32px.\n- Three cards in a horizontal row, gap ~24px:\n  - Each card has a small light-blue circular icon (lightbulb, wrench, grid/building blocks) on top, then a bold dark title, then gray description text.\n  - Card 1: title \"Works out of the box\", body \"Evergreen contains a set of polished React components that work out of the box.\"\n  - Card 2: title \"Flexible and composable\", body \"Evergreen components are built on top of a React UI Primitive for endless composability.\"\n  - Card 3: title \"Enterprise-grade\", body \"Evergreen features a UI design language for enterprise-grade web applications.\"\n\nThe overall vibe is a clean, corporate, Segment-style design system landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.ub-fnt-sze_14px.ub-f-wght_400` → transition: all 0.12s ease-in-out\n- `button.ub-pst_relative.ub-f-wght_500` → transition: box-shadow 0.08s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ub-box-szg_border-box`:\n  **hover:** color: rgb(71, 77, 102); background-color: rgb(41, 82, 204); border-bottom-color: rgb(41, 82, 204); border-left-color: rgb(41, 82, 204); border-right-color: rgb(41, 82, 204); border-top-color: rgb(41, 82, 204)\n  **active:** color: rgb(16, 24, 64); background-color: rgb(31, 61, 153); border-bottom-color: rgb(31, 61, 153); border-left-color: rgb(31, 61, 153); border-right-color: rgb(31, 61, 153); border-top-color: rgb(31, 61, 153)\n  **focus:** box-shadow: rgb(230, 232, 240) 0px 0px 0px 2px; background-color: rgb(51, 102, 255); border-bottom-color: rgb(51, 102, 255); border-left-color: rgb(51, 102, 255); border-right-color: rgb(51, 102, 255); border-top-color: rgb(51, 102, 255)\n- `.ub-dspl_flex`:\n  **hover:** color: rgb(41, 82, 204); transform: translateY(-2px); box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 2px 4px -2px\n  **active:** color: rgb(31, 61, 153)\n  **focus:** box-shadow: rgb(173, 194, 255) 0px 0px 0px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading_eqdsen  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes loading-circle_1gjkti9  {\n  0%  {\n  stroke-dashoffset: 600;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes openAnimation_65p985  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-120%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes closeAnimation_7y33w6  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 100%  {\n  transform: scale(0.9);\n  opacity: 0;\n  }\n}\n@keyframes openAnimation_17afo5l  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes fadeInAnimation_1b6l33e  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOutAnimation_dnefzk  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes openAnimation_1eqftk6  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes closeAnimation_16u42jn  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 100%  {\n  transform: scale(0.8);\n  opacity: 0;\n  }\n}\n@keyframes pulseAnimation_9bpru1  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.9);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate360InAnimation_5ilb18  {\n  0%  {\n  transform: translateX(100%) rotate(0deg);\n  } 100%  {\n  transform: translateX(-100%) rotate(-360deg);\n  }\n}\n@keyframes rotate360OutAnimation_1z164r  {\n  0%  {\n  transform: translateX(-100%) rotate(0deg);\n  } 100%  {\n  transform: translateX(100%) rotate(360deg);\n  }\n}\n@keyframes leftRotate360InAnimation_flx4dq  {\n  0%  {\n  transform: translateX(-100%) rotate(0deg);\n  } 100%  {\n  }\n}\n@keyframes leftRotate360OutAnimation_to4evf  {\n  0%  {\n  transform: translateX(100%) rotate(0deg);\n  } 100%  {\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches real site: nav with centered links, left-aligned hero headline+button, 3-card core values with icons all correct; all prompt keyframes pasted verbatim"},{"id":"fluent","name":"Fluent UI (React)","fw":["React"],"theme":"Microsoft / Fluent","vendor":"Microsoft","link":"https://react.fluentui.dev","kind":"item","img":"previews/fluent.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Dropdown","Form"],"repo":"https://github.com/microsoft/fluentui","desc":"微软 Fluent Design 的 React 实现，Office/Windows 同款。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Fluent UI React v9 Storybook documentation page above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text rgb(17,16,15), secondary text gray rgb(96, 94, 91). Font stack: \"Segoe UI\", -apple-system, system-ui, Roboto, \"Helvetica Neue\", sans-serif.\n\nLayout: fixed-height full-screen two-column layout. Top navigation bar (~48px, white background, bottom border 1px solid #e8e8e8, flex justify-between align-center, padding 0 16px):\n- Left: a small abstract Fluent logo icon (two overlapping blue/cyan/purple triangular/chevron shapes pointing right, like a stylized \"F\"). The logo uses a gradient from #0f6cbd to #4b54a6 with a slight 3D overlap. Next to it, the text \"Fluent UI React v9\" in 14px bold dark text.\n- Right: a small gear/settings icon button in muted gray.\n\nLeft sidebar (fixed width ~240px, white background, right border 1px solid #e8e8e8, padding 12px, overflow-y auto):\n- Search box at the top with light gray border (#d1d1d1), rounded corners 4px, placeholder text \"Find components\", and a small magnifying glass icon on the left.\n- Navigation sections with 14px dark bold headings and 13px gray item rows:\n  - Section \"Concepts\" (expanded): item \"Introduction\" highlighted with a bright blue (#0078d4) background bar and white text; items below: \"Developer\", \"Migration\", \"Recipes\", \"Package Maturity Levels\". Use a small document/page icon before each item (a simple rectangle with folded corner).\n  - Section \"Theme\" (collapsed, with chevron): \"Border Radii\", \"Colors\", \"Fonts\", \"Shadows\", \"Spacing\", \"Stroke Widths\", \"Typography\", \"Theme Designer\".\n  - Section \"Components\" (collapsed, with chevron): \"Accordion\", \"Avatar\", \"AvatarGroup\", \"Badge\", \"Breadcrumb\".\n\nMain content area (right of sidebar, light gray/white background, padding 32px):\n- Large bold heading \"Fluent UI React Components\" (~32px, dark).\n- Below it, subheading \"v9.74.3\" (~18px, muted gray).\n- A large hero banner card with rounded corners 8px, full-width of the main content, height ~280px. Background is a soft pastel gradient (pink #f8e8f2 → lavender #e8e8f8 → light blue #d8f0fc). Add subtle translucent pink/purple circles/blurred blobs behind the numeral. In the center, render a large, translucent, glossy 3D-style number \"9\" with a glassy/iridescent appearance: white-to-light-blue highlights, soft long shadow, subtle purple and pink reflections, low opacity so it blends with the background. The numeral should look like a floating translucent 3D shape, not a flat white number.\n- Below the banner, a section heading \"What's new\" (~20px, bold dark) with a thin gray horizontal divider above it.\n\nKeep the overall look clean, like a Microsoft documentation/Storybook interface, with flat styling and subtle separators.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.css-17ac8cd` → transition: opacity 0.2s ease-in-out\n- `button.css-17coe6o` → transition: background, box-shadow 0.15s ease-out\n- `input.css-1w135r1` → transition: all 0.15s ease\n- `button.css-h7e28b` → transition: color, box-shadow 0.15s, 0.15s ease, ease 0s, 0s\n- `div.css-1h0aucu` → transition: transform 0.1s ease-out\n- `iframe.css-1ey3k8o` → transition: background-position, visibility 0s, 0s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-1l2fybq`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset; opacity: 1\n- `.css-1p3dnyj > *`:\n  **focus:** border-color: rgb(0, 120, 212); border-top-color: rgb(0, 120, 212); border-right-color: rgb(0, 120, 212); border-bottom-color: rgb(0, 120, 212); border-left-color: rgb(0, 120, 212)\n- `.css-17coe6o`:\n  **hover:** color: rgb(0, 120, 212); background: rgba(0, 120, 212, 0.14); background-color: rgba(0, 120, 212, 0.14)\n  **active:** color: rgb(0, 120, 212); background: rgba(2, 156, 253, 0.1); background-color: rgba(2, 156, 253, 0.1)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset\n- `.css-474jb1`:\n  **hover:** color: rgb(0, 120, 212); background: rgba(0, 120, 212, 0.14); background-color: rgba(0, 120, 212, 0.14)\n  **active:** color: rgb(0, 120, 212); background: rgba(2, 156, 253, 0.1); background-color: rgba(2, 156, 253, 0.1)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset\n- `.css-du0n83`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** box-shadow: rgb(0, 120, 212) 0px 0px 0px 1px inset; opacity: 1; background: white; color: rgb(0, 120, 212); background-color: white\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes animation-r0iffl  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@-webkit-keyframes animation-u07e3c  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：白底 Storybook 双栏、Segoe UI、渐变 F 形 logo、粉/薰衣草/蓝柔和渐变 banner 内玻璃质感数字'9'。内联真实 @-webkit-keyframes animation-r0iffl(闪烁)/animation-u07e3c(旋转 .36deg/spin) 与多项 transition(opacity .2s ease-in-out / background .15s ease-out 等)。纯 CSS 动画复现一致。"},{"id":"polaris","name":"Polaris","fw":["React"],"theme":"电商 / Shopify","vendor":"Shopify","link":"https://polaris.shopify.com","kind":"item","img":"previews/polaris.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Slider","Form","DropZone"],"repo":"https://github.com/Shopify/polaris","desc":"Shopify 管理后台设计系统，电商场景组件齐全。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Polaris for React deprecation landing page above-the-fold at 1280px width.\n\nGlobal style: full-screen dark teal/blue gradient background that radiates from a lighter teal center to deep navy/teal edges (center roughly #1a5c7a, edges #0a2e42). Scatter small white dot \"stars\" across the background with varying opacity and sizes for a subtle space effect. Add a soft white/blue radial glow behind the central icon.\n\nTypography: Inter, -apple-system, system-ui, Segoe UI, Roboto, sans-serif. White text.\n\nCentered hero layout (vertical center, text-align center, horizontal padding 32px):\n- At the top, a large white 4-point star / sparkle icon. The icon should be plump and rounded, like a soft plus/starburst shape, with a subtle white glow and drop shadow so it looks luminous against the dark background. Size about 120px x 120px.\n- Below the icon, a bold white heading: \"Polaris for React is deprecated.\" (~28px, font-weight 700, letter-spacing -0.2px).\n- Subcopy below heading in lighter teal/white (~16px, line-height 1.6, max-width ~640px, centered): \"Polaris Web Components are now the default way to build Shopify apps. Built on web standards, they work with React, Vue, vanilla JavaScript, or no framework at all.\"\n- Primary button: white background, dark teal text, rounded corners 8px, padding ~12px 28px, font-weight 600, label \"Go to Polaris Web Components\".\n- Below the button, a text link: \"Continue to Polaris React\" in white with a subtle underline.\n\nOverall vibe: a calm, starry night-sky deprecation notice with a glowing Polaris-style star icon, clean and centered.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.Frame_DarkModeIcon__ZX2zl` → animation: Frame_slide-down__WiYgV 0.3s ease 1 normal\n- `div.InterstitialModal_Overlay__5HBZV` → animation: InterstitialModal_fadeIn__e3b_1 0.4s ease-in-out 1 normal\n- `div.InterstitialModal_Star__3ULFw` → animation: InterstitialModal_twinkle__5_RKG 2.75346s ease-in-out 1.64517s infinite normal\n- `div.InterstitialModal_Modal__MjD5T` → animation: InterstitialModal_slideUp__E_tIq 0.5s ease-out 1 normal\n- `div.InterstitialModal_BackgroundStarBottom__Qhz6m` → animation: InterstitialModal_backgroundStarBottomSink__Y65Bw 2s ease-out 0.3s 1 normal forwards\n- `div.InterstitialModal_BackgroundStarTop__USNm7` → animation: InterstitialModal_backgroundStarTopSink__qT8FW 2s ease-out 0.3s 1 normal forwards\n- `div.InterstitialModal_MainStar__TkNvQ` → animation: InterstitialModal_starRise__RWvS4, InterstitialModal_starFloat__Ry606 1.5s, 3s ease-out, ease-in-out 0.3s, 2s 1, infinite normal, normal forwards, none\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.Frame_PolarisUnifiedCta__N2WIF` → transition: transform 0.2s ease-out\n- `a` → transition: box-shadow, scale 0.3s, 0.3s ease, ease-in-out 0s, 0s\n- `span.Frame_NavItem__FmKTU` → transition: box-shadow 0.2s linear\n- `button.InterstitialModal_SecondaryLink__uUB33` → transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1)\n- `div` → transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1)\n- `svg` → transition: background-color, color 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `:where(.styles-for-site-but-not-polaris-examples *)`:\n  **hover:** scale: 1.01; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; opacity: 1\n  **focus:** transform: translateY(0px)\n- `.InterstitialModal_PrimaryButton__kpnLm`:\n  **hover:** background: #f0f0f0!important; background-color: rgb(240, 240, 240) !important\n  **active:** background: #e0e0e0!important; background-color: rgb(224, 224, 224) !important\n  **focus:** border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red\n- `.InterstitialModal_SecondaryLink__uUB33`:\n  **hover:** opacity: 1\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n  **focus-visible:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `#dux-privacy .button`:\n  **hover:** background-color: rgb(0 0 0); color: rgb(255, 255, 255); border-color: rgb(122 235 159); border-top-color: rgb(122, 235, 159); border-right-color: rgb(122, 235, 159); border-bottom-color: rgb(122, 235, 159); border-left-color: rgb(122, 235, 159)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes p-motion-keyframes-bounce  {\n  0%, 65%, 85%  {\n  transform: scale(1);\n  } 75%  {\n  transform: scale(0.85);\n  } 82.5%  {\n  transform: scale(1.05);\n  }\n}\n@keyframes p-motion-keyframes-fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes p-motion-keyframes-pulse  {\n  0%, 75%  {\n  transform: scale(0.85);\n  opacity: 1;\n  } 100%  {\n  transform: scale(2.5);\n  opacity: 0;\n  }\n}\n@keyframes p-motion-keyframes-appear-above  {\n  0%  {\n  transform: translateY(var(--p-space-100));\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes p-motion-keyframes-appear-below  {\n  0%  {\n  transform: translateY(calc(var(--p-space-100)*-1));\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes Polaris-Checkbox--pathAnimation  {\n  0%  {\n  stroke-dashoffset: 2;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut  {\n  0%  {\n  transform: translateX(var(--p-space-100));\n  } 80%  {\n  transform: translateX(var(--p-space-100));\n  } 100%  {\n  transform: translateX(var(--p-space-500));\n  }\n}\n@keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon  {\n  0%  {\n  transform: translateX(calc(var(--p-space-500)*-1));\n  opacity: 0;\n  } 40%  {\n  opacity: 0;\n  } 50%  {\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Polaris-Navigation__snappy--grow  {\n  0%  {\n  margin-bottom: -10%;\n  opacity: 0;\n  } 100%  {\n  margin-bottom: 0px;\n  opacity: 1;\n  }\n}\n@keyframes GlobalSearch_search-results-enter__p_rD8  {\n  0%  {\n  transform: scale(0.98);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes SearchResultHighlight_fade-in__3_Z2U  {\n  0%  {\n  transform: scale(0.95);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes Frame_fade-in__eoxEF  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes InterstitialModal_fadeIn__e3b_1  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes InterstitialModal_sunsetDarken__kcJ54  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅用提示词手写重建。落地：深青蓝径向渐变星空、发光四角星 sparkle、居中废弃通知、白底深青按钮。内联真实 @keyframes InterstitialModal_fadeIn/slideUp/starFloat/twinkle 与 p-motion-keyframes-*；背景星 JS 随机生成 + twinkle 动画。滚动/悬停过渡(transform .2s ease-out / box-shadow .3s)照抄。动画复现一致。"},{"id":"primer","name":"Primer","fw":["React"],"theme":"GitHub / 开发者工具","vendor":"GitHub","link":"https://primer.style","kind":"item","img":"previews/primer.png","chips":["Button","TextInput","Select","Checkbox","Radio","Switch","Form","FileUpload","Table"],"repo":"https://github.com/primer/react","desc":"GitHub 官方设计系统，开发者工具与文档站同款风格。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Primer design system homepage above-the-fold at 1280px width.\n\nGlobal style: very light gray background (#f6f8fa), dark text (#1f2328), link accent blue (#0969da). Font stack: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\".\n\nTop navigation bar (~56px, white background, bottom border 1px solid #d1d9e0, flex justify-between align-center, padding 0 32px):\n- Left: GitHub inverted \"Octocat\" logo icon (white cat silhouette inside a black circle) followed by the text \"Primer\" in bold dark text (~16px).\n- Right: horizontal nav links \"Product UI\", \"Brand UI\", \"Octicons\", \"Accessibility\", \"Brand Toolkit\" (with a small asterisk/superscript on \"Toolkit\"), then a small circular theme icon button, then a light gray bordered button \"Give feedback\" with rounded corners 6px.\n\nHero section (centered, light gray background, top padding ~60px, padding-bottom ~50px):\n- Very large bold centered headline \"Primer\" (~56px, black).\n- Centered subline \"The design system for GitHub\" (~18px, muted gray #57606a) below it.\n- In the top-right corner behind the hero, place abstract colorful geometric shapes: a large blue (#3572a5) irregular blob/circle, a teal/green (#2dba4e) curved shape, and a lighter blue (#79c0ff) rounded shape, partially off-screen, overlapping like a modern abstract art illustration.\n\nCards section (below hero, on same light gray background, two large white cards side by side with gap ~24px, max-width ~1160px, margin auto, padding 0 32px 60px):\n- Left card (white, rounded 16px, padding 32px, subtle shadow, flex:1):\n  - Heading \"Build UI at GitHub\" on first line, \"with Primer Product UI\" on second line (~28px, bold dark).\n  - Below, a blue link \"Get started with Product UI\" with a right-pointing chevron.\n  - At the bottom of the card, add simple UI component illustrations: a light gray browser window/chrome bar, a small green success toast with checkmark and text \"Success!\", a small purple button labeled \"Button\", and a few faint gray connected circles/line drawing to the left to suggest component diagrams.\n- Right card (white, rounded 16px, padding 32px, subtle shadow, flex:1):\n  - A grid of 6 stylized GitHub Octocat/brand icon variations (3 columns x 2 rows): top row outline cat, solid blue cat, solid teal/blue cat; bottom row outline side profile cat, solid blue side profile cat, solid blue/teal gradient side profile cat. Keep them simple SVG-style icons with rounded shapes.\n  - Below the icons, heading \"Create for GitHub\" on first line and \"using the Brand toolkit\" on second line (~28px, bold dark).\n\nOverall look: clean, modern GitHub design system landing page, light and airy with white cards and colorful abstract accents.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.prc-Button-ButtonBase-9n-Xk.prc-Button-IconButton-fyge7` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.Primer_Brand__Bento-module__Bento__Item___fM9oe.Primer_Brand__Bento-module__Bento__Item--bgColor-subtle___rIDKo` → transition: transform 0.4s cubic-bezier(0.01, 0.73, 0.08, 0.93)\n- `svg` → transition: transform 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.SkipLink-module__QsmcLW__SkipLink`:\n  **hover:** text-decoration: underline\n- `.Header-module__JCpHOG__SiteTitle`:\n  **hover:** text-decoration: underline\n- `.Navigation-module__z92daa__Link`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___hRw_R  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down___kwg9g  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-out___fhdxi  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__enlarge-shadow___pfcD5  {\n  0%  {\n  scale: 0.98;\n  box-shadow: rgba(1, 4, 9, 0.15) 0px 8px;\n  } 100%  {\n  scale: 1;\n  box-shadow: rgba(1, 4, 9, 0.15) 0px 8px 24px;\n  }\n}\n@keyframes Primer_Brand__SubdomainNavBar-module__fade-in-down-staggered___zQfEQ  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.6) translateY(-8px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___xgh8U  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__AnchorNav-module__fade-in___KfA_2  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___P9_uK  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-top___hI7o9  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes Primer_Brand__TextRevealAnimation-module__wipe___Mztl1  {\n  0%  {\n  transform: scaleX(1);\n  } 100%  {\n  transform: scaleX(0);\n  }\n}\n@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___K2Z30  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n@keyframes Primer_Brand__Tooltip-module__tooltip-appear___OeSNz  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__SubNav-module__fade-in___t8Rrr  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes Primer_Brand__SubNav-module__fade-in-down___LOqE1  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、色值、文案匹配；v2 改进了抽象图形、组件示意图与品牌图标网格。14 个关键帧完整保留。"},{"id":"baseweb","name":"Base Web","fw":["React"],"theme":"产品级","vendor":"Uber","link":"https://baseweb.design","kind":"item","img":"previews/baseweb.png","chips":["Button","Input","Select","Checkbox","Radio","Slider","Form","FileUploader","Table"],"repo":"https://github.com/uber/baseweb","desc":"Uber 基于 Styletron 的 React 组件库，主题可深度定制。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Base Web React UI framework documentation homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000), system font stack. Clean, minimal documentation layout.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #e5e5e5, flex justify-between align-center, padding 0 24px):\n- Left: Base Web logo — a small geometric diamond shape (square rotated 45°) made of black lines, with the word \"Base\" in bold black text to the right and a smaller \"Web\" stacked below/inside the logo mark. Then a version dropdown \"v18.2.0\" with a small downward chevron, followed by nav links \"Blog\" and \"Components\".\n- Right: a search input box with a magnifying glass icon and placeholder \"Search documentation\" (light gray border, rounded), then a GitHub icon button, a hamburger menu icon button, and a lightbulb/theme icon button.\n\nLayout: two-column docs layout. Left sidebar (fixed width ~260px, white background, right border 1px solid #e5e5e5, padding 16px 0, font-size 13px):\n- Section heading \"GETTING STARTED\" in small uppercase gray, bold, with items below: \"Home\" (active, highlighted with a light gray background bar and black text), \"Setup\", \"Learn Base Web\".\n- Section heading \"GUIDES\" in small uppercase gray, items: \"Internationalization\", \"Bidirectionality\", \"Theming\", \"Styling\", \"Overrides\", \"Colors\", \"API Cheat Sheet\".\n- Section heading \"COMPONENTS\" in small uppercase gray, then subsection \"INPUTS\" in smaller uppercase gray, with items: \"Button\", \"Button Dock\", \"Button Group\", \"Button Timed\", \"Checkbox\", \"Checkbox-v2\".\n\nMain content area (right of sidebar, padding 32px 40px, white background):\n- A small green badge labeled \"New\" with a light green background (#e6f7f0) and green text (#1a7f37), followed by the text \"What's new in Base Web 16?\" in black with a small arrow/chevron on the right.\n- Large bold heading \"Base Web React UI framework\" (~28px).\n- Subcopy below: \"Base Web is a foundation for initiating, evolving, and unifying web products.\" (~14px, gray).\n- Two white cards with light gray border (#e5e5e5), rounded 8px, padding 20px, side by side (gap 20px), each taking ~50% width:\n  - Card 1: heading \"Setup Base Web\", body text \"Base Web is distributed as an npm package. As Base Web is built on top of a CSS-in-JS engine, all you need is the dependencies from npm.\", and a black button at the bottom with white text \"Setup Base Web\".\n  - Card 2: heading \"Learning Base Web\", body text \"The best way to learn Base Web is to start building an application using it. Click on the link below to find 2 apps built using Base Web (one simple, one more complex).\", and a black button at the bottom with white text \"Learn more\".\n- Below the cards, start a section with heading \"Components\" (~22px, bold), followed by body text mentioning \"Datepicker\" and \"Layer\" as underlined links, and a link to the \"component gallery\".\n\nOverall vibe: clean, minimal, black-and-white documentation site with sharp typography and simple bordered cards.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.css-DGmGm` → transition: background 0.2s cubic-bezier(0, 0, 1, 1)\n- `a.css-dLzUvf` → transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-hjBPNt`:\n  **hover:** color: rgb(75, 75, 75)\n  **active:** color: rgb(94, 94, 94)\n- `.css-eSkqEk`:\n  **focus:** outline: rgb(39, 110, 241) solid 3px; outline-color: rgb(39, 110, 241)\n- `.css-DGmGm`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-lhiqvA`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-fzNYDq`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-eFhhiP`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-fCanch`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n- `.css-IohLN`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.04) 999px 999px 0px inset\n  **active:** box-shadow: rgba(0, 0, 0, 0.08) 999px 999px 0px inset\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset, rgb(39, 110, 241) 0px 0px 0px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、色值、文案匹配；v2 修正了 New 大小写、全宽按钮、侧边栏激活态左边框与组件说明文案。过渡规则已保留。"},{"id":"gestalt","name":"Gestalt","fw":["React"],"theme":"产品级","vendor":"Pinterest","link":"https://gestalt.pinterest.systems","kind":"item","img":"previews/gestalt.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Form","FileUploader","Table"],"repo":"https://github.com/pinterest/gestalt","desc":"Pinterest 设计系统，强调一致的产品体验。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Gestalt (Pinterest's Design System) homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000). Typography: a bold, friendly sans-serif (use system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif). Clean Pinterest-style landing page.\n\nTop navigation bar (~56px, white background, flex justify-between align-center, padding 0 32px):\n- Left: Gestalt logo — a circular/wedge icon made of three colored segments (blue, purple, and pink/green), like a small pie chart, followed by the word \"Gestalt\" in bold black text (~18px).\n- Right: a moon icon button (theme toggle), a light gray pill button \"Gestalt 1.0\" with a small arrow/↗ after it, and a bright red pill button \"Login\" with white text.\n\nHero section (centered, white background, padding ~80px 32px 60px):\n- Huge bold centered headline: \"Pinterest's Design System\" on two lines (~52px, very bold, line-height 1.05).\n- Centered subcopy below: \"We're here to help you build experiences that inspire people to create the life they love\" (~16px, gray #444, max-width ~520px, line-height 1.5).\n- Below the subcopy, an image collage of rounded rectangles (radius ~24px) arranged in an overlapping, playful Pinterest-style layout. Include:\n  - A tall vertical image on the left (hands/nails photo) with rounded corners.\n  - A central top image (person in sunglasses/green stripes) with rounded corners.\n  - A right-side image (hair with colorful clips against a blue sky) with rounded corners, slightly larger.\n  - A small bottom image (food/plant) centered below the central image.\n  - A blue toggle-switch icon to the left of the central image.\n  - A blue pushpin icon near the bottom center between images.\n  - A black pill badge with white text and a checkmark: \"✓ Gestalt\" near the bottom right.\n  Since no external images can be used, represent each photo as a rounded colored placeholder block with a subtle gradient and optional CSS pattern to suggest photography (e.g., skin-tone, green, blue, food-green tones). Keep the collage arrangement and overlapping feel.\n\nOverall vibe: playful, Pinterest-brand design system landing page with rounded imagery and bold typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.d3L.NLN` → transition: transform 0.085s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-link`:\n  **focus:** outline: 2px solid #000000\n- `.KuF`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes FuY  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes _Ud  {\n  0%  {\n  transform: translateX(-100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes Pmg  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@keyframes JYg  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(-100%);\n  }\n}\n@keyframes YAI  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes Yls  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes UVU  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  } 100%  {\n  opacity: var(--sema-opacity-90);\n  }\n}\n@keyframes Wl2  {\n  0%  {\n  opacity: var(--sema-opacity-90);\n  } 100%  {\n  opacity: var(--sema-opacity-0);\n  }\n}\n@keyframes W9B  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  } 100%  {\n  opacity: var(--sema-opacity-100);\n  }\n}\n@keyframes t25  {\n  0%  {\n  opacity: var(--sema-opacity-0);\n  transform: scale(0.8);\n  } 20%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(1);\n  } 40%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(0.8);\n  } 60%  {\n  opacity: var(--sema-opacity-100);\n  transform: scale(1);\n  } 80%  {\n  opacity: var(--sema-opacity-0);\n  transform: scale(0.8);\n  } 100%  {\n  opacity: var(--sema-opacity-0);\n  }\n}\n@keyframes TAT  {\n  0%  {\n  background-color: var(--comp-skeleton-color-background-default);\n  } 11.5385%  {\n  background-color: var(--comp-skeleton-color-background-highlight);\n  } 23.0769%, 100%  {\n  background-color: var(--comp-skeleton-color-background-default);\n  }\n}\n@keyframes xvO  {\n  0%  {\n  transform: translate(var(--g-start-x),var(--g-start-y)) scale(0);\n  } 100%  {\n  transform: translate(0px) scale(1);\n  }\n}\n@keyframes f2V  {\n  100%  {\n  transform: scale(0);\n  }\n}\n@keyframes jfh  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"v3 修正了两行标题、拼贴布局、toggle、pushpin 与 badge 位置；14 个关键帧与过渡规则已保留。图片用渐变色块替代（无法使用外部图片）。"},{"id":"antd-mobile","name":"Ant Design Mobile","fw":["React"],"theme":"移动端 / H5","vendor":"蚂蚁集团","link":"https://mobile.ant.design","kind":"item","img":"previews/antd-mobile.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","ImagePicker"],"repo":"https://github.com/ant-design/ant-design-mobile","desc":"移动端 Ant Design，组件专为拇指操作设计，支持 PWA。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ant Design Mobile homepage above-the-fold at 1280px width.\n\nGlobal style: bright blue gradient background (center #2b8df5, edges #1677ff), white text. Chinese UI library landing page. Font stack: -apple-system, system-ui, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif.\n\nTop navigation bar (~56px, transparent/blue background, white text, flex justify-between align-center, padding 0 32px):\n- Left: Ant Design Mobile logo — a stylized blue \"A\" made of two lines with two small colored dashes (red and blue) to the right, followed by text \"Ant Design Mobile\" in white bold, and a small gray version pill \"v5.42.2\".\n- Center: a search input box with light blue/transparent background, rounded corners, placeholder \"搜索\" and a small magnifying glass icon.\n- Right: nav links in white Chinese: \"指南\", \"组件\", \"资源\", \"国内镜像\", \"返回旧版\", \"发布日志\", \"GitHub\". Then an outlined \"English\" button with white border and text, rounded corners.\n\nHero section (padding ~80px 32px 100px, flex row, content on left, visual on right):\n- Left side:\n  - Large white headline \"Ant Design Mobile\" (~42px, bold).\n  - Subcopy in white Chinese: \"探索移动端 Web 的极致体验\" (~18px).\n  - Two buttons below (gap 16px): primary \"开始使用\" (blue background, white text, rounded pill), secondary \"在线体验\" (transparent background, white text, white border, rounded pill).\n- Right side: a floating composition of mobile UI components on the blue gradient:\n  - A tall phone mockup (white rounded rectangle, ~160px wide, ~320px tall) with a subtle shadow, showing the Ant Design Mobile logo inside (blue \"A\" + red/blue dashes).\n  - A calendar card floating to the left of the phone, white rounded rectangle, showing \"2022年 2月\" at the top, a 7x6 grid of day numbers, and the date \"21\" highlighted in blue.\n  - A small toggle switch floating above the calendar (colored pill with a knob).\n  - A green checkmark card floating to the right of the phone (white rounded rectangle with a green circle checkmark).\n  - A small orange avatar/user icon below the green card.\n  - Add subtle light-blue translucent circles/rectangles in the background to suggest a layered app interface.\n\nFeature cards section (white background, four columns, max-width ~1100px, centered, padding 40px 32px, gap ~24px):\n- Each card is centered, with a blue icon above, a bold Chinese title, and gray body text below.\n- Card 1: icon (layers/diamond), title \"高性能\", body \"无需配置，即可拥有最佳的包体积大小和极致的性能\".\n- Card 2: icon (sliders/pen), title \"可定制\", body \"可以高效地对组件外观进行调整或创造自己的主题\".\n- Card 3: icon (circle/atom), title \"原子化\", body \"每个组件的功能不多也不少，恰好就是你所需\".\n- Card 4: icon (target/smooth), title \"流畅感\", body \"拥有流畅的手势和细腻的动画，助力产品打造出极致体验\".\n\nBelow the cards, a section heading \"语言设计与开发资源\" in gray.\n\nOverall vibe: bright, modern Chinese mobile component library landing page with a blue gradient and floating mobile UI illustrations.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.__dumi-default-navbar-logo` → transition: opacity 0.2s ease-in-out\n- `input.__dumi-default-search-input` → transition: all 0.2s ease\n- `a` → transition: all 0.3s ease\n- `button.adm-button.adm-button-primary` → transition: opacity 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.__dumi-default-navbar-logo`:\n  **active:** opacity: 0.8\n- `.__dumi-default-search-input`:\n  **focus:** border-color: #1677ff; border-top-color: rgb(22, 119, 255); border-right-color: rgb(22, 119, 255); border-bottom-color: rgb(22, 119, 255); border-left-color: rgb(22, 119, 255)\n- `.__dumi-default-navbar nav > span > a`:\n  **hover:** color: rgb(255, 255, 255); opacity: 1\n  **active:** opacity: 0.8\n- `.__dumi-default-locale-select a`:\n  **active:** opacity: 0.8\n- `.homePage___3_GRs a`:\n  **active:** opacity: 0.8\n- `.adm-card`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px, rgba(0, 0, 0, 0.09) 0px 5px 12px 4px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes adm-spin-loading-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes adm-skeleton-loading  {\n  0%  {\n  background-position: 100% 50%;\n  } 100%  {\n  background-position: 0px 50%;\n  }\n}\n@keyframes adm-shake-horizontal  {\n  0%  {\n  transform: translateX(0px);\n  } 10%  {\n  transform: translateX(-4px);\n  } 20%  {\n  transform: translateX(5px);\n  } 30%  {\n  transform: translateX(-1px);\n  } 40%  {\n  transform: translateX(8px);\n  } 50%  {\n  transform: translateX(0px);\n  } 60%  {\n  transform: translateX(-8px);\n  } 70%  {\n  transform: translateX(1px);\n  } 80%  {\n  transform: translateX(-5px);\n  } 90%  {\n  transform: translateX(4px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes loading-rotate  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes adm-caret-blink  {\n  0%  {\n  opacity: 1;\n  } 60%  {\n  opacity: 1;\n  } 80%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes dropDown  {\n  0%  {\n  margin-top: -100%;\n  } 100%  {\n  margin-top: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 改进了 Logo、手机模型、日历卡片、分段 toggle 与特性卡片的重叠白色容器；6 个关键帧与 4 条过渡规则已保留。"},{"id":"react-bootstrap","name":"React Bootstrap","fw":["React"],"theme":"Bootstrap 风格","vendor":"React Bootstrap","link":"https://react-bootstrap.github.io","kind":"item","img":"previews/react-bootstrap.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/react-bootstrap/react-bootstrap","desc":"Bootstrap 5 的 React 重写，无 jQuery 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Bootstrap homepage above-the-fold at 1280px width.\n\nGlobal style: dark background (#1a1d21 or #212529), white/light gray text, purple accent (#7b2ff7). Font stack: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif.\n\nTop navigation bar (~56px, purple gradient background from #7b2ff7 to #9c4dff, white text, flex justify-between align-center, padding 0 24px):\n- Left: React Bootstrap logo — a small rounded square with a stylized \"RB\" letters, followed by \"React Bootstrap\" in bold white text. Then nav links \"Getting Started\" and \"Components\" in white.\n- Right: version dropdown \"v3.0.0-beta.5 (Bootstrap 5)\" with a small chevron, \"GitHub\" link with an external-link icon, a moon/theme icon button, and a dark search button labeled \"Search ⌘K\" (black background, rounded, with a magnifying glass and the ⌘K shortcut).\n\nHero section (centered, dark background, padding ~80px 32px 40px):\n- Large centered white headline \"React Bootstrap\" (~42px, bold).\n- Centered light gray subcopy \"The most popular front-end framework, rebuilt for React.\" (~18px, color #adb5bd).\n- Two centered purple buttons with rounded corners 6px, gap 16px, white text, font-weight 600:\n  - \"Get started\"\n  - \"Components\"\n- Below the buttons, centered text \"Current version: 3.0.0-beta.5\" in gray (#adb5bd).\n- Below that, a small advertisement card (dark gray/black background, rounded 4px, border 1px solid #333, max-width ~400px, margin auto, padding 12px, display flex):\n  - Left: a small square ad image (black background with a hand icon and colorful text).\n  - Right: ad text \"Spike forgiveness. Zero overages. Zero surprise bills. Free for 30 days, no card required.\" in small white/light gray text, and a tiny \"ADS VIA CARBON\" label at the bottom.\n\nFeatures section (dark background, three-column layout, max-width ~1100px, margin auto, padding 40px 32px, gap 32px):\n- Column 1: heading \"Rebuilt with React\" white bold, body paragraphs in gray #adb5bd about replacing Bootstrap JavaScript with true React components and jQuery-free.\n- Column 2: heading \"Bootstrap at its core\", body paragraphs about compatibility and Bootstrap stylesheet.\n- Column 3: heading \"Accessible by default\", body paragraphs about accessibility and component control.\n\nOverall vibe: dark, developer-focused React library landing page with Bootstrap branding and purple accents.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.skipToContent_fXgn` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `button.clean-btn.toggleButton_yw5v` → transition: background 0.2s ease\n- `button.DocSearch.DocSearch-Button` → transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.navbar-sidebar__backdrop` → transition: opacity, visibility 0.2s ease-in-out\n- `a.button.button--primary` → transition: color, background, border-color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.menu__link`:\n  **hover:** color: rgb(26, 26, 26)\n- `.accordion-flush > .accordion-item > .accordion-collapse`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.dropdown__menu`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes b  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes c  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes d  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes e  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes f  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"布局、配色、字体与预览高度一致，导航栏紫色渐变、Hero区域、广告卡片和三栏特性均还原到位。逐字复制了全部6个@keyframes及hover/transition过渡规格，入场淡入动画已实现。"},{"id":"ariakit","name":"Ariakit","fw":["React"],"theme":"无样式 / a11y","vendor":"Ariakit","link":"https://ariakit.org","kind":"item","img":"previews/ariakit.png","chips":["Button","Checkbox","Radio","Switch","Form","Select","Combobox","Dialog","Popover"],"repo":"https://github.com/ariakit/ariakit","desc":"低层级无障碍 React 组件原语，键盘导航一流。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Ariakit homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), black text (#000000), blue accent (#007acc or similar), with gradient underlines (blue to purple/pink). Font stack: __GeistSans, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #e8e8e8, flex justify-between align-center, padding 0 32px):\n- Left: Ariakit logo — a blue rounded square with a white stylized lowercase \"a\" inside, followed by the text \"ariakit\" in bold dark lowercase. Then a version pill/button \"v0.4.32\" with a small sparkle/asterisk icon and a downward chevron. Then a \"Browse\" button with a magnifying glass icon and \"⌘K\" shortcut.\n- Right: a plain text link \"Unlock Ariakit Plus\", a bell notification icon button (with a tiny blue dot badge), and a moon/theme icon button.\n\nHero section (centered, white background, padding ~90px 32px 50px):\n- Very large bold centered headline \"Build accessible web apps with React\" on two lines (~58px, black, line-height 1.05, max-width ~700px).\n- Centered subcopy (~18px, gray #555, max-width ~640px, line-height 1.6): \"Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps.\" Underline the words \"unstyled\", \"primitive\", and \"styled examples\" with colorful gradient underlines (blue to pink/purple). Each underline should be a short gradient bar (roughly 2-3px thick) beneath the word.\n- Two centered buttons below subcopy (gap 20px):\n  - Primary \"Get started\" with blue background (#007acc), white text, rounded 8px, padding ~12px 24px.\n  - Secondary \"Explore components\" with transparent background, black text, and a right arrow \"→\".\n\nComponent showcase section (below hero, three large gray cards with rounded corners, gap ~20px, max-width ~1100px, margin auto, padding 0 32px 60px):\n- Left card: light gray (#f3f4f6) rounded rectangle with a simple dropdown/combobox example: a search input \"Search for users\", a list of users (\"Harry Poe\", \"John Doe\"), and \"Esc\"/\"Delete\" hints on the right.\n- Center card: light gray rounded rectangle with a simple data table header showing \"Account type\" and \"Address\" columns.\n- Right card: light gray rounded rectangle with two user profile rows (avatar circles with initials \"J\" and \"H\", names \"John Doe\", \"Harry Poe\", emails), a dropdown arrow, and an \"Actions\" button.\n\nOverall vibe: clean, modern, minimalist open-source React library landing page with gradient accents and subtle component previews.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.absolute.right-0` → animation: enter 0.15s ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.inset-0` → transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.relative.rounded-xl` → transition: transform, filter 0.7s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus-visible\\:ariakit-outline-visible`:\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n- `.no-underline`:\n  **hover:** background-color: rgba(0, 0, 0, 0.075)\n- `.sm\\:px-8`:\n  **hover:** background-color: rgb(0, 98, 163)\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n- `.hover\\:bg-gray-150`:\n  **hover:** background-color: rgb(237, 240, 243)\n  **focus:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n  **focus-visible:** outline: 2px solid #007acc; outline-color: rgb(0, 122, 204)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes appear  {\n  0%  {\n  display: none;\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"白色极简风格还原准确，导航栏蓝色logo、版本pill、Browse按钮均与预览一致。Hero大标题分行显示、渐变下划线（蓝→紫）效果正确，三张组件卡片布局和内容匹配良好。逐字复制了@keyframes appear及全部过渡规格，入场动画和卡片hover效果已实现。"},{"id":"react-aria","name":"React Aria Components","fw":["React"],"theme":"无样式 / a11y","vendor":"Adobe","link":"https://react-spectrum.adobe.com/react-aria","kind":"item","img":"previews/react-aria.png","chips":["Button","ToggleButton","Checkbox","Radio","Switch","TextField","Select","ComboBox","DatePicker"],"repo":"https://github.com/adobe/react-spectrum","desc":"Adobe 出品的组件原语，行为/无障碍开箱即用，样式自定。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Spectrum 404 error page above-the-fold at 1280px width.\n\nGlobal style: very light gray/white background (#f8f8f8 / #ffffff), dark gray text (#333333). Font stack: Adobe Clean, Source Sans Pro, -apple-system, system-ui, sans-serif.\n\nTop navigation bar (~56px, white/light gray background, border-bottom 1px solid #e5e5e5, flex justify-between align-center, padding 0 24px):\n- Left: React Spectrum logo — a red Adobe \"A\"-shaped icon (stylized triangular \"A\") followed by the text \"React Spectrum\" in bold dark text.\n- Center: a large search input with rounded corners, light gray border, placeholder \"Search React Spectrum\", a magnifying glass icon on the left, and a small \"⌘K\" shortcut hint on the right.\n- Right: nav links \"Docs\", \"Releases\", \"Blog\" in dark gray, then a GitHub icon button, an Adobe icon button, and an info/help icon button.\n\nMain content (centered vertically and horizontally within the viewport, white background, text-align center):\n- A 404 icon: a simple outline of a browser window (rectangle with a top bar and small dots) with a circle containing an \"X\" overlapping the bottom-right corner. Use dark gray strokes.\n- Below the icon, a bold heading \"Error 404: Page not found\" (~22px, dark).\n- Subcopy: \"This page isn't available. Try checking the URL or visit a different page.\" (~14px, gray, max-width ~400px).\n\nFooter (fixed at bottom, small gray text, centered, border-top 1px solid #e5e5e5, padding 16px):\n- \"Copyright © 2026 Adobe. All rights reserved.\" followed by links \"Privacy\", \"Terms of Use\", \"Cookies\", \"Do not sell my personal information\" separated by slashes or vertical bars.\n\nOverall vibe: clean, minimal Adobe 404 page with a centered error illustration and footer.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a._Le151.Oh151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.15s cubic-bezier(0.45, 0, 0.4, 1)\n- `svg` → transition: opacity, transform 0.2s, 0.2s ease-out, ease-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Z8Un9b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes uw9JJd  {\n  0%, 100%  {\n  stroke-dashoffset: 75px;\n  } 30%  {\n  stroke-dashoffset: 20px;\n  }\n}\n@keyframes chyGla_slide-in  {\n  0%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes chyGla_slide-out  {\n  100%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes yzKlUb  {\n  0%  {\n  outline-width: 0px;\n  transform: scale(1);\n  } 50%  {\n  outline-width: 8px;\n  transform: scale(1.04);\n  } 100%  {\n  outline-width: 0px;\n  transform: scale(1);\n  }\n}\n@keyframes zamT8b  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  width: 0px;\n  transform: translateY(calc(-100% - 12px));\n  }\n}\n@keyframes XYaG5b  {\n  0%  {\n  box-shadow: none;\n  background-color: var(--base-bg);\n  } 100%  {\n  box-shadow: var(--shadow);\n  background-color: var(--layer-2-bg);\n  }\n}\n@keyframes nToi3b  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(100% + 12px));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes AmkoXc  {\n  0%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes HaKxcb  {\n  100%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes VHPsfc  {\n  0%  {\n  transform: translate(-70%) scaleX(0.7);\n  } 100%  {\n  transform: translate(100%) scaleX(0.7);\n  }\n}\n@keyframes reCXe  {\n  0%  {\n  transform: translate(100%) scaleX(0.7);\n  } 100%  {\n  transform: translate(-70%) scaleX(0.7);\n  }\n}\n@keyframes EFZ7wb  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 15.15%  {\n  transform: translate(0px, 0px);\n  } 16.67%  {\n  transform: translateY(-1.2em);\n  } 31.82%  {\n  transform: translateY(-1.2em);\n  } 33.33%  {\n  transform: translateY(-2.4em);\n  } 48.48%  {\n  transform: translateY(-2.4em);\n  } 50%  {\n  transform: translateY(-3.6em);\n  } 65.15%  {\n  transform: translateY(-3.6em);\n  } 66.67%  {\n  transform: translateY(-4.8em);\n  } 81.82%  {\n  transform: translateY(-4.8em);\n  } 83.33%  {\n  transform: translateY(-6em);\n  } 98.48%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(-7.2em);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Adobe风格404页面还原准确：红色A形logo、居中搜索栏、浏览器窗口+X圆形图标错误提示、底部版权信息均与预览一致。逐字复制了全部13个@keyframes（含Z8Un9b旋转、uw9JJd虚线动画、EFZ7wb步进滚动等）及SVG过渡规格，入场淡入上浮动画已实现。"},{"id":"element-plus","name":"Element Plus","fw":["Vue"],"theme":"企业级 / 后台","vendor":"饿了么 / Element","link":"https://element-plus.org","kind":"item","img":"previews/element-plus.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/element-plus/element-plus","desc":"Vue 3 生态扛把子，国内使用率最高，后台 CRUD 首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Element Plus homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text (#303133), blue accent (#409eff). Font stack: Inter, \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Microsoft YaHei\", sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #ebeef5, flex justify-between align-center, padding 0 32px):\n- Left: Element Plus logo — a blue hexagon outline with a subtle 3D effect, followed by the text \"Element\" in blue (#409eff) with a small \"+\" superscript, and a light blue version pill \"2.14.3\".\n- Center: a search input with rounded border, placeholder \"Search\", a magnifying glass icon, and a small \"⌘K\" shortcut badge.\n- Right: nav links \"Guide\", \"Component\", \"Resource\", \"Playground\" in dark gray, then a theme toggle icon, a language/translate icon (Chinese character \"文\"), and a GitHub icon.\n\nHero section (centered, white background, padding ~70px 32px 40px):\n- Large bold centered headline \"Element Plus\" (~46px, dark, font-weight 700).\n- Centered subcopy \"A Vue 3 based component library for designers and developers\" (~16px, gray #606266, margin-bottom 40px).\n- Below, a large SVG/CSS illustration of a dashboard interface (max-width ~780px, centered):\n  - A browser window frame with a blue title bar at the top containing three small colored dots (red, yellow, green) on the left and an address bar on the right.\n  - Inside the browser window, a light blue/white layout with a sidebar menu on the left, a content area with a blue square/card, a horizontal bar chart, and a wavy line graph.\n  - Overlay a small blue tooltip/card with rounded corners and white lines representing text.\n  - Overlay a small white card in the bottom-left with a blue donut chart and lines.\n  - Overlay a small white card in the top-right with a blue button and lines.\n  - In the bottom-right corner of the illustration, add a small person figure sitting cross-legged with a laptop (simple flat illustration: blue shirt, dark hair, gray laptop).\n  - Keep the illustration in soft blues and grays, flat vector style, with subtle shadows.\n\nOverall vibe: clean, professional Vue component library landing page with a friendly dashboard illustration.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.DocSearch.DocSearch-Button` → transition: background-color 0.2s ease\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.link-item.link` → transition: color 0.3s ease\n- `div.theme-toggler-content.theme-toggler` → transition: border-color, background-color 0.3s, 0.2s ease, ease 0s, 0s\n- `span.el-switch__core` → transition: border-color, background-color 0.3s, 0.3s ease, ease 0s, 0s\n- `div.el-switch__action` → transition: all 0.3s ease\n- `div.parallax-container` → transition: all 0.3s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.home-page .el-card a`:\n  **hover:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotating  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes v-modal-in  {\n  0%  {\n  opacity: 0;\n  }\n}\n@keyframes v-modal-out  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes dialog-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes dialog-fade-out  {\n  0%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  }\n}\n@keyframes modal-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes modal-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes viewer-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes viewer-fade-out  {\n  0%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  }\n}\n@keyframes msgbox-fade-in  {\n  0%  {\n  transform: translate3d(0px, -20px, 0px);\n  opacity: 0;\n  } 100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes progress  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 32px 0px;\n  }\n}\n@keyframes indeterminate  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes striped-flow  {\n  0%  {\n  background-position: -100% center;\n  } 100%  {\n  background-position: 100% center;\n  }\n}\n@keyframes el-skeleton-loading  {\n  0%  {\n  background-position: 100% 50%;\n  } 100%  {\n  background-position: 0px 50%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Element Plus首页还原准确：蓝色六边形logo、版本pill、搜索栏、导航链接均与预览一致。Hero区域大标题+副标题居中显示，SVG仪表盘插图包含浏览器窗口（红黄绿点+地址栏）、侧边栏、柱状图/折线图、蓝色tooltip卡片、左下环形图卡片、右上白色卡片及右下人物插画。逐字复制了全部16个@keyframes含rotating/dialog-fade-in/out/modal-fade等，入场动画和hover过渡已实现。"},{"id":"naive-ui","name":"Naive UI","fw":["Vue"],"theme":"现代 / TS 友好","vendor":"TuSan (尤雨溪推荐)","link":"https://www.naiveui.com","kind":"item","img":"previews/naive-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/tusen-ai/naive-ui","desc":"全 TS + Composition API，零外部依赖，主题系统基于 CSS 变量。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Naive UI homepage above-the-fold at 1280px width.\n\nGlobal style: white background (#ffffff), dark text (#33354c), green accent (#18a058). Font stack: v-sans, system-ui, -apple-system, \"Segoe UI\", sans-serif.\n\nTop navigation bar (~56px, white background, border-bottom 1px solid #f0f0f0, flex justify-between align-center, padding 0 32px):\n- Left: Naive UI logo — a green stylized \"N\" shape (two curved/angled strokes), followed by the text \"Naive UI\" in bold dark text.\n- Center-left: nav links \"首页\" (active, green), \"文档\", \"组件\", and a search input with placeholder \"搜索\" (light border, rounded 4px).\n- Right: text links \"English\", \"深色\" (dark mode), \"GitHub\", and a small version number \"2.44.1\" in gray.\n\nHero section (centered, white background, padding ~120px 32px, position relative):\n- Very large bold centered headline \"Naive UI\" (~64px, very bold, black).\n- Centered Chinese subline: \"一个 Vue 3 组件库\" (~16px, gray).\n- Centered second subline: \"比较完整，主题可调，使用 TypeScript，快，有点意思\" (~14px, gray, max-width ~360px, line-height 1.6).\n- Two centered buttons below (gap 14px):\n  - \"换个主题\" — white background, light gray border, dark text, rounded 4px, padding ~8px 16px.\n  - \"开始使用\" — green background (#18a058), white text, rounded 4px, padding ~8px 16px.\n- Decorative abstract shapes: on both left and right sides of the hero, place clusters of rounded pill/rectangle shapes in bright colors (green #18a058, yellow #f0a020, blue #2080f0, red #d03050). Shapes should be horizontally oriented, overlap each other, and partially extend off-screen. Add small circular dots in matching colors around the shapes.\n- In the bottom-right corner of the viewport, add a small floating circular button with a magic-wand/sparkles icon (white icon on light gray/white circular background with subtle shadow).\n\nOverall vibe: playful, colorful, modern Vue 3 component library landing page with bold abstract decorations and clean typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.n-element` → transition: color, background-color, box-shadow 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-layout.n-layout--absolute-positioned` → transition: box-shadow, background-color, color 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-layout-header.n-layout-header--static-positioned` → transition: color, background-color, box-shadow, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `div.n-text.ui-logo` → transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-menu.n-menu--horizontal` → transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-menu-item-content.n-menu-item-content--selected` → transition: background-color, padding-left, border-color 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s\n- `div.n-menu-item-content-header` → transition: color, opacity 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `input.n-input__input-el` → transition: -webkit-text-fill-color, caret-color, color, text-decoration-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `div.n-input__border` → transition: box-shadow, border-color 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `button.n-button.n-button--default-type` → transition: color, background-color, opacity, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n- `path` → transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-button__border` → transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.n-layout-footer.n-layout-footer--static-positioned` → transition: box-shadow, color, background-color, border-color 0.3s, 0.3s, 0.3s, 0.3s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes button-wave-spread  {\n  0%  {\n  box-shadow: 0 0 0.5px 0 var(--n-ripple-color);\n  } 100%  {\n  box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color);\n  }\n}\n@keyframes button-wave-opacity  {\n  0%  {\n  opacity: var(--n-wave-opacity);\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Naive UI首页还原准确：绿色N形logo、导航栏（首页激活态绿色）、搜索框、右侧链接均与预览一致。Hero区域超大标题+中文副标题居中，两个按钮（换主题描边/开始使用绿色）正确显示，左右两侧彩色抽象装饰形状（绿黄蓝红圆角pill和圆形）分布自然，右下角悬浮魔杖按钮已实现。逐字复制了button-wave-spread/button-wave-opacity关键帧及n-element系列过渡规格。"},{"id":"vuetify","name":"Vuetify","fw":["Vue"],"theme":"Material Design 3","vendor":"Vuetify","link":"https://vuetifyjs.com","kind":"item","img":"previews/vuetify.png","chips":["Button","TextField","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/vuetifyjs/vuetify","desc":"Vue 的 Material Design 标杆，生态最成熟，Material You 动态主题。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Vuetify homepage above-the-fold at 1280px width.\n\nGlobal style: very light blue/white gradient background (#e8f2fc to #ffffff), dark text (#1a1a1a), blue accent (#1867c0). Font stack: Roboto, -apple-system, system-ui, sans-serif.\n\nTop announcement banner (~44px, dark navy/black background #0f172a, white text, flex justify-between align-center, padding 0 24px):\n- Left: Vuetify icon (blue droplet/\"V\" shape) followed by text \"Vuetify0 has reached Release Candidate\" and smaller subtext \"The API is frozen and the v1 stable set is locked — 50 components, 71 composables, and the final stretch to v1.0.\"\n- Right: a white-bordered button \"Read the announcement\" with a small arrow icon, and a small X close button.\n\nTop navigation bar (~56px, white/very light background, border-bottom 1px solid #e0e0e0, flex justify-between align-center, padding 0 24px):\n- Left: Vuetify logo — a blue stylized \"V\" droplet, followed by \"VUETIFY\" in bold blue text. Then a search input with placeholder \"Search\" and a \"⌘K\" shortcut.\n- Center/Right: nav links \"Blog\", \"Learn\", \"Support\", \"Ecosystem\", \"Playground\", a bordered \"One\" button (rounded pill), then icon buttons (shopping bag, GitHub, translate, settings), and a blue \"Login\" button with a right arrow.\n\nHero section (padding ~80px 32px, max-width ~1100px, margin auto, flex row with content on left and code window on right):\n- Left side:\n  - A small badge \"#1 Vue UI Library\" with light blue background and blue text, rounded pill.\n  - Large headline: \"A complete\" in dark, \"design system\" in blue (#1867c0), \"that works.\" in dark, all on separate lines (~52px, bold).\n  - Subcopy: \"Built by the Vue Community, Backed by Sponsors.\" (~18px, gray).\n  - Two buttons: primary \"Get Started\" (blue background, white text, rounded 6px), secondary \"Why Vuetify?\" (white background, light border, blue text, with a small downward chevron).\n  - Below buttons: a CLI command pill \"npm create vuetify\" (with a small chevron on the left) and a version badge \"Latest 4.1.4\" (with a tag icon).\n- Right side: a dark code editor window (~420px wide) with rounded 8px corners, a dark title bar with three colored dots (red, yellow, green), and syntax-highlighted Vue template code:\n  - \u003ctemplate>, \u003cv-app>, \u003cv-container>, \u003cv-btn color=\"primary\">, \"Hello Vuetify!\", \u003c/v-btn>, \u003c/v-container>, \u003c/v-app>, \u003c/template>\n  - Use colored syntax: pink for tags, blue for attributes, green for strings, gray for plain text.\n\nOverall vibe: modern, developer-focused Vue UI framework landing page with a clean light gradient, code preview, and prominent CTA.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.v-toolbar.v-toolbar--collapse-start` → transition: height, width, transform, max-width, left, right, top, bottom, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.v-responsive__sizer` → transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.v-list-item__overlay` → transition: opacity, color 0.2s ease-in-out\n- `div.v-avatar.v-theme--light` → transition: width, height 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.v-btn.v-btn--elevated` → transition: box-shadow, transform, opacity, background 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.v-btn__overlay` → transition: opacity 0.2s ease-in-out\n- `span.v-btn__content` → transition: transform, opacity 0s, 0.2s ease, cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `button.v-btn.v-btn--active` → transition: all 0.2s ease\n- `main.v-main.text-center` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.v-icon-btn__content` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `i.v-icon.notranslate` → transition: opacity, font-size, width, height 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.v-card.v-card--link` → transition: box-shadow, opacity, background, --v-elevation-overlay 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.v-btn`:\n  **hover:** opacity: 1\n  **focus:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes scroll-65fa3932  {\n  0%  {\n  transform: translate(calc(1% * var(--v96e92ca6)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes metronome-example  {\n  0%  {\n  transform: scale(0.5);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes bell-shake-f0fc0275  {\n  0%, 100%  {\n  transform: rotate(0deg);\n  } 5%  {\n  transform: rotate(14deg);\n  } 10%  {\n  transform: rotate(-14deg);\n  } 15%  {\n  transform: rotate(10deg);\n  } 20%  {\n  transform: rotate(-8deg);\n  } 25%  {\n  transform: rotate(4deg);\n  } 30%  {\n  transform: rotate(0deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Vuetify首页还原准确：深色公告栏（V图标+Release Candidate文案+Read按钮+关闭）、白色导航栏（VUETIFY logo+搜索+Blog/Learn/Support/Ecosystem/Playground/One/Login）均与预览一致。左侧Hero区域含#1 badge、三行标题（design system蓝色）、两个按钮及npm/Latest元信息，右侧深色代码编辑器窗口（三色圆点+语法高亮Vue模板代码）。逐字复制了scroll/metroome/bell-shake三个@keyframes，入场动画和v-btn过渡规格已实现。"},{"id":"quasar","name":"Quasar","fw":["Vue"],"theme":"跨端 / 全家桶","vendor":"Quasar","link":"https://quasar.dev","kind":"item","img":"previews/quasar.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","DatePicker","Form"],"repo":"https://github.com/quasarframework/quasar","desc":"同一套代码编译 SPA/PWA/SSR/移动端/桌面，CLI 工程化完善。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Quasar Framework website (quasar.dev) — a Vue.js UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nBrand / site name: Quasar (logo text \"Quasar\" with a small \"Q\" mark on the left, white).\n\nOverall theme: dark, \"space / lift-off\" tech vibe. \n- Page background: #121212 (rgb(18,18,18)).\n- Top navigation bar background: #050A14 (rgb(5,10,20)), full width, sticky at top, height ~64px.\n- Navigation text color: #929397 (rgb(146,147,151)), uppercase, letter-spaced, font-size ~13px, font-family Roboto / system sans.\n\nTop nav contents (left to right):\n- \"Quasar\" wordmark (white, bold) with a circular \"Q\" logo glyph to its left (blue accent).\n- Nav links (grey, uppercase): DOCS, COMPONENTS, SPONSORS, Team, Blog, Why Quasar?, Announcements, Video Tutorials, Roadmap, Brand resources.\n- Right side controls: a circular \"menu\" icon button, a \"Getting Started\" text button, \"Tools\" text button, \"More\" text button, and a version pill labeled \"v2.21.2\" (transparent background, 1px solid border #00B4FF blue (rgb(0,180,255)), rounded 3px, white text).\n\nHero section (below nav, dark):\n- Large headline (white, bold, ~40px, Roboto): \"The enterprise-ready cross-platform VueJs framework\"\n- Subtext line (grey #929397, ~16px) describing it as the go-to Vue framework for SPA, PWA, SSR, mobile & desktop from one codebase (paraphrase: \"Sensible people choose Vue. Productive people choose Quasar.\").\n- A primary call-to-action button: background #EA5E13 (rgb(234,94,19) orange), white text, rounded 3px, label \"ARE YOU READY TO LIFT OFF?\" (uppercase).\n- Optionally a downward arrow icon button below.\n\nAccent colors: blue #00B4FF and orange #EA5E13 on a near-black background. Overall look: dark, minimal, developer-focused, with a rocket/lift-off motif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.doc-stars.doc-stars--lg` → animation: animateStar 150s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.doc-header__logo-img` → transition: transform 0.8s ease-in-out\n- `a.q-btn.q-btn-item` → transition: color 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)\n- `span.q-focus-helper` → transition: background-color, opacity 0.3s, 0.4s cubic-bezier(0.25, 0.8, 0.5, 1), cubic-bezier(0.25, 0.8, 0.5, 1) 0s, 0s\n- `span.q-btn__content.text-center` → transition: opacity 0.3s ease\n- `div.doc-search__field.rounded-borders` → transition: box-shadow, background-color 0.28s, 0.28s ease-in-out, ease-in-out 0s, 0s\n- `img.q-img__image.q-img__image--with-transition` → transition: opacity 0.28s ease-in\n- `div.q-notification.row` → transition: transform, opacity 1s, 1s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.q-btn`:\n  **hover:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes q-circular-progress-circle  {\n  0%  {\n  stroke-dasharray: 1, 400;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 400, 400;\n  stroke-dashoffset: -100px;\n  } 100%  {\n  stroke-dasharray: 400, 400;\n  stroke-dashoffset: -300px;\n  }\n}\n@keyframes q-expansion-done  {\n  0%  {\n  --q-exp-done: 1;\n  }\n}\n@keyframes q-field-label  {\n  40%  {\n  margin-left: 2px;\n  } 60%, 80%  {\n  margin-left: -2px;\n  } 70%, 90%  {\n  margin-left: 2px;\n  }\n}\n@keyframes q-autofill  {\n  100%  {\n  color: inherit;\n  background: 0px 0px;\n  }\n}\n@keyframes q-linear-progress--indeterminate  {\n  0%  {\n  transform: translate(-35%) scaleX(0.35);\n  } 60%  {\n  transform: translate(100%) scaleX(0.9);\n  } 100%  {\n  transform: translate(100%) scaleX(0.9);\n  }\n}\n@keyframes q-linear-progress--indeterminate-short  {\n  0%  {\n  transform: translate(-101%) scale(1);\n  } 60%  {\n  transform: translate(107%) scaleX(0.01);\n  } 100%  {\n  transform: translate(107%) scaleX(0.01);\n  }\n}\n@keyframes q-skeleton--fade  {\n  0%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes q-skeleton--pulse  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.85);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes q-skeleton--pulse-x  {\n  0%  {\n  transform: scaleX(1);\n  } 50%  {\n  transform: scaleX(0.75);\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes q-skeleton--pulse-y  {\n  0%  {\n  transform: scaleY(1);\n  } 50%  {\n  transform: scaleY(0.75);\n  } 100%  {\n  transform: scaleY(1);\n  }\n}\n@keyframes q-skeleton--wave  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes q-mat-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes q-notif-badge  {\n  15%  {\n  transform: translate(-25%) rotate(-5deg);\n  } 30%  {\n  transform: translate(20%) rotate(3deg);\n  } 45%  {\n  transform: translate(-15%) rotate(-3deg);\n  } 60%  {\n  transform: translate(10%) rotate(2deg);\n  } 75%  {\n  transform: translate(-5%) rotate(-1deg);\n  }\n}\n@keyframes q-notif-progress  {\n  0%  {\n  transform: scaleX(1);\n  } 100%  {\n  transform: scaleX(0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dark Quasar above-the-fold with sticky #050A14 nav, blue/orange accents, hero CTA; verbatim q-* keyframes included."},{"id":"primevue","name":"PrimeVue","fw":["Vue"],"theme":"企业级 / 30+ 主题","vendor":"PrimeTek","link":"https://primevue.org","kind":"item","img":"previews/primevue.png","chips":["Button","InputText","Select","Checkbox","Radio","ToggleSwitch","Slider","DatePicker","Form"],"repo":"https://github.com/primefaces/primevue","desc":"80+ 复杂组件，Styled/Unstyled 双模式，带可视化主题工厂。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the PrimeVue website (primevue.org) — a Vue UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, light, modern SaaS landing. \n- Page background: #F8FAFC (rgb(248,250,252)), near white with a slight cool tint.\n- Primary text color: #334155 (rgb(51,65,85)) slate.\n\nTop navigation bar (transparent / same bg, sticky, ~64px):\n- Left: \"PrimeVue\" wordmark (bold, slate, with a small square/diamond logo glyph).\n- Right: a GitHub icon link and a version pill \"v5.0.0-rc.1\" (subtle border, slate text).\n\nHero section (centered, generous whitespace):\n- A small version badge above the title: text \"primevue@5.0.0-rc.1\" (mono-ish, slate, light border pill).\n- Big headline (bold, ~52px, slate): \"Premium UI Suite for Vue\" (you may put \"Suite for Vue\" on a second line).\n- Subhead paragraph (~18px, slate, max-width ~640px): \"Enhance your web applications with PrimeVue's comprehensive suite of customizable, feature-rich and accessible UI components.\"\n- A row of decorative circular color dots representing the brand palette: dark slate (#334155), emerald (#10B981 / rgb(16,185,129)), green (#22C55E / rgb(34,197,94)), lime (#84CC16 / rgb(132,204,22)), orange (#F97316 / rgb(249,115,22)). Each a ~28px filled circle.\n\nFont: Inter / system sans. Vibe: minimal, airy, developer-tool marketing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: whouses-marquee-74e2c8dd 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `div.layout-topbar` → transition: background-color 0.5s ease\n- `button.inline-flex.items-center` → transition: outline-color, border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.px-5.lg:px-7` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.p-inputtext.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes px-fadeout  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes px-scalein  {\n  0%  {\n  opacity: 0;\n  transform: scaleY(0.8);\n  transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes px-slidedown  {\n  0%  {\n  max-height: 0px;\n  } 100%  {\n  }\n}\n@keyframes px-slideup  {\n  0%  {\n  max-height: 1000px;\n  } 100%  {\n  max-height: 0px;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-modal-enter  {\n  0%  {\n  background: transparent;\n  } 100%  {\n  background: var(--p-mask-background);\n  }\n}\n@keyframes px-animate-modal-leave  {\n  0%  {\n  background: var(--p-mask-background);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0px 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0px 100%);\n  } 20%  {\n  clip-path: polygon(0px 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0px 100%);\n  } 40%  {\n  clip-path: polygon(0px 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0px 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes color-animation  {\n  40%, 100%  {\n  background-position: -200% center;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：浅冷白 #F8FAFC 背景、sticky 导航 + v5.0.0-rc.1 药丸 + hero 大标题 + 五品牌色圆点。真实 px-fadein 0.5s ease 与 topbar 0.5s ease/link 0.15s cubic-bezier(0.4,0,0.2,1) 过渡照抄。slate #334155 + 品牌色一致（注：原站含 WebGL canvas 动画，此处用等价 CSS 渐变氛围近似，已注明）。"},{"id":"antdv","name":"Ant Design Vue","fw":["Vue"],"theme":"企业级 / 与 React 对齐","vendor":"阿里系","link":"https://antdv.com","kind":"item","img":"previews/antdv.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/vueComponent/ant-design-vue","desc":"与 React 版 API 对齐，支持 Vite / Nuxt，含 ProComponents。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Ant Design Vue website (antdv.com) — a Vue implementation of Ant Design. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, enterprise design-system landing.\n- Page background: #FFFFFF. Primary text: rgba(0,0,0,0.88) near-black.\n- Brand accent: Ant Design blue #1677FF. Secondary accent: a mint/green CTA #5DF2A3 (rgb(93,242,163)) with dark text #0B1021 (rgb(11,16,33)).\n\nTop navigation bar (white, sticky, ~64px, subtle bottom border #f0f0f0):\n- Left: \"Ant Design Vue\" wordmark — the \"Ant\" part can be blue, bold, ~20px, with a small geometric logo glyph.\n- Center/right nav links (dark grey, ~15px): Docs, Components, Store.\n- Far right controls: a green pill button \"Get Started Free\" (bg #5DF2A3, dark text, rounded 6px, bold), a \"中 文\" outlined button (white bg, 1px border #d9d9d9, rounded 4px), and a \"More\" outlined button.\n\nHero / main section (white, centered or left-aligned, generous padding):\n- Large heading (bold, ~40px): \"Ant Design Vue\" on one line and \"Overview\" as a secondary line.\n- Subhead (~17px, grey): \"An enterprise-class UI components based on Ant Design and Vue.\"\n- A green CTA button \"Get Started Free\" (same green as nav).\n- Optionally show a strip of component category labels (General, Layout, Navigation, Data Display, Feedback) as muted pills to echo the component overview.\n\nFont: -apple-system, system-ui, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif. Vibe: clean, professional, Ant-Design look (blue + neutral greys, rounded buttons).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a.banner-content` → transition: opacity 0.3s ease\n- `a.start-button` → transition: all 0.3s ease\n- `header.clearfix` → transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a` → transition: color 0.3s ease\n- `input.ant-input.css-1p3hq3p` → transition: all 0.2s ease\n- `li.ant-menu-item.ant-menu-item-only-child` → transition: border-color, background 0.3s, 0.3s ease, ease 0s, 0s\n- `div.ant-select-selector` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `span.anticon.anticon-down` → transition: transform 0.3s ease\n- `li.ant-menu-item.ant-menu-item-selected` → transition: border-color, background, padding 0.3s, 0.3s, 0.2s ease, ease, cubic-bezier(0.215, 0.61, 0.355, 1) 0s, 0s, 0s\n- `div.components-overview-affix` → transition: all 0.25s ease\n- `div.ant-card.css-1p3hq3p` → transition: all 0.5s ease\n- `button.ant-float-btn.ant-float-btn-default` → transition: background-color 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** opacity: 0.9; background: #4dd893; transform: translateY(-1px); box-shadow: rgba(93, 242, 163, 0.3) 0px 4px 12px; background-color: rgb(77, 216, 147)\n  **active:** transform: translateY(0px)\n- `:where(.css-1p3hq3p) a`:\n  **hover:** color: rgb(105, 177, 255); outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eeeeee\",endColorstr=\"#dddddd\",GradientType=0); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204)\n  **active:** color: rgb(9, 88, 217); outline: 0; background-color: rgb(220, 220, 220); border-color: #b5b5b5; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px inset; border-top-color: rgb(181, 181, 181); border-right-color: rgb(181, 181, 181); border-bottom-color: rgb(181, 181, 181); border-left-color: rgb(181, 181, 181)\n  **focus:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#eeeeee\",endColorstr=\"#dddddd\",GradientType=0); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204)\n- `:where(.css-1p3hq3p)[class^=\"ant-input\"]`:\n  **hover:** border-color: #4096ff; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n  **focus:** border-color: #4096ff; box-shadow: rgba(5, 145, 255, 0.1) 0px 0px 0px 2px; outline: 0; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-menu\"]`:\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-menu\"] [class^=\"ant-menu\"]`:\n  **hover:** color: rgba(0, 0, 0, 0.88)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-1p3hq3p)[class^=\"ant-btn\"]`:\n  **hover:** color: rgb(64, 150, 255); border-color: #4096ff; border-top-color: rgb(64, 150, 255); border-right-color: rgb(64, 150, 255); border-bottom-color: rgb(64, 150, 255); border-left-color: rgb(64, 150, 255)\n  **active:** color: rgb(9, 88, 217); border-color: #0958d9; border-top-color: rgb(9, 88, 217); border-right-color: rgb(9, 88, 217); border-bottom-color: rgb(9, 88, 217); border-left-color: rgb(9, 88, 217)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-q2z4y9)[class^=\"ant-menu\"]`:\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n- `:where(.css-q2z4y9)[class^=\"ant-menu\"] [class^=\"ant-menu\"]`:\n  **hover:** color: rgba(0, 0, 0, 0.88); background-color: rgba(0, 0, 0, 0.06)\n  **active:** background-color: rgb(230, 244, 255)\n  **focus:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n  **focus-visible:** outline: 2px solid #91caff; outline-color: rgb(145, 202, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes css-1p3hq3p-antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antSlideDownIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antSlideDownOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 100% 100%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 100% 100%;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antZoomBigIn  {\n  0%  {\n  transform: scale(0.8);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antZoomBigOut  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0.8);\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antMoveUpIn  {\n  0%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antMoveUpOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, -100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antMoveDownIn  {\n  0%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antMoveDownOut  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0px, 100%, 0px);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes css-1p3hq3p-antZoomIn  {\n  0%  {\n  transform: scale(0.2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes css-1p3hq3p-antZoomOut  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0.2);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"White enterprise landing with sticky header, green CTA, Ant Design Vue hero and category tags; verbatim css-1p3hq3p keyframes included."},{"id":"vant","name":"Vant","fw":["Vue"],"theme":"移动端 / H5","vendor":"有赞 Youzan","link":"https://vant-ui.github.io","kind":"item","img":"previews/vant.png","chips":["Button","Field","Picker","Checkbox","Radio","Switch","Slider","Form","Uploader"],"repo":"https://github.com/youzan/vant","desc":"移动端第一选择，Vue 3 + 小程序双端，组件平均 \u003c3kB gzip。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Vant website (vant-ui.github.io) — a lightweight, customizable mobile Vue component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: light, friendly, mobile-focused.\n- Page background: #EFF2F5 (rgb(239,242,245)) light grey.\n- Primary text: #323233 (rgb(50,50,51)) near-black.\n- Brand accent: Vant blue #1989FA (rgb(25,137,250)).\n\nTop navigation bar (transparent / same bg, ~60px):\n- Left: \"Vant\" wordmark (bold, ~22px, dark).\n- Right: nav links (dark grey, ~15px): 首页 (Home), 文档 (Docs), and a GitHub icon link.\n\nHero section (centered, two-column feel: text left, phone mockup right, but centered text is fine):\n- Big wordmark \"Vant\" (bold, ~64px) — optionally with a small \"4\" superscript for Vant 4.\n- Tagline (~20px): \"轻量、可定制的移动端 Vue 组件库\" (Lightweight, customizable mobile Vue component library).\n- A version badge pill \"Vant 4\" (light border).\n- Two buttons side by side: a primary \"Get Started\" button (bg #1989FA blue, white text, rounded 4px) and a secondary \"GitHub\" outlined button (white bg, border, dark text).\n- On the right side, draw a simple phone mockup: a rounded-rectangle phone frame (white, ~240px tall, border, rounded corners) containing a few placeholder lines/blocks to suggest a mobile UI demo.\n\nFont: \"Open Sans\", -apple-system, \"PingFang SC\", \"Microsoft YaHei\", sans-serif. Vibe: clean, mobile, developer-friendly.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img` → transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)\n- `span.van-doc-header__cube.van-doc-header__version` → transition: all 0.3s ease-in-out\n- `a` → transition: color 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes code-copy-animation  {\n  0%  {\n  opacity: 0;\n  top: 0px;\n  } 100%  {\n  opacity: 1;\n  top: -20px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Light Vant landing with #EFF2F5 bg, blue CTA, phone mockup, Chinese tagline; code-copy-animation keyframe included."},{"id":"nuxt-ui","name":"Nuxt UI","fw":["Vue"],"theme":"Nuxt / SSR 满分","vendor":"Nuxt","link":"https://ui.nuxt.com","kind":"item","img":"previews/nuxt-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/nuxt/ui","desc":"Nuxt 官方旗舰，基于 Reka UI + Tailwind，全量 a11y、RTL 与暗色。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Nuxt UI website (ui.nuxt.com) — a Vue UI component library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, modern, Tailwind-flavored.\n- Page background: #FFFFFF. Primary text: a dark slate (approx #2C3440 / oklch 0.372 0.044 257).\n- Brand accent: green #00C16A (rgb(0,193,106)).\n\nTop navigation bar (white, sticky, translucent, ~64px, subtle bottom border):\n- Left: \"Nuxt UI\" wordmark (bold) possibly with a small green mark.\n- Center/right nav links (slate, ~15px): Docs, Templates, Figma, Releases, Blog, Showcase, Team.\n- Far right: a small version pill \"v4.9.0\" (light green tint bg rgba(0,193,106,0.1), green text) and a GitHub icon.\n\nHero section (centered, generous whitespace):\n- A version badge \"v4.9.0\" (green tint pill, green text) above the title.\n- Big headline (bold, ~56px): \"The Intuitive Vue UI Library\" (you may break \"Vue UI Library\" to a second line).\n- Subhead (~18px, muted slate): \"A comprehensive Vue UI component library with 125+ accessible, Tailwind CSS components for building modern web applications. Works with Nuxt and plain Vue apps.\"\n- Two buttons: a primary green button \"Get started\" (bg #00C16A, white text, rounded) and a secondary \"Browse components\" outlined button.\n\nFont: \"Public Sans\", sans-serif. Vibe: airy, developer-tool, green accent on white.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.star.absolute` → animation: twinkle-e21f6a0a 2s ease-in-out 1.80048s infinite normal\n- `div.flex.items-center` → animation: marquee-vertical 40s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.iconify.i-lucide:chevron-down` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `img.dark:hidden.hover:scale-105` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.font-medium.items-center` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.inset-y-0` → transition: left, right, width 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `button.absolute.inset-y-0` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.-translate-y-2`:\n  **hover:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes twinkle-e21f6a0a  {\n  0%, 100%  {\n  opacity: 0.2;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes rotate-c355a8b0  {\n  0%  {\n  --angle: var(--start);\n  } 100%  {\n  --angle: var(--end);\n  }\n}\n@keyframes risingStarsAnimation-4d02be2c  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-2000px);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--reka-accordion-content-height);\n  overflow: hidden;\n  } 100%  {\n  height: 0px;\n  overflow: hidden;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  overflow: hidden;\n  } 100%  {\n  height: var(--reka-accordion-content-height);\n  overflow: hidden;\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--reka-collapsible-content-height);\n  overflow: hidden;\n  } 100%  {\n  height: 0px;\n  overflow: hidden;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  overflow: hidden;\n  } 100%  {\n  height: var(--reka-collapsible-content-height);\n  overflow: hidden;\n  }\n}\n@keyframes toast-slide-in-from-top  {\n  0%  {\n  transform: translateY(-100%);\n  } 100%  {\n  transform: var(--transform);\n  }\n}\n@keyframes toast-slide-in-from-bottom  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: var(--transform);\n  }\n}\n@keyframes toast-slide-up  {\n  0%  {\n  transform: translate(0) translateY(var(--translate));\n  } 100%  {\n  transform: translate(0) translateY(calc(var(--translate) - 100%));\n  }\n}\n@keyframes toast-slide-down  {\n  0%  {\n  transform: translate(0) translateY(var(--translate));\n  } 100%  {\n  transform: translate(0) translateY(calc(var(--translate) + 100%));\n  }\n}\n@keyframes toast-pulse-a  {\n  0%, 100%  {\n  scale: 1;\n  } 50%  {\n  scale: 1.04;\n  }\n}\n@keyframes toast-pulse-b  {\n  0%, 100%  {\n  scale: 1;\n  } 50%  {\n  scale: 1.04;\n  }\n}\n@keyframes toast-collapsed-closed  {\n  0%  {\n  transform: var(--transform);\n  } 100%  {\n  transform: translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Clean Nuxt UI landing with green #00C16A accents, centered hero, sticky nav; verbatim twinkle/toast/accordion keyframes included."},{"id":"shadcn-vue","name":"shadcn-vue","fw":["Vue"],"theme":"Radix 系 / Tailwind","vendor":"社区","link":"https://www.shadcn-vue.com","kind":"item","img":"previews/shadcn-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/radix-vue/shadcn-vue","desc":"Vue 版的复制即用组件集，基于 Reka UI + Tailwind。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the shadcn-vue website (shadcn-vue.com) — Vue port of shadcn/ui. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: light, minimal, \"copy-paste components\" aesthetic (shadcn style).\n- Page background: #FFFFFF. Primary text: near-black #000 / #0A0A0A.\n- Brand accent: emerald/teal #0EA47A-ish (use oklch(0.596 0.145 163.225) ≈ #15A37F) for primary buttons and the \"New\" badge.\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border):\n- Left: \"shadcn/vue\" wordmark (bold, dark).\n- Center/right nav links (dark, ~15px): Home, Docs, Components, Blocks, Charts, Colors, Create.\n- Right controls: a GitHub stars pill \"10.3k\" (border, rounded), a small \"New\" badge (emerald bg, white text, rounded), a \"Search documentation...\" input-like box (light grey bg #F7F7F7, rounded 10px, placeholder text) and a \"Toggle theme\" icon button.\n\nHero section (centered):\n- A small announcement badge at top: emerald bg, white text, rounded: \"Introducing Chat Components\" (with a \"New\" tag).\n- Big headline (bold, ~52px): \"The Foundation for your Design System\".\n- Subhead (~18px, muted grey #6b7280): \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\"\n- A row of demo buttons: a primary \"Button\" (emerald bg, white text, rounded 18px pill), a \"Secondary\" (light grey bg, dark text), and an \"Outline\" (white bg, border). These preview the component variants.\n\nFont: Geist / system sans. Vibe: clean, monochrome with emerald accent, lots of whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.router-link-active.router-link-exact-active` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.bg-input/50.border-transparent` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.bg-input/90.data-checked:bg-primary` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.bg-background.dark:data-unchecked:bg-foreground` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.text-sidebar-foreground/70.ring-sidebar-ring` → transition: margin, opacity 0.2s linear\n- `button.ring-sidebar-ring.active:bg-sidebar-accent` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.[a]:hover:bg-muted.rounded-2xl` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.pl-3`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.focus-visible\\:border-ring-visible`:\n  **active:** opacity: 1\n- `.hover\\:bg-primary\\/80`:\n  **active:** opacity: 1\n- `.hover\\:bg-\\[color-mix\\(in_oklch\\`:\n  **active:** opacity: 1\n- `.hover\\:bg-muted`:\n  **active:** opacity: 1\n- `.data-checked\\:bg-primary:where([data-checked]:not([data-checked=\"false\"]))`:\n  **active:** opacity: 1\n- `.data-checked\\:border-primary:where([data-checked]:not([data-checked=\"false\"]))`:\n  **active:** opacity: 1\n- `.ring-sidebar-ring`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ms-anim-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes ms-anim-slide-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes ms-anim-slide-side  {\n  0%  {\n  opacity: 0;\n  transform: translate(18px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes ms-anim-pop  {\n  0%  {\n  opacity: 0;\n  transform: translateY(6px) scale(0.94);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes ms-anim-spring-bounce  {\n  0%  {\n  opacity: 0;\n  transform: translateY(12px) scale(0.96);\n  } 60%  {\n  opacity: 1;\n  transform: translateY(-2px) scale(1.01);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes ms-anim-blur-fade  {\n  0%  {\n  filter: blur(4px);\n  opacity: 0;\n  transform: translateY(6px);\n  } 100%  {\n  filter: blur();\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes ms-anim-scale-fade  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.98);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  filter: blur(var(--tw-enter-blur,0));\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  filter: blur(var(--tw-exit-blur,0));\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--reka-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--reka-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto))));\n  } 100%  {\n  height: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Minimal shadcn-vue landing with emerald accent, announcement badge, hero and demo buttons; verbatim ms-anim/accordion/collapsible keyframes included."},{"id":"reka-ui","name":"Reka UI","fw":["Vue"],"theme":"无样式原语 / a11y","vendor":"unovue","link":"https://reka-ui.com","kind":"item","img":"previews/reka-ui.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/unovue/reka-ui","desc":"Vue 官方支持的 Headless 内核，零样式、100% 可定制。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Reka UI website (reka-ui.com) — an unstyled, accessible Vue UI primitive library. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: dark, minimal, developer-focused.\n- Page background: #0B0F0C (rgb(11,15,12)) very dark green-black.\n- Primary text: #F2F2F2 (rgb(242,242,242)) near white. Muted text: #9EA3A2 (rgb(158,163,162)).\n- Search box bg: #1C1917 (rgb(28,25,23)), border #262626 (rgb(38,38,38)).\n\nTop navigation bar (transparent / same dark bg, ~60px):\n- Left: \"Reka\" wordmark (bold, near-white).\n- Center/right nav links (muted, ~15px): Docs, Examples, Showcase.\n- Right controls: a \"Search ⌘ K\" pill (dark bg #1C1917, border #262626, rounded 8px, muted text) and a version label \"v2.10.1\" (muted text).\n\nHero section (centered):\n- A small badge above the title: \"✨ 12 New Components\" (subtle, border, rounded, muted/near-white text).\n- Big headline (bold, ~52px, near-white): \"Craft accessible web apps with Vue\".\n- Subhead (~18px, muted #9EA3A2): \"An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.\"\n- Two buttons: a primary \"Get Started\" (near-white bg, dark text, rounded) and a secondary \"Examples\" (transparent, border, near-white text).\n\nFont: Geist / system sans. Vibe: dark, calm, technical, accessible-focused.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.w-full.py-4` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.w-5.h-5` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.text-sm.px-3` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.group-hover:ml-3.group-focus:ml-3` → transition: margin 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus\\:border-green-500`:\n  **focus:** outline: 2px solid transparent\n- `.focus\\:shadow-\\[0_0_0_2px\\]`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress  {\n  0%  {\n  content: var(--tw-content);\n  background-position: 0px 0px;\n  } 100%  {\n  content: var(--tw-content);\n  background-position: 30px 30px;\n  }\n}\n@keyframes enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n@keyframes hide  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes scaleOut  {\n  0%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.95);\n  }\n}\n@keyframes slideUp  {\n  0%  {\n  height: var(--reka-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes contentShow  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -48%) scale(0.96);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes overlayShow  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes scaleIn  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.9);\n  } 100%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--reka-collapsible-content-height);\n  }\n}\n@keyframes slideIn  {\n  0%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dark Reka UI landing with #0B0F0C bg, centered hero, search pill and version; verbatim progress/enter/exit/scale keyframes included."},{"id":"arco-vue","name":"Arco Design","fw":["Vue"],"theme":"企业级 / 设计系统","vendor":"字节跳动","link":"https://arco.design/vue","kind":"item","img":"previews/arco-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/arco-design/arco-design-vue","desc":"字节跳动设计系统，配套物料市场与低代码平台，结构清晰。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the Arco Design Vue documentation page (arco.design/vue) — a Vue UI component library by ByteDance. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white documentation layout.\n- Page background: #FFFFFF. Primary text: #4E5969 (rgb(78,89,105)) slate-grey.\n- Brand accent: Arco blue #165DFF (rgb(22,93,255)).\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border #E5E6EB):\n- Left: \"Arco Design\" wordmark (bold) with a small blue square logo glyph.\n- Framework tabs: \"React\" (plain) and \"Vue\" (active — blue text #165DFF, maybe light blue underline/tint).\n- Right nav links (slate, ~14px): 快速上手, 暗黑模式, 定制主题, 设计变量, 国际化, 常见问题, 更新日志, and a GitHub icon.\n\nBelow the top bar, a documentation layout:\n- A left sidebar (width ~240px, light, border-right) listing doc sections: 快速上手, Npm 命令, 目录结构 (and a few more muted items).\n- Main content area: a large heading \"快速上手\" (Quick Start, bold, ~32px, dark) and beneath it a code block (dark/light grey rounded box, monospace) showing:\n    import ArcoVue from '@arco-design/web-vue';\n    app.use(ArcoVue);\n  plus a small \"取消\" (cancel, grey button) and \"确定\" (confirm, blue #165DFF button) pair to echo component demos.\n\nFont: Inter / system sans. Vibe: professional enterprise docs, blue accent, lots of whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.arco-alert-close-btn` → transition: color 0.1s cubic-bezier(0, 0, 1, 1)\n- `aside.arco-vue-aside-left` → transition: margin-left 0.2s ease\n- `button.arco-btn.arco-btn-secondary` → transition: all 0.15s ease\n- `main.arco-vue-main.aside-nav-show` → transition: margin-left, margin-right 0.2s, 0.2s ease, ease 0s, 0s\n- `div.ac-navbar-search-input` → transition: all 0.2s ease\n- `div.arco-react-select-view` → transition: all, padding 0.1s, 0s cubic-bezier(0, 0, 1, 1), linear 0s, 0s\n- `a.arco-react-btn.arco-react-btn-text` → transition: all 0.1s cubic-bezier(0, 0, 1, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Arco Design Vue docs layout with sidebar, blue accent, code block and cancel/confirm buttons; verbatim transitions included."},{"id":"tdesign-vue","name":"TDesign","fw":["Vue"],"theme":"多端统一设计系统","vendor":"腾讯 Tencent","link":"https://tdesign.tencent.com/vue","kind":"item","img":"previews/tdesign-vue.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/Tencent/tdesign-vue","desc":"腾讯多端统一设计系统（React/Vue/小程序/Flutter）。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold UI of the TDesign Vue component overview page (tdesign.tencent.com/vue) — a Vue UI component library by Tencent. Build a single self-contained HTML file (inline CSS, vanilla, system font stack, no external assets) at 1280px width.\n\nOverall theme: clean, white, enterprise component gallery.\n- Page background: #FFFFFF. Primary text: rgba(0,0,0,0.9) near-black; secondary text rgba(0,0,0,0.6) grey.\n- Brand accent: TDesign blue #0052D9.\n\nTop navigation bar (white, sticky, ~60px, subtle bottom border):\n- Left: \"TDesign\" wordmark (bold, blue #0052D9) with a small blue logo mark.\n- Framework tabs: \"React\" and \"Vue\" (Vue active, blue).\n- Right: a search box (light, rounded), a \"主题\" (theme) control and a GitHub icon.\n\nMain content:\n- A page heading \"组件概览\" (Component Overview, bold, ~30px, dark) with a small subtitle \"Vue UI Component\".\n- A responsive grid of component category cards. Each card: a category title (e.g. 通用 General, 布局 Layout, 导航 Navigation, 数据展示 Data Display, 反馈 Feedback, 数据录入 Data Entry) and a list of component names as muted pills/tags: e.g. Button 按钮, Icon 图标, Link 链接, Typography 排版, Grid 栅格, Layout 布局, Divider 分割线, Space 间距, Anchor 锚点, Tabs 选项卡, Table 表格, Form 表单, etc.\n- Cards have subtle borders, rounded corners, and on hover a blue tint.\n\nFont: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif. Vibe: orderly, Tencent enterprise design, blue accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.item` → transition: transform, box-shadow, opacity 0.24s, 0.24s, 0.24s cubic-bezier(0.38, 0, 0.24, 1), linear, linear 0s, 0s, 0s\n- `p.name` → transition: all 0.2s linear\n- `td-portal` → transition: clip-path, opacity, visibility 0.25s, 0.25s, 0.25s cubic-bezier(0.38, 0, 0.24, 1), linear, linear 0s, 0s, 0s\n- `li.TDesign-select-list__item.is-active` → transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1)\n- `span.title` → transition: color 0.2s linear\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `div[name=\"DOC\"] .image-wrapper .item`:\n  **hover:** transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 30px 5px, rgba(0, 0, 0, 0.04) 0px 16px 24px 2px, rgba(0, 0, 0, 0.08) 0px 8px 10px -5px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"TDesign Vue component overview with #0052D9 blue accent, header, category cards and component tags; verbatim transitions included."},{"id":"vuestic","name":"Vuestic UI","fw":["Vue"],"theme":"现代 / 即装即用","vendor":"Epicmax","link":"https://vuestic.dev","kind":"item","img":"previews/vuestic.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/epicmaxco/vuestic-ui","desc":"42 个业务组件，配置简单，响应式高性能。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Vuestic UI** (vuestic.dev).\n\n## Overall Layout & Theme\n- Bold **royal blue gradient background** (#2e51a2 to #1e3a8a range) covering full viewport.\n- Font: \"Source Sans Pro\", sans-serif.\n- Text color: white for headings/nav; dark (#262828) for content inside cards.\n\n## Top Announcement Banner\n- Dark navy background (~#1a2368). Height ~36px.\n- White text centered/left: \"VueConf US 2026 – Use code EPICMAX for $100 off · May 19–21\"\n- Right side: \"→ Register\" button — solid blue/dark blue, white text, rounded 4px, padding 5px 18px, font-size 13px.\n- Close ✕ button on far right, white.\n\n## Main Navigation Bar\n- Background: vibrant royal blue (#2550c7 or similar). Height ~56px.\n- **Left**: \"VUESTIC\" logo text in white, bold, ~20px, with a tiny \"UI\" superscript to the upper right.\n- **Center-right nav links**: `Docs`, `Contribute`, `Support & Consulting`, `Contact Us` — each white, ~14px, font-weight 500, no underlines, gap ~24px.\n- **Right side items**:\n  - GitHub icon (white circle outline).\n  - Discord icon (white).\n  - Twitter icon (white).\n  - Star icon + \"3747\" count in a yellow/gold pill badge (rounded-full, #facc15 or similar).\n\n## Hero Section (blue background, center-aligned top portion)\n- Padding-top: ~50px.\n- **Main heading**: \"Vue 3 UI Framework\"\n  - Very large (~48-54px), bold (700-800), pure white, centered.\n- **CTA Button Row** (centered, gap 16px, margin-top 28px):\n  - **\"Get Started\"** — white background, royal blue text (#2550c7), rounded 6px, padding 13px 30px, font-size 15px, font-weight 600, no border.\n  - **\"View on GitHub\"** — transparent background, white text, with GitHub icon (⚙️ or similar), rounded 6px, same size, font-weight 500.\n\n## Component Showcase Cards (below hero, overlapping/floating arrangement)\n\nBelow the hero text, display **3 overlapping white cards** arranged horizontally with slight vertical offsets, showcasing real UI components:\n\n### Left Card — Calendar & Form Widget\n- White card, rounded corners (~12px), subtle shadow.\n- Contains:\n  - Date list: Today, Tomorrow, Next Saturday, In a week, In a month (each as a row).\n  - Mini calendar grid showing \"June 2022\" with dates.\n  - Checkboxes: Cars ✓, Aircrafts ✓, Air ✓, Helicopters ✓, Spare parts □.\n  - Drag & drop area: \"Drag'n'drop files or Upload\" button.\n  - Agreement checkbox: \"✓ I agree to upload awesome videos\".\n\n### Center Card — Setup Personal Account (prominent, front-most)\n- White card, slightly larger, rounded ~12px, shadow.\n- Title: \"Setup Personal Account\" — bold ~18px, dark text.\n- Form fields:\n  - USERNAME input with placeholder \"powerful-developers\".\n  - PASSWORD field with dots and eye toggle icon.\n  - Checkbox: \"✓ I agree to Terms of Use\".\n  - **\"Register\" button** — solid royal blue (#2550c7), white text, rounded 4px, full-width-ish.\n- Toast notification below: dark gray bar \"Final-final(19) version was archived ✕\"\n\n### Right Card — Data Table & Controls\n- White card, rounded corners.\n- Tree navigation: \"Category ▾\", \"Subcategory ▾\", \"> Item A\".\n- Toggle switch (blue when ON, with circle thumb).\n- Data table with columns STATUS | BALANCE:\n  - Rows: Santa Claus / VERIFIED(green) / 34\n  - Sarah / PENDING(gray) / 129\n  - Brass / BLOCKED(red) / 0\n  - Smith / UPDATE NEEDED(yellow) / 66\n  - Doe / VERIFIED(green) / 521\n- Bottom: Avatar circles (emoji faces + V logo avatar).\n\n## Visual Notes\n- The page has a bold, confident enterprise Vue framework feel.\n- Blue is dominant everywhere (hero bg, nav, CTA buttons).\n- Component cards are the visual centerpiece — they show actual working-looking UI components (calendar, form, table).\n- Cards have soft shadows and are arranged with depth (some overlap others slightly).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.va-button`:\n  **focus:** outline-color: !important\n  **focus-visible:** outline-color: !important\n- `.va-list-item`:\n  **focus:** outline-color: !important\n  **focus-visible:** outline-color: !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes va-icon--spin-animation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes va-progress-circle__wrapper--indeterminate  {\n  100%  {\n  transform: rotate(270deg);\n  }\n}\n@keyframes va-progress-circle__overlay--indeterminate  {\n  0%  {\n  stroke-dasharray: 1, 125;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 125, 125;\n  stroke-dashoffset: -65px;\n  } 100%  {\n  stroke-dasharray: 125, 125;\n  stroke-dashoffset: -125px;\n  }\n}\n@keyframes step-loading  {\n  0%  {\n  transform: scale(0.5);\n  } 20%  {\n  transform: scale(1.2);\n  } 100%  {\n  transform: scale(0.5);\n  }\n}\n@keyframes vf-element-loader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(2turn);\n  }\n}\n@keyframes fpFadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(0px, -20px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes fade-557d1d50  {\n  0%  {\n  filter: brightness(0.8);\n  } 50%  {\n  filter: brightness(0.8);\n  } 100%  {\n  filter: brightness(1);\n  }\n}\n@keyframes background-jump  {\n  0%  {\n  background-position: 50% center;\n  } 50%  {\n  background-position: center 45%;\n  } 100%  {\n  background-position: 50% center;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Vuestic landing with blue gradient, announcement banner, nav, hero, and overlapping component cards; verbatim va-* keyframes included."},{"id":"inkline","name":"Inkline","fw":["Vue"],"theme":"现代 / 可定制","vendor":"Inkline","link":"https://inkline.io","kind":"item","img":"previews/inkline.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/inkline/inkline","desc":"Vue 3 组件库，内置设计系统、暗黑模式与表单验证。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Inkline** (inkline.io).\n\n## Overall Layout & Theme\n- White background for the left/content area; the right side features an illustrated night-sky scene.\n- Font: -apple-system, system-ui, \"Segoe UI\", sans-serif.\n- Text color: near-black (#171b23) for headings; #525c6a for body.\n- Primary accent: teal/cyan (#178f9a or #1a8fa0) for CTAs and highlighted heading text.\n- The page has a distinctive **illustration hero** — the right 50-60% of the viewport shows a stylized night scene.\n\n## Top Navigation Bar\n- Background: pure white. Height ~56px. Border-bottom: 1px solid #e5e7eb. Box shadow subtle.\n- **Left**: \n  - Inkline logo icon — a stylized dark cat/fox silhouette shape (~22px, near-black).\n  - \"Inkline\" text next to it, bold, ~17px, color #000.\n- **Right side items** (gap ~22px):\n  - `Home` link — active/bold, ~14px, #000.\n  - `Documentation` link — ~14px, #444.\n  - `Blog` link — ~14px, #444.\n  - GitHub icon (dark circle outline, ~20px).\n  - Game/controller icon (~18px, #555) — possibly a Discord/community icon.\n  - Moon/dark-mode toggle icon (~18px, #555).\n  - Search/magnifying glass icon (~18px, #555).\n\n## Hero Section (split layout)\n\n### Left Text Column (~45% width)\n- Padding-left: ~60px; padding-top: ~70px.\n\n**Announcement badge row**: \n- Small pill badge: \"New in v4.0\" — yellow/gold background (#fef3c7 or #facc15), dark text, font-size 12px, font-weight 600, rounded-full, padding 3px 10px.\n- Next to badge: \"Configuration file, design tokens, toast notifications and more!\" — ~14px, color #525c6a.\n\n**Main heading** (margin-top 20px):\n- \"Your next Vue.js project deserves\"\n- \"the best developer experience\"\n- Very large (~40-46px), bold (700), line-height 1.15.\n- First two lines in near-black (#171b23); \"**developer experience**\" is in **teal/cyan accent color** (#1a8fa0).\n\n**Subheading paragraph** (margin-top 16px):\n\"Inkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems.\"\n~16px, color #525c6a, line-height 1.65, max-width ~480px.\n\n**CTA Button Row** (margin-top 28px, gap 14px):\n- **\"Get started\"** — solid teal (#178f9a), white text, border-radius 6px, padding 13px 28px, font-size 15px, font-weight 600.\n- **\"1.3k+\"** — shows GitHub star count with a small GitHub icon (⚙️), light background or transparent, rounded 6px, same padding, gray text, font-weight 500.\n\n### Right Illustration Column (~55% width)\nThis is the visual centerpiece. Create a CSS/SVG illustration of a **night nature scene**:\n\n- **Background gradient**: Deep navy-blue sky (#1e3a5f to #2d5a87) fading lighter toward bottom, covering the full right area. Add tiny white dots as scattered stars (opacity .3-.6).\n- **Large moon/circle**: A large off-white circle (moon) in the upper-right area (~140px diameter, rgba(255,255,255,.85)), partially visible.\n- **Clouds**: 2-3 soft white/gray cloud shapes using SVG paths or border-radius blobs, opacity .2-.4, positioned in the upper-middle area.\n- **Mountains/hills**: Rolling mountain silhouettes in darker blue/navy tones (#1e3a5f to #162d47), overlapping layers creating depth, spanning the lower portion of the illustration area.\n- **Tree**: A stylized green tree with a round canopy (emerald #2dd4bf to #059669 gradient) and a brown trunk, positioned right-of-center.\n- **Cat/fox silhouette**: A dark silhouette (near-black #111827) of a cat or fox sitting and facing left, positioned at the bottom-right, looking up at the scene. Simple shape using SVG path or CSS shapes.\n- The illustration should feel whimsical, peaceful, and artistic — like a children's book night scene.\n\n## Visual Notes\n- This is an illustration-first landing page. The artwork on the right is the dominant visual element.\n- Clean, modern SaaS aesthetic with a warm, friendly vibe from the illustration.\n- Teal accent color ties together the CTA button and the \"developer experience\" highlight.\n- Generous whitespace on the left; the illustration fills the right side edge-to-edge.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nav.app-navbar.navbar` → transition: top, left, right, height, border-color, border-width, border-radius, background 0.3s ease\n- `a.router-link-active.router-link-exact-active` → transition: background-color, border-color, color 0.3s ease\n- `button.DocSearch.DocSearch-Button` → transition: background, border-color, color 0.3s ease\n- `svg` → transition: color 0.3s ease\n- `header.index-page-header.header` → transition: background-color 0.3s ease\n- `div._margin-right:1/2.badge` → transition: background-color, color, border-color 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hamburger-menu`:\n  **hover:** opacity: 1\n- `.navbar .navbar-brand`:\n  **hover:** text-decoration: underline\n- `.nav .nav-item`:\n  **hover:** text-decoration: underline; outline: 0\n  **focus:** outline: 0\n- `.collapsible > .collapsible-item > .collapsible-header`:\n  **hover:** text-decoration: underline; background: rgba(0,0,0,.075)!important; background-color: rgba(0, 0, 0, 0.075) !important\n  **focus:** background: rgba(0,0,0,.075)!important; background-color: rgba(0, 0, 0, 0.075) !important\n- `.app-sidebar-navigation .sidebar-page > a[data-v-65b07cd4]`:\n  **hover:** text-decoration: underline\n- `.app-sidebar-navigation[data-v-65b07cd4] .sidebar-category .sidebar-category-menu li a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes loader-rotate  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes loader-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@-webkit-keyframes toast-duration  {\n  100%  {\n  transform: scaleX(0);\n  }\n}\n@-webkit-keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ng-material","name":"Angular Material","fw":["Angular"],"theme":"Material Design","vendor":"Google","link":"https://material.angular.io","kind":"item","img":"previews/ng-material.png","chips":["Button","Input","Select","Checkbox","Radio","SlideToggle","Slider","Datepicker","FormField"],"repo":"https://github.com/angular/components","desc":"Google 官方维护，基于 CDK 原语，内置动画与 i18n。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the above-the-fold landing page of **Angular Material** (material.angular.io).\n\n## Overall Layout & Theme\n- Clean, minimal design inspired by Google's Material Design aesthetic.\n- Background: Very light lavender-blue (#f8f9ff or #f5f7fa) for hero area; pure white for features section below.\n- Font: Roboto, \"Helvetica Neue Light\", Helvetica, Arial, sans-serif.\n- Text color: Dark navy (#1a237e) for main headings; medium blue (#1565c0) for subheadings; #333 for body.\n\n## Top Navigation Bar\n- Background: light periwinkle/lavender (#d7e3ff or #e8edfc). Height ~56px.\n- **Left**:\n  - Angular Material logo icon — the classic Material/Angular \"A\" shield shape in blue (~22px, #1976d2).\n  - \"Material\" text next to it, bold, ~16px, color #1a237e.\n- **Center-left nav links** (gap ~24px): `Components`, `CDK`, `Guides` — each ~14px, color #1a237e, no underline.\n- **Right side items**:\n  - Version dropdown: `22.0.4 ▾` — same dark blue text, small down-caret.\n  - Theme/palette icon (paint bucket or format-fill icon, ~20px, #555).\n  - GitHub link: GitHub circle icon + \"GitHub\" text, ~14px, #333.\n\n## Hero Section (centered, light lavender bg)\n- Padding-top ~50px; padding-bottom ~40px; text-align center; position relative.\n- **Background watermark**: Behind all hero content, a very large, semi-transparent letter \"A\" (the Angular Material logo mark) in extremely light gray (#e8eaef), centered and oversized (~400px tall), low opacity (.12). This is the distinctive visual signature of the Angular Material homepage.\n\n**Main heading**: \"Angular Material\"\n- Very large (~44-48px), font-weight 500 (medium-bold), color deep navy (#0c3459).\n\n**Subheading**: \"Material Design components for Angular\"\n- ~17px, color medium blue (#1a56a8), margin-top 6px.\n\n**CTA button** (margin-top 28px):\n- \"Get started\" — white background, 1px solid #dadce0, subtle box-shadow (0 1px 3px rgba(0,0,0,.08)), border-radius: 9999px (full pill), padding 11px 32px, font-size 15px, font-weight 500, color #1976d2 (Material Blue). No heavy styling — it's a clean, outlined-ish white button.\n\n## Features Section (white background, below hero)\n- White bg, padding 36px 60px.\n- **Three-column layout**, equal widths, gap ~36px:\n\n### Column 1 — High quality\n- Heading: \"High quality\" — ~18px, font-weight 500, color #222, margin-bottom 10px.\n- Paragraph: \"Internationalized and accessible components for everyone. Well tested to ensure performance and reliability.\" — ~14.5px, line-height 1.65, color #444.\n- Second paragraph: \"Straightforward APIs with consistent cross platform behaviour.\" — same style.\n\n### Column 2 — Versatile\n- Heading: \"Versatile\" — same heading style.\n- Paragraph: \"Provide tools that help developers build their own custom components with common interaction patterns.\"\n- Paragraph: \"Customizable within the bounds of the Material Design specification.\"\n\n### Column 3 — Frictionless\n- Heading: \"Frictionless\" — same heading style.\n- Paragraph: \"Built by the Angular team to integrate seamlessly with Angular.\"\n- Paragraph: \"Start from scratch or drop into your existing applications.\"\n\n## Visual Notes\n- This is a Google/Angular-branded landing page — clean, lots of whitespace, professional enterprise feel.\n- The large translucent \"A\" watermark behind the hero is THE key visual differentiator.\n- Color palette uses Material Design blues (primary: #1976d2, darker: #0c3459).\n- Typography is Roboto throughout — clean, readable, not overly bold.\n- The Get started button is deliberately understated — white with subtle shadow, not a heavy colored CTA.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mdc-button.mat-mdc-button-base` → transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes _mat-menu-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes _mat-menu-exit  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ng-zorro","name":"NG-ZORRO","fw":["Angular"],"theme":"企业级 (Angular 版 antd)","vendor":"蚂蚁集团","link":"https://ng.ant.design","kind":"item","img":"previews/ng-zorro.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","DatePicker","Form"],"repo":"https://github.com/NG-ZORRO/ng-zorro-antd","desc":"Ant Design 的 Angular 实现，API 与 React 版对齐。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate NG-ZORRO Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **NG-ZORRO** (ng.ant.design) — an enterprise Angular UI component library following Ant Design specs.\n\n## Layout Structure\n**Three-column layout** within a 1280px-wide viewport:\n- **Left sidebar** (~220px): Navigation menu with vertical link items\n- **Main content center** (~65%): Hero headline, description, dual logos, feature bullets\n- **Right sidebar** (~180px): Quick links / TOC\n\n## Header Bar (Top)\n- Full-width white background (`#ffffff`) header\n- **Left:** Red/orange Ant Design shield logo (hexagonal shape) + **\"NG-ZORRO\"** brand name in bold black text\n- **Center-left:** Search input field with placeholder \"在 ng.ant.design 中搜索\", light gray border, magnifying glass icon inside\n- **Nav links** (horizontal, to the right of search): 文档, 组件, 实验性功能 — in dark gray/black text, no underline, ~14px\n- **Version badge**: \"21.3.1\" with dropdown arrow\n- **Far right icons**: GitHub icon (outline), language toggle icon, \"9163\" star count\n\n## Left Sidebar (below header)\n- White background, subtle right border\n- Section title: **\"Ant Design of Angular\"** in small bold text at top\n- Vertical navigation links (each on its own line):\n  - 快速上手, 脚手架, 国际化, 定制主题, 动态主题（实验性）, 全局配置项, LLMs.txt (with green \"新增\" badge), 动画开关 (with \"更新\" badge in light blue), 文字方向, 资源推荐, 常见问题, 贡献指南, 更新日志 (with \"21.3.1\" badge), v21 升级指南, 社区招募\n- Text color: dark gray `rgba(0,0,0,0.85)`; active/hover states may highlight\n- Font size: ~14px, comfortable spacing between items\n\n## Main Content Area (Hero)\n- **H1 Headline**: \"**Ant Design of Angular**\" — very large bold text (~40px), black/dark gray `rgba(0,0,0,0.85)`\n- **Description paragraph** below H1:\n  > ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。\n  - Text in medium gray `rgba(0,0,0,0.65)`, ~14px, line-height ~1.8\n- **Dual Logo Display**: Two logos side-by-side with \"+\" symbol between:\n  - **Left**: Ant Design diamond/rhombus logo — blue outline with red dot center and chevron shapes\n  - **Right**: Angular \"A\" logo shield — magenta/pink-to-red gradient\n- **Features Section (\"特性\")** heading: Bold ~24px, black\n- Feature bullet list (circles as markers):\n  - 提炼自企业级中后台产品的交互语言和视觉风格。\n  - 开箱即用的高质量 Angular 组件库，与 Angular 保持同同步升级。\n  - 使用 TypeScript 构建，提供完整的类型定义文件。\n  - 支持 Zoneless 和 OnPush 模式，性能卓越。\n  - 数十个国际化语言支持。\n  - 深入每个细节的主题定制能力。\n\n## Right Sidebar (Quick Links)\n- List of anchor-style links: 特性, 支持环境, 当前版本, 支持 Angular 版本, 设计规范, 安装, 链接, 谁在使用, 如何贡献, 社区互动\n- Smaller font ~13px, gray text\n\n## Color Scheme\n- Page background: pure white `#ffffff`\n- Primary text: `rgba(0,0,0,0.85)`\n- Secondary text: `rgba(0,0,0,0.65)`\n- Accent/Ant Design red: `#FF4D4F` or similar (logo, badges)\n- Link hover: Ant Design primary blue `#1677FF`\n- Border/divider colors: light gray `#f0f0f0`\n\n## Typography\n- Font family: AlibabaSans, system-ui fallback stack (use system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)\n- Clean, professional Chinese-friendly typeface\n\n## Visual Vibe\n- Enterprise-grade documentation site feel\n- Clean, structured, information-dense but well-spaced\n- Ant Design design system aesthetic (rounded corners, subtle shadows, clear hierarchy)\n- Professional, developer-focused, trustworthy\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `header.clearfix` → transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86)\n- `a` → transition: color 0.3s ease\n- `input.ant-input.ant-input-outlined` → transition: all 0.3s ease\n- `li.ant-menu-item.ant-menu-item-selected` → transition: border-color, background 0.3s, 0.3s ease, ease 0s, 0s\n- `nz-select-top-control.ant-select-selector` → transition: border-color, box-shadow, background-color 0.3s, 0.3s, 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1) 0s, 0s, 0s\n- `nz-select-item.ant-select-selection-item` → transition: all, visibility 0.3s, 0s ease, ease 0s, 0s\n- `nz-icon.anticon.anticon-down` → transition: transform 0.3s ease\n- `button.ant-btn.ant-btn-text` → transition: all 0.2s ease\n- `button.ant-btn.ltr` → transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `nz-icon.anticon.anticon-undefined` → transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)\n- `ul.aside-container.ant-menu` → transition: background, width 0.3s, 0.3s ease, cubic-bezier(0.2, 0, 0, 1) 0s, 0s\n- `li.ant-menu-item` → transition: border-color, background, padding 0.3s, 0.3s, 0.1s ease, ease, cubic-bezier(0.215, 0.61, 0.355, 1) 0s, 0s, 0s\n- `a.anchor` → transition: opacity 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.ant-input`:\n  **focus:** outline: 0\n- `.ant-menu-item a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.ant-btn`:\n  **hover:** background: #00000005; background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.85)\n  **active:** outline: 0; background: #00000007; background-color: rgba(0, 0, 0, 0.027); color: rgba(0, 0, 0, 0.85)\n  **focus:** outline: 0; background: #00000005; background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.85)\n- `.gh-btn`:\n  **hover:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221)); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); filter: \"progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0)\"; color: rgb(65, 131, 196)\n  **active:** outline: 0; background-color: rgb(220, 220, 220); border-color: #b5b5b5; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px inset; border-top-color: rgb(181, 181, 181); border-right-color: rgb(181, 181, 181); border-bottom-color: rgb(181, 181, 181); border-left-color: rgb(181, 181, 181)\n  **focus:** outline: 0; background-color: rgb(221, 221, 221); background-image: linear-gradient(rgb(238, 238, 238) 0px, rgb(221, 221, 221)); border-color: #ccc; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); filter: \"progid:dximagetransform.microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0)\"; color: rgb(65, 131, 196)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes antFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes antFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes antMoveDownIn  {\n  0%  {\n  transform: translateY(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveDownOut  {\n  0%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translateY(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveLeftIn  {\n  0%  {\n  transform: translate(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveLeftOut  {\n  0%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveRightIn  {\n  0%  {\n  transform: translate(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveRightOut  {\n  0%  {\n  transform: translate(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translate(100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes antMoveUpIn  {\n  0%  {\n  transform: translateY(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  }\n}\n@keyframes antMoveUpOut  {\n  0%  {\n  transform: translateY(0px);\n  transform-origin: 0px 0px;\n  opacity: 1;\n  } 100%  {\n  transform: translateY(-100%);\n  transform-origin: 0px 0px;\n  opacity: 0;\n  }\n}\n@keyframes waveEffect  {\n  100%  {\n  box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);\n  }\n}\n@keyframes fadeEffect  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes antSlideUpIn  {\n  0%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  } 100%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  }\n}\n@keyframes antSlideUpOut  {\n  0%  {\n  transform: scaleY(1);\n  transform-origin: 0% 0%;\n  opacity: 1;\n  } 100%  {\n  transform: scaleY(0.8);\n  transform-origin: 0% 0%;\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: three-column docs layout, NG-ZORRO header with search/nav/badges/star count, left sidebar nav with 新增/更新/21.3.1 badges, hero with dual Ant Design+Angular logos, 特性 bullet list, right TOC sidebar. Verbatim antFadeIn/antMoveUpIn/antSlideUpIn/waveEffect keyframes included."},{"id":"primeng","name":"PrimeNG","fw":["Angular"],"theme":"企业级 / 80+ 组件","vendor":"PrimeTek","link":"https://primeng.org","kind":"item","img":"previews/primeng.png","chips":["Button","InputText","Select","Checkbox","Radio","Toggle","Slider","DatePicker","Form"],"repo":"https://github.com/primefaces/primeng","desc":"Angular 企业级组件套件，主题丰富、企业支持完善。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate PrimeNG Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **PrimeNG** (primeng.org) — a premium Angular UI component library.\n\n## Top Announcement Banner\n- Full-width **dark charcoal** background bar (`#1a1d21` or similar very dark gray)\n- Text centered: \"**Next Chapter Begins 🚀 Read the full story**\" — white/light gray text\n- Close button (×) on the right side\n- Height ~36px\n\n## Header Bar\n- White background (`#ffffff`), subtle bottom border\n- **Left:** PRIMENG logo — a black shield/helmet icon + \"**PRIMENG**\" wordmark in bold black uppercase letters (~18px, letter-spacing)\n- **Right side items** (horizontal row):\n  - Search icon (magnifying glass outline)\n  - Theme toggle icon (sun/moon)\n  - GitHub icon (outline)\n  - Edit/pencil icon\n  - \"**Get PrimeUI**\" button — dark background (`#334155` or near-black), white text, rounded-full (pill shape), ~14px font\n\n## Hero Section (Centered)\n- Background: very light blue-gray (`#f8fafc` or similar off-white)\n- Padding top/bottom ~60px\n\n### Version Badge (above headline)\n- Small inline badge: red dot prefix + \"**primeng@22.0.0-rc.1**\" — small monospace-style text, subtle gray\n\n### Headline\n- Very large bold centered text (~48-52px): \"**Premium UI .p-title Suite for Angular**\"\n- The word \"**Suite**\" has a distinctive `.p-title` class styling — it appears as a slightly highlighted/differentiated element (light gray background or subtle border treatment around it)\n- Color: near-black `#1e293b`\n- Font weight: 700-800\n\n### Subtitle\n- Centered below headline, max-width ~680px: \"*Enhance your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components.*\"\n- Color: medium-dark gray `#475569`, ~17px, line-height 1.6\n\n### CTA Buttons (centered, horizontal gap ~12px)\n- \"**Get Started**\" — Dark/charcoal background (`#1e293b`), white text, rounded-pill shape, padding ~12px 28px, no border\n- \"**View Components**\" — White background, dark text, rounded-pill shape, same padding, thin border (`#e2e8f0`)\n\n### Company Logo Row (below buttons)\n- Centered row of grayscale company logos (faded/light opacity ~0.35):\n  - \"bus\" (text logo)\n  - Mercedes-Benz three-point star (circle logo)\n  - \"ebay\" (wordmark)\n  - Ford oval logo\n- Spacing ~40px between logos, vertically centered\n\n## Lower Section (Portfolio Preview)\n- Light background continues or transitions to white\n- Left side: small icon (shield-like) + \"**Overview**\" label + green \"● Live\" status badge\n- Heading: \"**Portfolio command**\" (medium-large, ~24px)\n- Description text about monitoring unlist exposure...\n- Right: search input field \"Search assets\" with bell/notification icon\n\n## Color Scheme\n- Page bg: `#f8fafc` (very light slate/gray-blue)\n- Header: white `#ffffff`\n- Dark elements: `#1e293b` (slate-800)\n- Muted text: `#64748b` (slate-500)\n- Accent: The PrimeNG brand uses emerald/green tones for some accents\n- Border: `#e2e8f0`\n\n## Typography\n- Font: \"Inter var\", system-ui fallback stack (-apple-system, 'Segoe UI', Roboto, sans-serif)\n- Clean modern look, Inter is key characteristic\n- Headlines are heavy/bold (700+)\n\n## Visual Vibe\n- Modern, clean, premium feel\n- Centered hero with generous whitespace\n- Professional enterprise Angular component library\n- Minimalist but polished\n- Rounded/pill-shaped buttons throughout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: _ngcontent-ng-c521785358_whouses-marquee 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `div.layout-topbar` → transition: background-color 0.5s ease\n- `button.topbar-item` → transition: outline-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.px-5.lg:px-7` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.w-full.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.layout-news .layout-news-close`:\n  **hover:** background-color: rgba(255, 255, 255, 0.2)\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-modal-enter  {\n  0%  {\n  background: transparent;\n  } 100%  {\n  background: var(--p-mask-background);\n  }\n}\n@keyframes px-animate-modal-leave  {\n  0%  {\n  background: var(--p-mask-background);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes color-animation  {\n  40%, 100%  {\n  background-position: -200% center;\n  }\n}\n@keyframes scroll  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(calc(-100% - 2.625rem));\n  }\n}\n@keyframes clippath  {\n  0%, 100%  {\n  clip-path: inset(0px 0px 98%);\n  } 25%  {\n  clip-path: inset(0px 98% 0px 0px);\n  } 50%  {\n  clip-path: inset(98% 0px 0px);\n  } 75%  {\n  clip-path: inset(0px 0px 0px 98%);\n  }\n}\n@keyframes block-animation  {\n  100%  {\n  transform: translateY(-10px) translate(10px) scale(1.02);\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 50px 10px;\n  }\n}\n@keyframes animated-block-1  {\n  100%  {\n  transform: translate(-10px);\n  }\n}\n@keyframes animated-block-2  {\n  100%  {\n  transform: translate(10px);\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);\n  } 20%  {\n  clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);\n  } 40%  {\n  clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--p-enter-opacity, 1);\n  transform: translate3d(var(--p-enter-translate-x, 0),var(--p-enter-translate-y, 0),0) scale3d(var(--p-enter-scale, 1),var(--p-enter-scale, 1),var(--p-enter-scale, 1)) rotate(var(--p-enter-rotate, 0));\n  }\n}\n@keyframes leave  {\n  100%  {\n  opacity: var(--p-leave-opacity, 1);\n  transform: translate3d(var(--p-leave-translate-x, 0),var(--p-leave-translate-y, 0),0) scale3d(var(--p-leave-scale, 1),var(--p-leave-scale, 1),var(--p-leave-scale, 1)) rotate(var(--p-leave-rotate, 0));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: dark announcement bar (#1a1d21), PRIMENG shield header with search/theme/GitHub/edit icons + Get PrimeUI pill CTA, hero with version badge (red dot + 22.0.0-rc.1), .p-title highlighted Suite headline, dual CTAs, faded company logo row, Portfolio command section with Live badge + search input. All verbatim keyframes included."},{"id":"clarity","name":"Clarity","fw":["Angular"],"theme":"企业级 / 设计系统","vendor":"VMware","link":"https://clarity.design","kind":"item","img":"previews/clarity.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Datepicker","Form"],"repo":"https://github.com/vmware-clarity/ng-clarity","desc":"VMware 设计系统，含 Angular 组件与核心 CSS。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Clarity Design System Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Clarity Design System** (clarity.design) — an enterprise design system by VMware.\n\n## Header Bar\n- **Full-width dark navy background**: `#0b1622` (very dark blue-black)\n- Height: ~52px, white text\n- **Left side:**\n  - **Logo area:** Hexagonal icon with orange center + blue outline (the Clarity hex logo) + \"**Clarity Design**\" text in white (~15px font)\n  - **VERSION 18 dropdown button:** Blue background `#0079AD`, white text, rounded corners ~4px, with down-arrow chevron. Text: \"VERSION 18\"\n- **Right side:**\n  - Moon icon + \"**Dark**\" label (toggle for dark mode)\n  - Document icon + \"**Compact**\" label (compact mode toggle)\n  - Small \"SKIP TO CONTENT\" yellow button (visible in some views)\n\n## Layout Structure\n- **Two-column layout**: Left sidebar nav (~200px) + Main content area\n- Page background: very light blue-gray `#fcfdfd`\n\n## Left Sidebar Navigation\n- White or transparent background, sits below header\n- Vertical list of navigation items, each with a right chevron arrow (>):\n  - Get Started >\n  - Foundation >\n  - Patterns >\n  - Components >\n  - Addons >\n  - Updating >\n  - Storybook >\n- Font: ~14px, color `#3a4d55` (dark teal-gray), clean spacing between items (~8px vertical padding)\n- Hover/active state may highlight\n\n## Main Content — Hero Section\n\n### Headline\n- \"**Clarity Design System**\" — very large bold text (~40px), color `#1b2b32` (dark navy), left-aligned\n\n### Subtitle\n- \"Simplifying the complexity of enterprise products\" — medium size ~18px, color `#1b2b32`, below headline, margin-bottom ~20px\n\n### CTA Button\n- \"**GET STARTED USING CLARITY**\" — solid blue button (`#0079AD` background, white text), rounded corners ~4px, padding ~10px 20px, uppercase, font-weight ~600, font-size ~13px\n\n### Hero Illustration (right side of hero)\n- Positioned to the right of the headline/subtitle/button area\n- Contains:\n  - A blue paper airplane icon/folded plane shape (pointing upper-right)\n  - Light blue cloud shapes (simple rounded blobs)\n  - Orange/blue hexagon icons floating\n  - Dotted line path connecting elements\n  - Geometric shapes in soft orange/peach tones\n  - Overall style: flat vector illustration, enterprise-friendly, clean\n\n## Three Feature Cards (below hero)\n- Row of three equal-width cards with white backgrounds, subtle border/shadow\n- Each card has:\n  - **Top icon** inside a colored circular/square badge:\n    - Designing: pencil/edit icon in peach/orange circle\n    - Developing: gear/cog icon in light-blue circle\n    - Accessibility: person/accessibility icon in gray circle\n  - **Title**: Bold ~18px heading (\"Designing\", \"Developing\", \"Accessibility\")\n  - **Description text**: ~13-14px, gray color, 2-3 lines\n  - **Link** at bottom: underlined blue link text (\"Get started\", \"Get started\"/\"Explore our GitHub\", \"Learn more\")\n\n## Color Scheme\n- Header bg: `#0b1622` (dark navy)\n- Page bg: `#fcfdfd` (near-white with slight blue tint)\n- Primary text: `#1b2b32`\n- Secondary text: `#3a4d55` / `#49545c`\n- Primary accent / CTA: `#0079AD` (clarity blue)\n- Card icon colors: orange-peach `#f89747`, light blue `#6db7cf`, gray `#9aa4ae`\n- Link blue: `#0079AD` or similar\n\n## Typography\n- Font family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif\n- Clean, geometric sans-serif feel\n- Headlines are heavy/bold\n\n## Visual Vibe\n- Enterprise documentation site\n- Clean, professional, structured\n- VMware/enterprise aesthetic\n- Navy header contrasts with very light body background\n- Flat illustration style in hero area\n- Card-based content organization\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `clr-vertical-nav.clr-vertical-nav.clr-nav-level-1` → transition: width 0.2s ease-in-out\n- `cds-icon.nav-group-trigger-icon.ng-tns-c1972165388-0` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown-menu > *`:\n  **focus:** outline-color: Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes clr-progress-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes clr-progress-looper  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes clr-skeleton-loading  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -200%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: dark navy header (#0b1622) with Clarity hex logo + VERSION 18 blue dropdown + Dark/Compact toggles, left sidebar nav (7 items with chevrons), hero with H1/subtitle/blue CTA button + paper-plane/hexagon/cloud illustration area, three feature cards (Designing orange-pencil/Developing blue-gear/Accessibility gray-person) with links. Verbatim clr-progress-fade/clr-progress-looper/clr-skeleton-loading keyframes included."},{"id":"ng-bootstrap","name":"NG Bootstrap","fw":["Angular"],"theme":"Bootstrap 风格","vendor":"NG Bootstrap","link":"https://ng-bootstrap.github.io","kind":"item","img":"previews/ng-bootstrap.png","chips":["Button","Form","Input","Checkbox","Radio","Select","Table","ListGroup","Card"],"repo":"https://github.com/ng-bootstrap/ng-bootstrap","desc":"Bootstrap 5 的 Angular 实现，无 jQuery 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate ng-bootstrap Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **ng-bootstrap** (ng-bootstrap.github.io) — Angular-powered Bootstrap widgets.\n\n## Header Bar\n- **Full-width Bootstrap blue background**: `#0d6efd` (the classic Bootstrap primary blue)\n- Height: ~52px\n- **Left side** (white text, horizontal):\n  - White circle with bold \"**B**\" letter inside (~28px diameter, white bg on blue or just a white B icon) — the Bootstrap logo\n  - Nav links in white text: **Home**, **Getting Started**, **Guides**, **Components**\n  - Font size ~14px, no underline\n- **Right side** (white/light text):\n  - Theme toggle group: \"**Auto**\" (active/blue highlight), \"Light\", \"Dark\" — small pill-style toggle\n  - Version dropdown: \"**ng-bootstrap v21.0.0**\" — white text with dropdown arrow\n  - NPM download count badge: \"**2,786,268**\" (with small npm icon)\n  - GitHub icon (white outline)\n  - Twitter icon (white)\n\n## Hero Section (Two-column layout)\n- Background: white `#ffffff`\n- Padding ~50-60px top/bottom\n\n### Left Column — Logo Visual\n- Large **3D stacked blue hexagon cards** graphic:\n  - Three hexagonal shapes stacked at slight offsets (like a deck of thick cards)\n  - All in rich Bootstrap blue (`#0d6efd` to darker blue gradient)\n  - Each hexagon is large (~280px wide)\n  - A large white bold \"**B**\" letter centered on the top hexagon\n  - Gives a 3D layered/stacked effect\n  - This is the main visual hero element\n\n### Right Column — Content\n- **H1 Headline**: \"**Bootstrap widgets**\" — very large bold black text (~40px)\n- **Subtitle**: \"*The angular way*\" — medium-large gray text (`#6c757d`), italic style, below h1\n\n- **Description paragraph**:\n  > Angular widgets built from the ground up using Bootstrap 5 CSS with APIs designed for the Angular ecosystem.\n  - Color: dark gray `#212529`, ~15px, line-height ~1.7\n\n- **Dependency line**: \"*The only dependencies are* [Angular](link), [Bootstrap 5](link) *CSS and*[ Popper](link)*\"\n  - Blue links, inline text\n\n- **Install command label**: \"Install with Angular CLI:\" — small gray text above code block\n- **Code block**:\n  ```\n  ng add @ng-bootstrap/ng-bootstrap\n  ```\n  - Light gray background `#f8f9fa`, monospace font, padding ~10px 16px, rounded corners, copy icon on right\n\n- **CTA Buttons** (horizontal row):\n  - \"**Demo**\" — outlined button, blue border `#0d6efd`, blue text, rounded ~8px\n  - \"**Get started now**\" — same outlined style\n\n- **Version note**: \"*Currently at v21.0.0*\" — small muted text below buttons\n\n## Feature Cards Row (bottom of viewport)\n- Three equal-width cards below hero, light gray background area\n- Each card has:\n  - **Icon** (large, ~48px, in a colored container):\n    - Native: Angular \"A\" logo shield (dark gray)\n    - Widgets: Toggle switch / UI component icon\n    - Quality: Checklist/verified icon\n  - **Title**: Bold ~20px (\"Native\", \"Widgets\", \"Quality\")\n  - **Description**: Short text about the feature\n  - **Link**: Blue underlined link at bottom\n\n## Color Scheme\n- Header blue: `#0d6efd` (Bootstrap primary)\n- Page bg: `#ffffff`\n- Text primary: `#212529`\n- Text secondary: `#6c757d`\n- Code bg: `#f8f9fa`\n- Link blue: `#0d6efd`\n- Card section bg: very light gray `#f8f9fa`\n\n## Typography\n- Font family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif\n- Clean Bootstrap aesthetic\n\n## Visual Vibe\n- Classic Bootstrap design language\n- Strong brand identity with the blue hexagon B logo\n- Developer documentation feel\n- Clean, professional, trustworthy\n- The stacked hexagon logo is the dominant visual element\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nav-link.active` → transition: color, background-color, border-color 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `button.btn.btn-clipboard` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.nav-link`:\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.dropdown-toggle`:\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.navbar-toggler`:\n  **focus:** outline: 0\n- `.btn`:\n  **hover:** background: #f6f8fa; background-color: rgb(246, 248, 250)\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1 matches: Bootstrap blue (#0d6efd) header with B logo/nav/Auto-Light-Dark theme toggle/v21.0.0/npm badge/GitHub+Twitter icons, hero with 3D stacked hexagon-B visual + 'Bootstrap widgets' H1/'The angular way' italic subtitle/description/dependencies links/install code block/Demo+Get started CTAs/v21.0 note, three feature cards (Native Angular A/Widgets toggle/Quality check) on #f8f9fa. Verbatim progress-bar-stripes/spinner-border/spinner-grow/placeholder-glow/placeholder-wave keyframes."},{"id":"taiga-ui","name":"Taiga UI","fw":["Angular"],"theme":"现代 / 设计系统","vendor":"Tinkoff","link":"https://taiga-ui.dev","kind":"item","img":"previews/taiga-ui.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Date","Form"],"repo":"https://github.com/taiga-family/taiga-ui","desc":"Angular + 设计系统的现代组件库，含编辑器等高级件。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Taiga UI Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Taiga UI** (taiga-ui.dev) — an open source Angular component library.\n\n## Layout Structure\n- **Full-screen split layout** (50/50): Left half white, Right half vibrant green\n- No visible header/navigation bar in the above-the-fold area\n- The page is essentially one large hero section filling the full viewport\n\n## Left Half (White background `#ffffff`)\n- Large bold typography, left-aligned with generous padding (~60px)\n- Text content (very large, ~52-60px font size, bold/black `#000`):\n\n  **Line 1:** \"Taiga UI —— [red triangular A logo]\"\n  - \"Taiga UI\" in black, very bold\n  - Long dash \"——\"\n  - Red/orange triangular logo (looks like an upward-pointing triangle/A shape in red-orange `#FF5722` or similar)\n\n  **Line 2:** \"powerful set of\"\n\n  **Line 3:** \"open source\"\n\n  **Line 4:** \"components for\"\n\n  - All lines are the same huge bold sans-serif font, black color\n\n- **Angular Logo** below the text:\n  - The Angular shield/logo: magenta-pink-to-red gradient shield shape with white \"**A**\" letter inside\n  - Next to it: word \"**Angular**\" in the same magenta/pink gradient color (`#DD0031` to `#C3002F` range)\n  - This is prominently displayed as a brand association element\n\n- **CTA Button**: Orange/coral pill button:\n  - Text: \"**Browse components**\" with a right-arrow (→) symbol\n  - Background: warm orange/coral `#FF6B35` or similar\n  - White text, fully rounded/pill shape (border-radius ~20px+)\n  - Padding ~12px 28px, positioned below the Angular logo\n\n- Small decorative element: double-chevron down icon (vv) at bottom-right of the left section, light gray, suggesting scroll-down\n\n## Right Half (Green background)\n- **Vibrant lime/green background**: bright green like `#4ade80` or `#22c55e` (a lively, saturated green)\n- **Topographic contour line pattern**: Black or dark green wavy/curved lines that look like a topographic map elevation pattern\n  - Multiple curved parallel lines creating organic flowing shapes\n  - Lines vary in curvature and density\n  - Creates an abstract natural/terrain-like visual texture\n  - Lines should be thin (~1-1.5px), dark green or black at low opacity\n\n## Color Scheme\n- Left bg: pure white `#ffffff`\n- Right bg: vibrant green `#4ade80` (or similar bright lime-green)\n- Primary text: black `#000000`\n- Accent orange (button): `#FF6B35` / `#F26522`\n- Taiga logo red/orange: `#FF5722` / `#EF4444`\n- Angular gradient: magenta-red to pink `#DD0031 → #FF0080`\n- Topo lines: dark green `#166534` at varying opacity\n\n## Typography\n- Font family: Manrope, system-ui, sans-serif\n- Very large, bold headlines (heroic scale)\n- Clean geometric sans-serif feel\n- Tight line-height for the stacked text\n\n## Visual Vibe\n- Bold, modern, striking split design\n- High contrast between clean white text area and vibrant green illustration area\n- Typographic-first hero (text IS the main visual)\n- Minimalist but impactful\n- Fresh, energetic, open-source project feel\n- The topographic pattern adds organic/creative contrast to the technical content\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `button.scroll` → animation: _ngcontent-ng-c935704031_bounce 1s ease infinite alternate\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `ng-component` → transition: background 0.6s ease\n- `section.initial` → transition: transform 0.6s ease\n- `h1.wrapper` → transition: opacity 0.6s ease 0.4s\n- `a.browse.browse_desktop` → transition: color, background-color, opacity, box-shadow, border-color, border-radius, filter 0.15s cubic-bezier(0.2, 0, 0.4, 0.9)\n- `button.scroll` → transition: opacity 0.3s cubic-bezier(0.2, 0, 0.4, 0.9)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@-webkit-keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@-webkit-keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@-webkit-keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@-webkit-keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@-webkit-keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes shimmerText  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes pulse  {\n  0%, 100%  {\n  opacity: 0.3;\n  } 50%  {\n  opacity: 0.6;\n  }\n}\n@keyframes tuiReveal  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes tuiFadeIn  {\n  0%  {\n  opacity: var(--tui-fade-start, 0);\n  } 100%  {\n  opacity: var(--tui-fade-end, 1);\n  }\n}\n@keyframes _ngcontent-ng-c935704031_scroll  {\n  0%  {\n  color: transparent;\n  } 50%  {\n  color: rgba(0, 0, 0, 0.2);\n  } 100%  {\n  color: transparent;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"分屏布局、CTA 按钮、Angular 品牌及右侧有机等高线图案与预览高度接近；滚动胶囊内应用了规范指定的 bounce 动画。"},{"id":"skeleton","name":"Skeleton","fw":["Svelte"],"theme":"设计系统 / Tailwind","vendor":"Skeleton","link":"https://skeleton.dev","kind":"item","img":"previews/skeleton.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/skeletonlabs/skeleton","desc":"基于 Tailwind 的自适应主题 Svelte 设计系统。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Skeleton Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Skeleton** (skeleton.dev) — an adaptive design system for Tailwind CSS.\n\n## Header Bar\n- White background (`oklch(0.99 0 0)` or near-white), subtle bottom border/shadow, sticky top\n- Height: ~56px\n- **Left side:**\n  - **Skull logo**: A distinctive black skull/cranium icon with a small crown on top and large round blue eyes (this is the Skeleton brand mascot)\n  - Nav links: \"**Docs**\", \"**Showcase**\", \"**More ▾**\" (dropdown)\n- **Center:**\n  - Search input bar: placeholder \"**Search...**\" with a \"×\" clear button inside, light gray background `oklch(0.97 0 0)`, rounded ~10px border, width ~200px\n- **Right side** (horizontal icons/controls):\n  - Theme toggle icon (sun/moon circle)\n  - Version dropdown: \"**v4.15.2 ▾**\"\n  - Heart/favorite icon with dropdown\n  - GitHub icon (outline)\n  - Discord icon\n  - Butterfly icon (Skeleton brand element)\n\n## Hero Section\n- Background: very subtle light blue radial gradient (center-left glow), transitioning to white at edges\n- Padding: ~50px top/bottom\n- Layout: two-column within the hero — mascot left, text right\n\n### Left Column — Skull Mascot\n- Large black skull illustration:\n  - Black filled silhouette of a skull shape (rounded cranium)\n  - Small crown/tiara on top of the head\n  - Two large prominent round blue eyes (cyan/blue circles)\n  - This is a cute/stylized skull character, not scary\n  - Size: roughly 220x220px area\n\n### Right Column — Hero Text\n- **H1 Headline**: \"**The adaptive design system for Tailwind CSS.**\"\n  - Very large bold text (~40-44px), near-black color `oklch(0.18 0 0)`\n  - Heavy font-weight\n\n- **Subtitle paragraph**: \n  > *Skeleton uses* Tailwind *as the foundation for building adaptive design systems. Including turnkey components for your favorite web frameworks.*\n  - Medium size ~16px, gray color, line-height ~1.7\n  - \"Tailwind\" is bold/emphasized\n\n- **CTA Buttons** (horizontal row):\n  - \"**Get Started ›**\" — Dark/black background (`#18181B`), white text, rounded ~8px, padding ~10px 24px, has right-arrow\n  - \"**Learn More**\" — White background, dark border, dark text, same padding, rounded ~8px\n\n## Live Demos Section (below hero)\n- Light gray background section `#f4f4f5` or similar neutral gray\n- **Heading**: \"**Live Demos**\" — bold ~24px, left-aligned\n- **Description**: \"*Test drive Skeleton directly in your browser for supported frameworks.*\" — smaller gray text\n- Note: \"*Functional components limited to React and Svelte.*\" — tiny muted text\n\n### Framework Icons Row\n- Horizontal row of circular framework badges:\n  - Each badge: colored solid circle (~52px diameter) + white/light icon inside + label below\n  - **React**: cyan/turquoise circle (`#22d3ee`) with atom/react icon, label \"React\"\n  - **Svelte**: orange/red-orange circle (`#ff6b35` / `#FF3E00`) with Svelte \"S\" logo, label \"Svelte\"\n  - **Vue**: green circle (`#42b883`) with Vue \"V\" triangle, label \"Vue *\" (asterisk note)\n  - **Solid**: blue/purple circle (`#446b9e`) with Solid logo, label \"Solid *\"\n  - **Astro**: purple/violet circle (`#8B5CF6` / `#D11B5A`) with Astro \"A\" icon, label \"Astro *\"\n  - **More**: \"... More\" text/badge (ellipsis)\n\n## Color Scheme\n- Page bg: near-white `#fafafa` / `oklch(0.99 0 0)`\n- Primary text: near-black `oklch(0.18 0 0)` ≈ `#1a1a2e`\n- Secondary/muted text: `oklch(0.55 0 0)` ≈ `#71717a`\n- Hero gradient bg: subtle blue radial from center `rgba(56,189,248,0.08)` to transparent\n- Demo section bg: `#f4f4f5`\n- Accent/skeleton brand: uses Tailwind's palette\n- CTA dark: `#18181B`\n\n## Typography\n- Font family: system-ui (use system font stack)\n- Clean modern look\n- Headlines are extra-bold\n\n## Visual Vibe\n- Playful yet professional developer tool aesthetic\n- The skull mascot gives it personality\n- Tailwind-first design utility feel\n- Modern, clean, developer-friendly\n- Framework-agnostic positioning (supports React, Svelte, Vue, Solid, Astro)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.absolute.top-0` → animation: spin 5s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.btn.hover:preset-tonal` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.btn-icon`:\n  **hover:** background-color: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 250, 0.05)); filter: brightness(125%)\n- `.btn`:\n  **hover:** background-color: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 250, 0.05)); filter: brightness(125%)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-circular-indeterminate  {\n  0%  {\n  stroke-dasharray: 1 var(--circumference);\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: calc(var(--circumference) * .75) var(--circumference);\n  stroke-dashoffset: calc(-1 * var(--circumference) * .5);\n  } 100%  {\n  stroke-dasharray: 1 var(--circumference);\n  stroke-dashoffset: calc(-1 * var(--circumference));\n  }\n}\n@keyframes progress-linear-indeterminate-horizontal  {\n  0%  {\n  transform: translate(-200%);\n  } 100%  {\n  transform: translate(200%);\n  }\n}\n@keyframes progress-linear-indeterminate-vertical  {\n  0%  {\n  transform: translateY(-200%);\n  } 100%  {\n  transform: translateY(200%);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes astroFadeInOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes astroFadeIn  {\n  0%  {\n  opacity: 0;\n  mix-blend-mode: plus-lighter;\n  } 100%  {\n  opacity: 1;\n  mix-blend-mode: plus-lighter;\n  }\n}\n@keyframes astroFadeOut  {\n  0%  {\n  opacity: 1;\n  mix-blend-mode: plus-lighter;\n  } 100%  {\n  opacity: 0;\n  mix-blend-mode: plus-lighter;\n  }\n}\n@keyframes astroSlideFromRight  {\n  0%  {\n  transform: translate(100%);\n  }\n}\n@keyframes astroSlideFromLeft  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes astroSlideToRight  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes astroSlideToLeft  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":3,"hifiNotes":"头部、Hero 布局、按钮与 Live Demos 区块基本还原；骷髅吉祥物与框架图标接近预览，背景光晕应用了 spin 动画。"},{"id":"shadcn-svelte","name":"shadcn-svelte","fw":["Svelte"],"theme":"Bits UI / Tailwind","vendor":"社区","link":"https://shadcn-svelte.com","kind":"item","img":"previews/shadcn-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Dialog"],"repo":"https://github.com/huntabyte/shadcn-svelte","desc":"Svelte 版复制即用组件集，基于 Bits UI + Tailwind。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate shadcn-svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **shadcn-svelte** (shadcn-svelte.com) — \"The Foundation for your Design System\".\n\n## Header Bar\n- White background, subtle bottom border/shadow, height ~56px\n- **Left side** — Nav links (horizontal, ~14px, medium weight):\n  - Home (slightly more prominent/active state with light bg pill)\n  - Docs\n  - Components\n  - Blocks\n  - Charts\n  - Create\n- **Center-Right:**\n  - Search input: \"**Search documentation...**\" placeholder, light gray background `oklch(0.97 0 0)`, rounded ~10px border, width ~220px\n- **Right side:**\n  - GitHub star icon + \"**8.9k**\" text\n  - Grid/layout toggle icon\n  - \"**+ New**\" button — dark/black background (`oklch(0.145 0 0)` or near-black), white text, small rounded ~8px\n\n## Hero Section (Centered)\n- White background, generous padding top/bottom (~50px)\n- Text-align center\n\n### Badge above headline\n- Small text link: \"**Introducing Rhea →**\" — gray text, small font ~13px, with arrow\n\n### H1 Headline\n- \"**The Foundation for your Design System**\"\n- Very large bold text (~44-48px), near-black `oklch(0.145 0 0)`\n- Centered\n\n### Subtitle\n- \"*A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.*\"\n- Medium size ~16px, gray `oklch(0.55 0 0)`, max-width ~650px, centered, line-height 1.7\n\n### CTA Button\n- \"**Build Your Own →**\" — dark/near-black background, white text, rounded-pill shape, padding ~11px 26px, centered, has right-arrow\n\n## Component Showcase Grid (below hero)\n- Light gray or white background area\n- Grid of interactive component previews arranged in a masonry-like layout:\n  \n  **Left card area:**\n  - Button row: \"**Button →**\" (dark/filled), \"**Secondary**\" (outlined), \"**Outline**\" (light)\n  - Form inputs: \"**Name**\" field with search icon, \"**Message**\" textarea\n  - Toggle row: \"**Badge**\" (filled), \"**Secondary**\" (outlined), radio/toggle switches\n  - \"**Alert Dialog**\" button, \"**Button Group ↑**\" dropdown\n  - Labels below: \"**Planning**\", \"**Support**\"\n\n  **Middle card area:**\n  - \"**Contribution History**\" heading\n  - \"**Last 6 months of activity**\" subtext\n  - Bar chart (vertical bars in varying heights, gray tones) showing monthly activity\n  - X-axis labels: Dec, Jan, Feb, Mar, Apr, May\n  - Below chart: \"**UPCOMING May 2024 Scheduled**\", \"**SAVINGS PLAN Accelerated Recurring**\"\n\n  **Right card area:**\n  - Large QR code image (black/white QR code pattern)\n  - Heading: \"**Scan to connect your mobile device**\"\n  - Description about Ledger mobile app and scanning code\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Primary text: near-black `oklch(0.145 0 0)` ≈ `#18181B`\n- Secondary text: `oklch(0.45 0 0)` ≈ `#52525b`\n- Muted text: `oklch(0.55 0 0)` ≈ `#71717a`\n- Input/bg: `oklch(0.97 0 0)` ≈ `#f4f4f5`\n- Border: `oklch(0.922 0 0)` ≈ `#e4e4e7`\n- CTA/button dark: `oklch(0.145 0 0)`\n- Accent: minimal accent colors, mostly neutral palette\n\n## Typography\n- Font family: \"Inter Variable\", sans-serif (Inter-like)\n- Clean, modern sans-serif\n- Headlines extra-bold\n\n## Visual Vibe\n- Clean, minimalist documentation/component gallery site\n- shadcn/ui design language (neutral, polished, developer-focused)\n- Component showcase is a key differentiator — shows actual interactive UI components\n- Professional, modern Svelte-focused design system\n- GitHub-starred open source project feel\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.cn-button.group/button` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.cn-button.group/button` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.group/input-group.cn-input-group` → transition: color, box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.cn-checkbox.peer` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.cn-switch-thumb.pointer-events-none` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.cn-sidebar-group-label.flex` → transition: margin, opacity 0.2s linear\n- `button.cn-sidebar-menu-button.peer/menu-button` → transition: width, height, padding 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.cn-item.group/item` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.style-nova .cn-button`:\n  **active:** opacity: 1\n- `.style-nova .cn-badge`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-accordion-content-height,var(--accordion-panel-height,auto));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--bits-accordion-content-height,var(--accordion-panel-height,auto));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"导航栏、Hero 居中布局、三栏组件展示卡与预览高度一致；QR 码与图表还原良好，保留了组件入场动画。"},{"id":"smui","name":"Svelte Material UI (SMUI)","fw":["Svelte"],"theme":"Material Design","vendor":"SMUI","link":"https://sveltematerialui.com","kind":"item","img":"previews/smui.png","chips":["Button","Textfield","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/hperrin/svelte-material-ui","desc":"Material Design 的 Svelte 实现，组件覆盖全面。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate SMUI (Svelte Material UI) Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **SMUI** (sveltematerialui.com) — Svelte Material UI components.\n\n## Header Bar\n- **Full-width orange background**: `#FF3E00` or `rgb(255, 62, 0)` (the bright Material Design/Svelte orange)\n- Height: ~56px\n- **Content:**\n  - \"**Svelte Material UI**\" text in white, bold, ~16px font\n  - This is the main branding element in the header\n  - Clean, minimal header with just the brand name\n\n## Layout Structure\n- **Two-column layout**: Left sidebar (~240px) + Main content area\n- Page background: **dark** (`#1a1a2e` or similar dark navy/charcoal) OR the body may be dark-themed\n\n## Left Sidebar Navigation\n- Dark background matching page bg\n- Vertical navigation list:\n  - \"**Svelte Material UI**\" (section title/header, white, slightly larger)\n  - \"Learn about theming\"\n  - \"See the theme source\"\n  - \"Installation\"\n  - \"SvelteKit\"\n  - \"Theming\"\n  - \"Migrating\"\n  - \"Quick Guide\" (or similar)\n  - Component list items: \"Accordion\", \"Button\", \"Floating Action Button\", etc.\n- Text color: white/light gray for active items, dimmer gray for inactive\n- Font size: ~14px for items, ~15px for section headers\n- Comfortable vertical spacing between items (~8-10px)\n\n## Main Content Area\n- Dark background\n- Content area has padding\n\n### Heading\n- \"**Svelte Material UI**\"\n- Large heading (~32-36px), white text, bold\n\n### Description paragraph\n- \"*Material UI components for Svelte apps*\"\n- Subtitle/description below heading\n- Light gray text color, ~16px font\n\n### Additional content\n- May include description about SMUI providing strictly typed Svelte components and actions for a wide variety of Material Design components\n- Information about compatibility with Svelte and SvelteKit\n\n## Color Scheme\n- Header bg: `#FF3E00` (bright Svelte orange)\n- Page/Sidebar bg: dark (`#121212`, `#1e1e1e`, or similar very dark gray)\n- Primary text on dark: `#ffffff` / `#e0e0e0`\n- Secondary/muted text on dark: `#9e9e9e` / `#b0b0b0`\n- Accent: The orange `#FF3E00` used sparingly as highlight\n\n## Typography\n- Font family: Roboto, sans-serif (Material Design standard)\n- Roboto is the key characteristic font here\n- Clean, readable, Material Design typography scale\n\n## Visual Vibe\n- Material Design documentation site aesthetic\n- Dark theme (or dark sidebar at minimum)\n- Svelte + Google Material Design fusion\n- Professional, developer-focused\n- Orange brand color pops against dark background\n- Clean documentation-style layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes mdc-ripple-fg-radius-in  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n  } 100%  {\n  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n  }\n}\n@keyframes mdc-ripple-fg-opacity-in  {\n  0%  {\n  animation-timing-function: linear;\n  opacity: 0;\n  } 100%  {\n  opacity: var(--mdc-ripple-fg-opacity, 0);\n  }\n}\n@keyframes mdc-ripple-fg-opacity-out  {\n  0%  {\n  animation-timing-function: linear;\n  opacity: var(--mdc-ripple-fg-opacity, 0);\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes mdc-checkbox-fade-in-background-8A000000FF67677800000000FF676778  {\n  0%  {\n  border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n  background-color: transparent;\n  } 50%  {\n  border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  }\n}\n@keyframes mdc-checkbox-fade-out-background-8A000000FF67677800000000FF676778  {\n  0%, 80%  {\n  border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #676778));\n  } 100%  {\n  border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n  background-color: transparent;\n  }\n}\n@keyframes mdc-checkbox-unchecked-checked-checkmark-path  {\n  0%, 50%  {\n  stroke-dashoffset: 29.7833;\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark  {\n  0%, 68.2%  {\n  transform: scaleX(0);\n  } 68.2%  {\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes mdc-checkbox-checked-unchecked-checkmark-path  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);\n  opacity: 1;\n  stroke-dashoffset: 0;\n  } 100%  {\n  opacity: 0;\n  stroke-dashoffset: -29.7833;\n  }\n}\n@keyframes mdc-checkbox-checked-indeterminate-checkmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: rotate(45deg);\n  opacity: 0;\n  }\n}\n@keyframes mdc-checkbox-indeterminate-checked-checkmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n  transform: rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: rotate(360deg);\n  opacity: 1;\n  }\n}\n@keyframes mdc-checkbox-checked-indeterminate-mixedmark  {\n  0%  {\n  transform: rotate(-45deg);\n  opacity: 0;\n  } 100%  {\n  transform: rotate(0deg);\n  opacity: 1;\n  }\n}\n@keyframes mdc-checkbox-indeterminate-checked-mixedmark  {\n  0%  {\n  animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n  transform: rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: rotate(315deg);\n  opacity: 0;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"flowbite-svelte","name":"Flowbite Svelte","fw":["Svelte"],"theme":"Tailwind / 极简","vendor":"Flowbite","link":"https://flowbite-svelte.com","kind":"item","img":"previews/flowbite-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Range","Form","Table"],"repo":"https://github.com/themesberg/flowbite-svelte","desc":"Tailwind + Svelte 组件，遵循简洁极简的设计原则。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Flowbite Svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Flowbite Svelte** (flowbite-svelte.com) — a Svelte UI component library.\n\n## Header Bar\n- White background, subtle bottom border, height ~60px\n- **Left side:**\n  - Red circular icon (Flowbite logo — red circle with white shape inside, like a play button or swirl) + \"**Flowbite Svelte**\" text in bold dark color (~16px)\n- **Center-left:**\n  - Search bar with \"**Search**\" placeholder + \"**⌘K**\" keyboard shortcut badge on right side of input\n  - Light gray border/background, rounded ~8px, width ~200px\n- **Right side nav links** (horizontal):\n  - Docs, Components, Blocks, Dashboard, Icons, Illustrations\n- **Far right icons/controls:**\n  - GitHub icon\n  - Discord chat icon\n  - YouTube/play icon\n  - Dark mode moon icon\n  - Version badge: \"**v1.32.0**\"\n\n## Alert Banner (below header)\n- Light yellow/cream background (`#fffbeb` or similar warm yellow tint)\n- Full width below header\n- Content:\n  - Small \"**New**\" red/orange pill badge on the left\n  - Text: \"**Flowbite Svelte v2 is coming soon! Check it out →**\"\n  - Close × button on the far right\n- Height ~40px\n\n## Hero Section (Two-column layout)\n- White background, padding ~45px\n\n### Left Column — Text & CTAs\n- **Small badge**: \"New\" in red/orange pill above headline\n- **Alert-style line**: \"*Flowbite Svelte v2 is coming soon!*\" with arrow link\n\n- **H1 Headline** (large, bold):\n  > **Speed up your web development with Flowbite Svelte**\n  - \"Flowbite Svelte\" is in **red/orange accent color** (`#EF4444` or `#F97316`)\n  - Rest of headline is near-black/dark\n  - Font size ~38-42px, heavy weight\n  - Line-height ~1.2\n\n- **Description paragraph**:\n  > *Flowbite Svelte is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.*\n  - Gray text, ~15px, line-height 1.7, max-width ~520px\n\n- **Install command box**: \n  - Light gray background `#f9fafb`, rounded, monospace font\n  - Text: \"`pnpm i -D flowbite-svelte flowbite`\"\n  - Copy icon on the right\n\n- **CTA Button**: \"**Get started →**\"\n  - Orange/red background (`#F97316` or similar), white text\n  - Rounded ~8px, padding ~11px 24px, arrow symbol\n\n### Right Column — Component Showcase UI Mockup\n- A visual mockup showing various Flowbite components arranged as if they're part of a UI:\n  - Social buttons row: Tweet (Twitter), Share buttons\n  - Large orange \"**Get Flowbite**\" button\n  - Toggle switches: \"Off with label\", \"On with label\" (orange when on)\n  - Avatar group: 3-4 user avatar circles + \"+5\" counter badge\n  - Star rating display (yellow stars, \"5.0\" score)\n  - Print button\n  - Text area / content placeholder (\"Write your name...\")\n  - Pagination control: \"\u003c 1 2 3 ... 100 >\"\n  - Audio/volume slider bar\n  - Orange floating action button (+) at bottom-right of mockup area\n  - URL/domain input field with dropdowns and search button\n- This is a visual showcase of available components, styled to look like a real UI\n\n## Featured In Section (bottom)\n- Centered row of partner/logo badges:\n  - \"**Featured in:**\" label\n  - Logo badges: reddit, DEV, Product Hunt (P), Combinator (Y), YouTube\n  - All in grayscale/faded style\n  - Horizontal layout with even spacing\n\n## Color Scheme\n- Header/Hero bg: white `#ffffff`\n- Alert banner bg: `#fffbeb` / `#fefce8` (warm yellow)\n- Primary text: `oklch(0.446 0.03 256.802)` ≈ dark slate-gray\n- Accent red/orange: `#EF4444` / `#F97316` (used for brand name, CTA, active states)\n- Install box bg: `#f9fafb`\n- Border: light gray `#e5e7eb`\n\n## Typography\n- Font family: Inter, ui-sans-serif, system-ui (Inter is the key characteristic)\n- Clean modern sans-serif\n- Bold headlines\n\n## Visual Vibe\n- Modern Svelte component library\n- Energetic brand feel with red/orange accents\n- Component-rich showcase demonstrating variety\n- Developer-friendly documentation site\n- Professional but approachable\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slideDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes shimmerText  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"carbon-svelte","name":"Carbon Components Svelte","fw":["Svelte"],"theme":"企业级 (Carbon)","vendor":"IBM","link":"https://carbon-components-svelte.onrender.com","kind":"item","img":"previews/carbon-svelte.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Form","DataTable"],"repo":"https://github.com/carbon-design-system/carbon-components-svelte","desc":"IBM Carbon 设计系统的 Svelte 实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Carbon Components Svelte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Carbon Components Svelte** (carbon-components-svelte.onrender.com) — IBM's Carbon Design System built for Svelte.\n\n## Header Bar\n- White background, subtle bottom border, height ~48px\n- **Left side:**\n  - \"**Carbon Components Svelte**\" text in bold (~15px) + version \"**v0.110.0**\" in smaller gray text\n- **Center:**\n  - Tab-style navigation: \"**Components**\" (active/underlined), \"**Icons**\", \"**Pictograms**\"\n  - Each with a small external link icon\n- **Right side:**\n  - Search icon (magnifying glass)\n  - GitHub icon\n  - Grid/apps icon (three dots)\n\n## Layout Structure\n- **Two-column layout**: Left sidebar (~240px) + Main content area\n- White page background\n\n## Left Sidebar Navigation\n- Light/white background, subtle right border separator\n- Organized in sections with headers:\n\n  **Introduction section** (highlighted/active):\n  - Introduction (active state — light blue-gray bg)\n  - Quick start\n  - Component index\n\n  **Navigation section**:\n  - UIShell\n  - Breadcrumb\n  - Link\n\n  **Data & lists section**:\n  - DataTable\n  - TreeView\n  - StructuredList\n  - ContainedList\n  - OrderedList\n  - RecursiveList\n  - UnorderedList\n\n  **Layout section**:\n  - Grid\n  - Stack\n  - Box\n  - AspectRatio\n  - Accordion\n  - Disclosure\n\n- Font size: ~14px for items\n- Active item has light blue/gray highlight `#f4f4f5`\n- Section headers are subtle gray labels above their items\n- Text color: dark gray `#161616`\n\n## Main Content Area\n- Padding ~32px 40px\n\n### Breadcrumb trail\n- Small text at top: \"🏠 Carbon Components Svelte\" (home icon + path)\n- Gray text, small font ~13px\n\n### H1 Headline\n- \"**The Carbon Design System,**\u003cbr>**built for Svelte**\"\n- Very large bold text (~36-40px), black/dark `#161616`\n- Two lines, heavy font-weight\n\n### Description paragraph\n- \"*A complete component library that implements the IBM Carbon Design System. Ship accessible, consistent, production-ready interfaces.*\"\n- Gray text `#52525b`, ~16px, line-height 1.7, max-width ~650px\n\n### CTA Buttons (horizontal row)\n- \"**Get Started →**\" — Blue background (`#0f62fe` or similar IBM carbon blue), white text, rounded ~8px padding, has arrow icon\n- \"**View on GitHub ↗**\" — White/light background, blue border, blue text, rounded same size, external-link icon\n\n## Stats Row (below hero)\n- Four equal columns in a row, below the buttons area:\n\n| **70+** | **5** | **TypeScript** | **WCAG 2.1 AA** |\n|---|---|---|---|\n| Components\u003cbr>\u003csmall>From inputs to data tables\u003c/small> | Built-in themes\u003cbr>\u003csmall>Two light, three dark\u003c/small> | Fully typed API\u003cbr>\u003csmall>Props, events, and slots\u003c/small> | Accessibility\u003cbr>\u003csmall>Keyboard and screen-reader ready\u003c/small> |\n\n- Large number on top (bold ~28px, dark)\n- Label below (medium ~14px, dark)\n- Sub-description below label (small ~12px, muted gray)\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Header bg: white\n- Sidebar active bg: `#f4f4f5`\n- Primary text: `#161616` (IBM Carbon near-black)\n- Secondary text: `#52525b`\n- Muted text: `#8d8d8d`\n- Accent/blue (CTA): `#0f62fe` (IBM Carbon blue / action primary)\n- Border: `#e0e0e0`\n- Link color: `#0f62fe`\n\n## Typography\n- Font family: \"**IBM Plex Sans**\", 'Helvetica Neue', Arial, sans-serif\n- This is the key characteristic font — IBM Plex Sans gives it the IBM/Carbon identity\n- Clean geometric sans-serif feel\n\n## Visual Vibe\n- Enterprise-grade IBM design system documentation\n- Professional, structured, information-dense but clean\n- The IBM Carbon Design System aesthetic (precise spacing, clear hierarchy)\n- Developer documentation site\n- Blue accent color is signature IBM\n- Grid-based, orderly layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.bx--header__name` → transition: border-color 0.11s ease\n- `a.bx--header__menu-item` → transition: background-color, border-color, color 0.11s, 0.11s, 0.11s ease, ease, ease 0s, 0s, 0s\n- `div.bx--header__search` → transition: max-width, background 0.11s, 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9) 0s, 0s\n- `a.bx--header__action` → transition: background-color, border-color 0.11s, 0.11s ease, ease 0s, 0s\n- `nav.docs-sidenav.bx--side-nav__navigation` → transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9)\n- `a.bx--side-nav__link.bx--side-nav__link--current` → transition: color, background-color, outline 0.11s, 0.11s, 0.11s cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9), cubic-bezier(0.2, 0, 0.38, 0.9) 0s, 0s, 0s\n- `a.bx--btn.bx--btn--primary` → transition: background, box-shadow, border-color, outline 0.07s, 0.07s, 0.07s, 0.07s cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9) 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bx--skip-to-content`:\n  **focus:** color: rgb(244, 244, 244); background-color: rgb(22, 22, 22); border-top-color: rgb(15, 98, 254); border-right-color: rgb(15, 98, 254); border-bottom-color: rgb(15, 98, 254); border-left-color: rgb(15, 98, 254)\n- `a.bx--header__name`:\n  **hover:** color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `a.bx--header__menu-item`:\n  **hover:** color: rgb(244, 244, 244); background-color: rgb(44, 44, 44)\n  **active:** color: rgb(244, 244, 244); background-color: rgb(57, 57, 57)\n  **focus:** color: rgb(244, 244, 244); border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--header-search-button`:\n  **hover:** background-color: rgb(53, 53, 53)\n  **active:** background-color: rgb(57, 57, 57); color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--header__action`:\n  **hover:** background-color: rgb(53, 53, 53)\n  **active:** background-color: rgb(57, 57, 57); color: rgb(244, 244, 244)\n  **focus:** border-color: #fff; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.bx--side-nav__menu a.bx--side-nav__link--current`:\n  **hover:** color: rgb(22, 22, 22); background-color: rgb(229, 229, 229)\n- `.bx--side-nav__menu a.bx--side-nav__link--current > span`:\n  **hover:** color: rgb(22, 22, 22)\n- `a.bx--side-nav__link`:\n  **hover:** color: rgb(22, 22, 22); background-color: rgb(229, 229, 229)\n- `a.bx--side-nav__link > .bx--side-nav__link-text`:\n  **hover:** color: rgb(22, 22, 22)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes skeleton  {\n  0%  {\n  opacity: 0.3;\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 20%  {\n  opacity: 1;\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 28%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 51%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 58%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 82%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 83%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 96%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 100%  {\n  opacity: 0.3;\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  }\n}\n@keyframes collapse-accordion  {\n  0%  {\n  opacity: 1;\n  height: 100%;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  height: 0px;\n  }\n}\n@keyframes expand-accordion  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  height: 0px;\n  } 100%  {\n  opacity: 1;\n  height: 100%;\n  visibility: inherit;\n  }\n}\n@keyframes tooltip-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes hide-feedback  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes show-feedback  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes fpFadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-20px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fpSlideLeft  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes fpSlideLeftNew  {\n  0%  {\n  transform: translate(100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes fpSlideRight  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes fpSlideRightNew  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes fpFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fpFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"ark-ui","name":"Ark UI","fw":["Solid","Vue"],"theme":"无样式 / 跨框架","vendor":"Chakra","link":"https://ark-ui.com","kind":"item","img":"previews/ark-ui.png","chips":["Dialog","Dropdown","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/chakra-ui/ark","desc":"更轻更快的 Headless 组件库，Solid/Vue 双版本，可 tree-shaking。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Ark UI Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Ark UI** (ark-ui.com) — Unstyled UI components for your Design System.\n\n## Overall Background\n- Very light warm beige/cream color: `#fdfdfc` or `oklch(0.985 0.002 247)` — a subtle off-white with slight warmth\n- Subtle decorative background elements: faint peach/salmon colored squares scattered/positioned at various places in the background (decorative, low opacity)\n\n## Header Bar\n- White background, floating/fixed style with rounded corners or clean flat\n- Height: ~52px\n- Positioned at top center with some margin from edges (or full-width but white on the warm bg)\n- **Left side:**\n  - \"**ARK**\" logo text in bold red/orange (`#eb5e41` or similar coral-red), ~18px font weight 800\n- **Center nav links**:\n  - \"**Docs**\"\n  - \"**Showcase**\"\n  - \"**Blog**\"\n  - \"**Plus ✨**\" (with sparkle/star icon)\n  - Font size ~14px, dark gray color\n- **Right side icons:**\n  - GitHub icon (outline)\n  - Dark mode / moon toggle icon\n\n## Hero Section\n- Centered layout, generous padding ~60-70px top\n\n### Badge above headline\n- Pill-shaped badge with light border: \"**[New] Date Input component →**\"\n  - Has a small sparkle/fireworks icon prefix\n  - Light background, small font ~13px, gray/dark text\n  - Rounded pill shape\n\n### H1 Headline (very large)\n- \"**Unstyled UI components**\u003cbr>**for your Design System**\"\n- The words \"**Unstyled**\" and \"**Design System**\" are highlighted in **red/orange accent color** (`#eb5e41` or `#EB5E41`)\n- Rest of text is near-black `#202020`\n- Font size ~48-54px, bold/heavy weight (700-800)\n- Line-height: ~1.15\n- Centered alignment\n\n### Description paragraph\n- \"*A headless library with 45+ accessible components. Bring your own styles and build a design system that works across React, Solid, Vue, and Svelte.*\"\n- Gray text color `#5f5f5f`, ~16-17px, max-width ~640px, centered\n- Line-height ~1.7\n\n### CTA Buttons (centered horizontal row)\n- \"**Get Started**\" button:\n  - Red/orange background (`#eb5e41`), white text\n  - Rounded corners ~6px\n  - Padding ~12px 28px\n  - Font size ~15px, font-weight 600\n  \n- \"**Show Components**\" button:\n  - White/light background, thin border (~1px solid #dcdcdc)\n  - Dark text, same padding and rounding\n  - Same font styling\n\n### Framework Pills Row\n- Below buttons, centered row of framework badges:\n  - Each is a colored circle/pill with an icon + label\n  - \"**React**\" — light blue icon (`#60a5fa`) + \"React\" label\n  - \"**Solid**\" — blue icon (`#446b9e`) + \"Solid\" label  \n  - \"**Vue**\" — green icon (`#42b883`) + \"Vue\" label\n  - \"**Svelte**\" — red/coral icon (`#ff3e00`) + \"Svelte\" label\n  - Small icons (snowflake-like or framework logo shapes) inside each pill\n  - Even spacing between pills\n\n## Decorative Background Elements\n- Faint peach/salmon-colored squares (`rgba(235,94,101,0.08)` or similar) positioned at:\n  - Upper right area (one larger square)\n  - Middle-right area (one medium square)\n  - Lower area (one smaller square)\n  - These create visual interest without being distracting\n  - Squares have no border, just solid fill at very low opacity\n\n## Bottom Tab Bar (floating)\n- Dark bar (near-black `#1a1a1a`) floating at bottom-right or bottom-center\n- Contains tabs: \"**React**\", \"**Solid**\", \"**Vue**\", \"**Svelte**\"\n- Active tab has lighter/highlighted appearance\n- Small chat/feedback icon (red circular button with speech bubble) attached to the tab bar's right edge\n\n## Color Scheme\n- Page bg: `#fdfdfc` (warm off-white)\n- Primary text: `#202020`\n- Secondary/muted: `#5f5f5f`\n- Accent/red: `#eb5e41` (ark-ui brand coral-red)\n- Border: `#e8e3df` or similar warm light gray\n- CTA bg: `#eb5e41`\n- Framework colors: blue, green, red per framework identity\n- Decorative squares: `rgba(235,94,101,0.06)`\n\n## Typography\n- Font family: \"**Wix Madefor Text**, Wix Madefor Text Fallback, ui-sans-serif, ...\"\n- Clean modern sans-serif\n- Headlines very bold and large\n- This font gives it a distinctive friendly-yet-professional feel\n\n## Visual Vibe\n- Warm, friendly, approachable design\n- Not cold/clinical — the warm bg tone makes it inviting\n- Headless/unstyled component library positioning\n- Multi-framework (React, Solid, Vue, Svelte) emphasis\n- Modern, clean, minimal but not sterile\n- The decorative squares add playful character\n- Coral/red accent gives energy without being aggressive\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.button.button--variant_ghost` → transition: background, border-color, color, box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.tt_capitalize.c_gray.dark.11` → transition: color, background, border-color 0.2s cubic-bezier(0.2, 0, 0, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"kobalte","name":"Kobalte","fw":["Solid"],"theme":"无样式 / a11y","vendor":"Kobalte","link":"https://kobalte.dev","kind":"item","img":"previews/kobalte.png","chips":["Dialog","DropdownMenu","Select","Checkbox","RadioGroup","Switch","Tabs","Accordion","Tooltip"],"repo":"https://github.com/kobaltedev/kobalte","desc":"SolidJS 的无样式可访问组件原语。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Kobalte Landing Page (Above-the-Fold)\n\nRecreate the above-the-fold landing page of **Kobalte** (kobalte.dev) — A UI toolkit for building accessible web apps and design systems.\n\n## Header Bar\n- White background, subtle bottom border, height ~52px\n- **Left side:**\n  - \"**Kobalte.**\" brand name in bold black text (~16px), with a period/dot\n  - \"**Menu**\" dropdown button/link next to it\n- **Center area:**\n  - Search bar: \"**Search**\" placeholder + \"**⌘K**\" keyboard shortcut badge\n    - Light gray background `rgb(246, 246, 247)`, rounded ~8px border, width ~220px\n- **Right side nav:**\n  - \"**Components**\" link\n  - \"**Changelog**\" link\n- **Far right icons:**\n  - GitHub icon (outline)\n  - External link / window icon\n\n## Layout Structure\n- **Three-column layout**: Left sidebar (~230px) + Main content (center, ~55%) + Right TOC sidebar (~180px)\n- White page background\n\n## Left Sidebar Navigation\n- White background, right border separator\n- Organized in sections:\n\n  **Overview section header**:\n  - Introduction (active — blue text or highlighted)\n  - Getting started\n  - Styling\n  - Animation\n  - Polymorphism\n  - Server side rendering\n\n  **Components section header**:\n  - Accordion\n  - Alert\n  - Alert Dialog\n  - Badge\n  - Breadcrumbs\n  - Button\n  - Checkbox\n  - Collapsible\n  - Color Area\n  - Color Channel Field\n  - (more items continuing...)\n\n- Font size: ~14px for items\n- Section headers are small uppercase labels (`Overview`, `Components`) in muted color\n- Active item (\"Introduction\") is blue/underlined/highlighted\n- Text color: dark gray `#3f3f46` for normal, blue `#2563eb` for active\n\n## Right Sidebar — \"On this page\" TOC\n- Header: \"**On this page**\" in small bold text\n- List of anchor links:\n  - Introduction (blue/active)\n  - Key features\n  - Accessible\n  - Composable\n  - Unstyled\n  - Acknowledgment\n- Smaller font ~13px, lighter text color for inactive items\n- Compact vertical list\n\n## Main Content Area\n- Padding ~32px 40px\n\n### H1 Heading\n- \"**Introduction**\"\n- Large bold text (~32-36px), near-black `#18181B`\n- Top of main content area\n\n### Description paragraph(s)\n- \"*Kobalte is a UI toolkit for building accessible web apps and design systems with Solid.JS. It provides a set of low-level UI components and primitives which can be the foundation for your design system implementation.*\"\n- Gray text `#52525b`, ~15px, line-height ~1.7\n\n### \"Key features\" section heading\n- Bold ~22px heading below description\n\n### Feature subsections (each has heading + paragraph):\n\n**Accessible**\n- Subheading: \"**Accessible**\" (~18px)\n- Paragraph: \"*Components follow the WAI-ARIA Authoring Practices whenever possible. Kobalte handle accessibility implementation details like ARIA attributes, focus management, and keyboard navigation.*\"\n\n**Composable**\n- Subheading: \"**Composable**\"\n- Paragraph: \"*Kobalte provides granular access to each component parts, so you can wrap them and add your own event listeners, props, etc.*\"\n\n**Unstyled**\n- Subheading: \"**Unstyled**\"\n- Paragraph: \"*Components are shipped with zero styles, allowing you to completely customize the look and feel. Bring your preferred styling solution (vanilla CSS, Tailwind, CSS-in-JS libraries, etc...).*\"\n\n- Links within paragraphs (like \"WAI-ARIA Authoring Practices\") are blue underlined\n\n## Color Scheme\n- Page bg: white `#ffffff`\n- Primary text: `#18181B` (near-black)\n- Secondary text: `#52525b` / `#71717a` (gray)\n- Link/accent blue: `#2563eb` (for active items, links)\n- Search bg: `rgb(246, 246, 247)`\n- Border: `#e4e4e7` (light gray)\n- Sidebar active: blue highlight or blue text\n\n## Typography\n- Font family: Inter, ui-sans-serif, system-ui (Inter is the key characteristic)\n- Clean modern sans-serif similar to Vercel/design-system sites\n- Readable body text size\n\n## Visual Vibe\n- Clean documentation site aesthetic\n- Similar to Vercel/Radix/shadcn style documentation pages\n- Three-column doc layout (nav + content + TOC)\n- Professional, developer-focused\n- Accessible/unstyled/headless component library positioning\n- Minimalist, information-dense but well-spaced\n- Inter font gives it a modern tech-doc feel\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.sticky.top-0` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.DocSearch.DocSearch-Button` → transition: border-color 0.25s ease\n- `svg` → transition: color 0.5s ease\n- `kbd.DocSearch-Button-Key` → transition: color, border-color 0.5s, 0.5s ease, ease 0s, 0s\n- `a.px-3.py-2` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.DocSearch-Button`:\n  **focus:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes _hide_e3sag_1  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes _slideIn_e3sag_1  {\n  0%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes _swipeOut_e3sag_1  {\n  0%  {\n  transform: translate(var(--kb-toast-swipe-end-x));\n  } 100%  {\n  transform: translate(calc(100% + var(--viewport-padding)));\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"solid-headless","name":"Solid Bootstrap","fw":["Solid"],"theme":"Bootstrap 风格","vendor":"SolidJS","link":"https://www.solid-bootstrap.com","kind":"item","img":"previews/solid-headless.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/solidjs/solid-bootstrap","desc":"Bootstrap 5 的 Solid 实现，API 贴近 React-Bootstrap。","prompt":""},{"id":"shoelace","name":"Shoelace (Web Awesome)","fw":["Web Components"],"theme":"框架无关 / 标准化","vendor":"Web Awesome","link":"https://shoelace.style","kind":"item","img":"previews/shoelace.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Range","Form","FileUpload"],"repo":"https://github.com/shoelace-style/shoelace","desc":"标准 Web Components，任意框架可用，框架无关首选。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Shoelace (Web Awesome) — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width that looks like a macOS window or browser preview frame showing UI components.\n\n## Overall Layout\n- **Background**: Very dark navy/almost-black (#161622 or #1a1a2e) filling the entire viewport\n- **Card container**: A rounded-corner panel (border-radius ~12px) with a subtle border, centered with padding\n- **Window chrome**: Top-left has three small colored dots (red #FF5F57, yellow #FEBC2E, green #28C840) like macOS traffic lights\n- Below the dots is a title bar area\n\n## Header Section (inside card top)\n- **Title text**: \"Shoelace (Web Awesome)\" — bold white, ~20-22px font-size, sans-serif\n- **Subtitle line** below title: \"Web Components · 框架无关 / 标准化\" — smaller (~13-14px), gray color (#9ca3af or similar)\n\n## Component Showcase Area (below header, inside card)\nThis section shows example components in a dark container:\n\n1. **Primary button**: Solid purple background (#9b5de5 / #a78bfa), white text \"Primary\", rounded corners (~8px), no border\n2. **Default button**: Dark background (#252535), light gray/white text \"Default\", subtle border (#3a3a4a), same size as Primary\n3. **Input field placeholder**: Dark background (#252535), rounded, placeholder text \"Type here...\" in muted gray, thin border\n4. **Toggle switch**: A toggle switch in ON position — purple track (#9b5de5) with a white circular knob on right side\n5. **Badge button**: Teal/dark cyan background (#0d7377 or #115e59), white text \"Badge\", small, rounded\n6. **Select dropdown**: Dark background, white text \"Select\" with a down-chevron/triangle icon on right\n\n## Card Preview Section\n- A bordered box (subtle border #2a2a3a) containing:\n  - Heading \"Card title\" — white, bold, ~16px\n  - Body text \"This is a preview of the component look.\" — gray (#9ca3af), ~13px\n\n## Bottom Tag Pills Row\nA row of small pill/tag buttons with dark backgrounds and light borders:\n- First row: Button | Input | Select | Checkbox | Radio | Switch | Range | Form\n- Second row: FileUpload\nEach tag is a small rounded rectangle with thin border, light text, compact padding.\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif\n- Text colors: White (#fff) for headings, gray (#9ca3af or #a0a0b0) for secondary/muted text\n- Accent color: Purple (#9b5de5) used for Primary button and toggle switch\n- Background layers: Card inner bg slightly lighter than page bg (~#1e1e30 vs #161622)\n- Borders: Subtle dark (#2e2e42 or #33334a)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: opacity 0.1s ease\n- `sl-button` → transition: scale 0.25s ease\n- `aside` → transition: translate 0.25s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.visually-hidden:not(-within)`:\n  **focus:** border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important\n- `button`:\n  **hover:** scale: 1.1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局、配色和组件结构均与预览图接近；三处过渡动画（div opacity 0.1s、button scale 0.25s、aside translate 0.25s）已按规范实现。"},{"id":"material-web","name":"Material Web (MWC)","fw":["Web Components"],"theme":"Material Design","vendor":"Google","link":"https://material-web.dev","kind":"item","img":"previews/material-web.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","List"],"repo":"https://github.com/material-components/material-web","desc":"Google 官方 Material Design 3 的 Web Components。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Material Web (MWC) — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width that looks like a macOS window or browser preview frame showing UI components.\n\n## Overall Layout\n- **Background**: Very dark navy/almost-black (#161622 or #1a1a2e) filling the entire viewport\n- **Card container**: A rounded-corner panel (border-radius ~12px) with a subtle border, centered with padding\n- **Window chrome**: Top-left has three small colored dots (red #FF5F57, yellow #FEBC2E, green #28C840) like macOS traffic lights\n\n## Header Section (inside card top)\n- **Title text**: \"Material Web (MWC)\" — bold white, ~20-22px font-size, sans-serif\n- **Subtitle line** below title: \"Web Components · Material Design\" — smaller (~13-14px), gray color (#9ca3af)\n\n## Component Showcase Area\n1. **Primary button**: Solid purple background (#9b5de5), white text \"Primary\", rounded corners (~8px), no border\n2. **Default button**: Dark background (#252535), light gray text \"Default\", subtle border (#3a3a4a)\n3. **Input field placeholder**: Dark background, rounded, placeholder \"Type here...\" in muted gray\n4. **Toggle switch**: ON position — purple track (#9b5de5) with white knob on right\n5. **Badge button**: Teal/dark cyan background (#115e59), white text \"Badge\"\n6. **Select dropdown**: Dark background, white text \"Select\" with down-chevron icon\n\n## Card Preview Section\nBordered box containing:\n- Heading \"Card title\" — white bold ~16px\n- Body text \"This is a preview of the component look.\" — gray ~13px\n\n## Bottom Tag Pills Row\nSmall pill/tag buttons: Button | Input | Select | Checkbox | Radio | Switch | Slider | Form | List\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif (\"Google Sans\", Roboto preferred)\n- Text colors: White headings, gray (#9ca3af) secondary\n- Accent: Purple (#9b5de5) for Primary button and toggle\n- Background layers: Card bg ~#1c1c2a, showcase area ~#222235\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline\n  **focus-visible:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"深色卡片、组件排列与标签列表均与预览一致；按钮缩放、div 透明度、aside 位移等过渡效果已设置。"},{"id":"carbon","name":"Carbon Design System","fw":["Web Components","React","Vue","Svelte"],"theme":"企业级 (IBM)","vendor":"IBM","link":"https://carbondesignsystem.com","kind":"item","img":"previews/carbon.png","chips":["Button","Input","Select","Checkbox","Radio","Toggle","Slider","Form","DataTable"],"repo":"https://github.com/carbon-design-system/carbon","desc":"IBM 企业级设计系统，含 React/Vue/Svelte/Web Components 多实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Carbon Design System — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280px width (macOS window style).\n\n## Layout\n- Background: #161622\n- Card: #1c1c2a, border 1px solid #2a2a3d, border-radius 14px\n- Traffic light dots: red #FF5F57, yellow #FEBC2E, green #28C840\n\n## Header\n- Title: \"Carbon Design System\" — bold white ~21px\n- Subtitle: \"Web Components · React · Vue · Svelte · 企业级（IBM）\" — gray ~13.5px\n\n## Showcase Area (#222235 bg)\n- Primary button: purple #9b5de5, white text \"Primary\"\n- Default button: #2a2a3d bg, \"Default\"\n- Input: \"Type here...\"\n- Toggle: purple ON state\n- Badge: teal #115e59, \"Badge\"\n- Select: \"Select\" with chevron\n\n## Card Section\n- \"Card title\" heading + \"This is a preview of the component look.\" description\n\n## Tag Pills\nButton | Input | Select | Checkbox | Radio | Toggle | Slider | Form | DataTable\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.Banner-module--button-banner--1c242.cds--btn` → transition: background, box-shadow, border-color, outline 0.07s, 0.07s, 0.07s, 0.07s cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9), cubic-bezier(0, 0, 0.38, 0.9) 0s, 0s, 0s, 0s\n- `a.Header-module--headerName--d3517` → transition: opacity 0.11s cubic-bezier(0.5, 0, 0.1, 1)\n- `div.GlobalSearch-module--container--5229c.GlobalSearch-module--hidden--09bad` → transition: max-width, background 0.11s, 0.11s cubic-bezier(0.5, 0, 0.1, 1), cubic-bezier(0.5, 0, 0.1, 1) 0s, 0s\n- `button.GlobalSearch-module--searchButton--877c5` → transition: background-color, opacity 0.11s, 0.11s cubic-bezier(0.5, 0, 0.1, 1), cubic-bezier(0.5, 0, 0.1, 1) 0s, 0s\n- `button.Header-module--header-button--7135b.Header-module--switcher-button--16b3a` → transition: background-color 0.11s cubic-bezier(0.5, 0, 0.1, 1)\n- `nav.cds--side-nav__navigation.LeftNav-module--side-nav--white--647c8` → transition: inline-size, transform 0.11s, 0.11s cubic-bezier(0.2, 0, 1, 0.9), cubic-bezier(0.2, 0, 1, 0.9) 0s, 0s\n- `button.cds--side-nav__submenu` → transition: color, background-color, outline 0.11s, 0.11s, 0.11s ease, ease, ease 0s, 0s, 0s\n- `svg` → transition: transform 0.11s ease\n- `div.Container-module--overlay--d2679` → transition: all 0.15s ease\n- `main.container.container--homepage` → transition: all 0.25s ease\n- `a.cds--tile.cds--tile--clickable` → transition: background 0.07s ease\n- `button.BackToTopBtn-module--button--12d77` → transition: all 0.11s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cds--btn`:\n  **hover:** background: #ffffff1a; background-color: rgb(57, 57, 57)\n  **active:** background-color: rgb(61, 61, 61)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.cds--header *`:\n  **hover:** background-color: rgb(57, 57, 57)\n  **focus:** border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.Header-module--headerName--d3517`:\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.GlobalSearch-module--searchButton--877c5`:\n  **hover:** background-color: rgb(76, 76, 76)\n  **active:** background-color: rgb(61, 61, 61)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n- `.Switcher-module--link--21c8c`:\n  **hover:** background: #353535; color: rgb(244, 244, 244); background-color: rgb(53, 53, 53)\n  **focus:** outline: 2px solid #fff; outline-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a11y-status-tag-module--cds--hide-feedback--2671a  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes a11y-status-tag-module--cds--show-feedback--7fb00  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes a11y-status-tag-module--cds--skeleton--05cef  {\n  0%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 20%  {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 28%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 51%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 58%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 82%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 83%  {\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 96%  {\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 100%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  }\n}\n@keyframes Preview-module--cds--hide-feedback--17922  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes Preview-module--cds--show-feedback--079f6  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n@keyframes Preview-module--cds--skeleton--e57e9  {\n  0%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 20%  {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 28%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 51%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 58%  {\n  transform: scaleX(0);\n  transform-origin: right center;\n  } 82%  {\n  transform: scaleX(1);\n  transform-origin: right center;\n  } 83%  {\n  transform: scaleX(1);\n  transform-origin: left center;\n  } 96%  {\n  transform: scaleX(0);\n  transform-origin: left center;\n  } 100%  {\n  opacity: 0.3;\n  transform: scaleX(0);\n  transform-origin: left center;\n  }\n}\n@keyframes Grid-module--cds--hide-feedback--b4331  {\n  0%  {\n  opacity: 1;\n  visibility: inherit;\n  } 100%  {\n  opacity: 0;\n  visibility: hidden;\n  }\n}\n@keyframes Grid-module--cds--show-feedback--30ed0  {\n  0%  {\n  opacity: 0;\n  visibility: hidden;\n  } 100%  {\n  opacity: 1;\n  visibility: inherit;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局与配色与预览一致；Carbon 专用的 transition 与 @keyframes 已逐字复制进 CSS，动画规格符合要求。"},{"id":"lion","name":"Lion","fw":["Web Components"],"theme":"无样式 / 表单原语","vendor":"ING","link":"https://lion-web.netlify.app","kind":"item","img":"previews/lion.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","File"],"repo":"https://github.com/ing-bank/lion","desc":"ING 出品的 Web Components 表单原语，无障碍优先。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Lion (https://lion-web.netlify.app) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, white background (#ffffff), text near-dark slate (#2c3e50), font stack \"Open Sans\", sans-serif. Minimal, flat, accessible, no heavy shadows.\n\nTop navigation bar (white background, sticky, subtle bottom border, horizontal padding ~32px, flex justify-between align-center):\n- Left: brand wordmark \"Lion\" in bold #2c3e50.\n- Center/right: nav links in #2c3e50: \"Fundamentals\", \"Guides\", \"Components\", \"Blog\", \"GitHub\", plus \"Help and Feedback\".\n- A text button \"Show Menu\" (transparent background, no border, #2c3e50 text) — likely a mobile/secondary menu trigger.\n\nHero section (centered or left-aligned, white background, generous top padding ~80px):\n- Large headline \"Lion\" in very bold #2c3e50 (~72px).\n- Subcopy / tagline from meta description: \"Fundamental white label web components for building your design system.\" in medium gray, ~18px.\n- A prominent h2 \"Why Lion?\" introducing the value props.\n\nFeature highlights (three short blocks in a row, max-width ~1100px, gap ~32px):\n- \"White Label\" — \"Style the way you need it - no need to override any opinionated existing styling.\"\n- \"Accessible\" — \"All of our components align to plat...\" (platform accessibility standards).\n- (third block continuing the accessible/modular theme).\n\nThe page should feel like a calm, developer-focused web-components design-system landing page: lots of white space, restrained typography, no gradients.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.logo-link` → transition: color 0.3s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.markdown-body *`:\n  **hover:** text-decoration: underline; background: #000\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建截图与预览图视觉一致（深色组件卡片），但与 prompt 中描述的白色首页导航/hero 布局不符；a.logo-link 过渡仅存在于 CSS 而无对应元素。"},{"id":"fast","name":"FAST (Microsoft)","fw":["Web Components"],"theme":"框架无关 / 可定制","vendor":"Microsoft","link":"https://www.fast.design","kind":"item","img":"previews/fast.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Card"],"repo":"https://github.com/microsoft/fast","desc":"微软 FAST 框架，提供可主题化的 Web Components 与设计系统基础。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# FAST — Above-the-fold Website Rebuild Prompt\n\nRebuild the FAST website's above-the-fold region at 1280px width. This is Microsoft's FAST web component library homepage.\n\n## Navigation Bar (top, full-width)\n- Background: Very dark charcoal/near-black (#242526)\n- Height: ~52px\n- **Left side items**:\n  - FAST logo: A stylized pink/magenta circular icon with a swoosh/speed line design, followed by bold italic \"FAST\" text in same pink color (#E83A7C or #D6336C)\n  - Text link \"Docs\" — light gray (#e3e3e3)\n  - Dropdown trigger \"3.x\" with down arrow — light gray\n- **Right side items**:\n  - \"Home\" link with small external-link icon — light gray\n  - \"Community\" link with external-link icon\n  - \"GitHub\" link with external-link icon\n\n## Hero Section (below nav, dark background continues)\nBackground is the same dark (#1a1a1a or #161616), content is centered.\n\n### Top tagline (small, uppercase, letter-spaced)\n- Text: \"FLEXIBLE, PERFORMANT, & INTUITIVE\"\n- Color: Pink/magenta accent (#D6336C or #E83A7C)\n- Font size: ~13px, font-weight: 600, letter-spacing: 2px\n- Centered, margin-top: ~50px\n\n### Logo + Brand name\n- Large circular pink icon (the FAST logo — a swoosh/planet-with-ring design) ~64px\n- Next to it, large text \"FAST\" in white/light gray — font size ~56px, bold, slightly italic/slanted style\n\n### Description paragraph\n- Text: \"FAST is dedicated to providing support for native Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.\"\n- Color: Light gray (#dcdcdc or #e3e3e3)\n- Font size: ~15px, line-height: 1.7\n- Max width: ~720px, centered\n- Margin top: ~20px\n\n### CTA link line\n- Text: \"For an in-depth explanation of FAST,\"\n- Then link text: \"see our docs introduction.\"\n- Link color: Pink/magenta (#D6336C)\n\n### Decorative vertical line\n- A thin pink/magenta vertical line (~2px wide, ~40px tall) below the paragraph area, centered\n- Color: #D6336C\n\n### Section divider\n- Small uppercase text: \"HOW TO\" in the pink accent color\n- Font-size: ~12px, letter-spacing: 2px, margin-top: ~40px\n\n## Getting Started Section (still visible in viewport)\n### Heading\n- \"Getting Started\" — very large, white, font-size ~44px, font-weight: 700\n\n### Subheading\n- \"Install the package\" — medium size, white, font-size ~18px, font-weight: 500\n\n### Code block\n- Dark background (#0d0d0d or #111), rounded corners\n- Monospace text: `npm install @microsoft/fast-element`\n- Green-tinted monospace text color\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif\n- Page background: #161616 / #1a1a1a (very dark)\n- Nav background: #242526\n- Accent color: #D6336C (pink/magenta) used for brand, links, highlights\n- Body text: #e3e3e3 (light gray)\n- Headings: #ffffff (white)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.navbar__brand` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navbar`:\n  **focus:** outline: 0\n- `.navbar__inner`:\n  **focus:** outline: 0\n- `.navbar__items`:\n  **focus:** outline: 0\n- `.clean-btn`:\n  **focus:** outline: 0\n- `.menu__link`:\n  **focus:** outline: 0\n- `.navbar__logo`:\n  **focus:** outline: 0\n- `.dropdown`:\n  **focus:** outline: 0\n- `.clean-list`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n  **focus:** outline: 0\n- `.icon-external-link`:\n  **focus:** outline: 0\n- `body:not(.navigation-with-keyboard) :not(input)`:\n  **focus:** outline: 0\n- `.row`:\n  **focus:** outline: 0\n- `.footer__item`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"首页导航、hero、文案、粉色强调色与代码块均与预览高度一致；a.navbar__brand 与 ul.dropdown__menu 的过渡已按规范写入 CSS。"},{"id":"bootstrap","name":"Bootstrap","fw":["CSS"],"theme":"经典 / 栅格","vendor":"Bootstrap","link":"https://getbootstrap.com","kind":"item","img":"previews/bootstrap.png","chips":["Button","Form","InputGroup","Select","Checkbox","Radio","Switch","Table","ListGroup"],"repo":"https://github.com/twbs/bootstrap","desc":"最流行的移动优先 CSS 框架，无 jQuery、CSS 变量主题、暗黑模式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Bootstrap — Above-the-fold Website Rebuild Prompt\n\nRebuild the Bootstrap homepage above-the-fold region at 1280px width.\n\n## Navigation Bar (top, full-width)\n- Background: Rich purple (#712cf9 or #6f42c1) — solid, no gradient\n- Height: ~56px\n- **Left side items**:\n  - \"B\" logo: White letter \"B\" inside a rounded square/pill shape (purple bg with white B), ~32x32px\n  - Nav links in white: \"Docs\", \"Examples\", \"Icons\", \"Blog\" — font-size ~15px, no underline\n- **Right side items**:\n  - Search box: Dark translucent background (rgba(0,0,0,0.15)), rounded corners (~6px), placeholder \"Search\" with a magnifying glass icon and keyboard shortcut \"⌘K\" badge\n  - GitHub icon link (white outline)\n  - Twitter/X icon link\n  - Dropdown trigger \"v5.3\" with down caret — white text\n  - Sun/moon theme toggle icon(s)\n\n## Hero Section (below nav)\n- **Background**: A soft multi-color gradient from light blue (#d4e5ff) through lavender/purple to pale yellow/cream (#fff8e1). Very subtle, almost pastel.\n- Content is centered vertically and horizontally within the hero area.\n\n### Alert banner (above main hero content)\n- Small yellow/gold pill-shaped banner: \"Get Security Updates for Bootstrap 3 & 4 →\"\n- Background: #fde68a or similar warm yellow\n- Text: dark, small font-size, arrow on right\n- Centered, margin-top from navbar\n\n### Main Logo\n- Large purple rounded-square shape (like a shield/brace shape with curved bottom corners) containing a white bold \"B\" letter\n- Size: ~120x120px approximately\n- Purple fill: #712cf9\n\n### Main Heading\n- \"Build fast, responsive sites with Bootstrap\"\n- Font size: very large (~48-52px), bold (700+), dark color (#1a1a2e or near-black), centered below logo\n- Max-width ~800px\n\n### Description paragraph\n- \"Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.\"\n- Color: Medium gray/dark gray (#495057 or similar)\n- Font-size: ~17-18px, line-height: 1.6\n- Centered, max-width ~750px\n\n## CTA Buttons Row (below description)\nTwo buttons side by side, centered:\n\n1. **Code input button**: Light gray/white-ish background, dark text showing \"$ npm i bootstrap@5.3.8\" with a copy icon on right side. Rounded corners, border. Looks like an input field that's also clickable.\n   - Background: rgba(255,255,255,0.8) or white\n   - Border: subtle gray\n   - Monospace text for the command part\n\n2. **Primary action button**: Purple background (#712cf9), white text \"📖 Read the docs\" (with book/document icon)\n   - Rounded corners, same height as code input\n   - Bold text\n\n## Version info line\nBelow the buttons: \"Currently v5.3.8 · Download · All releases\" — smaller text, gray, centered, links underlined\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif\n- Brand purple: #712cf9\n- Hero gradient: linear-gradient(170deg, #dce6ff 0%, #e0d4fc 40%, #f5ebff 70%, #fef3c7 100%)\n- Body text: #212529 (dark)\n- Secondary text: #495057 / #6c757d\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div` → animation: carbon-fade-in 0.4s ease-out 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.navbar-brand.p-0` → transition: transform 0.2s ease-in-out\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.nav-link.py-2` → transition: color, background-color, border-color 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `a.btn.btn-lg` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navbar-brand`:\n  **hover:** transform: rotate(-5deg) scale(1.1)\n- `.DocSearch-Button`:\n  **hover:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n  **active:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n  **focus:** border-color: #ffe484; border-top-color: rgb(255, 228, 132); border-right-color: rgb(255, 228, 132); border-bottom-color: rgb(255, 228, 132); border-left-color: rgb(255, 228, 132)\n- `.navbar-toggler`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; color: rgb(255, 255, 255)\n- `.btn-close`:\n  **focus:** outline: 0\n- `.nav-link`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem; color: rgb(255, 255, 255)\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem; color: rgb(255, 255, 255)\n  **focus-visible:** outline: 0; box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: var(--bs-progress-height);\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes carbon-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：紫色 #712cf9 导航 + 多色渐变 hero + 黄 alert + 大 B logo。真实 carbon-fade-in 0.4s ease-out 与 nav-link/btn 0.15s ease-in-out 过渡照抄。配色/文案一致。"},{"id":"tailwind","name":"Tailwind CSS","fw":["CSS"],"theme":"原子化 Utility","vendor":"Tailwind Labs","link":"https://tailwindcss.com","kind":"item","img":"previews/tailwind.png","chips":["Utility Classes (Grid/Flex/Spacing/Typography)","Forms Plugin","Typography Plugin","Container","Divider (Border)","Badge (via classes)","Card (via classes)","Button (via classes)"],"repo":"https://github.com/tailwindlabs/tailwindcss","desc":"原子化 CSS 引擎，高度定制，作为样式层被众多组件库采用。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailwind CSS (https://tailwindcss.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#000000) on a white/transparent background, font stack \"Inter\", system-ui, sans-serif. Utility-first aesthetic, generous whitespace, crisp typography, no heavy shadows.\n\nTop navigation bar (white background, sticky, horizontal padding ~24px, flex justify-between align-center):\n- Left: the Tailwind CSS wordmark/logo in bold black.\n- Right: a command-palette trigger styled as a faint pill \"Quick search ⌘K\" (very light gray translucent background, rounded full radius, muted black text), plus a version pill \"v4.3\" (translucent dark background, rounded 16px, light text) and a couple of small icon buttons (transparent, rounded 6px).\n\nHero section (centered, white background, large vertical padding):\n- Huge bold headline: \"Rapidly build modern websites without ever leaving your HTML.\" in black, ~56px, max-width ~900px, centered.\n- Supporting subhead echoing the meta description: \"Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.\" in gray, ~18px.\n- A small green accent button \"Check availability\" (emerald-green background ~ #00d26a, white text, border-radius 8px, padding ~10px 18px).\n\nSecondary section headings below the fold to hint at structure: \"Supported by the best.\", \"Built for the modern web.\", \"Ship faster and smaller.\", \"Build whatever you want, without touching your CSS file.\"\n\nThe whole page should feel like a polished, fast-loading CSS framework landing page with a strong typographic hero and a single green call-to-action.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.size-48.shadow-xl` → transition: border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.pr-1\\.5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.075)\n- `.hover\\:bg-gray-950\\/5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.05)\n- `.sm\\:px-2`:\n  **hover:** background-color: rgba(3, 7, 18, 0.024)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes flash-code  {\n  0%  {\n  background-color: lab(63.3038 -18.433 -51.0407 / 0.1);\n  } 100%  {\n  background-color: lab(63.3038 -18.433 -51.0407 / 0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Inter 字体、sticky 导航 + ⌘K 药丸 + v4.3 版本药丸 + 大标题 hero + 绿色 #00d26a CTA。真实 img border-radius 0.35s cubic-bezier(0.4,0,0.2,1) 过渡与 ping/pulse/bounce/flash-code @keyframes 照抄。"},{"id":"tailwindui","name":"Tailwind UI","fw":["CSS"],"theme":"官方付费模板","vendor":"Tailwind Labs","link":"https://tailwindui.com","kind":"item","img":"previews/tailwindui.png","chips":["Button","Form","Card","Modal","Dropdown","Nav","Tabs","Accordion","Table"],"repo":"https://github.com/tailwindlabs/tailwindui","desc":"Tailwind 官方付费组件与模板，一次购买终身使用，质量极高。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailwind Plus / Tailwind UI (https://tailwindui.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: crisp, modern, white header on a very dark navy background for the hero (#111827-ish, derived from oklch(0.13 0.028 261.692)), dark near-black text, font stack \"InterVariable\", system-ui, sans-serif. Polished SaaS/marketing aesthetic.\n\nTop navigation bar (white background, horizontal padding ~24px, flex justify-between align-center):\n- Left: nav item \"Introducing Oatmeal / Our new multi-theme marketing site kit\" (a promo badge with small headline + subtext) followed by \"UI Blocks\", \"Templates\", \"UI Kit\".\n- Right: \"Sign in\" text link and a solid \"Get full access\" button.\n\nHero section (dark navy background, white text, centered, large vertical padding):\n- Big bold white headline: \"Build your next idea even faster.\"\n- Subcopy describing beautiful UI components and templates by the creators of Tailwind CSS.\n- A row of category tabs/pills in muted white: \"MARKETING\", \"APPLICATION UI\", and a highlighted \"UI BLOCKS\" pill in indigo (#6d5ae0-ish, from oklch(0.511 0.262 276.966)).\n\nFeature blocks (three columns on the dark background, gap ~32px):\n- \"UI BLOCKS — Beautiful UI components, built for real-world projects. A library of 500+ professionally designed, expertly crafted component examples.\"\n- \"TEMPLATES — Modern website templates, ready for your next launch. Visually-stunning, customizable site templates built with React and Next.js.\"\n- \"Testimonials — Tailwind Plus made it possible for me to ship the first version of Reflect entirely by myself, while still being immensely pro...\"\n\nFooter hint of \"Meet Catalyst, a professional-grade UI kit for React applications.\"\n\nThe page should feel like a premium, dark-hero marketing site with a single indigo accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `g` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ring`:\n  **hover:** background-color: rgba(3, 7, 18, 0.02)\n- `.hover\\:bg-gray-950\\/5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.05)\n- `.sm\\:px-6`:\n  **hover:** background-color: rgba(3, 7, 18, 0.02)\n- `.hover\\:bg-gray-950\\/2\\.5`:\n  **hover:** background-color: rgba(3, 7, 18, 0.024)\n  **focus:** background-color: rgba(255, 255, 255, 0.75)\n  **focus-visible:** background-color: rgba(255, 255, 255, 0.75)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spin  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes nprogress-spinner  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建截图与预览图一致（深色卡片 + 橙色主按钮），但与 prompt 描述的白色导航/深色 hero 营销页不符；g 过渡与 spin 关键帧仅在 CSS 中无对应 SVG 元素。"},{"id":"daisyui","name":"daisyUI","fw":["CSS"],"theme":"Tailwind 插件","vendor":"daisyUI","link":"https://daisyui.com","kind":"item","img":"previews/daisyui.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Toggle","Table","Card"],"repo":"https://github.com/saadeghi/daisyui","desc":"Tailwind 最流行的组件插件，语义化类名、多主题，零 JS 依赖。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the daisyUI (https://daisyui.com) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#0d0d0d-ish, from oklch(0.21 0.006 285.885)), transparent background, font stack \"ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif\". Tailwind component-library aesthetic with multiple built-in themes.\n\nTop navigation bar (horizontal padding ~24px, flex justify-between align-center):\n- Left: a \"Docs\" / \"Changelog\" group plus a version dropdown area showing the current version \"5.6.18\" (muted text) and a \"More\" button (transparent, rounded 4px, muted borderless).\n- Center: a search trigger \"Search… ⌘K\" (transparent, 1px subtle border, rounded 4px).\n- Right: theme switch buttons as small pills — \"light\", \"dark\", \"cupcake\", \"bumblebee\" (transparent, rounded 4px, near-black text) — letting users preview themes. Plus \"Components\", \"Templates\" links and a \"Discount\" badge.\n\nHero section (centered, large vertical padding):\n- Big bold headline: \"Faster, cleaner, easier\" on one line and \"Tailwind CSS development\" on the next, in near-black, ~64px.\n- Subcopy echoing the tagline: \"Tailwind CSS component library — build faster with semantic components, built-in themes, and reusable UI blocks.\"\n\nSupporting h2 value props (three compact blocks):\n- \"don't re-invent the wheel every time\"\n- \"instead of writing 100 class names\"\n- \"use semantic class names\"\n- plus a \"Design system\" block.\n\nThe page should feel like a friendly, themeable Tailwind component library landing page with a prominent theme-switch control in the nav.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.flex.animate-[reveal-top-slow_0.5s]` → animation: reveal-top-slow 0.5s ease 1 normal\n- `div.inline-grid.w-full` → animation: reveal-slow 0.5s ease 1 normal\n- `div.justify-items-center` → animation: rotator 15s linear(0 0%, 0 32%, 0.333333 33%, 0.333333 65%, 0.666666 66%, 0.666666 99%, 1 100%, 1 100%) infinite normal\n- `div.carbon-cover--stacked` → animation: carbon-fade-in 0.4s ease-out 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.bg-base-100.text-base-content` → transition: box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.tooltip-content.text-[0.625rem]` → transition: opacity, transform 0.2s, 0.2s cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1) 0s, 0s\n- `span` → transition: width 0.4s ease-out 0.2s\n- `button.input.input-sm` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.btn.group` → transition: color, background-color, border-color, box-shadow, transform 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `a.btn.btn-xs` → transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.invisible.sticky` → transition: all 0.7s ease\n- `input.toggle.toggle-xs` → transition: color, grid-template-columns 0.3s, 0.2s ease, ease 0s, 0s\n- `div.card.bg-base-100` → transition: outline 0.2s ease-in-out\n- `input.checkbox.checkbox-xs` → transition: background-color, box-shadow 0.2s, 0.2s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.link`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.tab:is(.tabs > .tab)`:\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes reveal  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-slow  {\n  0%, 20%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-slower  {\n  0%, 40%  {\n  opacity: 0;\n  transform: translateY(0.25em);\n  }\n}\n@keyframes reveal-top  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes reveal-top-slow  {\n  0%, 20%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes reveal-top-slower  {\n  0%, 40%  {\n  opacity: 0;\n  transform: translateY(-0.25em);\n  }\n}\n@keyframes dropdown  {\n  0%  {\n  opacity: 0;\n  }\n}\n@keyframes rotator  {\n  89.9999%, 100%  {\n  --first-item-position: 0 0%;\n  } 90%, 99.9999%  {\n  --first-item-position: 0 calc(var(--items) * 100%);\n  } 100%  {\n  translate: 0px -100%;\n  }\n}\n@keyframes radio  {\n  0%  {\n  padding: 5px;\n  } 50%  {\n  padding: 3px;\n  }\n}\n@keyframes toast  {\n  0%  {\n  opacity: 0;\n  scale: 0.9;\n  } 100%  {\n  opacity: 1;\n  scale: 1;\n  }\n}\n@keyframes skeleton  {\n  0%  {\n  background-position: 150% center;\n  } 100%  {\n  background-position: -50% center;\n  }\n}\n@keyframes progress  {\n  50%  {\n  background-position-x: -115%;\n  }\n}\n@keyframes rating  {\n  0%, 40%  {\n  filter: brightness(1.05) contrast(1.05);\n  scale: 1.1;\n  }\n}\n@keyframes aura  {\n  100%  {\n  --aura-angle: 360deg;\n  transform: translateZ(1px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Tailwind 风导航 + 主题切换药丸 + 大标题 hero + 四价值块。真实 reveal-top-slow/reveal-slow 0.5s ease 与 theme 按钮 0.2s cubic-bezier(0,0,0.2,1) 过渡照抄。近黑 #0d0d0d 一致。"},{"id":"bulma","name":"Bulma","fw":["CSS"],"theme":"纯 CSS / Flexbox","vendor":"Bulma","link":"https://bulma.io","kind":"item","img":"previews/bulma.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Table","Card","Tag"],"repo":"https://github.com/jgthms/bulma","desc":"基于 Flexbox 的纯 CSS 框架，无 JS、轻量。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Bulma (https://bulma.io) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, body text slate (#404654, rgb(64,70,84)), font stack \"Inter, SF Pro, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif\". Light, airy Flexbox-framework landing page.\n\nTop navigation bar (white/transparent background, horizontal padding ~32px, flex justify-between align-center):\n- Left: the Bulma wordmark/logo in bold #404654.\n- Right: nav links \"Docs\", \"Expo\", \"Love\", \"Sponsor\", \"Download\".\n- A \"Dark Mode\" toggle button (dark background #2e333d rgb(46,51,61), light text #f3f4f6, border-radius 8px) and a few small icon buttons (transparent, rounded 8px, #2e333d).\n\nHero section (centered, white background, large vertical padding):\n- Large bold headline: \"The Modern\" / \"CSS Framework\" (two lines) in #404654, ~64px.\n- Subcopy / meta: \"Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.\" in gray, ~18px.\n- A primary \"Download\" button (turquoise #00d1b2 rgb(0,209,178), dark text #001f1a, border-radius 6px, padding ~12px 24px).\n\nFeature highlights (four-column row, gap ~24px):\n- \"100% Responsive\", \"Modern\", \"Easy\", \"Free\" — each with a short description and a small accent icon (turquoise #00d1b2 and amber #ffb70f accents).\n\nA feature-list strip mentioning: CSS Variables, Dark Mode, Dart Sass, Flexbox, Modular, Open Source, Responsive, Free, Smart Grid, Auto Color, Skeletons, Themes.\n\nThe page should feel like a classic, friendly, turquoise-accented CSS framework landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.bd-circle.js-animated` → animation: anim-grow 1s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `div.bd-bubble-content` → animation: anim-rise-up 0.5s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `div.bd-bubble-arrow` → animation: anim-slide-down 0.5s cubic-bezier(0, 0, 0, 1) 0.5s 1 normal both\n- `footer.bd-bubble-author` → animation: anim-pivot-up 0.5s cubic-bezier(0, 0, 0, 1) 0.7s 1 normal both\n- `h1.bd-home-title.js-animated` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 1 normal both\n- `p.bd-home-tagline` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.2s 1 normal both\n- `span.thing.bd-home-knowledge` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.4s 1 normal both\n- `a.button.is-primary` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.6s 1 normal both\n- `a.button` → animation: anim-slow-intro 0.5s cubic-bezier(0, 0, 0, 1) 0.8s 1 normal both\n- `div.masterclass-background` → animation: anim-fade-in 1s ease 1 normal both\n- `a.masterclass-body` → animation: anim-slide-up 1s ease 1 normal both\n- `div.shine` → animation: gradient-angle, gradient-angle 3s, 7.5s linear, linear 0s, 0s infinite, infinite normal, reverse none, none\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.launch-code.is-animated` → transition: background-color, border-color, color 0.294s ease\n- `div.bd-dot.js-ready` → transition: opacity 0.2s ease\n- `div.thing.is-cssvars` → transition: background-color, color 0.294s ease\n- `span.icon.is-small` → transition: color 0.294s ease\n- `header.bd-header` → transition: background-image 0.294s ease\n- `div.bd-nav-menu.is-more` → transition: opacity, transform 0.294s ease\n- `button.bd-cycle.js-burger` → transition: background-color 0.294s ease\n- `div.bd-cycles` → transition: transform 0.294s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.bd-nav-menu`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n- `.bd-feature`:\n  **hover:** transform: translateY(-1em)\n- `.bd-best-item`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.1) 0px 1em 1em; transform: translateY(-0.5em)\n- `.bd-tw-content a`:\n  **hover:** text-decoration: underline\n- `.bd-tw-date a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@-webkit-keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@-webkit-keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@-webkit-keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@-webkit-keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@-webkit-keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes spinAround  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(359deg);\n  }\n}\n@keyframes pulsate  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes moveIndeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes anim-rise-up  {\n  0%  {\n  transform: rotateX(110deg);\n  } 100%  {\n  transform: rotateX(0deg);\n  }\n}\n@keyframes anim-pivot-up  {\n  0%  {\n  transform: rotateX(-110deg);\n  } 100%  {\n  transform: rotateX(0deg);\n  }\n}\n@keyframes anim-slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-50%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes anim-grow  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes anim-slow-intro  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.86);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：Bulma 大标题 hero + turquoise #00d1b2 Download + 四特性列 + 特性条。真实 anim-slow-intro 0.5s cubic-bezier(0,0,0,1) 与 anim-grow、link 0.294s ease 过渡照抄。slate #404654 一致。"},{"id":"foundation","name":"Foundation","fw":["CSS"],"theme":"企业级 / 响应式","vendor":"ZURB / XY Grid","link":"https://get.foundation","kind":"item","img":"previews/foundation.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Accordion"],"repo":"https://github.com/foundation/foundation-sites","desc":"企业级响应式前端框架，XY Grid 灵活，语义化。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Foundation (https://get.foundation) homepage above-the-fold section at 1280px width.\n\nGlobal style: clean, modern, near-black text (#0a0a0a, rgb(10,10,10)) on an off-white background (#fefefe, rgb(254,254,254)), font stack \"Proxima Nova\", proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif. Enterprise responsive-framework aesthetic.\n\nTop navigation bar (off-white background, horizontal padding ~24px, flex justify-between align-center):\n- Left: the \"Foundation\" brand wordmark in bold black (border-radius 3px).\n- Right: a dropdown nav group \"Develop\" revealing \"Foundation for Sites\", \"Foundation for Email\", \"HTML Templates\", \"Resources\", \"Building Blocks\"; plus top-level links \"Foundation Framework\", \"Showcase\", \"Brands\", \"Case Studies\", \"Buzz\", \"About Foundation\".\n\nHero section (centered, off-white background, large vertical padding):\n- Big bold headline \"Foundation\" in black, ~72px.\n- Large subhead h2: \"The most advanced responsive front-end framework in the world.\" in near-black, ~32px.\n- A primary blue \"Getting Started\" button (blue #1779ba rgb(23,121,186), light text #f5f5f5, border-radius 0, padding ~12px 24px) and a \"Download Foundation 6\" button (slightly lighter blue #1583cc rgb(21,131,204), white text, border-radius 3px).\n\nSecondary section: \"Responsive design gets a whole lot faster\" with two product columns:\n- \"Sites\" and \"Emails\", each with a \"Learn More\" blue button (#1779ba).\n\nSocial proof strip: \"29.3k GitHub stars\", \"@FoundationCSS\", and \"Brands using Foundation: See who else is using Foundation →\".\n\nThe page should feel like a mature, blue-accented, corporate front-end framework landing page.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.off-canvas.position-left` → transition: transform 0.5s ease\n- `li.topbar-title` → transition: all 0.25s ease-in-out\n- `a.button` → transition: background-color, color 0.25s, 0.25s ease-out, ease-out 0s, 0s\n- `div.js-off-canvas-overlay.is-overlay-fixed` → transition: opacity, visibility 0.5s, 0.5s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.off-canvas a`:\n  **hover:** color: rgb(25, 126, 178)\n  **focus:** color: rgb(25, 126, 178)\n- `.title-bar-home-link`:\n  **hover:** color: rgb(254, 254, 254); opacity: 1\n  **focus:** color: rgb(25, 126, 178)\n- `.menu input`:\n  **hover:** color: rgb(25, 126, 178); opacity: 1; background: #41525e; background-color: rgb(65, 82, 94)\n  **focus:** color: rgb(25, 126, 178); background: #41525e; background-color: rgb(65, 82, 94)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes inky-float  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(2%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes purple-bubbles  {\n  0%  {\n  transform: scale(0);\n  margin-top: 0px;\n  opacity: 0;\n  } 17%  {\n  transform: scale(0.1);\n  opacity: 1;\n  } 19%  {\n  transform: scale(0.9);\n  opacity: 1;\n  } 20%  {\n  transform: scale(1);\n  } 25%  {\n  transform: scale(1.1);\n  } 30%  {\n  transform: scale(0.95);\n  } 45%  {\n  transform: scale(1.1);\n  } 91%  {\n  transform: scale(1);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  margin-top: -100px;\n  opacity: 0;\n  }\n}\n@keyframes inky-fishes  {\n  0%  {\n  transform: rotate(-15deg);\n  } 50%  {\n  transform: rotate(15deg);\n  } 100%  {\n  transform: rotate(-15deg);\n  }\n}\n@keyframes fish1  {\n  0%  {\n  transform: translateX(0%);\n  } 50%  {\n  transform: translateX(3%);\n  } 100%  {\n  transform: translateX(0%);\n  }\n}\n@keyframes small-inky  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(2%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes fish2  {\n  0%  {\n  transform: translateY(0%);\n  } 50%  {\n  transform: translateY(12%);\n  } 100%  {\n  transform: translateY(0%);\n  }\n}\n@keyframes fish3  {\n  0%  {\n  transform: translateX(0%);\n  } 50%  {\n  transform: translateX(5%);\n  } 100%  {\n  transform: translateX(0%);\n  }\n}\n@keyframes inky-hover  {\n  0%  {\n  margin-top: 0px;\n  } 100%  {\n  margin-top: -25px;\n  }\n}\n@keyframes fish-hover  {\n  0%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(10px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes scroll  {\n  0%  {\n  transform: translateY(-4500px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes flicker  {\n  0%  {\n  transform: rotate(-1deg);\n  } 20%  {\n  opacity: 0.7;\n  transform: rotate(1deg);\n  } 40%  {\n  transform: rotate(-1deg);\n  } 60%  {\n  opacity: 1;\n  transform: rotate(1deg) scaleY(1.04);\n  } 80%  {\n  transform: rotate(-2deg) scaleY(0.92);\n  } 100%  {\n  transform: rotate(1deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":false,"hifiAttempts":2,"hifiNotes":"构建与预览图一致（深色组件卡片），但与 prompt 描述的白色 Foundation 首页/蓝色按钮/企业级布局差异较大；关键帧与过渡仅在 CSS 中未绑定到实际元素。"},{"id":"pico","name":"Pico.css","fw":["CSS"],"theme":"极简 / 无类","vendor":"Pico","link":"https://picocss.com","kind":"item","img":"previews/pico.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Card"],"repo":"https://github.com/picocss/pico","desc":"超轻量级语义化 CSS 框架，无需写类名，写 HTML 即得样式。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Pico.css — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Pico.css design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Pico.css\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 极简 / 无类\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid yellow/orange (#F59E0B) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #F59E0B, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Switch` `Table` `Card`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: yellow/orange (#F59E0B) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: background-color, color, text-decoration, box-shadow, -webkit-text-decoration 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s\n- `circle` → transition: transform 0.26s cubic-bezier(0, 0, 0, 1.25) 0.14s\n- `a` → transition: background-color, border-color, color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `g` → transition: transform 0.2s ease-in-out\n- `input` → transition: border-radius 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **focus:** transform: translateY(0px); opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes modal-overlay  {\n  0%  {\n  backdrop-filter: none;\n  background-color: transparent;\n  }\n}\n@keyframes modal  {\n  0%  {\n  transform: translateY(-100%);\n  opacity: 0;\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes tooltip-slide  {\n  100%  {\n  transform: var(--pico-tooltip-slide-to);\n  opacity: 1;\n  }\n}\n@keyframes tooltip-caret-slide  {\n  50%  {\n  opacity: 0;\n  } 100%  {\n  transform: var(--pico-tooltip-caret-slide-to);\n  opacity: 1;\n  }\n}\n@keyframes sparkle  {\n  0%  {\n  transform: scale(0);\n  opacity: 0;\n  } 20%  {\n  transform: scale(1.25);\n  opacity: 1;\n  } 45%  {\n  transform: scale(1);\n  } 55%  {\n  transform: scale(1.25);\n  opacity: 0.75;\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes page-loading  {\n  0%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"深色卡片布局、配色、组件与标签均与预览一致；Pico 全部过渡与 @keyframes 已逐字写入 CSS，input 过渡应用到了实际输入框。"},{"id":"semantic-ui","name":"Semantic UI","fw":["CSS"],"theme":"语义化","vendor":"Semantic UI","link":"https://semantic-ui.com","kind":"item","img":"previews/semantic-ui.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Table","Card","Label"],"repo":"https://github.com/Semantic-Org/Semantic-UI","desc":"以自然语言类名组织 UI，内容驱动站点友好。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Semantic UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Semantic UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Semantic UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 语义化\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid yellow/orange (#F59E0B) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #F59E0B, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Table` `Card` `Label`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: yellow/orange (#F59E0B) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.item` → transition: background, box-shadow, color 0.1s, 0.1s, 0.1s ease, ease, ease 0s, 0s, 0s\n- `div.pusher` → transition: transform 0.5s ease\n- `div.following.bar` → transition: padding, background, box-shadow, border 0.5s, 0.5s, 0.5s, 0.5s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.item` → transition: color 0.1s ease\n- `div.ui.logo` → transition: transform, left, width, height 0.6s, 0.6s, 0.6s, 0.6s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `div.masthead.segment` → transition: background, opacity 6s, 6s cubic-bezier(0.68, -0.55, 0.265, 1.4), cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, 0s\n- `a.ui.black` → transition: background 0.1s ease\n- `a.ui.huge` → transition: opacity, background-color, color, box-shadow, background 0.1s, 0.1s, 0.1s, 0.1s, 0.1s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ui.sidebar > *`:\n  **hover:** color: rgb(255, 255, 255); background: rgba(255,255,255,.08); background-color: rgba(255, 255, 255, 0.08)\n  **active:** background: rgba(255,255,255,.08); color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.08)\n- `.ui.image`:\n  **hover:** color: rgb(30, 112, 191)\n- `.ui.menu .item > a:not(.ui)`:\n  **hover:** color: rgb(30, 112, 191)\n- `.ui.menu .item`:\n  **hover:** color: rgb(255, 255, 255); background: 0 0; background-color: rgba(255, 255, 255, 0.08)\n  **active:** background: rgba(255,255,255,.08); color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.08)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes labeled-button-icon-loading  {\n  0%  {\n  transform: translateY(-50%) rotate(0deg);\n  } 100%  {\n  transform: translateY(-50%) rotate(360deg);\n  }\n}\n@-webkit-keyframes icon-loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes loader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes placeholderShimmer  {\n  0%  {\n  background-position: -1200px 0px;\n  } 100%  {\n  background-position: 1200px 0px;\n  }\n}\n@-webkit-keyframes progress-active  {\n  0%  {\n  opacity: 0.3;\n  width: 0px;\n  } 100%  {\n  opacity: 0;\n  width: 100%;\n  }\n}\n@-webkit-keyframes browseIn  {\n  0%  {\n  transform: scale(0.8) translateZ(0px);\n  z-index: -1;\n  } 10%  {\n  transform: scale(0.8) translateZ(0px);\n  z-index: -1;\n  opacity: 0.7;\n  } 80%  {\n  transform: scale(1.05) translateZ(0px);\n  opacity: 1;\n  z-index: 999;\n  } 100%  {\n  transform: scale(1) translateZ(0px);\n  z-index: 999;\n  }\n}\n@-webkit-keyframes browseOutLeft  {\n  0%  {\n  z-index: 999;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg);\n  } 50%  {\n  z-index: -1;\n  transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  z-index: -1;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg) translateZ(-10px);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes browseOutRight  {\n  0%  {\n  z-index: 999;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg);\n  } 50%  {\n  z-index: 1;\n  transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  z-index: 1;\n  transform: translateX(0px) rotateY(0deg) rotateX(0deg) translateZ(-10px);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes dropIn  {\n  0%  {\n  opacity: 0;\n  transform: scale(0);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@-webkit-keyframes dropOut  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0);\n  }\n}\n@-webkit-keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes fadeInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes fadeInLeft  {\n  0%  {\n  opacity: 0;\n  transform: translateX(10%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card rebuilt with exact hex colors, real copy, component showcase and tag pills; @keyframes pasted verbatim; layout/colors/components match preview."},{"id":"spectre","name":"Spectre.css","fw":["CSS"],"theme":"轻量 / 现代","vendor":"Spectre","link":"https://picturepan2.github.io/spectre","kind":"item","img":"previews/spectre.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Switch","Table","Card"],"repo":"https://github.com/picturepan2/spectre","desc":"轻量级、现代、响应式的 CSS 框架。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Spectre.css — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Spectre.css design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Spectre.css\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"CSS · 轻量 / 现代\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid blue/indigo (#6366F1) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #6366F1, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Form` `Input` `Select` `Checkbox` `Radio` `Switch` `Table` `Card`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: indigo/blue (#6366F1) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.btn.btn-primary` → transition: background, border, box-shadow, color 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `a.active`:\n  **hover:** color: rgb(48, 46, 205); text-decoration: underline\n  **active:** color: rgb(48, 46, 205); text-decoration: underline\n  **focus:** box-shadow: rgba(87, 85, 217, 0.2) 0px 0px 0px 0.1rem; color: rgb(48, 46, 205); text-decoration: underline\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255); text-decoration: underline; background: #4240d4; border-color: #3634d2; background-color: rgb(66, 64, 212); border-top-color: rgb(54, 52, 210); border-right-color: rgb(54, 52, 210); border-bottom-color: rgb(54, 52, 210); border-left-color: rgb(54, 52, 210)\n  **active:** color: rgb(255, 255, 255); text-decoration: underline; background: #3a38d2; border-color: #302ecd; background-color: rgb(58, 56, 210); border-top-color: rgb(48, 46, 205); border-right-color: rgb(48, 46, 205); border-bottom-color: rgb(48, 46, 205); border-left-color: rgb(48, 46, 205)\n  **focus:** box-shadow: rgba(87, 85, 217, 0.2) 0px 0px 0px 0.1rem; color: rgb(255, 255, 255); text-decoration: underline; background: #4240d4; border-color: #3634d2; background-color: rgb(66, 64, 212); border-top-color: rgb(54, 52, 210); border-right-color: rgb(54, 52, 210); border-bottom-color: rgb(54, 52, 210); border-left-color: rgb(54, 52, 210)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-1.6rem);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes carousel-slidein  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes carousel-slideout  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(-50%);\n  }\n}\n@keyframes first-run  {\n  0%  {\n  width: 0px;\n  } 25%  {\n  width: 2.4rem;\n  } 50%  {\n  width: 0.8rem;\n  } 75%  {\n  width: 1.2rem;\n  } 100%  {\n  width: 0px;\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes sbx-reset-in  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(-20%, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with indigo accent (#6366F1), real tags and copy; @keyframes pasted verbatim; visual match."},{"id":"atlassian","name":"Atlassian Design System","fw":["React","Web Components"],"theme":"协作工具 (Jira/Confluence)","vendor":"Atlassian","link":"https://atlassian.design","kind":"item","img":"previews/atlassian.png","chips":["Button","TextField","Select","Checkbox","Radio","Toggle","Form","Table","List"],"repo":"https://github.com/atlassian/atlaskit","desc":"Jira/Confluence 同款设计系统，含 React 组件（AtlasKit）。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Atlassian Design — Above-the-Fold UI Prompt\n\nBuild the Atlassian Design homepage above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: full width, white background (#FFFFFF) with a very subtle light-gray dot grid pattern (use radial-gradient dots ~#E5E7EB at low opacity, spacing ~30px).\n- **Header**: fixed top navigation bar, white/translucent background, height ~64px, padding 0 48px, flex space-between.\n  - **Left**: Atlassian logo icon (abstract geometric shapes) followed by \"Atlassian Design\" in bold dark text (#292A2E), font-size ~18px.\n  - **Right nav links**: \"Design system\", \"News\", then a search icon + \"Search\", then a theme-toggle icon + \"Theme\" (inside a light gray rounded pill border #E5E7EB).\n- **Hero Section**: large left-aligned headline in the upper-left area, padding-left ~48px, padding-top ~100px.\n  - **Headline**: \"Better teamwork\" on one line, \"by design\" on next line, both in very large bold sans-serif (~72px). \"design\" is colored bright blue (#0065FF).\n  - Around the headline are small decorative floating lozenges/pills with names and colored arrows pointing to the headline:\n    - \"Tony\" purple pill (#A855F7) with a small purple triangle pointer.\n    - \"Kyah\" blue pill (#0065FF) with a small blue triangle pointer below the word \"design\".\n    - \"Rovo\" dark pill (#1F2937) with a small dark triangle pointer near the top-right.\n- **Typography**: \"Atlassian Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- **Colors**: white #FFFFFF, text #292A2E, blue #0065FF, purple #A855F7, dark pill #1F2937, muted #505258.\n- The page should feel clean, minimal, modern, with generous whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div._y44vzons._tzy4idpf` → animation: kgnpaw5 0.3s ease-in-out 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div._v564mfn2._1e0c1txw` → transition: background-color 0.2s ease\n- `a._ymio1r31._ypr0glyw` → transition: background 0.1s ease-out\n- `span._v564g17y._1reo15vq` → transition: opacity 0.3s ease\n- `div._1bsb1osq._v5641mbg` → transition: opacity 0.3s ease-out\n- `div._1r04idpf._kqswstnw` → transition: mask-image, -webkit-mask-image 0.1s, 0.1s ease-out, ease-out 0s, 0s\n- `div._v564zzv3._kqswstnw` → transition: left, top, transform, opacity 0.7s, 0.7s, 0.4s, 0.4s cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s, 0.4s, 0.2s, 0.2s\n- `div._v5646rxc._kqswstnw` → transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1)\n- `div._v56411y4._kqswstnw` → transition: transform 0.7s cubic-bezier(0.4, 0, 0, 1)\n- `div._kqswh2mm._1bsb1osq` → transition: opacity, scale, transform, filter 0.4s, 0.7s, 0.7s, 0.7s cubic-bezier(0, 0.4, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1) 0s, 0s, 0s, 0s\n- `div._16qsqlyx._2rko1mok` → transition: filter, box-shadow 0.7s, 0.7s cubic-bezier(0.4, 0, 0, 1), cubic-bezier(0.4, 0, 0, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `._kqswh2mm`:\n  **hover:** text-decoration: underline; text-decoration-color: currentcolor\n  **active:** text-decoration-color: currentcolor\n  **focus:** text-decoration-color: currentcolor; color: color.text.subtle\n- `._1e0c1txw`:\n  **hover:** text-decoration: underline; transform: scale(1.02)\n- `._4cvr1h6o`:\n  **hover:** text-decoration: underline; color: rgb(255, 255, 255)\n  **active:** text-decoration-color: currentcolor\n- `._1bsb1osq`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes k3f15u2  {\n  0%  {\n  opacity: 0.3;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes kpgn03l  {\n  0%  {\n  transform: scale(0);\n  } 5.26316%  {\n  transform: scale(1);\n  } 78.9474%  {\n  transform: scale(1);\n  } 84.2105%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes k1h9ztfy  {\n  0%  {\n  transform: scale(0);\n  } 10.5263%  {\n  transform: scale(0);\n  } 15.7895%  {\n  transform: scale(1);\n  } 68.4211%  {\n  transform: scale(1);\n  } 73.6842%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes kjt05w7  {\n  0%  {\n  stroke-width: 0;\n  } 21.0526%  {\n  stroke-width: 0;\n  } 26.3158%  {\n  stroke-width: 133.5;\n  } 57.8947%  {\n  stroke-width: 133.5;\n  } 63.1579%  {\n  stroke-width: 0;\n  } 100%  {\n  stroke-width: 0;\n  }\n}\n@keyframes k1k6o5g7  {\n  0%  {\n  transform: rotate(0deg);\n  } 31.5789%  {\n  transform: rotate(0deg);\n  } 36.8421%  {\n  transform: rotate(90deg);\n  } 47.3684%  {\n  transform: rotate(90deg);\n  } 52.6316%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes kgnpaw5  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes SlideInTop8px  {\n  0%  {\n  transform: translateY(8px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes SlideInBottom8px  {\n  0%  {\n  transform: translateY(-8px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes SlideInLeft8px  {\n  0%  {\n  transform: translateX(8px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes SlideInRight8px  {\n  0%  {\n  transform: translateX(-8px);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes SlideOutTop8px  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(4px);\n  }\n}\n@keyframes SlideOutBottom8px  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-4px);\n  }\n}\n@keyframes SlideOutLeft8px  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(4px);\n  }\n}\n@keyframes SlideOutRight8px  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(-4px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Dot-grid landing page with header, headline and Tony/Kyah/Rovo lozenges; keyframes (kgnpaw5 etc.) verbatim."},{"id":"lightning","name":"Lightning Design System","fw":["CSS","Web Components"],"theme":"CRM (Salesforce)","vendor":"Salesforce","link":"https://www.lightningdesignsystem.com","kind":"item","img":"previews/lightning.png","chips":["Button","Form","Input","Select","Checkbox","Radio","Toggle","Table","Card"],"repo":"https://github.com/salesforce-ux/design-system","desc":"Salesforce 设计系统，CRM 应用组件与规范。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Lightning Design System 2 — Above-the-Fold UI Prompt\n\nBuild the Lightning Design System 2 documentation landing page above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, white page background. The layout has a left sidebar and a right main content area.\n- **Left sidebar**: fixed width ~280px, white background, right border 1px #E5E7EB, padding 20px 24px.\n  - Top: small text \"LIGHTNING DESIGN SYSTEM 2\" in uppercase, dark blue (#0A2057), font-weight 700, font-size 12px, letter-spacing 0.05em.\n  - Logo: Salesforce-style cloud icon (blue #0176D3) + \"Lightning Design System\" with \"2\" superscript in blue, font-size ~18px.\n  - Search box: light gray rounded pill (#F3F3F3), placeholder \"Search...\", with a magnifying glass icon, padding 8px 12px, margin 16px 0.\n  - Navigation items with right-facing chevrons, font-size 14px, color #292A2E, gap 4px between items. Items: Get Started, AI and SLDS 2, Foundations, Develop, Components, Patterns, Accessibility, Tools, SLDS 1 (with external-link icon).\n- **Main area**: right of sidebar, full remaining width, top portion is a hero banner.\n  - **Hero banner**: gradient background deep blue (#1B2C7E) to purple-blue (#3B4CBF), decorative abstract orange/coral circles (#FF8A65) and subtle white grid lines, rounded corners (no, it's a rectangular top banner) with padding 40px 60px.\n    - Title: \"Lightning Design System 2\" in large white bold sans-serif (~42px).\n    - Subtitle 1: \"Summer '26 v2.9\" in white, smaller (~14px), semibold.\n    - Subtitle 2: \"Styleguide updated 20 days ago\" in white, smaller (~14px).\n    - Tagline: \"Bring your brand to life.\" in white, bold (~18px), with a small orange square accent to the left.\n    - Top-right of hero: a small white rounded pill with a link/chain icon and a down arrow.\n- **Below hero**: white section with heading \"Welcome to SLDS 2\" (~28px, dark blue #0A2057) and a large image/photo placeholder below (a photo of people in a storage-room setting).\n\n## Colors\n- White #FFFFFF, dark navy #0A2057, blue #0176D3, coral/orange #FF8A65, text #292A2E, border #E5E7EB, search bg #F3F3F3.\n- Fonts: \"DM Sans\", system-ui, sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.Text-iXOHMN.ListItemstyled__TextStyled-kefdxC` → transition: margin-left 0.15s ease-in-out\n- `i.Iconstyled__IconStyled-gPYeWY.cXwyAc` → transition: all 0.15s ease-in-out\n- `div.cover-text-wrapper` → transition: opacity 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219); transform: translate(-50%)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219); transform: translate(-50%)\n- `.iytwjr`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.formfield .ui-selectmenu-button.mini`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `#texteditor-container h2.show-placeholder:not(.drag-placeholder)::before`:\n  **focus:** border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.eojvfp`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.cXwyAc`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n- `.iGeXmZ`:\n  **focus:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n  **focus-visible:** outline: 2px solid #9257db; outline-color: rgb(146, 87, 219)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes appcues-beacon-pulse  {\n  0%  {\n  stroke-width: 22px;\n  transform: scale(0.1);\n  } 25%  {\n  stroke-width: 0.5px;\n  transform: scale(1);\n  } 30%  {\n  stroke-width: 0;\n  } 100%  {\n  stroke-width: 0;\n  }\n}\n@keyframes go2264125279  {\n  0%  {\n  transform: scale(0) rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(45deg);\n  opacity: 1;\n  }\n}\n@keyframes go3020080000  {\n  0%  {\n  transform: scale(0);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes go463499852  {\n  0%  {\n  transform: scale(0) rotate(90deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(90deg);\n  opacity: 1;\n  }\n}\n@keyframes go1268368563  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes go1310225428  {\n  0%  {\n  transform: scale(0) rotate(45deg);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1) rotate(45deg);\n  opacity: 1;\n  }\n}\n@keyframes go651618207  {\n  0%  {\n  height: 0px;\n  width: 0px;\n  opacity: 0;\n  } 40%  {\n  height: 0px;\n  width: 6px;\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  height: 10px;\n  }\n}\n@keyframes go901347462  {\n  0%  {\n  transform: scale(0.6);\n  opacity: 0.4;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@-webkit-keyframes token-inline-search-highlight-fade-out  {\n  0%  {\n  background-color: transparent;\n  } 70%  {\n  background-color: unset;\n  } 100%  {\n  background-color: unset;\n  }\n}\n@-webkit-keyframes zheditor-search-highlight-fade-out  {\n  0%  {\n  padding: 8px;\n  margin: -8px;\n  background-color: var(--colors-blocks-content-background-search-highlight,#ffea6a);\n  } 5%  {\n  padding: 0px;\n  margin: 0px;\n  } 70%  {\n  background-color: var(--colors-blocks-content-background-search-highlight,#ffea6a);\n  } 100%  {\n  background-color: unset;\n  }\n}\n@-webkit-keyframes fEWCgj  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes ProseMirror-cursor-blink  {\n  100%  {\n  visibility: hidden;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"SLDS 2 docs layout with sidebar, gradient hero banner, coral orbs and Welcome photo placeholder; keyframes verbatim."},{"id":"fluent-ds","name":"Fluent 2 Design","fw":["Multi"],"theme":"Microsoft 全平台","vendor":"Microsoft","link":"https://fluent2.microsoft.design","kind":"item","img":"previews/fluent-ds.png","chips":["Button","Input","Select","Checkbox","Radio","Switch","Slider","Form","Table"],"repo":"https://github.com/microsoft/fluentui","desc":"微软 Fluent 2 跨平台设计语言，含 Web/Win/移动端实现。","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Fluent 2 Design System — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Fluent 2 Design System.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Fluent 2 Design\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"Multi · Microsoft 全平台\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid pink/magenta (#EC4899) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #EC4899, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Two rows, first row:\n`Button` `Input` `Select` `Checkbox` `Radio` `Switch` `Slider` `Form`\nSecond row: `Table`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: pink/magenta (#EC4899) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.fui-Spinner__spinner.rvgcg50` → animation: rb7n1on 1.5s linear infinite normal\n- `span.fui-Spinner__spinnerTail.rxov3xa` → animation: r15mim6k 1.5s cubic-bezier(0.33, 0, 0.67, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.focusable` → transition: opacity, box-shadow 0.1s, 0.1s ease, ease 0s, 0s\n- `i.docsearch-button-icon` → transition: background-color 0.1s ease\n- `span.theme-switcher-switch` → transition: all 0.3s ease-in\n- `span.nav-arrow` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.dropdown__list.closed` → transition: opacity, max-height 0.1s, 0.1s cubic-bezier(0.7, 0, 1, 0.5), cubic-bezier(0.7, 0, 1, 0.5) 0s, 0s\n- `li.dropdown__list-item.selected` → transition: padding-left 0.1s cubic-bezier(0.7, 0, 1, 0.5)\n- `span.hero__tagline-image-container.hero__tagline-image-container--creativity` → transition: width 0.25s ease-in-out\n- `img.hero__tagline-image.hero__tagline-image--work` → transition: all 0.25s ease-in-out\n- `a.inverse-button` → transition: all 0.15s ease-in-out\n- `a.tile.tile--padding-relaxed` → transition: all 0.3s ease-in-out\n- `div.feedback` → transition: width 0.3s ease-out 0.3s\n- `button.feedback-internal-button` → transition: height, visibility, font-size, padding 0.3s, 0s, 0.3s, 0.3s ease-in, linear, ease-in, ease-in 0.15s, 0.3s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focusable`:\n  **hover:** opacity: 0.8\n  **focus:** opacity: 0.8; outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rb7n1on  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes r1gx3jof  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-360deg);\n  }\n}\n@keyframes r15mim6k  {\n  0%  {\n  transform: rotate(-135deg);\n  } 50%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(225deg);\n  }\n}\n@keyframes r18vhmn8  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(105deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes rkgrvoi  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(225deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes r109gmi5  {\n  0%  {\n  transform: rotate(135deg);\n  } 50%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-225deg);\n  }\n}\n@keyframes r17whflh  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-105deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes re4odhl  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(-225deg);\n  } 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes f1efwx7q  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes f1kkgpz1  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes f12o7gg6  {\n  0%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with pink/magenta accent (#EC4899); spinner uses real rb7n1on keyframe; all tags and keyframes verbatim."},{"id":"primereact","name":"PrimeReact","vendor":"PrimeTek","fw":["React"],"theme":"企业级 / 数据密集","link":"https://primereact.org","repo":"https://github.com/primefaces/primereact","license":"MIT","chips":["Button","DataTable","Chart","Form","Dialog"],"kind":"item","img":"previews/primereact.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# PrimeReact — Above-the-Fold UI Prompt\n\nBuild the PrimeReact homepage above-the-fold at 1280px width using inline CSS and system fonts (no external assets).\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, very light gray background (#F8FAFC). Single-column centered content.\n- **Top announcement banner**: full-width dark navy/blue bar (#0F172A), height ~36px, centered text \"Next Chapter Begins 🚀 Read the full story\" in white/light text, small font-size (~13px), close \"×\" on the far right.\n- **Header**: below banner, white background, height ~64px, padding 0 40px, flex space-between, border-bottom 1px #E2E8F0.\n  - **Left**: PrimeReact logo (a stylized angular crown/fan icon) + \"PRIMEREACT\" in bold dark text (#334155).\n  - **Center nav**: \"Styled\", \"Tailwind\", \"Primitive\", \"Headless\" — small dark text (#334155), gap 24px.\n  - **Right**: search icon, sun icon, share icon, pen/edit icon, then \"Get PrimeUI\" dark button (#334155) with white text, rounded ~6px, padding 8px 16px.\n- **Hero Section**: centered, padding-top ~60px.\n  - Small version tag above headline: \"primereact@11.0.0-rc.1\" in red monospace text, small (~13px), with a tiny red square/asterisk before it.\n  - Headline: \"Premium UI Suite for React\" in large (~48px) bold dark text (#0F172A). The word \"Suite\" is inside a light gray rounded rectangle (#F1F5F9) with a thin border (#E2E8F0), like an inline code/pill.\n  - Subcopy: \"Enhance your web applications with PrimeReact's comprehensive suite of customizable, feature-rich UI components.\" — gray (#64748B), font-size 18px, max-width 620px, centered, margin-top 16px.\n  - Buttons: \"Get Started\" dark filled (#0F172A, white text), \"View Components\" white bg with border (#E2E8F0), dark text. Both rounded ~8px, padding 12px 24px, margin-top 24px, gap 12px.\n  - Logo row: Mercedes star, \"ebay\" text logo, Ford oval logo, grayscale, spaced evenly, margin-top 50px. Use simple CSS shapes or text approximations.\n- **Below hero**: a light card component preview starts to appear at the bottom (white rounded card with a small icon, \"Overview\" label, \"Live\" green dot, \"Portfolio command\" heading, and a search/notification area). Show the top portion.\n\n## Colors\n- Background #F8FAFC, white #FFFFFF, dark text #0F172A / #334155, muted #64748B, border #E2E8F0, red version #EF4444, green live #22C55E.\n- Fonts: Inter, system-ui, sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.whouses-track.flex` → animation: whouses-marquee 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.layout-news-close` → transition: background-color 0.3s ease\n- `header.sticky.top-(--news-height)` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: outline-color, border-color, background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.topbar-cta` → transition: transform, border-color, background, box-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `div.absolute.size-1` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.border-0.px-4` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.p-inputtext.p-component` → transition: background, color, border-color, outline-color, box-shadow 0.2s, 0.2s, 0.2s, 0.2s, 0.2s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.layout-news .layout-news-link`:\n  **hover:** text-decoration: underline\n- `.md\\:h-6\\.5`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.topbar-cta`:\n  **hover:** transform: translateY(-1px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes topbar-cta-text-shimmer  {\n  0%  {\n  background-position: 130% center;\n  } 100%  {\n  background-position: -130% center;\n  }\n}\n@keyframes px-fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes px-fadeout  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes px-scalein  {\n  0%  {\n  opacity: 0;\n  transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n  transform: scaleY(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes px-slidedown  {\n  0%  {\n  max-height: 0px;\n  } 100%  {\n  }\n}\n@keyframes px-slideup  {\n  0%  {\n  max-height: 1000px;\n  } 100%  {\n  max-height: 0px;\n  }\n}\n@keyframes px-animate-overlay-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes px-animate-overlay-leave  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.93);\n  }\n}\n@keyframes p-features-order-animation  {\n  0%  {\n  clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);\n  } 20%  {\n  clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);\n  } 40%  {\n  clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);\n  } 60%  {\n  clip-path: polygon(0px 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(0px 0px, 18% 0px, 39% 0px, 53% 0px, 62% 0px, 87% 0px, 100% 0px, 100% 100%, 0px 100%);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  transform: translateY(-25%);\n  } 50%  {\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transform: none;\n  }\n}\n@keyframes slideright  {\n  0%  {\n  inset-inline: -35% 100%;\n  } 60%  {\n  inset-inline: 100% -90%;\n  } 100%  {\n  inset-inline: 100% -90%;\n  }\n}\n@keyframes star-rotate  {\n  0%  {\n  transform: rotateY(0deg);\n  } 100%  {\n  transform: rotateY(360deg);\n  }\n}\n@keyframes p-animate-collapsible-expand  {\n  0%  {\n  grid-template-rows: 0fr;\n  } 100%  {\n  grid-template-rows: 1fr;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"PrimeReact homepage with banner, header, hero, marquee logo row and card preview; brand logos approximated via CSS/text; keyframes verbatim."},{"id":"untitledui","name":"Untitled UI","vendor":"Untitled UI","fw":["React"],"theme":"设计系统 / Figma 组件","link":"https://www.untitledui.com","repo":"https://www.untitledui.com","license":"商用","chips":["Button","Input","Card","Dropdown","Avatar"],"kind":"item","img":"previews/untitledui.png","prompt":""},{"id":"reshaped","name":"Reshaped","vendor":"Reshaped","fw":["React"],"theme":"现代产品 UI / 设计系统","link":"https://reshaped.dev","repo":"https://github.com/reshaped/reshaped","license":"商用","chips":["Button","Input","Select","Modal","Toast"],"kind":"item","img":"previews/reshaped.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Reshaped — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Reshaped design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Reshaped\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 现代产品 UI / 设计系统\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Input` `Select` `Modal` `Toast`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent (#38BDF8); no keyframes required by prompt; colors/copy/components match."},{"id":"alignui","name":"AlignUI","vendor":"AlignUI","fw":["React"],"theme":"设计系统组件 / Figma","link":"https://alignui.com","repo":"https://github.com/align-ui/align-ui","license":"MIT","chips":["Button","Input","Card","Tabs","Dialog"],"kind":"item","img":"previews/alignui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# AlignUI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the AlignUI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"AlignUI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 设计系统组件 / Figma\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Button` `Input` `Card` `Tabs` `Dialog`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.jsx-1cdd4e77911232a7.blinkingCursor` → animation: blink 0.8s ease infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.group.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s linear\n- `svg` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `div.absolute.left-0` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.3s cubic-bezier(0.6, 0.6, 0, 1)\n- `a.group/link.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.15s linear\n- `div.relative.flex` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.min-w-0.xl:mt-4` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus\\:outline-none`:\n  **focus:** outline: 2px solid transparent\n- `.pl-2`:\n  **focus:** outline: 2px solid transparent\n- `.hover\\:bg-ln-gray-800`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cm-blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes cm-blink2  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes flash-code  {\n  0%  {\n  background-color: rgba(46, 46, 15, 0.18);\n  } 100%  {\n  background-color: transparent;\n  }\n}\n@keyframes heroBlock  {\n  100%  {\n  transform: translateZ(0px);\n  opacity: 1;\n  }\n}\n@keyframes heroDynamicIsland  {\n  100%  {\n  filter: blur(0px);\n  opacity: 1;\n  }\n}\n@keyframes heroDynamicIslandExit  {\n  100%  {\n  filter: blur(4px);\n  transform: translate3d(-50%, 0px, 0px) scale(0.95);\n  opacity: 0;\n  }\n}\n@keyframes heroTemplates  {\n  0%  {\n  transform: translateZ(0px) scale(0.98);\n  filter: blur(4px);\n  opacity: 0.8;\n  } 100%  {\n  transform: translateZ(0px) scale(1);\n  filter: blur(0px);\n  opacity: 1;\n  }\n}\n@keyframes spark  {\n  0%  {\n  transform: translateY(-100%);\n  } 100%  {\n  transform: translateY(var(--to,1000px));\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes rapid-b-item  {\n  100%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  filter: blur(0px);\n  }\n}\n@keyframes mobile-menu-open  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(-100%, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  }\n}\n@keyframes mobile-menu-close  {\n  0%  {\n  opacity: 1;\n  transform: translateZ(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate3d(-100%, 0px, 0px);\n  }\n}\n@keyframes mobile-menu-item-in  {\n  100%  {\n  opacity: 1;\n  filter: blur(0px);\n  transform: translateZ(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; blinking cursor uses real cm-blink keyframe; all keyframes pasted verbatim."},{"id":"baseui-primitives","name":"Base UI","vendor":"MUI","fw":["React"],"theme":"无样式原语 / Headless","link":"https://base-ui.com","repo":"https://github.com/mui/base-ui","license":"MIT","chips":["Menu","Select","Dialog","Popover","Tooltip"],"kind":"item","img":"previews/baseui-primitives.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Base UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Base UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Base UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · 无样式原语 / Headless\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Menu` `Select` `Dialog` `Popover` `Tooltip`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `path` → transition: transform 0.1s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.Separator`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.SearchTrigger`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.AccordionWebsiteTrigger`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n- `.Link`:\n  **focus:** outline-color: currentcolor\n  **focus-visible:** outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spin  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; spinner uses real spin keyframe; tags and colors match."},{"id":"kiboui","name":"Kibo UI","vendor":"Kibo","fw":["React"],"theme":"shadcn 风格区块","link":"https://www.kibo-ui.com","repo":"https://github.com/kibocode/kibo-ui","license":"MIT","chips":["Accordion","Carousel","Command","Calendar"],"kind":"item","img":"previews/kiboui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Kibo UI — Gallery Preview Card Prompt\n\nBuild a dark-themed component gallery preview card at 1280×820 px that looks like a macOS browser window showcasing the Kibo UI design system.\n\n## Overall Layout\n- **Canvas**: 1280px wide, 820px tall, centered dark background (#161622).\n- **Card**: centered, rounded rectangle (border-radius ~14px), background #1c1c2a, subtle border #2a2a3d, padding ~22px 28px 28px, width ~1100px.\n- **Window chrome**: top-left row of three colored dots (red #FF5F57, yellow #FEBC2E, green #28C840), each 12px circle.\n\n## Header Section (inside card)\n- **Site title**: \"Kibo UI\" — bold white, ~21px, sans-serif, margin-bottom 5px.\n- **Subtitle**: \"React · shadcn 风格区块\" — ~13.5px, gray (#9ca3af), sans-serif.\n\n## Component Showcase Area\nA dark inner panel (#222235, rounded ~10px, padding 18–20px) containing, in a single row with gaps:\n1. **Primary button**: solid cyan (#38BDF8) background, white text \"Primary\", rounded ~8px, padding 7px 18px.\n2. **Default button**: dark background (#2a2a3d), light text \"Default\", 1px border #3a3a52, rounded ~8px.\n3. **Input field**: dark background (#252535), 1px border #3a3a52, rounded ~8px, placeholder \"Type here...\" in muted gray (#9ca3af), padding 7px 14px, width ~140px.\n4. **Toggle switch**: ON state, track color #38BDF8, white knob on the right, rounded pill.\n5. **Badge**: teal/cyan background (#0d7377), white text \"Badge\", small rounded pill.\n6. **Select dropdown**: dark background (#2a2a3d), white text \"Select\" with a downward chevron, rounded ~8px, border #3a3a52.\n\n## Card Preview Box\nA bordered inner card (border 1px #2a2a3a, rounded ~10px, padding 16px) containing:\n- **Heading**: \"Card title\" — white, bold, ~16px.\n- **Body**: \"This is a preview of the component look.\" — gray (#9ca3af), ~13px.\n\n## Bottom Tag Pills Row\nSmall rounded pill buttons with dark backgrounds (#2a2a3d), light borders (#3a3a52), light text, compact padding. Arranged in a single row:\n`Accordion` `Carousel` `Command` `Calendar`\n\n## Typography & Colors\n- Font family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif.\n- Headings: white (#fff); muted text: #9ca3af; secondary text: #d1d1db.\n- Accent: cyan (#38BDF8) for Primary button and toggle switch.\n- Card inner bg slightly lighter than page background (#1c1c2a vs #161622).\n- Avoid external assets; use inline CSS and system fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.grid.transition-[grid-template-columns]` → transition: grid-template-columns 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.inset-x-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.inline-flex` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.items-center.justify-center` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.flex` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.wrap-anywhere`:\n  **hover:** background-color: rgba(209, 209, 209, 0.25); color: rgba(23, 23, 23, 0.8)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes fd-exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"macOS gallery card with cyan accent; live dot uses real ping keyframe; all keyframes verbatim."},{"id":"tailark","name":"Tailark","vendor":"Tailark","fw":["React"],"theme":"营销 / 落地页区块","link":"https://tailark.com","repo":"https://tailark.com","license":"商用","chips":["Hero","Pricing","Feature","CTA"],"kind":"item","img":"previews/tailark.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tailark homepage above-the-fold section at 1280px width.\n\nGlobal: white background (#ffffff), text near-black (#0f172a), font-family ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nTop nav (height ~72px, white, flex justify-between align-center, px ~48px):\n- Left: brand logo — a small rotated-square/diamond icon with a teal-to-green gradient (approximate with CSS), followed by the word \"tailark\" in bold dark text, font-weight 700, tracking tight.\n- Center-right nav links: \"Illustrations\", \"Blocks\", \"Pages\", \"Pricing\", \"Docs\". Small gap ~28px, gray text (#334155).\n- Right: \"Login\" text link, then \"Get full access\" black button (#0f172a) with white text, rounded-lg, padding ~9px 16px.\n\nHero section (centered, white bg, pt ~64px):\n- Small announcement badge centered: tiny sparkle/star icon, text \"13 new pages added to the Grid-2 style\", with a trailing \">\". Badge has very light gray bg (#f1f5f9), rounded-full, small gray text, padding ~6px 14px.\n- Big centered headline: \"Build modern marketing\\nwebsites with Shadcn blocks.\" Use two lines. \"Shadcn blocks.\" has a teal-to-emerald gradient text (#14b8a6 to #10b981). Font-size ~52px, font-weight 700, line-height 1.1, max-width ~700px.\n- Two centered buttons below (gap ~18px, mt ~28px):\n  - \"Get full access\" — black bg (#0f172a), white text, rounded-lg, px ~18px py ~10px.\n  - \"Explore kits\" — transparent, dark text, no border, maybe a subtle arrow.\n- Style tabs centered below (gap ~28px, mt ~42px): \"Quartz\", \"Dusk\", \"Mist\", \"Veil\". First item is slightly more prominent/dark, others gray.\n\nBento preview grid (centered, mt ~48px, max-width ~1080px, gap ~16px):\n- Left column: one tall card (~55% width) with a light gray (#f8fafc) background and a rounded-xl border. Inside, approximate a marketing-site screenshot: large bold heading \"The Financial OS powering businesses on your platform\", smaller subcopy, a purple/blue button, and a layered UI illustration made of rounded rectangles and soft gradients (purple/blue). This is the dominant visual.\n- Right column: two stacked rows.\n  - Top-right card: lighter bg, contains a \"Logo Cloud\" preview with small centered shapes/icons and the text \"Logo Cloud\" / \"10 blocks\" centered below.\n  - Bottom-right card: split into two smaller cards side-by-side: \"Features\" / \"14 blocks\" and another minimal preview.\n\nAll cards have rounded-2xl borders, subtle shadows, and overflow hidden. The overall feel is clean, airy, modern Tailwind marketing site.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.cursor-pointer.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.2s ease\n- `div.bg-muted/50.min-h-132` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes source-to-logo  {\n  0%  {\n  stroke-dashoffset: 400px;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes logo-to-outputs  {\n  0%  {\n  stroke-dashoffset: 550px;\n  } 10%  {\n  stroke-dashoffset: 400px;\n  } 100%  {\n  stroke-dashoffset: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Tailark marketing landing page with nav, hero badge, gradient headline, style tabs and bento grid; screenshot cards approximated with CSS shapes; keyframes verbatim."},{"id":"aceternity","name":"Aceternity UI","vendor":"Aceternity","fw":["React"],"theme":"动画组件 / 炫酷","link":"https://ui.aceternity.com","repo":"https://github.com/aceternity-ai/aceternity-ui","license":"MIT","chips":["Card","Background","3D","Carousel"],"kind":"item","img":"previews/aceternity.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Aceternity UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport and looks like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content centered both vertically and horizontally. The whole preview area has a large rounded border radius (24px) and a subtle darker inset shadow/frame, but for the screenshot just fill the 1280x820 viewport with the dark card.\n\nTop bar (top-left, padding ~40px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each circle ~12px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Aceternity UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 动画组件 / 炫酷\" in #94a3b8, font-size ~13px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: cyan/turquoise background (#22d3ee), black text, rounded-full pill, padding ~8px 18px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 18px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 18px, min-width ~120px.\n\nSecond controls row (margin-top ~14px):\n- A cyan/blue toggle switch in the ON position: an elongated pill track (#22d3ee) ~44px wide x 24px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal/cyan border (#0d9488) and teal text (#5eead4), padding ~6px 14px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~6px 14px, with a small down-chevron on the right.\n\nMain card (center, below controls, margin-top ~28px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (bottom-left or bottom-center, margin-top ~40px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Card\", \"Background\", \"3D\", \"Carousel\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: use system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nVibe: sleek dark-mode developer tool preview, minimal, rounded, cyan accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.hover:text-foreground/80.text-foreground/60` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.cursor-pointer` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.h-14` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes spotlight  {\n  0%  {\n  opacity: 0;\n  transform: translate(-72%, -62%) scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -40%) scale(1);\n  }\n}\n@keyframes meteor  {\n  0%  {\n  opacity: 1;\n  transform: rotate(215deg) translate(0px);\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  transform: rotate(215deg) translate(-500px);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes spin-reverse  {\n  100%  {\n  transform: rotate(-1turn);\n  }\n}\n@keyframes scroll  {\n  100%  {\n  transform: translate(calc(-50% - 0.5rem));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes move  {\n  0%  {\n  transform: translate(-200px);\n  } 100%  {\n  transform: translate(200px);\n  }\n}\n@keyframes aurora  {\n  0%  {\n  background-position: 50% center, 50% center;\n  } 100%  {\n  background-position: 350% center, 350% center;\n  }\n}\n@keyframes moveHorizontal  {\n  0%  {\n  transform: translate(-50%) translateY(-10%);\n  } 50%  {\n  transform: translate(50%) translateY(10%);\n  } 100%  {\n  transform: translate(-50%) translateY(-10%);\n  }\n}\n@keyframes moveInCircle  {\n  0%  {\n  transform: rotate(0deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes moveVertical  {\n  0%  {\n  transform: translateY(-50%);\n  } 50%  {\n  transform: translateY(50%);\n  } 100%  {\n  transform: translateY(-50%);\n  }\n}\n@keyframes shimmer  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"skipped - result.hifi.json already exists."},{"id":"tremor","name":"Tremor","vendor":"Tremor","fw":["React"],"theme":"数据仪表盘 / 图表","link":"https://tremor.so","repo":"https://github.com/tremorlabs/tremor","license":"Apache","chips":["Chart","Metric","Table","DatePicker"],"kind":"item","img":"previews/tremor.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Tremor component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Tremor\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 数据仪表盘 / 图表\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Chart\", \"Metric\", \"Table\", \"DatePicker\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.relative` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-full` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `li.group.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.from-blue-500`:\n  **hover:** opacity: 0.9\n- `.sm\\:mt-0`:\n  **hover:** opacity: 0.9\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes draw  {\n  100%  {\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes hide  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes slideDownAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-6px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideLeftAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(6px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes slideUpAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(6px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideRightAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(-6px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes accordionOpen  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordionClose  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes dialogOverlayShow  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes dialogContentShow  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -45%) scale(0.95);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes drawerSlideLeftAndFade  {\n  0%  {\n  opacity: 0;\n  transform: translate(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes drawerSlideRightAndFade  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal #2dd4bf 控件 + 暗色卡片。精确动画规格中全部 @keyframes 与 transition 值照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，但参考图中文字偏白，存在细微色差。"},{"id":"parkui","name":"Park UI","vendor":"Park UI / Chakra","fw":["React"],"theme":"可移植组件 / 多框架","link":"https://park-ui.com","repo":"https://github.com/park-ui/park-ui","license":"MIT","chips":["Button","Input","Select","Tabs"],"kind":"item","img":"previews/parkui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Park UI homepage above-the-fold section at 1280px width.\n\nGlobal: very light gray/off-white background (#fcfcfc), dark text (#202020), font-family Outfit, ui-sans-serif, system-ui, sans-serif.\n\nTop nav (height ~72px, white/transparent, flex justify-between align-center, px ~48px):\n- Left: brand logo — a black rounded square (#202020) with white \"PARK\" text inside, then \"UI\" in black text to the right, font-weight 700.\n- Center-right: search pill with placeholder \"Search...\" and \"⌘K\" shortcut hint on the right. Search has light gray bg (#f0f0f0), rounded-lg, padding ~8px 14px.\n- Nav links: \"Docs\", \"Blog\", \"Changelog\" in dark gray, gap ~24px.\n- Right: GitHub icon (small dark circle/outline), theme/moon icon.\n\nHero (two-column layout, px ~48px, pt ~56px, gap ~40px):\nLeft column (~50%):\n- Badge: \"Park UI × Chakra — It's official! →\" with a small party/rocket emoji at the start. Light gray bg (#f0f0f0), rounded-full, small text.\n- Headline: \"Build your own Design System\" in extra-bold black, ~56px, line-height 1.05.\n- Subcopy: \"Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.\" in gray (#5a5a5a), ~18px, max-width ~460px, mt ~18px.\n- Buttons (mt ~28px, gap ~14px):\n  - \"Get Started →\" black bg (#202020), white text, rounded-lg, px ~18px py ~11px.\n  - \"Make it yours\" white bg, thin gray border, dark text, rounded-lg, with a small sparkle/wand icon on the left, px ~18px py ~11px.\n- Framework icons (mt ~40px): React atom icon and SolidJS icon with labels \"React\" and \"Solid\" in gray, gap ~18px.\n\nRight column (~50%):\n- A collage of overlapping white cards with soft shadows and thin borders, rotated/slightly offset to look like a floating design-system preview.\n- Top card: \"Sign Up\" form preview with \"Create an account and discover the worlds' best UI component framework.\", Google and GitHub social buttons, E-Mail and Password inputs, \"Create Account\" black button.\n- Overlapping behind it: \"Payment Method\" card with Card/PayPal options, Owner, Card Number, Month/Year, Continue button.\n- Below left: \"Notifications\" card with toggles for Disputes and Fraudulent payments.\n- Below right: product card \"New in stock\", \"New Balance 574\", \"$79.99\" with a shoe placeholder.\n\nVibe: clean, modern, design-system landing page, lots of white space, black accents, floating component collage.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.button.button--variant_subtle` → transition: background-color, border-color, color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `input.input.input--size_md` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.switch__thumb.switch__thumb--variant_solid` → transition: translate 0.15s ease\n- `button.select__trigger.select__trigger--size_md` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：浅灰白 #fcfcfc 背景、Outfit 字体、左右分栏 Hero + 浮层组件拼贴。精确动画规格中的 transition 值已照抄。整体布局/配色/文案与提示词一致；参考图包含额外细节（搜索图标、额外导航图标、表单辅助文字等），提示词未描述，故未加入。"},{"id":"magicui","name":"Magic UI","vendor":"Magic UI","fw":["React"],"theme":"动画 / 落地页组件","link":"https://magicui.design","repo":"https://github.com/magicuidesign/magicui","license":"MIT","chips":["Marquee","Border","Blur","Ripple"],"kind":"item","img":"previews/magicui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Magic UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Magic UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 动画 / 落地页组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Marquee\", \"Border\", \"Blur\", \"Ripple\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.absolute.size-2` → animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n- `a.inline-flex.items-center` → animation: rainbow 2s linear infinite normal\n- `div.flex.shrink-0` → animation: marquee 90s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.items-center` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.3s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.md\\:text-sm`:\n  **active:** opacity: 1\n- `.touch-manipulation`:\n  **active:** opacity: 1\n- `-visible`:\n  **active:** opacity: 1\n- `.hover\\:bg-accent`:\n  **active:** opacity: 1\n- `.sm\\:pr-12`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-4:has(> svg)`:\n  **active:** opacity: 1\n- `.has-\\[\\>svg\\]\\:px-2\\.5:has(> svg)`:\n  **active:** opacity: 1\n- `.ring`:\n  **active:** opacity: 1\n- `.\\[background-clip\\:padding-box\\`:\n  **active:** opacity: 1\n- `button`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  0%, 100%  {\n  box-shadow: 0 0 0 0 var(--pulse-color,oklch(from var(--bg)l c h/.5));\n  } 50%  {\n  box-shadow: 0 0 0 var(--distance)var(--pulse-color,oklch(from var(--bg)l c h/.5));\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes blink-cursor  {\n  0%, 49%  {\n  opacity: 1;\n  } 50%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes aurora  {\n  0%  {\n  background-position: 0px center;\n  transform: rotate(-5deg) scale(0.9);\n  } 25%  {\n  background-position: 50% 100%;\n  transform: rotate(5deg) scale(1.1);\n  } 50%  {\n  background-position: 100% center;\n  transform: rotate(-3deg) scale(0.95);\n  } 75%  {\n  background-position: 50% 0px;\n  transform: rotate(3deg) scale(1.05);\n  } 100%  {\n  background-position: 0px center;\n  transform: rotate(-5deg) scale(0.9);\n  }\n}\n@keyframes gradient  {\n  100%  {\n  background-position: var(--bg-size,300%)0;\n  }\n}\n@keyframes meteor  {\n  0%  {\n  transform: rotate(var(--angle))translateX(0);\n  opacity: 1;\n  } 70%  {\n  opacity: 1;\n  } 100%  {\n  transform: rotate(var(--angle))translateX(-500px);\n  opacity: 0;\n  }\n}\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translateX(calc(-100% - var(--gap)));\n  }\n}\n@keyframes marquee-vertical  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-100% - var(--gap)));\n  }\n}\n@keyframes spin-around  {\n  0%  {\n  transform: translateZ(0px) rotate(0deg);\n  } 15%, 35%  {\n  transform: translateZ(0px) rotate(90deg);\n  } 65%, 85%  {\n  transform: translateZ(0px) rotate(270deg);\n  } 100%  {\n  transform: translateZ(0px) rotate(1turn);\n  }\n}\n@keyframes ripple  {\n  0%, 100%  {\n  transform: translate(-50%, -50%) scale(1);\n  } 50%  {\n  transform: translate(-50%, -50%) scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"仅据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 预览卡 + teal #2dd4bf 控件。真实 ping 1s、aurora 12s、enter 0.15s cubic-bezier(0.4,0,0.2,1) 过渡与 @keyframes（ping/pulse/aurora/meteor/marquee/blink-cursor/spin-around/ripple）照抄。风格一致。"},{"id":"floatui","name":"Float UI","vendor":"Float UI","fw":["React"],"theme":"Tailwind 组件","link":"https://floatui.com","repo":"https://floatui.com","license":"商用","chips":["Dropdown","Modal","Tooltip","Datepicker"],"kind":"item","img":"previews/floatui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Float UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Float UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Dropdown\", \"Modal\", \"Tooltip\", \"Datepicker\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.text-zinc-300.py-2.5` → transition: all 0.15s ease\n- `svg` → transition: all 0.5s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.md\\:bg-shiny`:\n  **hover:** background: linear-gradient(180deg,#27272a 10%,rgba(15,23,42,0)); background-image: linear-gradient(rgb(39, 39, 42) 10%, rgba(15, 23, 42, 0))\n- `.sm\\:w-auto`:\n  **hover:** background: linear-gradient(180deg,#27272a 10%,rgba(15,23,42,0)); background-image: linear-gradient(rgb(39, 39, 42) 10%, rgba(15, 23, 42, 0))\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes smoothScroll  {\n  0%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes notfRight  {\n  0%  {\n  transform: translateX(5em);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes brogress  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 100%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中全部 @keyframes（smoothScroll/notfRight/brogress）与 transition 值照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"flowbite-react","name":"Flowbite React","vendor":"Flowbite","fw":["React"],"theme":"Tailwind 组件","link":"https://flowbite.com","repo":"https://github.com/themesberg/flowbite-react","license":"MIT","chips":["Button","Input","Card","Navbar"],"kind":"item","img":"previews/flowbite-react.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Flowbite React component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Flowbite React\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Card\", \"Navbar\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kbd.DocSearch-Button-Key` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.DocSearch-Button`:\n  **focus:** outline: 2px solid transparent\n- `.hover\\:bg-gray-100`:\n  **focus:** outline: 2px solid transparent\n- `.xl\\:inline-flex`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中 fade-in @keyframes 与 kbd.DocSearch-Button-Key transition 已照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"preline","name":"Preline UI","vendor":"Preline","fw":["React"],"theme":"Tailwind 组件 / 设计系统","link":"https://preline.co","repo":"https://github.com/htmlstreamofficial/preline","license":"MIT","chips":["Button","Input","Modal","Offcanvas"],"kind":"item","img":"previews/preline.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Preline UI homepage above-the-fold section at 1280px width.\n\nGlobal: white background (#ffffff), text #1f2937, font-family ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\n\nAnnouncement bar (full width, very light gray bg #f8fafc, border-bottom #e5e7eb, py ~10px, centered text):\n- Small green dot on the left, then text \"Update v4.2 - New components, 10+ framework guides, and quality improvements.\" and a blue link \"Visit Changelog\".\n- Far right: small social icons (two circular avatar-like icons and a refresh icon).\n\nTop nav (height ~72px, white, flex justify-between align-center, px ~48px):\n- Left: Preline logo — a blue circle (#2563eb) with a white stylized \"P\" inside, then \"preline\" in bold dark text.\n- Center-left: search input \"Search\" with \"⌘K\" hint, light gray bg, rounded-lg.\n- Nav links: \"Docs\", \"Blocks\", \"Templates\", \"Plugins\", \"Figma\", \"Pro\", \"Pricing\".\n- Right: user icon + \"Sign in\" text, then \"Get all access →\" blue button (#2563eb) with white text, rounded-lg.\n\nHero (two-column, px ~48px, pt ~64px, gap ~40px):\nLeft column (~50%):\n- Headline: \"Preline UI, crafted with Tailwind CSS\" with \"Preline UI,\" in blue (#2563eb), rest dark. Font-size ~52px, font-weight 700, line-height 1.1.\n- \"BUILT WITH:\" label in small uppercase gray, followed by three framework badges: \"HTML\" (with HTML5 icon), \"JAVASCRIPT\" (with JS icon), \"TYPESCRIPT\" (with TS icon). Badges have light gray bg, rounded, small text.\n- Subcopy: \"Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.\" Gray (#4b5563), ~17px, max-width ~520px, mt ~18px.\n- Buttons (mt ~28px, gap ~12px):\n  - \"Get started\" blue button (#2563eb), white text, rounded-lg.\n  - \" $ npm i preline \" code-style button with a copy icon, white bg, gray border, rounded-lg, monospace text.\n\nRight column (~50%):\n- Floating collage of dashboard/component preview cards with soft shadows. Include:\n  - A stats card with numbers \"45,410\" and \"19\" and \"Leads Acquired\" label.\n  - A profile/settings card with dark blue header, list items \"Profile\", \"Settings\", \"Newsletter\" and a \"New\" badge.\n  - A team list card with avatars and names.\n  - A pricing card showing \"$39\".\n  - Overlap them at slight angles.\n\nBelow hero: three feature cards in a row (full width, px ~48px, mt ~40px):\n- \"1584+ Components & Examples\" with document icon, body text \"Hundreds of component examples for all your website needs that meet...\"\n- \"Universal Framework Compatibility\" with icon, body text \"Preline UI is fully compatible wherever Tailwind CSS is in action, from React to...\"\n- \"Unlimited Custom Themes\" with icon, body text \"Create consistent branded visuals with flexible themes across your project.\"\n\nVibe: professional Tailwind UI library landing page, blue primary, clean white, lots of UI preview cards.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.animate-ping.absolute` → animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n- `div.grid.h-110` → animation: hero-sliding-img-up-1 30s linear infinite normal\n- `div.grid.h-110` → animation: hero-sliding-img-up-2 30s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.hs-collapse.hidden` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hero-sliding-img-up-1  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-722px);\n  }\n}\n@keyframes hero-sliding-img-up-2  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-1098px);\n  }\n}\n@keyframes hero-sliding-img-down-1  {\n  0%  {\n  transform: translateY(-1161px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes marquee-y  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(calc(-50% - 0.5rem));\n  }\n}\n@keyframes marquee-x  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(calc(-50% - 0.5rem));\n  }\n}\n@keyframes shiki-pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes opaque  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes resizeanim  {\n  0%, 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：白色背景、蓝色主色 #2563eb、顶部公告栏 + 导航 + 左右分栏 Hero + 浮层卡片拼贴 + 三特性卡片。精确动画规格中全部 @keyframes 与 transition 值已照抄。整体结构/配色/文案与参考一致；右侧拼贴卡片仅按提示词简化示意，细节不如参考图丰富。"},{"id":"keepreact","name":"Keep React","vendor":"Keep","fw":["React"],"theme":"Tailwind 组件","link":"https://keepdesign.io","repo":"https://github.com/Believe-ds/Keep-React","license":"MIT","chips":["Button","Input","Card","Table"],"kind":"item","img":"previews/keepreact.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Keep React component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Keep React\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · Tailwind 组件\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Card\", \"Table\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.flex.items-center` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.transition-all.duration-200` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.justify-center` → transition: all 0.2s cubic-bezier(0.4, 0, 1, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hover\\:bg-metal-900\\/10`:\n  **hover:** background-color: rgba(28, 34, 43, 0.1)\n- `.hover\\:-translate-y-0\\.5`:\n  **hover:** background-color: rgba(28, 34, 43, 0.1)\n- `.hover\\:bg-primary-50`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blinkIn  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes textAnimate  {\n  0%  {\n  background-position: 0px center;\n  } 100%  {\n  background-position: 200% center;\n  }\n}\n@keyframes slide  {\n  0%  {\n  background-position: 100% center;\n  } 50%  {\n  background-position: 0px center;\n  } 100%  {\n  background-position: 100% center;\n  }\n}\n@keyframes zoomIn  {\n  0%  {\n  content: var(--tw-content);\n  transform: scale(0.5);\n  } 50%  {\n  content: var(--tw-content);\n  transform: scale(1.1);\n  } 100%  {\n  content: var(--tw-content);\n  transform: scale(1);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translate(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translate(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translate(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translate(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"据 hifi 提示词重建：深蓝黑 #0b0d14 背景 + macOS 三色灯 + teal 控件 + 暗色卡片。精确动画规格中全部 @keyframes 与 transition 值已照抄。布局/组件/文案与参考一致；Primary 按钮提示词写黑色，参考图中文字偏白，存在细微色差。"},{"id":"originui","name":"Origin UI","vendor":"Origin UI","fw":["React"],"theme":"免费组件 / 现代","link":"https://originui.com","repo":"https://github.com/origin-space/originui","license":"MIT","chips":["Button","Input","Select","Sheet"],"kind":"item","img":"previews/originui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Origin UI component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Origin UI\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 免费组件 / 现代\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Button\", \"Input\", \"Select\", \"Sheet\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.relative.inline-flex` → transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.relative.flex` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes skeleton  {\n  100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes toast-success-odd  {\n  0%  {\n  scale: 1;\n  } 30%  {\n  scale: 1.025;\n  } 60%  {\n  scale: 0.99;\n  } 100%  {\n  scale: 1;\n  }\n}\n@keyframes toast-error-odd  {\n  0%  {\n  translate: 0px;\n  } 25%  {\n  translate: -3px;\n  } 50%  {\n  translate: 3px;\n  } 75%  {\n  translate: -3px;\n  } 100%  {\n  translate: 0px;\n  }\n}\n@keyframes toast-success-even  {\n  0%  {\n  scale: 1;\n  } 30%  {\n  scale: 1.025;\n  } 60%  {\n  scale: 0.99;\n  } 100%  {\n  scale: 1;\n  }\n}\n@keyframes toast-error-even  {\n  0%  {\n  translate: 0px;\n  } 25%  {\n  translate: -3px;\n  } 50%  {\n  translate: 3px;\n  } 75%  {\n  translate: -3px;\n  } 100%  {\n  translate: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"首屏布局、颜色、圆角与预览图一致;v2 将标题与交通灯对齐后更接近原图。已按规格引入全部 @keyframes 与 hover 过渡。"},{"id":"react-spectrum","name":"React Spectrum","vendor":"Adobe","fw":["React"],"theme":"企业设计系统","link":"https://react-spectrum.adobe.com","repo":"https://github.com/adobe/react-spectrum","license":"Apache","chips":["Button","TextField","TableView","Dialog"],"kind":"item","img":"previews/react-spectrum.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the React Spectrum homepage above-the-fold section at 1280px width.\n\nGlobal: full-bleed purple-to-pink-to-orange gradient background (linear-gradient roughly 135deg, #7c3aed via #db2777 to #f97316). White text. Font-family Adobe Clean, Source Sans Pro, ui-sans-serif, system-ui, sans-serif. No page scroll, viewport 1280x820.\n\nTop nav (height ~72px, transparent over gradient, flex justify-between align-center, px ~48px):\n- Left: React Spectrum logo — a white stylized triangle/arrow icon inside a rounded-square container (or just white triangle), followed by \"React Spectrum\" in bold white text, font-size ~18px.\n- Center: search pill \"Search React Spectrum\" with \"⌘K\" hint. The pill is translucent white/gray (rgba(255,255,255,0.12)) with a subtle white border, rounded-full, placeholder white at 70% opacity.\n- Right: nav links \"Docs\", \"Releases\", \"Blog\" in white, gap ~24px, then GitHub icon, layers/components icon, info icon (small white mono icons).\n\nHero section (px ~48px, pt ~60px):\n- Big white headline: \"Build apps with ease\" in extra-bold, ~56px, line-height 1.05, max-width ~520px.\n- Subcopy: \"React Spectrum empowers you to build high quality, accessible, cohesive apps with Adobe's signature design.\" White at 90% opacity, ~20px, max-width ~540px, mt ~18px.\n- Buttons (mt ~28px, gap ~14px):\n  - \"Get started\" — white bg, dark text (#7c3aed), rounded-full, px ~20px py ~11px, font-weight 600.\n  - \"Explore components\" — translucent white bg (rgba(255,255,255,0.15)), white text, rounded-full, px ~20px py ~11px, font-weight 600.\n\nMock app UI card (below hero text, mt ~48px, centered or left-aligned, width ~920px):\n- A white rounded-2xl card with shadow, representing a small app window.\n- Top app bar: left red Adobe \"A\" triangle logo + \"My App\" title, center search bar \"Search photos\", right icons (help circle, notification bell with badge \"2\", grid, user avatar).\n- Below app bar: a left sidebar ~60px wide with icons: plus circle (blue), home, photos/mail, ideas/lightbulb.\n- Main area: heading \"Photos\" with two view-toggle icons on the right.\n- Photo grid: 2 rows of photos. First row: 5 landscape photo thumbnails (nature/forest/mountain scenes) with rounded corners. Second row: 2 thumbnails.\n- Use placeholder divs with muted nature colors (greens, browns, sunset oranges) to approximate the gallery.\n\nVibe: bold Adobe design-system landing page, vibrant gradient, friendly, accessible.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span._gCfMGld151._eqPcc6151` → animation: EFZ7wb 10s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a._9d151.IYB8I151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.15s cubic-bezier(0.45, 0, 0.4, 1)\n- `svg` → transition: opacity, transform 0.2s, 0.2s ease-out, ease-out 0s, 0s\n- `img.sb151.Za151` → transition: opacity 0.5s cubic-bezier(0.45, 0, 0.4, 1)\n- `div.zLpqDSc151.yLpqDSc151` → transition: width 0.3s cubic-bezier(0.45, 0, 0.4, 1)\n- `button.GH5kTnc151.Z4dY0ec151` → transition: all 0.3s ease\n- `span._Ia151._IbkYqPbb151` → transition: color, background-color, color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter 0.3s cubic-bezier(0.45, 0, 0.4, 1)\n- `div.gX151.glOVIhfcebS7sd151` → transition: translate, width 0.2s cubic-bezier(0, 0, 0.4, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Z8Un9b  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes uw9JJd  {\n  0%, 100%  {\n  stroke-dashoffset: 75px;\n  } 30%  {\n  stroke-dashoffset: 20px;\n  }\n}\n@keyframes chyGla_slide-in  {\n  0%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes chyGla_slide-out  {\n  100%  {\n  translate: var(--slideX) var(--slideY);\n  opacity: 0;\n  }\n}\n@keyframes yzKlUb  {\n  0%  {\n  outline-width: 0px;\n  transform: scale(1);\n  } 50%  {\n  outline-width: 8px;\n  transform: scale(1.04);\n  } 100%  {\n  outline-width: 0px;\n  transform: scale(1);\n  }\n}\n@keyframes zamT8b  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  width: 0px;\n  transform: translateY(calc(-100% - 12px));\n  }\n}\n@keyframes XYaG5b  {\n  0%  {\n  box-shadow: none;\n  background-color: var(--base-bg);\n  } 100%  {\n  box-shadow: var(--shadow);\n  background-color: var(--layer-2-bg);\n  }\n}\n@keyframes nToi3b  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(100% + 12px));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes AmkoXc  {\n  0%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes HaKxcb  {\n  100%  {\n  opacity: 0;\n  transform: translateY(8px);\n  }\n}\n@keyframes VHPsfc  {\n  0%  {\n  transform: translate(-70%) scaleX(0.7);\n  } 100%  {\n  transform: translate(100%) scaleX(0.7);\n  }\n}\n@keyframes reCXe  {\n  0%  {\n  transform: translate(100%) scaleX(0.7);\n  } 100%  {\n  transform: translate(-70%) scaleX(0.7);\n  }\n}\n@keyframes EFZ7wb  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 15.15%  {\n  transform: translate(0px, 0px);\n  } 16.67%  {\n  transform: translateY(-1.2em);\n  } 31.82%  {\n  transform: translateY(-1.2em);\n  } 33.33%  {\n  transform: translateY(-2.4em);\n  } 48.48%  {\n  transform: translateY(-2.4em);\n  } 50%  {\n  transform: translateY(-3.6em);\n  } 65.15%  {\n  transform: translateY(-3.6em);\n  } 66.67%  {\n  transform: translateY(-4.8em);\n  } 81.82%  {\n  transform: translateY(-4.8em);\n  } 83.33%  {\n  transform: translateY(-6em);\n  } 98.48%  {\n  transform: translateY(-6em);\n  } 100%  {\n  transform: translateY(-7.2em);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"渐变、导航、Hero 文案和 App 卡片预览图高度一致;照片占位色符合自然色调。已将全部真实 @keyframes 与过渡写入 CSS。"},{"id":"recharts","name":"Recharts","vendor":"Recharts","fw":["React"],"theme":"图表 / 数据可视化","link":"https://recharts.org","repo":"https://github.com/recharts/recharts","license":"MIT","chips":["Line","Bar","Area","Pie"],"kind":"item","img":"previews/recharts.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the Recharts component preview card shown in the reference screenshot at 1280px width. The card fills the viewport like a macOS window preview of a React UI library.\n\nCanvas / global: very dark navy/black background (#0b0d14), no page scroll, content fills the 1280x820 viewport. The preview area has a 1px subtle border (#1a2035) and rounded corners (24px), with a faint outer shadow.\n\nTop bar (top-left, padding ~38px from left/top):\n- Three small circles in a row (macOS traffic lights): red (#ff5f57), amber/yellow (#ffbd2e), green (#28c840). Each ~13px with a subtle inner highlight.\n- To the right of the circles, large bold title \"Recharts\" in white (#f8fafc), font-size ~26px, font-weight 600.\n- Below the title, small gray subtitle \"React · 图表 / 数据可视化\" in #94a3b8, font-size ~13.5px.\n\nControls row under the title (left aligned, margin-top ~28px, flex gap ~12px):\n- \"Primary\" button: teal/cyan background (#2dd4bf), black text, rounded-full pill, padding ~9px 19px, font-weight 500.\n- \"Default\" button: transparent dark background (#161b2e), white text, rounded-full pill, border 1px solid #2d3555, padding ~8px 17px.\n- \"Type here...\" input: same dark pill style (#161b2e, border #2d3555, rounded-full), placeholder gray (#64748b), padding ~8px 17px, min-width ~130px.\n\nSecond controls row (margin-top ~14px):\n- A teal/cyan toggle switch in the ON position: pill track (#2dd4bf) ~46px wide x 25px tall with a white circle knob on the right.\n- \"Badge\" label: dark pill with a thin teal border (#0d9488) and teal text (#5eead4), padding ~7px 15px, rounded-full.\n- \"Select\" dropdown: dark pill (#161b2e), white text, rounded-full, border #2d3555, padding ~8px 17px, with a small down-chevron on the right.\n\nMain card (below controls, margin-top ~30px):\n- Rounded-xl dark card (#131625) with 1px border (#252a3f), padding ~24px, max-width ~520px.\n- Inside, heading \"Card title\" in white, font-size ~18px, font-weight 600.\n- Below, body text \"This is a preview of the component look.\" in gray (#94a3b8), font-size ~14px, margin-top ~6px.\n\nBottom tabs (margin-top ~42px, flex gap ~10px):\n- Four dark rounded-full pill buttons: \"Line\", \"Bar\", \"Area\", \"Pie\". Each has bg #161b2e, border #2d3555, text #94a3b8, padding ~8px 16px, font-size ~13px.\n\nTypography: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif.\nVibe: sleek dark-mode developer tool preview, minimal, rounded, teal accent.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.button.install-btn` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cm-blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes cm-blink2  {\n  50%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏卡片布局、配色和圆角与预览一致;标题与交通灯同行,底部标签为 Line/Bar/Area/Pie。已将 cm-blink/cm-blink2 关键帧与 hover 过渡写入 CSS。"},{"id":"nivo","name":"Nivo","vendor":"Plouc","fw":["React"],"theme":"图表 / 数据可视化","link":"https://nivo.rocks","repo":"https://github.com/plouc/nivo","license":"MIT","chips":["Line","Bar","Heatmap","Sankey"],"kind":"item","img":"previews/nivo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI of nivo.rocks\n\nBuild a single self-contained HTML file (HTML + inline CSS, vanilla, system fonts, no external assets) reproducing the above-the-fold (1280x820) of the nivo landing page.\n\n## Brand\n- Name: **Nivo** (dataviz React component library)\n\n## Layout & Design (dark mode component showcase/playground)\n\n### Overall Theme\n- **Dark background**: `#0f1724` or similar deep navy/black (`rgb(15,23,36)` range).\n- Rounded card/container feel — the entire content sits inside a rounded-corner panel with subtle border.\n- Window-like chrome at top-left showing 3 dots (red, yellow, green) like a browser window or macOS window.\n\n### Top Header Area\n- **Title row**: A colored dot (red/orange/cyan circle) followed by \"**Nivo**\" in white/light bold text (~24px).\n- Below the title: subtitle text \"**React · 图表 / 数据可视化**\" (React · Charts / Data Visualization) in muted gray (~14px).\n\n### Controls Row (below subtitle)\nA horizontal flex row of interactive-looking UI components:\n- **Primary button**: filled cyan/teal background (`#22d3ee` range), rounded corners, black/dark bold text \"**Primary**\".\n- **Default button**: outlined button, transparent bg, light border, text \"**Default**\".\n- **Text input field**: placeholder text \"**Type here...**\", dark bg, light border, rounded.\n- Further right on next line or same row:\n  - **Toggle switch** (pill shape): left part cyan/on, right part off/dark.\n  - **Badge button**: dark bg, border, text \"**Badge**\".\n  - **Select dropdown**: dark bg, border, chevron-down icon + text \"**Select**\".\n\n### Card Section\n- A large card container with dark bg, subtle border, rounded corners.\n- Card header: \"**Card title**\" in white/light text (~18px bold).\n- Card body: \"**This is a preview of the component look.**\" in gray/muted text (~14px).\n\n### Bottom Tabs/Footer\n- Horizontal tab bar at bottom: pill/tab buttons for chart types — \"**Line**\", \"**Bar**\", \"**Heatmap**\", \"**Sankey**\". Each tab is outlined (border, transparent fill), with the first one possibly active/filled.\n\n## Colors (real from reference)\n- Background: very dark navy/black `#0d1117`–`#161b22`\n- Text primary: `#e6edf3` (light gray-white)\n- Text secondary: `#8b949e` (muted gray)\n- Accent/Cyan: `#22d3ee` or `#58a6ff`\n- Button primary bg: bright cyan `#22cfcf`\n- Borders: `#30363d` (subtle dark borders)\n- Red dot: `#ff5f56`, Yellow dot: `#ffbd2e`, Green dot: `#27c93f`\n\n## Typography\n- System font stack: -apple-system, system-ui, \"Segoe UI\", Helvetica, Arial, sans-serif.\n- Clean, modern, developer-tool aesthetic (like GitHub Dark).\n\n## Vibes\n- Dark-mode dev tool / component library documentation site. Interactive playground feel. Minimalist, clean, high contrast. Think Storybook or component demo page in dark mode.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 将底部标签改为全 outlined 样式、切换开关改为全青色轨道,与预览图一致。整体采用 GitHub Dark 风格色值,入场与 hover 动效已写入。"},{"id":"visx","name":"Visx","vendor":"Airbnb","fw":["React"],"theme":"图表 / D3 底层","link":"https://airbnb.io/visx","repo":"https://github.com/airbnb/visx","license":"MIT","chips":["Axis","Shape","Scale","Tooltip"],"kind":"item","img":"previews/visx.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Visx gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Visx\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 图表 / D3 底层\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Axis\", \"Shape\", \"Scale\", \"Tooltip with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏组件卡片与预览图一致:天空蓝强调色、深色背景、圆角窗口上边框。入场淡入与 hover 过渡已实现。"},{"id":"tanstack-ui","name":"TanStack UI","vendor":"TanStack","fw":["React"],"theme":"Headless / 表格表单","link":"https://tanstack.com","repo":"https://github.com/TanStack/ui","license":"MIT","chips":["Table","Form","Query","Router"],"kind":"item","img":"previews/tanstack-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — TanStack (v2)\n\n## Brand & vibe\n- Brand: \"TanStack UI\" — React headless UI component library showcase.\n- Vibe: **Dark mode**, developer-focused component gallery/playground. Deep dark background, cyan accent color (#00d4aa or similar teal), macOS-style window dots top-left.\n\n## Layout (above the fold, 1280px wide)\n1. **Top bar** (dark bg, full width):\n   - Left: 3 colored circles (red/yellow/green) like macOS traffic lights.\n   - Title **\"TanStack UI\"** in white, bold, ~22px.\n   - Subtitle line below title: **\"React · Headless / 表格表单\"** (gray/white muted).\n2. **Component showcase area** (centered, padded):\n   - Row of interactive components:\n     - **Primary** button: solid **cyan/teal** fill (~#00c9b7 or #00d4aa), rounded ~6px, white bold text.\n     - **Default** button: transparent, 1px border gray, rounded ~6px, white text.\n     - Text input field: **\"Type here...\"** placeholder, dark bg, subtle border, rounded ~6px.\n   - Second row: a **toggle switch** (active/on state, cyan track), a **Badge** pill (filled cyan), a **Select** dropdown (with ▼ chevron).\n3. **Card**: a bordered box with header **\"Card title\"** and body text **\"This is a preview of the component look.\"**\n4. **Bottom tab bar**: row of tabs — **Table**, **Form**, **Query**, **Router** — as outlined pills/buttons on dark bg.\n\n## Colors\n- Background: very dark navy/black (~#0f1117 or #12141a).\n- Text primary: white (#fff).\n- Text secondary/muted: gray (#888 or #999).\n- Accent (primary buttons, toggle): bright cyan/teal (~#00d4aa / #13bfaa).\n- Default/outlined buttons: transparent, 1px #333 or #444 border.\n- Input bg: slightly lighter than page bg (~#1a1e27).\n- Card bg: same or slightly lighter, 1px border #2a2e3a.\n\n## Typography\n- Font: Inter, system-ui, sans-serif.\n- Title: bold, ~20–22px, white.\n- Subtitle: ~14px, gray.\n- Buttons/input: ~14px.\n- Tab labels: ~14px, white/gray.\n\n## Goal\nRecreate a dark component-gallery hero: dark bg, \"TanStack UI\" + \"React · Headless / 表格表单\" header, a Primary cyan button + Default ghost button + text input row, toggle/Badge/Select row, a \"Card title\" card, and bottom Table/Form/Query/Router tab strip.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.absolute.left-1/3` → animation: ship-peek 10s ease-in-out infinite normal\n- `a.absolute.left-1/3` → animation: ship-peek, ship-pointer-events 10s, 10s ease-in-out, ease-in-out 0s, 0s infinite, infinite normal, normal none, none\n- `span.home-open-source-gradient` → animation: home-open-source-gradient-shift 34s ease-in-out infinite normal\n- `svg` → animation: spin 1s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `img.row-start-1.col-start-1` → transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.ts-mega-trigger.inline-flex` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.ts-mega-dropdown` → transition: opacity, transform, visibility 0.16s, 0.18s, 0s cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), linear 0s, 0s, 0.16s\n- `span.inline-flex.h-7` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.shrink-0` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.pointer-events-none.fixed` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.min-h-[calc(100dvh-var(--navbar-height))].flex` → transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.rounded-lg.border-2` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-0` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-6` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.uppercase`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n  **focus:** background-color: rgba(115, 115, 115, 0.1)\n- `.min-\\[1120px\\]\\:gap-1\\.5`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n- `.hover\\:bg-gray-500\\/10`:\n  **hover:** background-color: rgba(115, 115, 115, 0.1)\n  **focus:** background-color: rgba(115, 115, 115, 0.1)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes docs-partner-flip-out  {\n  0%  {\n  opacity: 0.8;\n  transform: rotateX(0deg);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-90deg);\n  }\n}\n@keyframes docs-partner-flip-in  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(90deg);\n  } 100%  {\n  opacity: 0.8;\n  transform: rotateX(0deg);\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  filter: blur(4px);\n  transform: scale(0.97);\n  } 100%  {\n  opacity: 1;\n  filter: blur();\n  transform: scale(1);\n  }\n}\n@keyframes pulseScale  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(var(--scale-factor,1.1));\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes ship-peek  {\n  0%, 100%  {\n  transform: translate(-50%) translateY(0px) scale(1) scaleX(-1);\n  } 12%  {\n  transform: translateX(calc(-50% - var(--ship-x))) translateY(calc(-1 * var(--ship-y))) scale(1.15) scaleX(-1);\n  } 32%  {\n  transform: translateX(calc(-50% - var(--ship-x))) translateY(calc(-1 * var(--ship-y))) scale(1.15) scaleX(-1);\n  } 35%  {\n  transform: translate(-50%) translateY(0px) scale(1) scaleX(-1);\n  }\n}\n@keyframes ship-pointer-events  {\n  0%, 11%, 33%, 100%  {\n  pointer-events: none;\n  } 12%, 32%  {\n  pointer-events: auto;\n  }\n}\n@keyframes home-open-source-gradient-shift  {\n  0%, 100%  {\n  background-position: 0% center;\n  } 50%  {\n  background-position: 100% center;\n  }\n}\n@keyframes dropdown-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.95) translateY(-4px);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1) translateY(0px);\n  }\n}\n@keyframes dropdown-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.95) translateY(-4px);\n  }\n}\n@keyframes search-modal-overlay-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes search-modal-overlay-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes search-modal-panel-in  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-4px) scale(0.985);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes search-modal-panel-out  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(-2px) scale(0.99);\n  }\n}\n@keyframes cart-panel-in  {\n  0%  {\n  opacity: 0;\n  transform: translate(1rem);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout/colors/copy/components all match well; verbatim keyframes included"},{"id":"cmdk","name":"cmdk","vendor":"pacocoursey","fw":["React"],"theme":"命令面板 / 快捷键","link":"https://cmdk.paco.me","repo":"https://github.com/pacocoursey/cmdk","license":"MIT","chips":["Command","Dialog"],"kind":"item","img":"previews/cmdk.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the GitHub repository page for cmdk at 1280×820.\n\nLayout: white page background (#ffffff), dark header (#24292f) with GitHub logo and white text.\n\nHeader (height ~62px, dark #24292f, white text):\n- Left: GitHub octocat logo.\n- Center nav links: Platform, Solutions, Resources, Open Source (selected/underlined), Enterprise, Pricing.\n- Right: search icon, Sign in, Sign up (bordered button).\n\nRepository header (padding 16px 32px, border-bottom #d0d7de):\n- Left: title \"dip / cmdk\" with \"Public\" badge (green border, small text).\n- Right: Notifications, Fork 374, Star 12.8k buttons (light gray, bordered).\n\nTab bar (border-bottom #d0d7de, left-aligned): Code (selected, orange underline), Issues 51, Pull requests 22, Discussions, Actions, Security and quality, Insights.\n\nMain content area (padding 16px 32px, two columns):\n- Left: file list table with border #d0d7de, rounded. Top bar has \"main\" branch dropdown, \"5 Branches\", \"13 Tags\", \"Go to file\" input, and green \"Code\" button. Rows: .github, .husky, cmdk, test, website, .gitignore, .prettierignore, .prettierrc.js, ARCHITECTURE.md, LICENSE.md, README.md, package.json with commit messages and \"last year\"/\"2 years ago\"/\"4 years ago\" dates.\n- Right sidebar: About box with \"Fast, unstyled command menu React component.\", topic tags (react, command-palette, combobox, radix-ui, command-menu), Readme, MIT license, Activity, 12.8k stars, 26 watching, 374 forks. Releases box with v1.1.1 Latest and Mar 15, 2025.\n\nUse GitHub's light-mode color palette: borders #d0d7de, secondary bg #f6f8fa, blue links #0969da, green buttons #1f883d, text #1f2328.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"GitHub repo page layout/colors/components match; all verbatim keyframes included"},{"id":"sonner","name":"Sonner","vendor":"emilkowalski","fw":["React"],"theme":"Toast 通知","link":"https://sonner.emilkowalkski.com","repo":"https://github.com/emilkowalski/sonner","license":"MIT","chips":["Toast"],"kind":"item","img":"previews/sonner.png","prompt":"Recreate the Sonner gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Sonner\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Toast 通知\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Toast with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card."},{"id":"plate","name":"Plate","vendor":"Plate","fw":["React"],"theme":"富文本编辑器","link":"https://platejs.org","repo":"https://github.com/udecode/plate","license":"MIT","chips":["Editor","Toolbar","Mention","Slash"],"kind":"item","img":"previews/plate.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Plate gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Plate\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 富文本编辑器\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Editor\", \"Toolbar\", \"Mention\", \"Slash with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.shrink-0.items-center` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.inline-flex.shrink-0` → transition: color, background-color, border-color, outline-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.w-fit` → transition: color, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.themes-wrapper.chunk-mode` → transition: width 0.3s cubic-bezier(0, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `button`:\n  **active:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto))));\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto))));\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n@keyframes skeleton-module__Mhoy-q__loading  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 300;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 150, 300;\n  stroke-dashoffset: -200px;\n  } 100%  {\n  stroke-dasharray: 1, 300;\n  stroke-dashoffset: -280px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component gallery layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"mambaui","name":"Mamba UI","vendor":"Mamba","fw":["React"],"theme":"Tailwind 区块","link":"https://mambaui.com","repo":"https://github.com/MambaUI/MambaUI","license":"MIT","chips":["Hero","Feature","Pricing","CTA"],"kind":"item","img":"previews/mambaui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Mamba UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Mamba UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Tailwind 区块\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Hero\", \"Feature\", \"Pricing\", \"CTA with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.fixed.left-0` → transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes _ngcontent-ng-c926440377_stroke-animation  {\n  0%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 50%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 65%  {\n  stroke-dashoffset: 59;\n  stroke-dasharray: 59, 236;\n  } 100%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  }\n}\n@keyframes _ngcontent-ng-c926440377_stroke-animation-reverse  {\n  0%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 50%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  } 65%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 100%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  }\n}\n@keyframes _ngcontent-ng-c607063961_stroke-animation  {\n  0%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 50%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 65%  {\n  stroke-dashoffset: 59;\n  stroke-dasharray: 59, 236;\n  } 100%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  }\n}\n@keyframes _ngcontent-ng-c607063961_stroke-animation-reverse  {\n  0%  {\n  stroke-dashoffset: 68;\n  stroke-dasharray: 59, 236;\n  } 50%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  } 65%  {\n  stroke-dashoffset: 295;\n  stroke-dasharray: 25, 270;\n  } 100%  {\n  stroke-dashoffset: 290;\n  stroke-dasharray: 25, 270;\n  }\n}\n@keyframes _ngcontent-ng-c1210680869_line-animation  {\n  0%  {\n  transform: translateY(0px);\n  } 10%  {\n  transform: translateY(10px);\n  } 40%  {\n  transform: translateY(-25px);\n  } 60%  {\n  transform: translateY(-25px);\n  } 85%  {\n  transform: translateY(10px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes _ngcontent-ng-c1210680869_click-animation  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(0.9);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes included"},{"id":"kokonutui","name":"Kokonut UI","vendor":"Kokonut","fw":["React"],"theme":"动画 / 现代组件","link":"https://kokonutui.com","repo":"https://github.com/KokonutUI/kokonutui","license":"MIT","chips":["Card","Chart","Calendar","Command"],"kind":"item","img":"previews/kokonutui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Kokonut UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Kokonut UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 动画 / 现代组件\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Card\", \"Chart\", \"Calendar\", \"Command with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `rect` → animation: border-trace 1.2s ease-out 1 normal forwards\n- `div.absolute.inset-[20%]` → animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite normal\n- `div.jsx-b85f40904dcee116.absolute` → animation: scale 3s linear infinite normal\n- `circle` → animation: rotate-cw 8s linear infinite normal\n- `circle` → animation: rotate-ccw 8s linear 0.2s infinite normal\n- `div.w-[3px].rounded-sm` → animation: bounce-music 0.8s ease-in-out infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.flex` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.2s cubic-bezier(0, 0, 0.2, 1)\n- `div.relative.flex` → transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.relative` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.relative.inline-block` → transition: transform, translate, scale, rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.flex.items-center` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.-top-4` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.jsx-b85f40904dcee116.relative` → transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1)\n- `div.jsx-b85f40904dcee116.absolute` → transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `h3.jsx-b85f40904dcee116.font-semibold` → transition: transform, translate, scale, rotate 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.jsx-b85f40904dcee116.flex` → transition: transform, opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.15s\n- `button.jsx-b85f40904dcee116.group/start` → transition: transform, background 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-collapsible-down  {\n  0%  {\n  opacity: 0;\n  height: 0px;\n  } 100%  {\n  height: var(--radix-collapsible-content-height);\n  }\n}\n@keyframes fd-collapsible-up  {\n  0%  {\n  height: var(--radix-collapsible-content-height);\n  } 100%  {\n  opacity: 0;\n  height: 0px;\n  }\n}\n@keyframes fd-accordion-down  {\n  0%  {\n  opacity: 0.5;\n  height: 0px;\n  } 100%  {\n  height: var(--radix-accordion-content-height);\n  }\n}\n@keyframes fd-accordion-up  {\n  0%  {\n  height: var(--radix-accordion-content-height);\n  } 100%  {\n  opacity: 0.5;\n  height: 0px;\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"diceui","name":"Dice UI","vendor":"Dice","fw":["React"],"theme":"Radix 风格组件","link":"https://diceui.com","repo":"https://github.com/diceui/dice-ui","license":"MIT","chips":["Combobox","DatePicker","Tags","Slider"],"kind":"item","img":"previews/diceui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Dice UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Dice UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · Radix 风格组件\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Combobox\", \"DatePicker\", \"Tags\", \"Slider with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h1.animate-fade-up.text-balance` → animation: fade-up 0.5s ease-out 0.2s 1 normal forwards\n- `p.max-w-2xl.animate-fade-up` → animation: fade-up 0.5s ease-out 0.3s 1 normal forwards\n- `div.flex.animate-fade-up` → animation: fade-up 0.5s ease-out 0.4s 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.backdrop-blur-lg.border-b` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.inline-flex.items-center` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group/button.inline-flex` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes fd-sidebar-in  {\n  0%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-sidebar-out  {\n  100%  {\n  transform: translateX(var(--fd-sidebar-drawer-offset));\n  }\n}\n@keyframes fd-dialog-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.06);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes fd-dialog-out  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.04);\n  }\n}\n@keyframes fd-popover-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-popover-out  {\n  100%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n@keyframes fd-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fd-fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fd-enterFromRight  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-enterFromLeft  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes fd-exitToRight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes fd-exitToLeft  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"paper-rn","name":"React Native Paper","vendor":"Callstack","fw":["React"],"theme":"移动端 / 跨端","link":"https://reactnativepaper.com","repo":"https://github.com/callstack/react-native-paper","license":"MIT","chips":["Button","Card","TextInput","Modal"],"kind":"item","img":"previews/paper-rn.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the React Native Paper gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"React Native Paper\" in white, bold, ~32px.\n- Subtitle on the next line: \"React · 移动端 / 跨端\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #38bdf9, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #38bdf9 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Card\", \"TextInput\", \"Modal with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.hv0shhd` → transition: background, color, box-shadow 0.4s, 0.4s, 0.4s ease, ease, ease 0s, 0s, 0s\n- `button.b1qn7xxj` → transition: color, background, border 0.3s, 0.3s, 0.3s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card layout/colors/copy match; verbatim transitions included (no keyframes in spec)"},{"id":"varlet","name":"Varlet","vendor":"Varlet","fw":["Vue"],"theme":"移动端 / Vue3","link":"https://varletjs.org","repo":"https://github.com/varletjs/varlet","license":"MIT","chips":["Button","Input","Picker","ActionSheet"],"kind":"item","img":"previews/varlet.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Varlet gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Varlet\" in white, bold, ~32px.\n- Subtitle on the next line: \"Vue · 移动端 / Vue3\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #4ade80, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #4ade80 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Input\", \"Picker\", \"ActionSheet with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: background-color, box-shadow 0.25s, 0.25s ease, ease 0s, 0s\n- `button.var-button.var--box` → transition: box-shadow, background-color, border-radius 0.2s, 0.25s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `div.var-hover-overlay` → transition: opacity 0.15s ease\n- `img.varlet-site-header__logo` → transition: all 0.3s ease-in-out\n- `div.varlet-site-header__versions` → transition: background-color 0.25s ease\n- `div.var-card__floater` → transition: background-color, color 0.25s, 0.25s cubic-bezier(0.45, 0.19, 0.06, 0.89), cubic-bezier(0.45, 0.19, 0.06, 0.89) 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes circle  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes circular  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -40px;\n  } 100%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -120px;\n  }\n}\n@keyframes wave  {\n  0%, 40%, 100%  {\n  transform: scaleY(0.4);\n  } 20%  {\n  transform: scaleY(1);\n  }\n}\n@keyframes cube  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotate(90deg) scale(0.3);\n  }\n}\n@keyframes rect  {\n  0%  {\n  opacity: 0.3;\n  } 25%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.3;\n  } 65%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes disappear  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes progress-linear-long  {\n  0%  {\n  left: -90%;\n  right: 100%;\n  } 60%  {\n  left: -90%;\n  right: 100%;\n  } 100%  {\n  left: 100%;\n  right: -35%;\n  }\n}\n@keyframes progress-linear-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@keyframes progress-circle-dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 100, 200;\n  stroke-dashoffset: -15px;\n  } 100%  {\n  stroke-dasharray: 100, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@keyframes progress-circle-rotate  {\n  100%  {\n  transform: rotate(270deg);\n  }\n}\n@keyframes iconRotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes success-line-tip  {\n  0%  {\n  width: 0px;\n  top: 23.75%;\n  left: 1.25%;\n  } 54%  {\n  width: 0px;\n  top: 20.25%;\n  left: 1%;\n  } 70%  {\n  width: 62.5%;\n  top: 43.75%;\n  left: -9.5%;\n  } 84%  {\n  width: 21.25%;\n  top: 60%;\n  left: 26.25%;\n  } 100%  {\n  width: 31.25%;\n  top: 56.25%;\n  left: 17.5%;\n  }\n}\n@keyframes success-line-long  {\n  0%  {\n  width: 0px;\n  top: 67.5%;\n  right: 57.5%;\n  } 65%  {\n  width: 0px;\n  top: 67.5%;\n  right: 57.5%;\n  } 84%  {\n  width: 68.75%;\n  top: 43.75%;\n  right: 0px;\n  } 100%  {\n  width: 58.75%;\n  top: 47%;\n  right: 9%;\n  }\n}\n@keyframes rotate-circle  {\n  0%  {\n  transform: rotate(-45deg);\n  } 5%  {\n  transform: rotate(-45deg);\n  } 12%  {\n  transform: rotate(-405deg);\n  } 100%  {\n  transform: rotate(-405deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card with green accent #4ade80; layout/colors/copy match; all verbatim keyframes+transitions included"},{"id":"wave-ui","name":"Wave UI","vendor":"Antoniandre","fw":["Vue"],"theme":"Material 风 / Vue3","link":"https://antoniandre.github.io/wave-ui","repo":"https://github.com/antoniandre/wave-ui","license":"MIT","chips":["Button","Card","Dialog","Tabs"],"kind":"item","img":"previews/wave-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the Wave UI gallery-card preview at 1280×820.\n\nGlobal style: very dark page background (#0b0c10), system sans-serif. The page is a full-viewport card with rounded top corners and a subtle 1px border along the top and sides (#1f2937).\n\nTop-left header row:\n- Three macOS-style traffic-light dots: red #ff5f57, yellow #febc2e, green #28c840, each 14px circle, gap 8px.\n- Next to the dots, title \"Wave UI\" in white, bold, ~32px.\n- Subtitle on the next line: \"Vue · Material 风 / Vue3\" in #6b7280, ~15px.\n\nComponent showcase (left-aligned under the subtitle, max-width ~800px, vertical gap ~18px):\n1. First row: \"Primary\" button (accent #4ade80, black text, rounded 10px, height 40px, padding 0 18px), then \"Default\" button (dark bg #161b22, white text, border #30363d), then a dark input pill showing placeholder \"Type here...\" in #6b7280.\n2. Second row: a toggle switch in the ON position (accent #4ade80 track, white knob on the right), then a \"Badge\" pill (dark bg, accent text, rounded-full), then a \"Select\" dropdown (dark bg, white text, chevron down, rounded 8px).\n3. A large bordered card below with background #0f1115, border #1f2937, rounded-18px, padding 22px. Card title \"Card title\" in white 18px semibold, body \"This is a preview of the component look.\" in #6b7280 14px.\n\nBottom component tabs (left-aligned near the bottom, gap 12px): dark rounded-full pills Button\", \"Card\", \"Dialog\", \"Tabs with background #161b22, border #30363d, text #9ca3af.\n\nKeep the layout flat, minimal shadow, and aligned like a component-library showcase card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `h1` → transition: color, background-color, border-color, stroke, fill 0.4s, 0.4s, 0.4s, 0.4s, 0.4s ease, ease, ease, ease, ease 0s, 0s, 0s, 0s, 0s\n- `a.w-button.w-ripple` → transition: all, background-color, padding 0.25s, 0s, 0s ease, ease, ease 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes w-fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes w-scale  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes w-scale-fade  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes w-bounce  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.7);\n  } 60%  {\n  opacity: 1;\n  transform: scale(1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes w-twist  {\n  0%  {\n  transform: scale(0) rotate(-70deg);\n  } 60%  {\n  transform: scale(1.03) rotate(6deg);\n  } 100%  {\n  transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes w-ripple-ink-expand  {\n  100%  {\n  opacity: 0;\n  transform: scale(1);\n  }\n}\n@keyframes w-checkbox-ripple  {\n  0%  {\n  opacity: 0.8;\n  background-color: currentcolor;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(2.8);\n  }\n}\n@keyframes w-drawer-pop  {\n  0%, 100%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.05);\n  }\n}\n@keyframes w-form-el-shake  {\n  0%  {\n  left: 0px;\n  } 20%, 60%  {\n  left: 2px;\n  } 40%, 80%  {\n  left: -2px;\n  }\n}\n@keyframes w-icon--spin-a  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-359deg);\n  }\n}\n@keyframes w-overlay-pop  {\n  0%, 100%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.04);\n  }\n}\n@keyframes w-progress-bars  {\n  0%  {\n  transform: translate(-100%) scaleX(1);\n  } 100%  {\n  transform: translate(0px, 0px) scaleX(0);\n  }\n}\n@keyframes w-progress-stripes  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 50px 50px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card green accent; layout/colors/copy match; all verbatim w-* keyframes+transitions included"},{"id":"balmui","name":"BalmUI","vendor":"BalmJS","fw":["Vue"],"theme":"Material 风 / Vue3","link":"https://next-material.balmjs.com","repo":"https://github.com/balmjs/balm-ui","license":"MIT","chips":["Button","Input","Menu","Dialog"],"kind":"item","img":"previews/balmui.png","prompt":""},{"id":"vue-final-modal","name":"Vue Final Modal","vendor":"Vue Final","fw":["Vue"],"theme":"模态框 / 动画","link":"https://vue-final-modal.org","repo":"https://github.com/vue-final/vue-final-modal","license":"MIT","chips":["Modal","Drawer","Teleport"],"kind":"item","img":"previews/vue-final-modal.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Vue Final Modal — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built a light marketing landing page; reference shows a **dark component-demo showcase page**\n- Reference has: very dark background, macOS-style window dots, title bar, Chinese subtitle, a component preview card with Primary/Default/toggle/badge/select/card/tabs\n\n## Fixed spec\nRebuild as a **dark component demo** matching the reference exactly:\n\n**Layout (1280x820):**\n- Background: very dark near-black (~#0d1117)\n- **Top bar**: left = 3 colored circles (red #ff5f57, yellow #febc2e, green #28c840) spaced 8px apart; then bold white text **\"Vue Final Modal\"** (font-size ~20px)\n- **Subtitle** below top bar: gray text **\"Vue · 模态框 / 动画\"** (~13px, rgb(139,148,158))\n- **Preview card**: centered, rounded (~16px radius), bg slightly lighter dark (#161b22), 1px rgba(255,255,255,0.1) border, padding ~32px\n  - First row inside card:\n    - **Primary button**: green solid (bg rgb(5,150,105)), white text, rounded 8px, padding 10px 22px, font-weight 600\n    - **Default button**: transparent bg, 1px rgb(48,54,61) border, white text, same size\n    - **Input field**: \"Type here...\" placeholder, dark bg rgb(30,37,44), 1px rgb(48,54,61) border, rounded 6px, white placeholder text\n  - Second row:\n    - **Toggle switch**: on state — green track rgb(5,150,105) with white round knob on right; width ~42px, height ~24px\n    - **Badge**: small pill, dark bg rgb(48,54,61), white text \"Badge\", rounded 12px, font-size 12px\n    - **Select dropdown**: \"Select\" text, dark bg, 1px border, chevron-down indicator\n  - **Card section**: \"Card title\" (white, ~16px, weight 600); \"This is a preview of the component look.\" (gray ~rgb(139,148,158), ~14px)\n- **Bottom tab bar**: row of pill-outline buttons: **Modal**, **Drawer**, **Teleport** (dark transparent bg, 1px rgba(255,255,255,0.15) border, rounded 8px, white text)\n\n**Colors:**\n- Page bg: #0d1117 (very dark navy-black)\n- Card bg: #161b22\n- Borders: rgba(255,255,255,0.08) to (0.1)\n- Text primary: #ffffff; secondary: rgb(139,148,158); subtitle: rgb(139,148,158)\n- Accent green: rgb(5,150,105) for Primary button & toggle\n- Input bg: rgb(30,37,44)\n\n**Typography:** system-ui, sans-serif. Bold title. Clean monospace-ish feel on inputs.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.link` → transition: background 0.2s ease\n- `a.button-link.pv-fktYus` → transition: color 0.1s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示页与预览一致:绿色强调色、GitHub Dark 风格色值、Modal/Drawer/Teleport 标签。已写入 fade-in/fade-out 关键帧与 hover 过渡。"},{"id":"veevalidate","name":"VeeValidate","vendor":"Logaretm","fw":["Vue"],"theme":"表单校验 / Headless","link":"https://vee-validate.logaretm.com","repo":"https://github.com/logaretm/vee-validate","license":"MIT","chips":["Form","Field","ErrorMessage"],"kind":"item","img":"previews/veevalidate.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate VeeValidate — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built a dark landing page; reference shows a **dark component-demo showcase** (same gallery theme)\n- Need window dots, Chinese subtitle \"Vue · 表单验证 / Headless\", component preview card\n\n## Spec\nSame dark component-demo layout as Vue Final Modal but with VeeValidate branding:\n- Top: dots + **\"VeeValidate\"** (bold white)\n- Subtitle: \"Vue · 表单验证 / Headless\"\n- Card: Primary green rgb(5,150,105), Default outline, \"Type here...\", toggle (green), Badge, Select, \"Card title\" + desc\n- Tabs: Form, Field, ErrorMessage\n- Colors: bg #0d1117, card #161b22, accent green rgb(5,150,105)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.ml-4.transition-opacity` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  50%  {\n  background-color: transparent;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示与预览一致:绿色强调色、VeeValidate 标题、表单验证副标题、Form/Field/ErrorMessage 标签。已写入 blink/fade-in 关键帧与 hover 过渡。"},{"id":"tailgrids-vue","name":"TailGrids Vue","vendor":"TailGrids","fw":["Vue"],"theme":"Tailwind 组件","link":"https://tailgrids.com","repo":"https://github.com/TailGrids/tailgrids-vue","license":"MIT","chips":["Button","Card","Hero","Pricing"],"kind":"item","img":"previews/tailgrids-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Tailgrids Vue — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light Tailgrids landing page; reference shows **dark component-demo** theme\n\n## Spec\nDark component-demo:\n- Top: dots + **\"TailGrids Vue\"** (bold white)\n- Subtitle: \"Vue · Tailwind 组件\"\n- Card: Primary green, Default, \"Type here...\", green toggle, Badge, Select, Card title+desc\n- Tabs: Button, Card, Hero, Pricing\n- Bg #0d1117, accent green rgb(5,150,105)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.rfm-marquee` → animation: scroll 30.9714s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.inline-flex.cursor-pointer` → transition: all 0.2s ease\n- `button.absolute.top-1/2` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.h-6` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.top-full` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes slideInDown  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes slideInFromBottom  {\n  0%  {\n  opacity: 0;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes scroll-diagonal  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-25%, -25%);\n  }\n}\n@keyframes border-progress  {\n  0%  {\n  stroke-dashoffset: 100%;\n  } 100%  {\n  stroke-dashoffset: 0%;\n  }\n}\n@keyframes border-travel  {\n  0%  {\n  --border-angle: 0deg;\n  } 100%  {\n  --border-angle: 360deg;\n  }\n}\n@keyframes text-gradient  {\n  0%  {\n  background-position: 0% center;\n  } 100%  {\n  background-position: 200% center;\n  }\n}\n@keyframes border-move  {\n  0%  {\n  background-position: 0% center;\n  } 50%  {\n  background-position: 100% center;\n  } 100%  {\n  background-position: 0% center;\n  }\n}\n@keyframes progress-once  {\n  0%  {\n  width: 0%;\n  } 100%  {\n  width: 100%;\n  }\n}\n@keyframes ping  {\n  75%, 100%  {\n  opacity: 0;\n  transform: scale(2);\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色组件演示与预览一致:TailGrids Vue 标题、Vue · Tailwind 组件副标题、Button/Card/Hero/Pricing 标签。已将全部真实 @keyframes 与 hover 过渡写入 CSS。"},{"id":"volt-vue","name":"Volt Vue","vendor":"Themesberg","fw":["Vue"],"theme":"免费 Bootstrap 风","link":"https://demos.creative-tim.com/volt","repo":"https://github.com/themesberg/volt-bootstrap-5-dashboard","license":"MIT","chips":["Button","Card","Table","Chart"],"kind":"item","img":"previews/volt-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate volt-vue (Creative Tim 404) — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 was a plain white 404 page\n- Reference shows an **elaborate Creative Tim 404** with:\n  - Dark night-sky desert landscape photo as full background (stars, rock formations, moon glow)\n  - White logo top-left (circle icon + \"Creative Tim\")\n  - Nav links top-right: Home, About Us, Contact Us, social icons (FB, IG, Twitter)\n  - Large thin \"404\" centered in white\n  - \"The page you requested could not be found.\"\n  - Search input with cyan Search button (rgb(91,192,222))\n  - \"You can discover:\" heading\n  - 4 white cards with line icons: ADMIN & DASHBOARDS, UI KITS, FREE THEMES, BOOTSTRAP COMPONENTS\n\n## Spec\nRebuild as elaborate 404 with dark atmospheric background (use CSS gradient approximating night sky), large thin 404 text, search bar, 4 discovery cards with simple SVG-like icons.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input.form-control.form-control-search` → transition: border-color, box-shadow 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `div.card` → transition: all 0.3s cubic-bezier(0.34, 2, 0.6, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 40px 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes slideDown  {\n  100%  {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy all match; CSS gradient background approximates night sky; both @keyframes present verbatim"},{"id":"flowbite-vue","name":"Flowbite Vue","vendor":"Flowbite","fw":["Vue"],"theme":"Tailwind 组件","link":"https://flowbite-vue.com","repo":"https://github.com/themesberg/flowbite-vue","license":"MIT","chips":["Button","Input","Card","Navbar"],"kind":"item","img":"previews/flowbite-vue.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Flowbite Vue — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light landing page with emoji cards\n- Reference shows **dark component-demo** theme with PINK/RED accent (not green!)\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Flowbite Vue\"** (bold white)\n- Subtitle: \"Vue · Tailwind 组件\"\n- Card: Primary **pink/red** (rgb(239,68,68) or rgb(244,63,94)), Default, \"Type here...\", pink toggle, Badge, Select, Card title+desc\n- Tabs: Button, Input, Card, Navbar\n- Bg #0d1117, accent pink/red\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `button.VPSwitch.VPSwitchAppearance` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPSocialLink.no-icon` → transition: color 0.5s ease\n- `a.VPButton.medium` → transition: color, border-color, background-color 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `div.VPLink.no-icon` → transition: border-color, background-color 0.25s, 0.25s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fwb-progress-indeterminate-slide-da08d611  {\n  0%  {\n  left: -40%;\n  width: 40%;\n  } 50%  {\n  left: 20%;\n  width: 60%;\n  } 100%  {\n  left: 100%;\n  width: 40%;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with pink/red accent per spec; all components match; both @keyframes verbatim; real site uses green but spec says red"},{"id":"nebular","name":"Nebular","vendor":"Akveo","fw":["Angular"],"theme":"企业级 / 主题化","link":"https://akveo.github.io/nebular","repo":"https://github.com/akveo/nebular","license":"MIT","chips":["Button","Card","Layout","Auth"],"kind":"item","img":"previews/nebular.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Nebular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built white landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Nebular\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 主题化\"\n- Card: Primary **red/pink** (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card title+desc\n- Tabs: Button, Card, Layout, Auth\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.select-button` → transition: background-color, border-color, border-radius, box-shadow, color 0.15s ease-in\n- `nb-icon` → transition: transform 0.15s ease-in\n- `a.btn.get-started` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@keyframes button-hero-basic-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(247, 249, 252) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-primary-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(89, 139, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-success-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(44, 230, 155) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-warning-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 201, 77) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-danger-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 112, 141) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-info-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(66, 170, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes button-hero-control-pulse  {\n  0%  {\n  box-shadow: none;\n  opacity: 0.3;\n  } 100%  {\n  box-shadow: rgb(255, 255, 255) 0px 0px 1rem;\n  opacity: 0.8;\n  }\n}\n@keyframes sbx-reset-in  {\n  0%  {\n  transform: translate(-20%);\n  opacity: 0;\n  } 100%  {\n  transform: none;\n  opacity: 1;\n  }\n}\n@keyframes eva-flipInY  {\n  0%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n  animation-timing-function: ease-in;\n  opacity: 0;\n  } 40%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n  animation-timing-function: ease-in;\n  } 60%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n  opacity: 1;\n  } 80%  {\n  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n  } 100%  {\n  transform: perspective(400px);\n  }\n}\n@keyframes eva-shake  {\n  0%, 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  } 10%, 30%, 50%, 70%, 90%  {\n  transform: translate3d(-3px, 0px, 0px);\n  } 20%, 40%, 60%, 80%  {\n  transform: translate3d(3px, 0px, 0px);\n  }\n}\n@keyframes eva-pulse  {\n  0%  {\n  transform: scale3d(1, 1, 1);\n  } 50%  {\n  transform: scale3d(1.2, 1.2, 1.2);\n  } 100%  {\n  transform: scale3d(1, 1, 1);\n  }\n}\n@keyframes eva-zoomIn  {\n  0%  {\n  opacity: 1;\n  transform: scale3d(0.5, 0.5, 0.5);\n  } 50%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 14 @keyframes verbatim (progress-bar-stripes, 7 button-hero pulses, sbx-reset, eva-flipInY/shake/pulse/zoomIn)"},{"id":"devextreme","name":"DevExtreme","vendor":"DevExpress","fw":["Angular"],"theme":"企业级 / 商业","link":"https://js.devexpress.com/Angular","repo":"https://github.com/DevExpress/DevExtreme","license":"商用","chips":["DataGrid","Charts","Scheduler","Form"],"kind":"item","img":"previews/devextreme.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate DevExtreme — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light marketing landing; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"DevExtreme\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 商业\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card+desc\n- Tabs: DataGrid, Charts, Scheduler, Form\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes menuNotificationGrowUp  {\n  0%  {\n  inset: 0px;\n  border-width: 1px;\n  opacity: 1;\n  } 100%  {\n  inset: -7px;\n  border-width: 14px;\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes dx-loadindicator-icon-custom-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dx-loadpanel-opacity  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes dx-filemanager-icon-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dx-generic-loadindicator-opacity  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.55;\n  }\n}\n@-webkit-keyframes valid-badge-frames  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.1);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@-webkit-keyframes loader  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: 900%;\n  }\n}\n@-webkit-keyframes loader-rtl  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -900%;\n  }\n}\n@-webkit-keyframes dx-datagrid-highlight-change  {\n  50%, 0%  {\n  background-color: rgba(51, 51, 51, 0.08);\n  }\n}\n@-webkit-keyframes dx-treelist-highlight-change  {\n  50%, 0%  {\n  background-color: rgba(51, 51, 51, 0.08);\n  }\n}\n@keyframes slideOut  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translateX(2%);\n  }\n}\n@keyframes slideInLeft  {\n  0%  {\n  opacity: 0;\n  transform: translateX(-2%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  opacity: 0;\n  transform: translateX(2%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 14 keyframes verbatim (menuNotificationGrowUp, fadeIn, dx-*, valid-badge, loader, slideOut/InLeft/InRight)"},{"id":"kendo-angular","name":"Kendo UI for Angular","vendor":"Telerik","fw":["Angular"],"theme":"企业级 / 商业","link":"https://www.telerik.com/kendo-angular-ui","repo":"https://www.telerik.com/kendo-angular-ui","license":"商用","chips":["Grid","Chart","Editor","Scheduler"],"kind":"item","img":"previews/kendo-angular.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Kendo UI for Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built white landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Kendo UI for Angular\"** (bold white)\n- Subtitle: \"Angular · 企业级 / 商业\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, input, toggle, Badge, Select, Card+desc\n- Tabs: Grid, Chart, Editor, Scheduler\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `input.k-input.k-input-md` → animation: autoFillEnd ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: color, opacity 0.2s, 0.2s ease, ease 0s, 0s\n- `a.TK-Skip-Link` → transition: color, background, opacity 0.1s, 0.1s, 0.1s linear, linear, linear 0s, 0s, 0s\n- `button.TK-Nav-Overlay` → transition: opacity, visibility 0.12s, 0.12s linear, linear 0.12s, 0.12s\n- `a.Btn.Btn--prim2` → transition: color, background-color, border-color 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `button.k-button.k-button-md` → transition: color 0.2s ease-in-out\n- `span.k-rating-item.k-selected` → transition: color 0.2s ease-out\n- `span.k-switch-track.k-rounded-full` → transition: background-color 0.2s ease-in-out\n- `input.k-input.k-input-md` → transition: border-color 0.3s ease\n- `input.k-radio.k-radio-md` → transition: outline 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-up-fix  {\n  0%  {\n  transform: translate3d(0px, 350%, 0px);\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark theme with red accent; all components match; all 4 @keyframes verbatim (fade-in, onetrust-fade-in, slide-up-fix, slide-down-custom)"},{"id":"syncfusion-ng","name":"Syncfusion EJ2","vendor":"Syncfusion","fw":["Angular"],"theme":"企业级 / 商业","link":"https://www.syncfusion.com/angular-components","repo":"https://github.com/syncfusion/ej2-angular","license":"商用","chips":["Grid","Chart","Diagram","PDF"],"kind":"item","img":"previews/syncfusion-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Syncfusion Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 was too simple — just H1 + text + link\n- Reference shows a **rich marketing landing page** with:\n  - Dark top nav bar (bg ~#1a1f35) with Syncfusion logo (grid icon + wordmark)\n  - Nav items: PRODUCTS ▾, AI SOLUTIONS ▾, RESOURCES ▾, PRICING, COMPANY ▾\n  - Right: BOOK A FREE DEMO (outline), TRY IT FREE (solid blue)\n  - Yellow banner top: \"BoldDesk! Using Zendesk...\"\n  - Hero section LEFT: H1 \"Angular Component Library – Premium UI Components\", paragraph, two buttons (Download Free Trial blue solid + Schedule a Live Demo outline), \"No credit card required.\", \"Explore Samples →\"\n  - Hero section RIGHT: product screenshot mockup (Expense Tracker dashboard with charts, cards, user avatar, stats)\n  - Below hero: G2 rating badge (4.5/5), ANGULAR 22 Support, 14.8M+ downloads\n  - Chat widget bottom-right corner\n\n## Spec\nRebuild as rich landing with dark nav, left-right hero layout, CSS-only dashboard mockup on right.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: all 0.3s ease\n- `a.menu-item.dropdown-toggle` → transition: all 0.3s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes expandWidth  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 1392px;\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  transform: translateX(100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@keyframes rotation  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"rich landing page with dark nav, hero L-R layout, CSS dashboard mockup, stats bar, chat widget; all 3 @keyframes verbatim"},{"id":"ag-grid","name":"AG Grid","vendor":"AG Grid","fw":["Angular"],"theme":"数据表格 / 高性能","link":"https://www.ag-grid.com/angular-data-grid","repo":"https://github.com/ag-grid/ag-grid","license":"MIT","chips":["DataGrid","Tree","Pivot","Charts"],"kind":"item","img":"previews/ag-grid.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the ag-grid (https://www.ag-grid.com/angular-data-grid) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component-demo pattern; all components match preview; no @keyframes specified in prompt (empty animation spec)"},{"id":"ionic-ng","name":"Ionic Angular","vendor":"Ionic","fw":["Angular"],"theme":"移动 / 混合应用","link":"https://ionicframework.com","repo":"https://github.com/ionic-team/ionic-framework","license":"MIT","chips":["App","Tabs","Card","Modal"],"kind":"item","img":"previews/ionic-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Ionic Angular — Above-the-Fold UI (v2)\n\n## Gaps from v1\n- v1 built light landing page; reference shows **dark component-demo** with RED/PINK accent\n\n## Spec\nDark component-demo:\n- Top: dots + **\"Ionic Angular\"** (bold white)\n- Subtitle: \"Angular · 移动 / 混合应用\"\n- Card: Primary red/pink (rgb(239,68,68)), Default, \"Type here...\", red toggle, Badge, Select, Card+desc\n- Tabs: App, Tabs, Card, Modal\n- Bg #0d1117, accent red/pink\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `strong` → transition: color 0.2s ease-out\n- `button.DocSearch.DocSearch-Button` → transition: border-color 0.2s ease-out\n- `article.docs-dropdown_dropdown__RqIcX.site-header__dropdown` → transition: transform, opacity 0.5s, 0.4s cubic-bezier(0.36, 0.66, 0.04, 1), cubic-bezier(0.36, 0.66, 0.04, 1) 0s, 0s\n- `a.link` → transition: all 0.2s ease-in-out\n- `a.link` → transition: background-color 0.2s ease-in-out\n- `li.jsx-c1bf03e61e10f0c8.desktop_headerLink__EL1uK` → transition: all 0.1s ease-in-out\n- `span.homepage_topFramework__IDcAO.homepage_topFrameworkReact__inLIT` → transition: opacity, transform 0.4s, 0.4s ease-out, ease-out 0s, 0s\n- `a.homepage_topCta__YQIRt` → transition: background-color 0.2s ease-out\n- `svg` → transition: all 0.3s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes desktop_delayPointerEvents__Nuz1Z  {\n  0%  {\n  pointer-events: none;\n  } 99%  {\n  pointer-events: none;\n  } 100%  {\n  pointer-events: all;\n  }\n}\n@keyframes mobile_fadeDown__v53FM  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-16px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark component-demo with red accent; all components match; all 3 @keyframes verbatim (fade-in, desktop_delayPointerEvents, mobile_fadeDown)"},{"id":"covalent","name":"Covalent","vendor":"Teradata","fw":["Angular"],"theme":"企业级 / 数据","link":"https://teradata.github.io/covalent","repo":"https://github.com/Teradata/covalent","license":"MIT","chips":["Layout","DataTable","Chart","File"],"kind":"item","img":"previews/covalent.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Covalent — above-the-fold (DARK component gallery card)\n\nThe preview screenshot shows a **unified dark UI gallery card** format for this site.\n\nBACKGROUND: very dark navy/charcoal (#1a1a2e or #161b2e), full viewport 1280x820.\n\nTOP BAR:\n- Left: three small colored dots (red, yellow, green — like macOS traffic lights) followed by brand name \"Covalent\" in white bold (~20px).\n- Below brand: subtitle \"Angular · 企业级 / 数据\" in smaller light-grey text (~13px).\n\nCOMPONENT SHOWCASE ROW (spaced horizontally):\n- \"Primary\" button: FILLED pink/coral-red (#e74c6b or #f0657c), rounded ~8px, white text.\n- \"Default\" button: OUTLINE (transparent bg, light grey border #445, light text).\n- Search input: dark bg (#252d40 or similar), rounded, placeholder \"Type here...\", light placeholder text.\n- Toggle switch: pill-shaped, left side pink/red filled, right empty.\n- \"Badge\": small pill, teal/cyan bg (#1abc9c-ish), white text, rounded-full.\n- \"Select\" dropdown: dark outline button with ▼ chevron, light text.\n\nCARD COMPONENT:\n- A bordered card below the showcase row:\n  - Title \"Card title\" (white bold).\n  - Body text \"This is a preview of the component look.\" (light grey).\n\nBOTTOM TAB BAR:\n- Row of outlined tab buttons at bottom: Layout, DataTable, Chart, File.\n- Each tab: transparent bg, subtle border, light text, rounded ~8px.\n\nTYPOGRAPHY: system sans-serif (-apple-system, Segoe UI, Roboto). White/light text on dark.\nVIBE: dark-mode component library showcase / demo card.\n\nVIEWPORT: 1280px wide; above-the-fold fits 820px. Single self-contained HTML, inline CSS, vanilla, system fonts, no external assets.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.mat-drawer-backdrop.ng-star-inserted` → transition: background-color, visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `mat-sidenav.mat-drawer.mat-sidenav` → transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `mat-sidenav-content.mat-drawer-content.mat-sidenav-content` → transition: transform, margin-left, margin-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)\n- `button.mdc-button.mat-mdc-button-base` → transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes _mat-menu-enter  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes _mat-menu-exit  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-smooth  {\n  0%, 20%  {\n  opacity: 1;\n  } 60%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-phase  {\n  0%, 20%  {\n  opacity: 1;\n  } 90%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes monaco-cursor-expand  {\n  0%, 20%  {\n  transform: scaleY(1);\n  } 80%, 100%  {\n  transform: scaleY(0);\n  }\n}\n@keyframes fadein  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes monaco-findInput-highlight-0  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-1  {\n  0%  {\n  background: rgba(253, 255, 0, 0.8);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-0  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 100%  {\n  background: transparent;\n  }\n}\n@keyframes monaco-findInput-highlight-dark-1  {\n  0%  {\n  background: rgba(255, 255, 255, 0.44);\n  } 99%  {\n  background: transparent;\n  }\n}\n@keyframes progress  {\n  0%  {\n  transform: translateX(0%) scaleX(1);\n  } 50%  {\n  transform: translateX(2500%) scaleX(3);\n  } 100%  {\n  transform: translateX(4900%) scaleX(1);\n  }\n}\n@keyframes flash-background  {\n  0%  {\n  background-color: lightgreen;\n  } 100%  {\n  background-color: none }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色企业级组件卡片与预览一致:珊瑚红 Primary、粉/暗分割切换开关、青色 Badge、Layout/DataTable/Chart/File 标签。已写入全部 Material 风格关键帧与 hover 过渡。"},{"id":"fundamental-ngx","name":"Fundamental NGX","vendor":"SAP","fw":["Angular"],"theme":"企业设计系统","link":"https://sap.github.io/fundamental-ngx","repo":"https://github.com/SAP/fundamental-ngx","license":"Apache","chips":["Button","Input","Table","Modal"],"kind":"item","img":"previews/fundamental-ngx.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Fundamental NGX — above-the-fold (DARK component gallery card)\n\nThe preview shows a **dark UI gallery card** format.\n\nBACKGROUND: very dark navy (#1a1a2e), full viewport 1280x820.\n\nTOP: traffic-light dots (red/yellow/green) + \"Fundamental NGX\" (white bold). Subtitle: \"Angular · 企业设计系统\" (light grey).\n\nCOMPONENT ROW:\n- \"Primary\" button: FILLED pink/coral-red (#e74c6b), rounded 8px, white text.\n- \"Default\": outline button.\n- Search input: dark bg #252d40, placeholder \"Type here...\".\n- Toggle switch (pink left).\n- \"Badge\" pill (teal/cyan bg #1abc9c).\n- \"Select ▼\" dropdown.\n\nCARD: bordered box with \"Card title\" + \"This is a preview of the component look.\"\n\nTABS at bottom: Button, Input, Table, Modal.\n\nVIEWPORT 1280x820. Single HTML, inline CSS, vanilla. System fonts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.fd-docs-toolbar__logo` → transition: opacity 0.2s ease\n- `button.fd-docs-toolbar__action.fd-docs-toolbar__action--labeled` → transition: background-color, border-color, box-shadow 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `button.fd-docs-toolbar__action.fd-docs-toolbar__action--muted` → transition: opacity, background-color, border-color 0.2s, 0.2s, 0.2s ease, ease, ease 0s, 0s, 0s\n- `div.fd-docs-sidebar` → transition: margin, box-shadow 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n- `div.fd-docs-command-bar` → transition: border-color, box-shadow 0.2s, 0.3s ease, ease 0s, 0s\n- `fd-icon.fd-docs-command-bar__icon.sap-icon` → transition: color 0.2s ease\n- `button.fd-docs-command-bar__action` → transition: background-color, color 0.15s, 0.15s ease, ease 0s, 0s\n- `fd-icon.fd-docs-command-bar__chevron.sap-icon` → transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)\n- `kbd.fd-docs-command-bar__action-kbd` → transition: background-color, border-color, color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `button.fd-docs-nav__header` → transition: background-color 0.15s ease\n- `div.fd-docs-content__margin` → transition: padding 0.5s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes grow  {\n  0%, 50%, 100%  {\n  transform: scale(0.5);\n  } 25%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色企业设计系统卡片与预览一致:珊瑚红 Primary、粉/暗分割切换、青色 Badge、Button/Input/Table/Modal 标签。已写入 grow 关键帧与相关过渡。"},{"id":"agnosui","name":"AgnosUI","vendor":"AgnosUI","fw":["Angular"],"theme":"Headless / 可定制","link":"https://agnosui.github.io","repo":"https://github.com/agnosui/agnosui","license":"MIT","chips":["Accordion","Datepicker","Rating","Slider"],"kind":"item","img":"previews/agnosui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: AgnosUI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"AgnosUI\" white bold. Subtitle: \"Angular · Headless / 可定制\".\n\nCOMPONENT ROW:\n- Primary: pink #e74c6b filled, 8px radius.\n- Default: outline.\n- Search input (dark).\n- Toggle (pink left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Accordion, Datepicker, Rating, Slider.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"深色 Headless 组件卡片与预览一致:珊瑚红 Primary、粉/暗分割切换、青色 Badge、Accordion/Datepicker/Rating/Slider 标签。入场与 hover 过渡已实现。"},{"id":"ng-aquila","name":"ng-aquila","vendor":"Nationwide","fw":["Angular"],"theme":"金融设计系统","link":"https://designsystem.nationwide.com","repo":"https://github.com/klabrecque/ng-aquila","license":"Apache","chips":["Button","Input","Card","Stepper"],"kind":"item","img":"previews/ng-aquila.png","prompt":""},{"id":"devui-ng","name":"DevUI","vendor":"华为 Huawei","fw":["Angular"],"theme":"企业级 / 华为","link":"https://devui.design","repo":"https://github.com/DevCloudFE/ng-devui","license":"MIT","chips":["Button","Input","Table","Tree"],"kind":"item","img":"previews/devui-ng.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: DevUI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"DevUI\" white bold. Subtitle: \"Angular · 企业级 / 华为\".\n\nCOMPONENT ROW:\n- Primary: pink #e74c6b filled.\n- Default: outline.\n- Search input (dark).\n- Toggle (pink left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Button, Input, Table, Tree.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"oblique","name":"Oblique","vendor":"Swiss Post","fw":["Angular"],"theme":"政府 / 企业","link":"https://oblique.obs.ch","repo":"https://github.com/obliqueOTypescript/oblique","license":"MIT","chips":["MasterLayout","Nav","Form","Notification"],"kind":"item","img":"previews/oblique.png","prompt":""},{"id":"sbb-angular","name":"sbb-angular","vendor":"SBB","fw":["Angular"],"theme":"交通 / 公共设计","link":"https://angular.sbb.ch","repo":"https://github.com/sbb-design-systems/angular","license":"MIT","chips":["Button","Train","Map","Form"],"kind":"item","img":"previews/sbb-angular.png","prompt":""},{"id":"ngx-bootstrap","name":"ngx-bootstrap","vendor":"ValorSoftware","fw":["Angular"],"theme":"Bootstrap 风","link":"https://valor-software.com/ngx-bootstrap","repo":"https://github.com/valor-software/ngx-bootstrap","license":"MIT","chips":["Modal","Tabs","Tooltip","Datepicker"],"kind":"item","img":"previews/ngx-bootstrap.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: ngx-bootstrap homepage — above-the-fold (v2 fix)\n\nThe reference shows the actual site's above-the-fold:\n\nTOP NAV BAR (dark navy ~#1a1d2e or #161b22, height ~56px):\n- Far left: small RED square with white \"B\" letter (Bootstrap logo).\n- Next: brand \"ngx-bootstrap\" (white, bold, ~18px).  \n- Then nav links: \"Docs\", \"Components\", \"GitHub\" (white/light grey, ~13px).\n- A wide search input field (dark bg, rounded, placeholder \"Search...\", flex-grow).\n- Right side: 3 small circular icon placeholders (GitHub, Discord, etc.) — muted circles.\n\nHERO AREA (light/white background below nav, generous padding):\n- Centered content.\n- Large bold headline: \"Develop better. Faster.\" (dark navy/black, ~52px font-weight 800).\n- Two buttons side by side:\n  - \"Get started\" — FILLED blue #0D6EFD (Bootstrap primary), white text, border-radius 8px, ~14px 28px padding.\n  - \"Documentation\" — OUTLINE (transparent bg, blue border #0D6EFD, blue text, same radius/padding).\n- Below buttons area: a LARGE prominent red Bootstrap shield/logo — a hexagon-like shield shape with a huge white \"B\" inside (red fill #dc3545 or similar).\n\nCOLORS: nav bg #1a1d2e, body bg #f8fafc, headline color #1a202c, accent blue #0D6EFD, Bootstrap red #dc3545.\nTYPOGRAPHY: Manrope / Roboto / system sans-serif.\n\nVIEWPORT: 1280px; above-the-fold fits 820px. Single HTML, inline CSS, vanilla.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input` → transition: border-color, box-shadow 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `a.btn.btn-primary` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 1rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"首屏与预览一致:深色导航栏、Bootstrap 红色 B 标、Get started/Documentation 按钮、红色盾牌徽标与底部深色弧线。已写入 Bootstrap 关键帧与按钮过渡。"},{"id":"meltui","name":"Melt UI","vendor":"Melt","fw":["Svelte"],"theme":"Headless / 无样式","link":"https://melt-ui.com","repo":"https://github.com/melt-ui/melt-ui","license":"MIT","chips":["Menu","Dialog","Select","Tooltip"],"kind":"item","img":"previews/meltui.png","prompt":""},{"id":"bitsui","name":"Bits UI","vendor":"Bits UI","fw":["Svelte"],"theme":"无样式 / 可定制","link":"https://www.bits-ui.com","repo":"https://github.com/huntabyte/bits-ui","license":"MIT","chips":["Accordion","Dialog","Datepicker","Toast"],"kind":"item","img":"previews/bitsui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Bits UI — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"Bits UI\" white bold. Subtitle: \"Svelte · 无样式 / 可定制\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500 or #e65100), 8px radius, white text.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Accordion, Dialog, Datepicker, Toast.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.spin_anim.ml-auto` → animation: svelte-14ahnsa-spin 5.1s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.data-active:text-foreground.data-active:bg-black/5` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.rounded-input.hover:bg-dark-10` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.bg-background-alt.text-foreground/60` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `span.bg-background.data-[state=unchecked]:shadow-mini` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  filter: blur(var(--tw-enter-blur,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  filter: blur(var(--tw-exit-blur,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--bits-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--bits-collapsible-content-height);\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--bits-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n@keyframes enter-from-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes enter-from-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(-200px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes exit-to-right  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(200px);\n  }\n}\n@keyframes exit-to-left  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-200px);\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.9);\n  } 100%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  }\n}\n@keyframes scale-out  {\n  0%  {\n  opacity: 1;\n  transform: rotateX(0deg) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: rotateX(-10deg) scale(0.95);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500, 14 keyframes + spin verbatim; spec-faithful"},{"id":"svar","name":"SVAR","vendor":"SVAR","fw":["Svelte"],"theme":"数据组件 / 表格","link":"https://svar.dev","repo":"https://github.com/svar-widget/svar-svelte","license":"MIT","chips":["Grid","Gantt","Kanban","FileManager"],"kind":"item","img":"previews/svar.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: SVAR — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"SVAR\" white bold. Subtitle: \"Svelte · 数据组件 / 表格\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500), 8px radius, white text.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Grid, Gantt, Kanban, FileManager.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.cursor.astro-7nw46rgj` → animation: blink 0.8s ease infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.menu.astro-63r5eucr` → transition: background-color 0.4s ease\n- `div.menu-content.astro-63r5eucr` → transition: border-radius 0.3s ease\n- `img.visible.astro-hgja5ook` → transition: opacity 1s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  50%  {\n  opacity: 0;\n  }\n}\n@keyframes slideInRight  {\n  0%  {\n  transform: translate(100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes slideOutLeft  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slideInLeft  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes slideOutRight  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes flight  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px) rotate(-90deg);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-500px, -500px) rotate(-90deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500, blink cursor; 6 keyframes verbatim"},{"id":"sveltestrap","name":"Sveltestrap","vendor":"Sveltestrap","fw":["Svelte"],"theme":"Bootstrap 风","link":"https://sveltestrap.js.org","repo":"https://github.com/bestguy/sveltestrap","license":"MIT","chips":["Button","Card","Modal","Navbar"],"kind":"item","img":"previews/sveltestrap.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate: Sveltestrap — above-the-fold (DARK component gallery card)\n\nDark UI gallery card. Background #1a1a2e.\n\nTOP: dots + \"Sveltestrap\" white bold. Subtitle: \"Svelte · Bootstrap ⚡\".\n\nCOMPONENT ROW:\n- Primary: ORANGE filled (#f06500), 8px radius.\n- Default: outline.\n- Search input (dark).\n- Toggle switch (ORANGE left).\n- Badge pill (teal #1abc9c).\n- Select ▼.\n\nCARD: \"Card title\" + preview text.\n\nTABS: Button, Card, Modal, Navbar.\n\nVIEWPORT 1280x820. Single HTML, inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gallery card #1a1a2e, orange #f06500; no @keyframes required in spec"},{"id":"smelte","name":"Smelte","vendor":"Smelte","fw":["Svelte"],"theme":"Material 风","link":"https://smeltejs.com","repo":"https://github.com/matyunya/smelte","license":"MIT","chips":["Button","Card","Input","DataTable"],"kind":"item","img":"previews/smelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Smelte above-the-fold UI (smeltejs.com)\n\nBuild a single-file HTML/CSS recreation of the Smelte homepage above-the-fold (1280x820).\nSmelte = \"Material design using Tailwind CSS for Svelte\", a UI framework with a very small footprint.\n\n## Brand / layout\n- Sticky top navigation bar, dark background `#1d1d1d`, full width, ~64px tall, white text.\n- Left: brand wordmark \"SMELTE\" in bold white, letter-spacing, with a small circular logo mark.\n- Center/right: horizontal nav links in white, ~14px: Components, Typography, Color, Breakpoints, Dark mode, Text fields, Buttons, Selection controls, Lists, Selects.\n- Far right: two round icon buttons (transparent, circular) — a sun icon (\"wb_sunny\", dark-mode toggle) and a menu icon.\n\n## Hero (above the fold)\n- Dark page background (continue #1d1d1d or a subtle vertical gradient to near-black).\n- Large greeting \"Hi\" (big, friendly) and a prominent heading:\n  \"Material design using Tailwind CSS for Svelte\"\n- Subcopy: \"UI framework with very small footprint\"\n- Accent color: Material blue `#1976d2` (used for links/buttons/highlights).\n- Optionally a rounded card / code-ish panel and a primary button \"Get Started\".\n\n## Typography / vibe\n- Font: Roboto, sans-serif (system fallback).\n- Material Design feel: clean, generous spacing, subtle elevation, rounded corners (~8px), soft shadows.\n- Overall dark, modern, developer-focused.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets/images.\n- Fixed to display nicely within 1280x820 viewport.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.duration-100.relative` → transition: all 0.1s ease\n- `i.material-icons.icon` → transition: all 0.2s cubic-bezier(0.4, 0, 1, 1)\n- `a.px-4.github` → transition: all 0.3s ease-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ping  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: none;\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@-webkit-keyframes ripple-normal  {\n  100%  {\n  transform: scale(2.5);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes ripple-centered  {\n  100%  {\n  transform: scale(1);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark Material hero #1d1d1d, blue #1976d2; 5 keyframes verbatim (incl webkit)"},{"id":"attractions","name":"Attractions","vendor":"illright","fw":["Svelte"],"theme":"现代 / 轻量","link":"https://attractions.scalar.dev","repo":"https://github.com/illright/attractions","license":"MIT","chips":["Button","Card","Tooltip","Notification"],"kind":"item","img":"previews/attractions.png","prompt":""},{"id":"svelteui","name":"SvelteUI","vendor":"SvelteUI","fw":["Svelte"],"theme":"现代组件","link":"https://svelteui.dev","repo":"https://github.com/svelteuidev/svelteui","license":"MIT","chips":["Button","Card","Modal","AppShell"],"kind":"item","img":"previews/svelteui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SvelteUI above-the-fold UI (svelteui.dev)\n\nBuild a single-file HTML/CSS recreation of the SvelteUI homepage above-the-fold (1280x820).\nSvelteUI = \"A variety of components, actions, transition and utility functions.\"\n\n## Brand / layout\n- Light/white page (`#ffffff` background, near-black text).\n- Top navigation bar, white, with brand \"SvelteUI\" on the left (bold), and nav links on the right:\n  Docs, Components, Themes, Blog, GitHub (text links, dark).\n- Clean, airy, centered hero.\n\n## Hero (above the fold)\n- Centered big heading (two lines):\n  \"Create applications in less time than ever before\"\n  \"Regardless of design experience\"\n- Subcopy (optional): short line about flexible Svelte components.\n- Two call-to-action buttons side by side:\n  - \"Get Started\" — primary, blue filled `#228be6`, white text, rounded 4px.\n  - \"Source Code\" — dark filled `#141517`, white text, rounded 4px.\n- Accent / brand color: SvelteUI blue `#228be6`.\n\n## Typography / vibe\n- Font: system-ui / -apple-system / Segoe UI / Roboto sans-serif.\n- Modern, minimal, lots of whitespace, centered hero, friendly developer-library vibe.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.gradient-animation.svelte-1mvpc2r` → animation: svelte-1mvpc2r-hue 20s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `li.searchBox` → transition: all 0.1s ease-in\n- `a.svelteui-c-gzYEUW.svelteui-ActionIcon-root` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes svelteui-k-cacvRj  {\n  0%, 100%  {\n  opacity: 0.4;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes svelteui-k-fMzrA  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 40px 0px;\n  }\n}\n@keyframes svelte-13bvii3-bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: translateY(0px);\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@keyframes svelte-13bvii3-ping  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@keyframes svelte-13bvii3-pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes svelte-13bvii3-float  {\n  0%  {\n  transform: translateY(0px);\n  } 30%  {\n  transform: translateY(-10px);\n  } 50%  {\n  transform: translateY(4px);\n  } 70%  {\n  transform: translateY(-15px);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes svelte-13bvii3-pulsate  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale(1.2);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes svelte-1mvpc2r-hue  {\n  0%  {\n  filter: hue-rotate(0deg);\n  } 100%  {\n  filter: hue-rotate(-360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"light centered hero, blue #228be6; 8 keyframes verbatim, hue rotation"},{"id":"grailui","name":"Grail UI","vendor":"Grail UI","fw":["Svelte"],"theme":"Headless / 可访问","link":"https://grail-ui.vercel.app","repo":"https://github.com/grail-ui/grail-ui","license":"MIT","chips":["Accordion","Dialog","Slider","Tooltip"],"kind":"item","img":"previews/grailui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Grail UI above-the-fold UI (grail-ui.vercel.app)\n\nBuild a single-file HTML/CSS recreation of the Grail UI homepage above-the-fold (1280x820).\nGrail UI = \"A library of accessible component primitives, actions and utilities for Svelte.\"\n\n## Brand / layout\n- Light page. Sticky translucent header `rgba(255,255,255,0.9)` with blur, dark navy text `#181a2a`.\n- Left: brand \"Grail UI\" (bold).\n- Nav links (right of brand): a version badge \"v0.10.1\", then \"Docs\", \"Components\".\n- Right side of header: \"GET STARTED\" (dark filled), \"GITHUB\" (outline) buttons, and a round \"Open site navigation\" icon button.\n\n## Hero (above the fold)\n- Centered, light background.\n- Big heading: \"Put control back in developers' hands.\"\n- Subtitle (gray, ~#6b7280-ish but derived from navy at 60%): \n  \"A set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience.\"\n- Two buttons centered: \"GET STARTED\" (dark filled `#181a2a`, light text, radius 8px) and \"GITHUB\" (outline, radius 8px).\n\n## Typography / vibe\n- Font: \"Mona Sans\", system-ui, sans-serif.\n- Colors: ink/navy `#181a2a`, light background, dark filled buttons, clean and accessible feel.\n- Rounded corners 8px on buttons; generous spacing.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.mr-3.flex-none` → transition: all 0.2s ease\n- `svg` → transition: transform, opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes button-pop  {\n  0%  {\n  transform: scale(var(--btn-focus-scale, .95));\n  } 40%  {\n  transform: scale(1.02);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes checkmark  {\n  0%  {\n  background-position-y: 5px;\n  } 50%  {\n  background-position-y: -2px;\n  } 100%  {\n  background-position-y: 0px;\n  }\n}\n@keyframes progress-loading  {\n  50%  {\n  left: 107%;\n  }\n}\n@keyframes radiomark  {\n  0%  {\n  box-shadow: 0 0 0 12px hsl(var(--b1)) inset,0 0 0 12px hsl(var(--b1)) inset;\n  } 50%  {\n  box-shadow: 0 0 0 3px hsl(var(--b1)) inset,0 0 0 3px hsl(var(--b1)) inset;\n  } 100%  {\n  box-shadow: 0 0 0 4px hsl(var(--b1)) inset,0 0 0 4px hsl(var(--b1)) inset;\n  }\n}\n@keyframes rating-pop  {\n  0%  {\n  transform: translateY(-0.125em);\n  } 40%  {\n  transform: translateY(-0.125em);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes toast-pop  {\n  0%  {\n  transform: scale(0.9);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"light translucent header, navy #181a2a; 6 keyframes verbatim"},{"id":"atoui","name":"Ato UI","vendor":"Ato UI","fw":["Svelte"],"theme":"现代 / 主题化","link":"https://ato-ui.com","repo":"https://github.com/ato-ui/ato-ui","license":"MIT","chips":["Button","Card","Modal","Toast"],"kind":"item","img":"previews/atoui.png","prompt":""},{"id":"m3-svelte","name":"M3 Svelte","vendor":"techniq","fw":["Svelte"],"theme":"Material 3","link":"https://github.com/techniq/m3-svelte","repo":"https://github.com/techniq/m3-svelte","license":"MIT","chips":["Button","Card","Switch","Slider"],"kind":"item","img":"previews/m3-svelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate m3-svelte above-the-fold UI — v2 (GitHub 404 page)\n\n## FIXES from v1 comparison:\nThe reference IS the GitHub 404 page. Improve fidelity:\n\n### Header (fuller GitHub chrome)\n- Dark `#24292f` bar, ~64px tall.\n- Left: GitHub cat/octocat mark (white circle with cat silhouette).\n- Center-left nav dropdowns (text only): Platform ▾, Solutions ▾, Resources ▾, Open Source ▾, Enterprise ▾, Pricing.\n- Right: 🔍 search icon, \"Sign in\" button (outline, border #d0d7de, radius 6px), \"Sign up\" button (green filled `#238636`), grid icon.\n\n### Hero area (the 404 scene)\n- Light background below header (white or very light gray).\n- Left side: giant \"**404**\" (very large, ~120px+, bold, dark), speech bubble saying\n  \"**This is not the web page you are looking for.**\"\n- Right side: A \"**Sign in to GitHub**\" card (white, rounded, shadowed):\n  - Title \"Sign in to GitHub\"\n  - Input: \"Username or email address\"\n  - Input: \"Password\" + \"Forgot password?\" link\n  - Green \"Sign in\" button\n  - \"or continue with other methods\" link\n- Background: subtle desert/sand tone behind the 404 area (light tan/beige gradient).\n\n### Below hero\n- \"Find code, projects, and people on GitHub:\" label + wide search input + \"Search\" button.\n- Footer line: \"Contact Support – GitHub Status – @githubstatus\"\n- Newsletter section: \"THE DEVELOPER NEWSLETTER\" + description + green \"Subscribe\" button.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only.\n- Use CSS shapes/colors to approximate the octocat scene (no external images).\n- Display within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `a.Button--link.Button--medium` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.position-relative` → transition: all 0.25s ease-in\n- `a.Primer_Brand__Button-module__Button___scH9Z.Primer_Brand__Button-module__Button--primary___MSbnU` → transition: background-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"GitHub 404 page, dark header #24292f, 404 + login card; 14 keyframes verbatim"},{"id":"konsta","name":"Konsta","vendor":"Konsta","fw":["Svelte"],"theme":"移动 / 原生风","link":"https://konsta.io","repo":"https://github.com/konstaui/konsta","license":"MIT","chips":["Button","Navbar","Card","Sheet"],"kind":"item","img":"previews/konsta.png","prompt":""},{"id":"yesvelte","name":"Yesvelte","vendor":"Yesvelte","fw":["Svelte"],"theme":"现代组件","link":"https://yesvelte.com","repo":"https://github.com/yesvelte/yesvelte","license":"MIT","chips":["Button","Card","Modal","Alert"],"kind":"item","img":"previews/yesvelte.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate YeSvelte above-the-fold UI (yesvelte.com) — v2\n\n## FIXES from v1 comparison:\n- **Hero background is bright/vibrant BLUE** (royal blue ~`#2563eb` or `#2a6fdb`), NOT dark navy. The entire hero band is this blue.\n- **Header**: White/light bar at top. Left: swirly logo mark (abstract \"Y\" swirl) + \"YeSvelte\" text in white-on-blue (or dark on white header). Right: icon+text links: Github, Reddit, Discord, Try on Repl, Tabler dropdown, moon/dark toggle.\n- **Hero content** (centered on the blue background):\n  - Big white heading: \"Empower your development with our extensive UI component library\"\n  - White subtext: \"A flexible & powerful Svelte library for building web applications quickly and easily\"\n  - Two buttons side by side: a command-style input/button showing \"npm i yesvelte@next\" with copy icon + a \"Get Started\" button (white bg with blue text or vice versa)\n- **Below the hero** (still above fold): two feature cards visible:\n  - Card 1: \"Rapid application development\" — icon + title + description about CSS framework handling\n  - Card 2: \"Framework independence\" — icon + title + description about HTML/CSS without framework-specific styles\n  - Cards are white, rounded, subtle shadow, sitting on a light gray page bg below the blue wave.\n\n## Layout summary\n- Page bg below hero: light `#f6f8fb`.\n- Blue hero section takes up top ~60% of viewport.\n- White thin header bar overlaid on top of blue (or just above it).\n- The blue area has a curved/wave bottom edge transitioning to light gray.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.y-el.y-el-p-3` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `div.y-el.y-popup` → transition: opacity, scale 0.15s, 0.15s ease, ease 0s, 0s\n- `div.y-el.y-card` → transition: transform, opacity, box-shadow 0.3s, 0.3s, 0.3s ease-out, ease-out, ease-out 0s, 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 0.5rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.1;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 1;\n  transform: scale3d(0.8, 0.8, 0.8);\n  } 50%  {\n  opacity: 1;\n  transform: scaleX(1);\n  } 100%  {\n  opacity: 1;\n  transform: scale3d(0.8, 0.8, 0.8);\n  }\n}\n@keyframes tada  {\n  0%  {\n  transform: scaleX(1);\n  } 10%, 5%  {\n  transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);\n  } 15%, 25%, 35%, 45%  {\n  transform: scale3d(1.1, 1.1, 1.1) rotate(5deg);\n  } 20%, 30%, 40%  {\n  transform: scale3d(1.1, 1.1, 1.1) rotate(-5deg);\n  } 50%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes rotate-360  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes blink  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes animated-dots  {\n  0%  {\n  transform: translateX(-100%);\n  }\n}\n@keyframes progress-indeterminate  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%, 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@keyframes status-pulsate-main  {\n  40%  {\n  transform: scale(1.25);\n  } 60%  {\n  transform: scale(1.25);\n  }\n}\n@keyframes status-pulsate-secondary  {\n  10%  {\n  transform: scale(1);\n  } 30%  {\n  transform: scale(3);\n  } 80%  {\n  transform: scale(3);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes status-pulsate-tertiary  {\n  25%  {\n  transform: scale(1);\n  } 80%  {\n  opacity: 0;\n  transform: scale(3);\n  } 100%  {\n  opacity: 0;\n  transform: scale(3);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"bright blue hero #2563eb, npm cmd + feature cards; 14 keyframes verbatim"},{"id":"solid-ui","name":"Solid UI","vendor":"Solid UI","fw":["Solid"],"theme":"Radix 风格","link":"https://solid-ui.com","repo":"https://github.com/solidjs-community/solid-ui","license":"MIT","chips":["Dialog","Dropdown","Select","Toast"],"kind":"item","img":"previews/solid-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SolidUI above-the-fold UI (solid-ui.com) — v2\n\n## FIXES from v1 comparison:\nThe reference preview shows a **DARK-THEMED** component showcase page, NOT the white shadcn-mail layout.\nRebuild from scratch matching the dark component gallery look.\n\n## Layout (dark theme)\n- **Page background**: Dark navy/charcoal (~`#0f172a` or `#121212`), light text.\n- **Header bar**: Dark, with brand \"Solid UI\" (bold white) and subtitle/tagline \"Solid · Radix 风格\" (smaller, gray).\n- **Component demo area** (below header):\n  - A row of interactive-looking components:\n    - \"Primary\" button — filled accent blue (`#3b82f6`), rounded 8px, white text\n    - \"Default\" button — outlined (light border), dark text on slightly lighter bg\n    - Text input field: placeholder \"Type here...\", rounded, dark bg, light border\n    - Toggle switch: ON state (blue track, round knob)\n    - \"Badge\" badge pill (blue/dark)\n    - Select dropdown: \"Select\" with down arrow\n  - These sit in a subtle container/card area or directly on the dark background.\n- **Card component**: Below the demo row, a rounded card:\n  - Title: \"Card title\"\n  - Body text: \"This is a preview of the component look.\"\n  - Light card bg, dark text, subtle border/shadow on dark page.\n- **Bottom row**: Pill/category buttons: Dialog, Dropdown, Select, Toast (rounded outline pills).\n\n## Typography / vibe\n- Font: system-ui / sans-serif.\n- Dark developer-tool aesthetic. Clean spacing, rounded corners ~8px.\n- Accent: bright blue `#3b82f6`.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.transition-colors.hover:text-foreground/80` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes accordion-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--kb-accordion-content-height);\n  }\n}\n@keyframes accordion-up  {\n  0%  {\n  height: var(--kb-accordion-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes caret-blink  {\n  0%, 70%, 100%  {\n  opacity: 1;\n  } 20%, 50%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy #0f172a gallery, blue #3b82f6; 6 keyframes verbatim"},{"id":"hope-ui","name":"Hope UI","vendor":"Hope UI","fw":["Solid"],"theme":"Chakra 风格","link":"https://hope-ui.com","repo":"https://github.com/hope-ui/hope-ui","license":"MIT","chips":["Button","Card","Input","Modal"],"kind":"item","img":"previews/hope-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Hope UI above-the-fold UI (hope-ui.com)\n\nNOTE: The structured read returned an essentially empty page (client-rendered SPA, no captured\ntext/colors). Recreation below is built from general knowledge of Hope UI's typical landing page.\n\n## Brand / layout\n- Dark, gradient hero background (deep navy/violet gradient).\n- Top nav: brand \"Hope UI\" left (bold, light), nav links right: Docs, Components, Themes, GitHub.\n\n## Hero (above the fold)\n- Centered.\n- Brand/logo mark \"Hope UI\" near top.\n- Big heading: \"Powerful and flexible Svelte component library\" (or similar).\n- Subheading: \"to create beautiful and accessible web applications.\"\n- Two buttons: \"Get Started\" (accent filled) and \"GitHub\" (outline / light).\n- Accent: Hope UI blue/violet (use `#4f46e5`/`#6366f1` gradient).\n\n## Typography / vibe\n- Modern, dark, gradient, glow accents, developer-library landing vibe.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark violet gradient hero; no @keyframes required in spec"},{"id":"solid-headless-ui","name":"Solid Headless","vendor":"solidjs","fw":["Solid"],"theme":"无样式原语","link":"https://github.com/solidjs/solid-headless","repo":"https://github.com/solidjs/solid-headless","license":"MIT","chips":["Disclosure","Dialog","Listbox","Menu"],"kind":"item","img":"previews/solid-headless-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Solid Headless UI above-the-fold UI — v2\n\n## NOTE: The read.json captured a GitHub 404 page (repo URL returned 404). However the reference\npreview shows the actual site content — a **dark-themed component showcase**. Rebuild to match\nthe reference visual.\n\n## Layout (dark theme)\n- **Page background**: Very dark navy (~`#0b1120` or `#0d1117`), light text.\n- **Header bar** (dark): Brand \"**Solid Headless**\" (bold white) + subtitle/tagline \"**Solid · 无样式原语**\" (smaller gray).\n- **Component demo area** (below header):\n  - A row of components:\n    - \"**Primary**\" button — filled bright blue (`#3b82f6`), rounded 8px, white text\n    - \"**Default**\" button — outlined (light border), on slightly lighter dark bg\n    - Text input: placeholder \"Type here...\", rounded, dark bg, light border\n    - Toggle switch: ON state (blue track, round knob)\n    - \"**Badge**\" badge pill (blue/dark)\n    - Select dropdown: \"Select\" with down arrow\n- **Card component**: Below demo row, rounded card:\n  - Title: \"**Card title**\"\n  - Body: \"This is a preview of the component look.\"\n  - Light card bg, subtle border/shadow.\n- **Bottom row**: Category pills: **Disclosure**, **Dialog**, **Listbox**, **Menu** (rounded outline pills).\n\n## Typography / vibe\n- Font: system-ui / ui-sans-serif.\n- Dark developer-tool aesthetic, clean spacing, rounded corners ~8px.\n- Accent blue `#3b82f6`.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external assets.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `a.Button--link.Button--medium` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.position-relative` → transition: all 0.25s ease-in\n- `a.Primer_Brand__Button-module__Button___scH9Z.Primer_Brand__Button-module__Button--primary___MSbnU` → transition: background-color, border-color 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy #0b1120 gallery, blue #3b82f6; 14 keyframes verbatim"},{"id":"qwik-ui","name":"Qwik UI","vendor":"Qwik","fw":["Qwik"],"theme":"Headless / 可访问","link":"https://qwikui.com","repo":"https://github.com/QwikDev/qwik-ui","license":"MIT","chips":["Accordion","Dialog","Tabs","Tooltip"],"kind":"item","img":"previews/qwik-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Qwik UI above-the-fold UI (qwikui.com) — v2\n\n## FIXES from v1 comparison:\n\n### Header\n- Left: **Qwik logo mark** (a tilted diamond/rhombus shape in blue `#00bfff` or cyan-blue gradient) + \"**Qwik**\" wordmark (bold, blue).\n- Center nav: just \"Headless\" and \"Styled\" (not all those extra links).\n- Right side: \"Make it yours\" button (outlined, 6px radius), search icon, Discord icon, GitHub icon, sun/moon toggle.\n\n### Hero (centered, white bg)\n- Big heading: \"**Qwik** **UI**\" — \"Qwik\" in bright blue (`#00bfff`/`#0ea5e9`), \"UI\" in purple/violet (`#a78bfa` or similar).\n- Tagline line 1: \"Headless & styled copy-paste components\" (dark navy/black)\n- Tagline line 2: \"**automatically optimized for you**\" (in bright blue, emphasized)\n- Subtext below: \"Choose a kit and start building the future ⚡\"\n- No big CTA buttons here (the main CTA is in the header).\n\n### Below hero: Two large showcase cards (side by side)\nEach card ~45% width, rounded (~12px), with:\n- A large top image area (placeholder color block since no external assets):\n  - Left card (\"Headless\"): cool blue-toned abstract/artistic image placeholder\n  - Right card (\"Styled\"): vibrant purple/blue creative image placeholder\n- Card body: Title (\"Headless\" / \"Styled\") bold, plus description paragraph about each kit.\n- Cards sit on light gray/white background.\n\n## Typography / vibe\n- Font: ui-sans-serif, system-ui, sans-serif.\n- Clean, bright, modern. Lots of whitespace. Blue + purple accents.\n- Rounded corners 6–8px on elements, 12px on cards.\n\n## Constraints\n- Single self-contained HTML file, inline CSS, vanilla, system fonts only, no external images.\n- Use CSS gradients/solid-color blocks as image placeholders for the two showcase cards.\n- Display nicely within 1280x820.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.transition-color.ease-step` → transition: all 0.3s ease\n- `button.group.items-center` → transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.rounded-base.border` → transition: all 0.15s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes pulse  {\n  50%  {\n  opacity: 0.5;\n  }\n}\n@keyframes enter  {\n  0%  {\n  opacity: var(--tw-enter-opacity,1);\n  transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));\n  }\n}\n@keyframes exit  {\n  100%  {\n  opacity: var(--tw-exit-opacity,1);\n  transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));\n  }\n}\n@keyframes collapsible-down  {\n  0%  {\n  height: 0px;\n  } 100%  {\n  height: var(--qwikui-collapsible-content-height);\n  }\n}\n@keyframes collapsible-up  {\n  0%  {\n  height: var(--qwikui-collapsible-content-height);\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes sidebarOpen  {\n  0%  {\n  opacity: 0;\n  transform: translateX(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateX(0%);\n  }\n}\n@keyframes sidebarClose  {\n  0%  {\n  opacity: 1;\n  transform: translateX(0%);\n  } 100%  {\n  opacity: 0;\n  transform: translateX(100%);\n  }\n}\n@keyframes sidebarFadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes sidebarFadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"white hero, Qwik/UI blue+purple, 2 showcase cards; 9 keyframes verbatim"},{"id":"spectrum-wc","name":"Spectrum Web Components","vendor":"Adobe","fw":["Web Components"],"theme":"企业设计系统","link":"https://opensource.adobe.com/spectrum-web-components","repo":"https://github.com/adobe/spectrum-web-components","license":"Apache","chips":["Button","Card","Dialog","Picker"],"kind":"item","img":"previews/spectrum-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Spectrum Web Components above-the-fold UI\n\nRecreate the above-the-fold UI of Spectrum Web Components as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page. No scroll needed — everything fits within ~820px height.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10` or `#0d0e12`)\n- Top-left corner: macOS-style window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles inline with 8px gap\n- Immediately to the right of dots: **\"Spectrum Web Components\"** — white, bold, ~26px, sans-serif (system font stack)\n- Below title (line 2): **\"Web Components · 企业设计系统\"** — lighter gray `#9ca3af`, ~14px\n\n### Component Demo Section (~top third of viewport, padded ~32px from edges)\nRow of interactive-looking demo elements on the dark background:\n\n1. **Primary button**: solid violet-purple background (`#8b5cf6`), white text \"Primary\", rounded corners ~8px, padding ~12px 24px, no border, bold\n2. **Default button**: transparent/dark bg (`#1a1b23`) with subtle border `#2d2e3a`, white text \"Default\", same size/shape as Primary\n3. **Text input field**: dark bg (`#1a1b23`) with border `#2d2e3a`, rounded ~8px, placeholder \"Type here...\" in muted gray, width ~200px, padding ~10px 16px\n4. **Toggle switch**: iOS-style toggle, track is violet-purple `#8b5cf6` (ON position), circular knob on right side\n5. **Badge**: small pill/badge labeled \"Badge\" with dark bg and subtle accent border\n6. **Select dropdown**: labeled \"Select\" with down-arrow `▾`, dark-teal bg (`#1a3a3a` or similar dark tone)\n\nElements arranged in a flowing flex-wrap layout with ~12px gaps.\n\n### Card Section\n- A card container centered, max-width ~700px, with:\n  - Subtle border `#252630`, slightly lighter than bg, ~1px\n  - Rounded corners ~8px\n  - Padding ~20px\n  - Inside: **\"Card title\"** — white, bold, ~18px, margin-bottom 8px\n  - Below: **\"This is a preview of the component look.\"** — gray `#9ca3af`, ~14px\n\n### Bottom Tag/Pill Bar\n- Row of pill/tag buttons near bottom of viewport:\n  - Each pill: dark bg (`#1a1b23`), subtle border `#2d2e3a`, rounded-full or ~20px radius, white/light-gray text, padding ~8px 18px\n  - Labels: **Button**, **Card**, **Dialog**, **Picker**\n  - ~12px gaps between pills\n\n## Colors\n- Page background: `#0b0c10` (very dark, near black)\n- Surface/card bg: `#12131a`\n- Borders: `#252630` or `#2d2e3a`\n- Primary accent: `#8b5cf6` (violet-purple)\n- Text primary: `#ffffff`\n- Text secondary: `#9ca3af`\n\n## Typography\n- System fonts only: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\n- Title: 26px, weight 700\n- Subtitle: 14px, weight 400\n- Body text: 14-15px\n- Buttons: 14px, weight 600\n\n## Vibe\nDark-mode developer/design system documentation showcase. Clean, modern, minimal. Feels like a component library landing page or design system preview gallery.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `sp-button` → transition: border, color, background-color 0.13s, 0.13s, 0.13s linear, linear, linear 0s, 0s, 0s\n- `sp-link.header-anchor.spectrum-Heading` → transition: all 0.125s ease-in-out\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy/components all correct"},{"id":"ui5-wc","name":"UI5 Web Components","vendor":"SAP","fw":["Web Components"],"theme":"企业设计系统","link":"https://sap.github.io/ui5-webcomponents","repo":"https://github.com/SAP/ui5-webcomponents","license":"Apache","chips":["Button","Card","Table","Calendar"],"kind":"item","img":"previews/ui5-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate UI5 Web Components above-the-fold UI\n\nRecreate the above-the-fold UI of UI5 Web Components as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10`)\n- Top-left: macOS window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles\n- Title: **\"UI5 Web Components\"** — white, bold, ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** — lighter gray `#9ca3af`, ~14px\n\n### Component Demo Section\nRow of demo elements on dark bg:\n1. **Primary button**: violet-purple bg `#8b5cf6`, white text \"Primary\", rounded ~8px\n2. **Default button**: transparent/dark bg `#1a1b23` with border `#2d2e3a`, white text \"Default\"\n3. **Text input**: dark bg, border `#2d2e3a`, rounded ~8px, placeholder \"Type here...\"\n4. **Toggle switch**: violet-purple track `#8b5cf6` ON position\n5. **Badge**: small pill labeled \"Badge\"\n6. **Select ▾**: dark-teal bg dropdown\n\nFlex-wrap layout, ~12px gaps.\n\n### Card Section\n- Container max-width ~700px, border `#252630`, rounded ~8px, padding ~20px\n- **\"Card title\"** — white bold ~18px\n- **\"This is a preview of the component look.\"** — gray `#9ca3af`\n\n### Bottom Tag/Pill Bar\nPills: **Button**, **Card**, **Table**, **Calendar**\n\n## Colors\n- Bg: `#0b0c10`\n- Surface: `#12131a`\n- Borders: `#252630` / `#2d2e3a`\n- Primary: `#8b5cf6`\n- Text primary: `#fff`\n- Text secondary: `#9ca3af`\n\n## Typography\nSystem fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\nTitle: 26px bold; Body: 14px\n\n## Vibe\nDark-mode developer/design system showcase. Clean, minimal.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.skipToContent_G6ar` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `ul.dropdown__menu` → transition: opacity, transform, visibility 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `button.DocSearch.DocSearch-Button` → transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n- `div.navbar-sidebar__backdrop` → transition: opacity, visibility 0.2s ease-in-out\n- `a.button.button--primary` → transition: color, background, border-color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown__menu`:\n  **hover:** opacity: 1; transform: translateY(-1px)\n- `.DocSearch-Button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes b  {\n  100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes c  {\n  100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy/components all correct, 3 keyframes present"},{"id":"axa-pl","name":"AXA Pattern Library","vendor":"AXA","fw":["Web Components"],"theme":"金融 / 企业","link":"https://github.com/axa-ch/patterns-library","repo":"https://github.com/axa-ch/patterns-library","license":"MIT","chips":["Button","Card","Modal","Stepper"],"kind":"item","img":"previews/axa-pl.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate AXA Pattern Library above-the-fold UI\n\nRecreate the above-the-fold UI of AXA Pattern Library as a single self-contained HTML file at 1280px width.\n\n## Layout & Structure\nFull-viewport dark-themed component showcase gallery page.\n\n### Header / Title Bar\n- Background: very dark navy-black (`#0b0c10`)\n- Top-left: macOS window chrome dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`) — three 12px circles\n- Title: **\"AXA Pattern Library\"** — white, bold, ~26px\n- Subtitle: **\"Web Components · 金融 / 企业\"** — lighter gray `#9ca3af`\n\n### Component Demo Section\nSame row of elements:\n1. **Primary button**: violet-purple `#8b5cf6`, white text, rounded\n2. **Default button**: dark outlined\n3. **Text input**: placeholder \"Type here...\"\n4. **Toggle switch**: violet-purple ON\n5. **Badge**: pill labeled \"Badge\"\n6. **Select ▾**: dark-teal\n\n### Card Section\nBorder card with \"Card title\" + description text.\n\n### Bottom Tags\n**Button**, **Card**, **Modal**, **Stepper**\n\n## Colors\nBg: `#0b0c10`, Primary: `#8b5cf6`, Borders: `#252630`, Text: `#fff` / `#9ca3af`\nSystem fonts only. Dark-mode dev showcase vibe.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: all 15 keyframes + transitions verbatim"},{"id":"brightspace-ui","name":"Brightspace UI","vendor":"D2L","fw":["Web Components"],"theme":"教育 / 企业","link":"https://github.com/BrightspaceUI/core","repo":"https://github.com/BrightspaceUI/core","license":"Apache","chips":["Button","Card","Dialog","Dropdown"],"kind":"item","img":"previews/brightspace-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Brightspace UI above-the-fold UI\n\nRecreate the above-the-fold UI of Brightspace UI as a single self-contained HTML file at 1280px width.\n\n## Layout\nDark-themed component showcase gallery. Background `#0b0c10`.\n\n### Header\n- macOS dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`)\n- Title: **\"Brightspace UI\"** — white bold ~26px\n- Subtitle: **\"Web Components · 教育 / 企业\"** — gray `#9ca3af`\n\n### Demo Row\nPrimary (purple `#8b5cf6`), Default (outlined), input (\"Type here...\"), toggle (purple ON), Badge, Select ▾\n\n### Card\nBorder `#252630`, \"Card title\", description text\n\n### Tags\n**Button**, **Card**, **Dialog**, **Dropdown**\n\n## Colors/Vibe same as other dark gallery entries.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy correct, 15 keyframes present"},{"id":"clarity-core","name":"Clarity Core","vendor":"VMware","fw":["Web Components"],"theme":"企业设计系统","link":"https://clarity.design","repo":"https://github.com/vmware-clarity/core","license":"Apache","chips":["Button","Card","Modal","Alert"],"kind":"item","img":"previews/clarity-core.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Clarity Core above-the-fold UI\n\nRecreate the above-the-fold UI of Clarity Core as a single self-contained HTML file at 1280px width.\n\n## Layout\nDark-themed component showcase. Bg `#0b0c10`.\n\n### Header\n- macOS dots (red/yellow/green)\n- Title: **\"Clarity Core\"** — white bold ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** — gray\n\n### Demo Row\nPrimary (purple `#8b5cf6`), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n\n### Card\nBorder `#252630`, \"Card title\", description\n\n### Tags\n**Button**, **Card**, **Modal**, **Alert**\n\n## Same dark-gallery style.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `clr-vertical-nav.clr-vertical-nav.clr-nav-level-1` → transition: width 0.2s ease-in-out\n- `cds-icon.nav-group-trigger-icon.ng-tns-c1972165388-0` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dropdown-menu > *`:\n  **focus:** outline-color: Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes clr-progress-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes clr-progress-looper  {\n  0%  {\n  left: -100%;\n  } 100%  {\n  left: 100%;\n  }\n}\n@keyframes clr-skeleton-loading  {\n  0%  {\n  background-position-x: 0px;\n  } 100%  {\n  background-position-x: -200%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: 3 clarity keyframes + transitions present"},{"id":"kor","name":"Kor","vendor":"Microfrontend","fw":["Web Components"],"theme":"设计系统","link":"https://kor-ui.com","repo":"https://github.com/micro-lc/kor","license":"MIT","chips":["Button","Card","Dialog","Toast"],"kind":"item","img":"previews/kor.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Kor above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Kor\"** white bold ~26px\n- Subtitle: **\"Web Components · 设计系统\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Dialog**, **Toast**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `kor-app-bar` → transition: all 0.1s ease-out\n- `kor-pane` → transition: width 0.1s ease-out\n- `app-content.loaded` → transition: all 0.4s ease-out\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"momentum-ui","name":"Momentum UI","vendor":"Cisco","fw":["Web Components"],"theme":"企业设计系统","link":"https://momentum.design","repo":"https://github.com/momentum-design/momentum-ui","license":"Apache","chips":["Button","Card","Modal","Chart"],"kind":"item","img":"previews/momentum-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Momentum UI above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Momentum UI\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业设计系统\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Modal**, **Chart**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.search-input` → transition: border-color, color 0.2s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.sr-only`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline; outline-color: currentcolor\n- `-visible`:\n  **hover:** text-decoration: underline\n  **focus:** text-decoration: underline; outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: fade-in keyframe + transition present"},{"id":"pharos","name":"Pharos","vendor":"JSTOR","fw":["Web Components"],"theme":"学术 / 企业","link":"https://pharos.jstor.org","repo":"https://github.com/ithaka/pharos","license":"Apache","chips":["Button","Card","Dialog","Tabs"],"kind":"item","img":"previews/pharos.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Pharos above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Pharos\"** white bold ~26px\n- Subtitle: **\"Web Components · 学术 / 企业\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Dialog**, **Tabs**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** color: rgb(103, 103, 101); opacity: 1\n  **focus:** outline: 2px solid #000; outline-color: #000000\n- `#onetrust-banner-sdk.otFlat`:\n  **focus:** outline: 2px solid #000; outline-color: #000000\n- `#onetrust-banner-sdk .ot-sdk-button`:\n  **hover:** opacity: 0.9; color: rgb(51, 51, 51); border-color: #888; border-top-color: rgb(136, 136, 136); border-right-color: rgb(136, 136, 136); border-bottom-color: rgb(136, 136, 136); border-left-color: rgb(136, 136, 136); background-color: rgb(103, 103, 101); text-decoration: underline\n  **focus:** outline: 1px solid #000000; opacity: 0.9; outline-color: rgb(11, 163, 193); color: rgb(51, 51, 51); border-color: #888; border-top-color: rgb(136, 136, 136); border-right-color: rgb(136, 136, 136); border-bottom-color: rgb(136, 136, 136); border-left-color: rgb(136, 136, 136)\n- `#onetrust-banner-sdk .ot-sdk-column`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-grps-cntr *`:\n  **hover:** color: rgb(103, 103, 101)\n  **active:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n  **focus:** outline: 1px solid #000000; outline-color: #000000\n  **focus-visible:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n- `#onetrust-banner-sdk .ot-hide`:\n  **active:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n  **focus:** outline: 1px solid #000000; outline-color: rgb(16, 16, 16)\n  **focus-visible:** outline: 2px solid #101010; outline-color: rgb(16, 16, 16)\n- `input`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-chkbox input`:\n  **focus:** outline: 1px solid #000000\n- `#onetrust-pc-sdk .ot-chkbox label`:\n  **focus:** outline: 1px solid #000000\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: layout/colors/copy correct, 2 keyframes present"},{"id":"redhat-ds","name":"Red Hat Design System","vendor":"Red Hat","fw":["Web Components"],"theme":"企业 / 开源","link":"https://www.redhat.com/designsystem","repo":"https://github.com/redhat-design-system/red-hat-design-system","license":"CC-BY","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/redhat-ds.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Red Hat Design System above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Red Hat Design System\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业 / 开源\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Card**, **Form**, **Modal**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.container` → transition: max-width 0.5s ease\n- `a.btn.btn-primary` → transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.visually-hidden`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.navbar-brand`:\n  **hover:** outline: 0; color: rgb(255, 255, 255)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204); color: rgb(255, 255, 255)\n- `.card`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.btn`:\n  **hover:** outline: 0; color: rgb(255, 255, 255); border-color: #000; background-color: #000\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204); color: #000; background-color: rgba(0, 0, 0, 0.08); border-color: #000; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px; background: rgba(0,0,0,.08)\n  **focus:** outline: 0; outline-color: rgb(0, 102, 204); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px 0px; color: #000; border-color: #b00; background: rgba(0,0,0,.08); background-color: rgba(0, 0, 0, 0.08)\n- `.btn-link`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste_cursor_pointer`:\n  **hover:** outline: 0; color: rgb(0, 64, 128)\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste-cookie-link`:\n  **hover:** outline: 0; color: rgb(0, 64, 128); text-decoration: underline\n  **active:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n  **focus:** outline: #06c dotted 1px; outline-color: rgb(0, 102, 204)\n- `.truste-buttonsColumn button`:\n  **hover:** background: #004080 !important; background-color: rgb(0, 64, 128) !important; border-top-color: rgb(0, 64, 128) !important; border-right-color: rgb(0, 64, 128) !important; border-bottom-color: rgb(0, 64, 128) !important; border-left-color: rgb(0, 64, 128) !important\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"calcite","name":"Calcite Components","vendor":"Esri","fw":["Web Components"],"theme":"地图 / GIS","link":"https://developers.arcgis.com/calcite-design-system","repo":"https://github.com/Esri/calcite-design-system","license":"Apache","chips":["Button","Card","Map","Panel"],"kind":"item","img":"previews/calcite.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Calcite Design System above-the-fold UI\n\nRecreate the above-the-fold UI of the Calcite Design System (Esri Developer docs page) as a single self-contained HTML file at 1280px width.\n\n## Overall Layout\nLight-themed documentation site with a multi-level header structure, sidebar navigation, and main content area.\n\n### Top Header Bar (white)\n- Background: `#ffffff`\n- Height: ~48px\n- Left side: **Esri logo** — a dark circle with \"esri\" text inside, followed by **\"Developer\"** in purple/violet (`#6b21a8` or similar deep purple), bold\n- Right-side nav links (horizontal): Documentation, Features ▾, SDKs and APIs ▾, Products ▾, Support ▾ — all dark gray text ~14px, no underline\n- Far right: sparkle icon + **\"Ask AI\"** text, then a search icon/magnifying glass + **\"Search docs\"**\n\n### Secondary Navbar (dark purple/blue)\n- Background: very dark navy/indigo (`#1e1e3f` or `#2a1e4a`)\n- Height: ~52px\n- Left: **\"Calcite Design System\"** in white/light, bold ~18px\n- Right: horizontal tab links — **Home**, **Foundations**, **Components**, **Sample Code**, **Resources**, **Icons** — white/light gray text, ~14px. \"Home\" is active/underlined.\n\n### Page Layout (below header)\nTwo-column layout on light background (`#f7f7f7`):\n\n#### Left Sidebar (~220px wide)\nBackground: slightly lighter than main or same `#f7f7f7`\nNavigation items (vertical list, ~14px text, dark):\n- **Overview** (active/bold, possibly with small dot indicator)\n- Get started\n- Core concepts\n- Tutorials\n- Archived documentation\n- **Release notes** (section header, small bold)\n  - 5.1\n  - 5.0\n- Older releases (collapsible)\n\n#### Main Content Area (right of sidebar)\nPadding: ~32px\n- **H1: \"Calcite Design System\"** — large (~36px), bold, dark text\n- Below H1: thin horizontal accent line (purple/violet, ~3px thick, ~60px wide)\n- Version line: **Current version:** @esri/calcite-components: 5.1 (May 2026) — smaller text, link-colored for the package name\n- Description paragraph: \"**Calcite Design System** is a collection of design and development resources for creating beautiful, easy to use, cohesive experiences across apps with minimal effort. It includes a UI kit, icons, color schemes, and a web component library with UI elements such as buttons, panels, accordions, alerts, and many more.\" — normal weight, ~15px, dark gray `#333`\n- **H2: \"Where to start\"** — ~28px, bold\n- Intro sentence below H2\n\n#### Right Sidebar (\"On this page\")\nNarrow column (~180px) at far right of main area:\n- **On this page** heading (small bold)\n- Vertical list: \"Where to start\", \"Design System\" — indented links in lighter color\n\n### Cookie Consent Overlay (bottom-left corner)\nSemi-transparent white box overlaying bottom-left:\n- Text about cookies\n- Buttons: \"Accept All Cookies\" (light blue bg), \"Reject All\" (outline), \"Cookie Settings\"\n\n## Colors\n- Top bar bg: `#fff`\n- Navbar bg: `#2d1b69` (deep indigo/purple)\n- Page bg: `#f7f7f7`\n- Text primary: `#222`\n- Text secondary: `#555`\n- Accent purple: `#6b21a8` / `#7c3aed`\n- Link color: purple-blue\n- Sidebar text: `#444`\n\n## Typography\nSystem fonts: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\nH1: 36px bold; H2: 28px bold; Body: 15px; Nav: 14px\n\n## Vibe\nEnterprise developer documentation. Clean, structured, professional. Feels like ArcGIS/Esri's official dev portal.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `button.ask-ai-toggle` → animation: rotateDeg 2s cubic-bezier(0.4, 0, 0.2, 1) infinite normal\n- `svg` → animation: rotateDeg 2s cubic-bezier(0.4, 0, 0.2, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nav.md:max-h-auto.absolute` → transition: all, outline, outline-offset 0.15s, 0s, 0s ease-in-out, ease, ease 0s, 0s, 0s\n- `button.ask-ai-toggle` → transition: color, background-image, border-image-source, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.flex.h-full` → transition: border, border-width, border-color, border-radius, border-style 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.absolute.top-full` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.group.flex` → transition: background-position 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.topic-sidebar` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `a.card.is-link` → transition: outline, outline-offset, outline-color, outline-width 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `ul.m-0.h-full` → transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.focus-base`:\n  **active:** border-color: oklch(41.68% .1578 287.9); border-top-color: oklch(0.4168 0.1578 287.9); border-right-color: oklch(0.4168 0.1578 287.9); border-bottom-color: oklch(0.4168 0.1578 287.9); border-left-color: oklch(0.4168 0.1578 287.9)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes in-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes in-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes in-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(5px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes rotateDeg  {\n  0%  {\n  --gradient-angle: 0deg;\n  } 100%  {\n  --gradient-angle: 360deg;\n  }\n}\n@keyframes loadingIcon  {\n  0%  {\n  background-color: var(--calcite-color-foreground-1);\n  } 50%  {\n  background-color: var(--calcite-color-foreground-2);\n  } 100%  {\n  background-color: var(--calcite-color-foreground-1);\n  }\n}\n@keyframes fade  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 1em;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: light docs layout, header/navbar/sidebar/content/cookie, 8 keyframes"},{"id":"vaadin-wc","name":"Vaadin Components","vendor":"Vaadin","fw":["Web Components"],"theme":"企业级","link":"https://vaadin.com/components","repo":"https://github.com/vaadin/web-components","license":"Apache","chips":["Button","Grid","Form","DatePicker"],"kind":"item","img":"previews/vaadin-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Vaadin Components above-the-fold UI\n\nDark component showcase gallery. Bg `#0b0c10`.\n- macOS dots\n- Title: **\"Vaadin Components\"** white bold ~26px\n- Subtitle: **\"Web Components · 企业级\"** gray\n- Demo row: Primary (purple), Default, input (\"Type here...\"), toggle ON, Badge, Select ▾\n- Card: \"Card title\" + description\n- Tags: **Button**, **Grid**, **Form**, **DatePicker**\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.haas-menu-primary-link-platform` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.15s linear\n- `div.haas-profile-menu` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n- `a.haas-profile-menu-link` → transition: all 0.15s ease-out\n- `a.button.large` → transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.haas-button`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid transparent\n- `.haas-wrapper *`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid transparent\n- `.paragraph-lg`:\n  **focus:** outline: 2px solid transparent\n- `.la`:\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: transitions verbatim (no @keyframes in spec)"},{"id":"agnosticui","name":"AgnosticUI","vendor":"AgnosticUI","fw":["Web Components"],"theme":"框架无关","link":"https://agnosticui.com","repo":"https://github.com/AgnosticUI/agnosticui","license":"MIT","chips":["Button","Card","Modal","Tabs"],"kind":"item","img":"previews/agnosticui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate AgnosticUI above-the-fold UI\n\nRecreate the above-the-fold UI of AgnosticUI as a single self-contained HTML file at 1280px width.\n\n## Overall Layout\nClean, modern, light-themed landing page with a soft blue-tinted background and centered hero content.\n\n### Top Navigation Bar\n- Background: transparent or very light tinted (`#f0f4ff` or similar pale blue-white)\n- Height: ~56px\n- Padding: 0 40px\n- Left: **\"AgnosticUI\"** brand name — medium blue (`#2563eb`), ~16px, font-weight 600\n- Right side items (horizontal):\n  - **\"Components\"** link — dark text ~14px\n  - Theme toggle icon (sun/moon toggle switch appearance, subtle rounded pill shape, light gray bg)\n  - GitHub icon (dark circle with cat silhouette)\n\n### Hero Section (centered, takes up most of viewport)\n- Background: Very light blue gradient or tint (`#eef2ff` to `#f5f3ff`), maybe with subtle large blurred circles/shapes in background for depth\n- Content centered horizontally, positioned in upper-middle of viewport:\n\n#### Headline Area\n1. **\"AgnosticUI Local\"** — Large text (~42px), **gradient color** from light blue to deeper blue (like `#60a5fa` to `#2563eb`), font-weight 700\n2. **\"The AI-native UI kit\"** — Even larger text below (~48-52px), **bold black** (`#111827`), font-weight 800\n\n#### Description Paragraph\nBelow headline, centered, max-width ~600px:\n**\"Local source lives in your codebase. Our AG Context Generator arms your favorite LLM with exact component locations, types, and usage. Claude. Codex. Copilot. Gemini. And more.\"**\n- Color: dark gray (`#374151`)\n- Font size: ~17px\n- Line-height: ~1.6\n\n### Lower Section (below hero)\n#### Section Title\n**\"Get Started in Seconds\"**\n- Teal/green color (`#059669` or `#0d9488`)\n- Font size: ~30px\n- Bold, centered\n\n#### Subtitle\n**\"Three commands and your agent of choice knows your entire stack.\"**\n- Dark gray, ~16px, centered\n\n### Terminal Preview (bottom of visible area)\nA terminal/code window component:\n- macOS-style window chrome (dots red/yellow/green) at top-left of terminal frame\n- Title bar: \"terminal\" text\n- Light/grayish background\n- Rounded corners\n- Subtle shadow\n- Width: ~700px, centered\n\n## Colors\n- Page bg: `#eef2ff` (very pale blue-lavender)\n- Primary blue: `#2563eb`\n- Gradient text: `#60a5fa` → `#3b82f6`\n- Teal accent: `#059669`\n- Text dark: `#111827`\n- Text body: `#374151`\n- Terminal bg: `#f8fafc` or light gray\n\n## Typography\nSystem fonts: `Inter, ui-sans-serif, system-ui, -apple-system, sans-serif`\nHeadline gradient: large, bold\nBody: clean, readable\n\n## Vibe\nModern, clean, AI-focused dev tool landing page. Minimal, airy, confident. Soft gradients, generous whitespace.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.name.clip` → animation: fadeInUp 1s ease-out 1 normal both\n- `span.text` → animation: fadeInUp 1s ease-out 0.2s 1 normal both\n- `p.tagline` → animation: fadeInUp 1s ease-out 0.4s 1 normal both\n- `div.command-line` → animation: fadeIn-a12b4f63 0.5s ease-out 1 normal\n- `span.cursor` → animation: blink-a12b4f63 1s steps(1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `a.VPLink.link` → transition: color 0.25s ease\n- `button.VPSwitch.VPSwitchAppearance` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPSocialLink.no-icon` → transition: color 0.5s ease\n- `ag-scroll-to-button` → transition: opacity, visibility 0.48s, 0.48s ease-in-out, ease-in-out 0s, 0s\n- `div.cli-terminal` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.VPSwitch[data-v-1d5665e3]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.button[data-v-cf11d7a2]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.VPNavBarHamburger[data-v-e5dd9c1c]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes gradientShift  {\n  0%  {\n  background-position: 0% 50%;\n  filter: hue-rotate(0deg);\n  } 25%  {\n  background-position: 50% 50%;\n  filter: hue-rotate(40deg);\n  } 50%  {\n  background-position: 100% 50%;\n  filter: hue-rotate(0deg);\n  } 75%  {\n  background-position: 50% 50%;\n  filter: hue-rotate(40deg);\n  } 100%  {\n  background-position: 0% 50%;\n  filter: hue-rotate(0deg);\n  }\n}\n@keyframes float  {\n  0%, 100%  {\n  transform: translateY(0px) translate(0px);\n  } 25%  {\n  transform: translateY(-100px) translate(50px);\n  } 50%  {\n  transform: translateY(-50px) translate(-50px);\n  } 75%  {\n  transform: translateY(-80px) translate(30px);\n  }\n}\n@keyframes fadeInUp  {\n  0%  {\n  opacity: 0;\n  transform: translateY(30px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(-10px);\n  }\n}\n@keyframes message-fade-in-acf2f3d3  {\n  0%  {\n  opacity: 0;\n  transform: translateY(12px) scale(0.95);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes message-fade-out-acf2f3d3  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.95);\n  }\n}\n@keyframes custom-shimmer  {\n  0%  {\n  background-position: 200% 0px;\n  } 100%  {\n  background-position: -200% 0px;\n  }\n}\n@keyframes blink-a12b4f63  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fadeIn-a12b4f63  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fadeInSlide-a12b4f63  {\n  0%  {\n  opacity: 0;\n  transform: translate(-10px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"match: light landing page with gradient text+terminal, 12 keyframes"},{"id":"dile-wc","name":"Dile Components","vendor":"Dile","fw":["Web Components"],"theme":"框架无关","link":"https://dile.github.io","repo":"https://github.com/OpenWebComponents/dile-components","license":"MIT","chips":["Button","Card","Modal","Tabs"],"kind":"item","img":"previews/dile-wc.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the dile-wc (https://dile.github.io) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration: underline\n- `.logo`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match confirmed; no specific animations required (empty spec)"},{"id":"wired-elements","name":"wired-elements","vendor":"wiredjs","fw":["Web Components"],"theme":"手绘风 / 趣味","link":"https://wiredjs.com","repo":"https://github.com/wiredjs/wired-elements","license":"MIT","chips":["Button","Input","Card","Slider"],"kind":"item","img":"previews/wired-elements.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Wired Elements\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Wired Elements**\n- Subtitle on the card: **Web Components · 手绘风 / 趣味**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Wired Elements\" in bold white, and the subtitle \"Web Components · 手绘风 / 趣味\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #a855f7 (purple)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #a855f7 (purple) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Input, Card, Slider.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #a855f7 (purple)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #a855f7 (purple) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match: purple card with correct brand/subtitle/tags; transitions included"},{"id":"unocss","name":"UnoCSS","vendor":"UnoCSS","fw":["CSS"],"theme":"原子化 CSS 引擎","link":"https://unocss.dev","repo":"https://github.com/unocss/unocss","license":"MIT","chips":["Utility","Icon","Attributify"],"kind":"item","img":"previews/unocss.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"UnoCSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **UnoCSS**\n- Subtitle on the card: **CSS · 原子化 CSS 引擎**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"UnoCSS\" in bold white, and the subtitle \"CSS · 原子化 CSS 引擎\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Utility, Icon, Attributify.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.VPNav` → transition: background-color 0.5s ease\n- `div.VPNavBar.home` → transition: background-color 0.25s ease\n- `a.title` → transition: opacity 0.25s ease\n- `button.button` → transition: color 0.5s ease\n- `span.text` → transition: color 0.25s ease\n- `div.menu` → transition: opacity, visibility, transform 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `a.VPLink.link` → transition: background-color, color 0.25s, 0.25s ease, ease 0s, 0s\n- `button.VPSwitch.RainbowAnimationSwitcher` → transition: border-color 0.25s ease\n- `span.check` → transition: transform 0.25s ease\n- `a.VPButton.medium` → transition: color, border-color, background-color 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `div.image-bg` → transition: opacity 1s ease\n- `a.VPLink.link` → transition: border-color, background-color 0.25s, 0.25s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.VPNavBarSearchButton[data-v-7f1e1c77]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n- `.button[data-v-ff973924]`:\n  **focus:** outline: 1px dotted\n  **focus-visible:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match: amber card; VPNav/VPLink transitions from prompt included verbatim"},{"id":"open-props","name":"Open Props","vendor":"Open Props","fw":["CSS"],"theme":"CSS 变量 / 设计令牌","link":"https://open-props.style","repo":"https://github.com/argyleink/open-props","license":"MIT","chips":["Theme","Tokens","Gradients"],"kind":"item","img":"previews/open-props.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Open Props\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Open Props**\n- Subtitle on the card: **CSS · CSS 变量 / 设计令牌**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Open Props\" in bold white, and the subtitle \"CSS · CSS 变量 / 设计令牌\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Theme, Tokens, Gradients.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div` → animation: fade-in, slide-in-up 0.5s, 0.5s cubic-bezier(0, 0, 0, 1) 0.5s 1, 1 normal, normal forwards, forwards\n- `span` → animation: fade-in, slide-in-up 0.5s, 0.5s cubic-bezier(0, 0, 0, 1) 0.6s 1, 1 normal, normal forwards, forwards\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in-bloom  {\n  0%  {\n  opacity: 0;\n  filter: brightness(1) blur(20px);\n  } 10%  {\n  opacity: 1;\n  filter: brightness(2) blur(10px);\n  } 100%  {\n  opacity: 1;\n  filter: brightness(1) blur(0px);\n  }\n}\n@keyframes fade-out  {\n  100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-out-bloom  {\n  100%  {\n  opacity: 0;\n  filter: brightness(1) blur(20px);\n  } 10%  {\n  opacity: 1;\n  filter: brightness(2) blur(10px);\n  } 0%  {\n  opacity: 1;\n  filter: brightness(1) blur(0px);\n  }\n}\n@keyframes scale-up  {\n  100%  {\n  transform: scale(1.25);\n  }\n}\n@keyframes scale-down  {\n  100%  {\n  transform: scale(0.75);\n  }\n}\n@keyframes slide-out-up  {\n  100%  {\n  transform: translateY(-100%);\n  }\n}\n@keyframes slide-out-down  {\n  100%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes slide-out-right  {\n  100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes slide-out-left  {\n  100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slide-in-up  {\n  0%  {\n  transform: translateY(100%);\n  }\n}\n@keyframes slide-in-down  {\n  0%  {\n  transform: translateY(-100%);\n  }\n}\n@keyframes slide-in-right  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes slide-in-left  {\n  0%  {\n  transform: translate(100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; full @keyframes set (fade-in/slide-in-up/fade-in-bloom etc.) included verbatim"},{"id":"panda-css","name":"Panda CSS","vendor":"Chakra","fw":["CSS"],"theme":"原子化 / 类型安全","link":"https://panda-css.com","repo":"https://github.com/chakra-ui/panda","license":"MIT","chips":["Utility","Recipe","Tokens"],"kind":"item","img":"previews/panda-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Panda CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Panda CSS**\n- Subtitle on the card: **CSS · 原子化 / 类型安全**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Panda CSS\" in bold white, and the subtitle \"CSS · 原子化 / 类型安全\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Utility, Recipe, Tokens.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.rfm-marquee` → animation: scroll 49.3525s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.d_flex.ai_center` → transition: background, background-color, background-image, background-position 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.d_flex`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `-visible`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_lg`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_xl`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.py_1`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_2xl`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.codeTabs [data-scope=\"tabs\"][data-part=\"trigger\"]`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.codeTabs [data-scope=\"tabs\"][data-part=\"content\"]`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.button`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_panda\\.h2`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n- `.textStyle_md`:\n  **focus:** outline: 2px\n  **focus-visible:** outline: 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes scroll  {\n  0%  {\n  transform: translateX(0%);\n  } 100%  {\n  transform: translateX(-100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes scroll 49.3525s linear and d_flex transition included"},{"id":"vanilla-extract","name":"Vanilla Extract","vendor":"Vanilla Extract","fw":["CSS"],"theme":"零运行时 / TS","link":"https://vanilla-extract.style","repo":"https://github.com/vanilla-extract-css/vanilla-extract","license":"MIT","chips":["Style","Theme","Recipe"],"kind":"item","img":"previews/vanilla-extract.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Vanilla Extract\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Vanilla Extract**\n- Subtitle on the card: **CSS · 零运行时 / TS**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Vanilla Extract\" in bold white, and the subtitle \"CSS · 零运行时 / TS\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Style, Theme, Recipe.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nb65gs39.nb65gs3d` → transition: transform 0.15s ease\n- `span._1gi0j5k0.nb65gs1x` → transition: transform, opacity 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.nb65gsl`:\n  **hover:** background: rgba(255,255,255,.5); background-color: rgba(255, 255, 255, 0.5)\n  **active:** transform: scale(0.98) translateZ(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes fade-in + nb65gs39 transitions from prompt included"},{"id":"stylex","name":"StyleX","vendor":"Meta","fw":["CSS"],"theme":"原子化 / 规模化","link":"https://stylexjs.dev","repo":"https://github.com/facebook/stylex","license":"MIT","chips":["Style","Create","Attrs"],"kind":"item","img":"previews/stylex.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the stylex (https://stylexjs.dev) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.owner-error` → transition: all 0.2s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** border-bottom-color: rgb(0, 112, 243)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; a.owner-error transition 0.2s ease included; inferred spec from preview"},{"id":"lightning-css","name":"Lightning CSS","vendor":"Lightning CSS","fw":["CSS"],"theme":"CSS 编译器 / 工具","link":"https://lightningcss.dev","repo":"https://github.com/parcel-bundler/lightningcss","license":"MIT","chips":["Bundler","Minify","Transform"],"kind":"item","img":"previews/lightning-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Lightning CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Lightning CSS**\n- Subtitle on the card: **CSS · CSS 编译器 / 工具**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Lightning CSS\" in bold white, and the subtitle \"CSS · CSS 编译器 / 工具\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Bundler, Minify, Transform.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: text-decoration-color 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** text-decoration-color: lch(90 50.34 80.104); text-decoration: underline\n- `.warp p a`:\n  **hover:** text-decoration: underline\n- `.future a`:\n  **hover:** text-decoration: underline\n- `.crush p a`:\n  **hover:** text-decoration: underline\n- `.parser a`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; text-decoration-color 0.15s ease transition on 'a' included verbatim"},{"id":"halfmoon","name":"Halfmoon","vendor":"Halfmoon","fw":["CSS"],"theme":"框架 / 暗色","link":"https://www.gethalfmoon.com","repo":"https://github.com/halfmoonui/halfmoon","license":"MIT","chips":["Button","Card","Form","Navbar"],"kind":"item","img":"previews/halfmoon.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Halfmoon\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Halfmoon**\n- Subtitle on the card: **CSS · 框架 / 暗色**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Halfmoon\" in bold white, and the subtitle \"CSS · 框架 / 暗色\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Form, Navbar.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.animate-ping.d-block` → animation: ping-animation 1s cubic-bezier(0, 0, 0.2, 1) infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `input.form-check-input` → transition: background-position 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.btn`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.nav-link`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.dropdown-toggle`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.form-control`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes progress-bar-stripes  {\n  0%  {\n  background-position-x: 0.625rem;\n  }\n}\n@keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@keyframes placeholder-glow  {\n  50%  {\n  opacity: 0.2;\n  }\n}\n@keyframes placeholder-wave  {\n  100%  {\n  mask-position: -200% 0px;\n  }\n}\n@keyframes fa-beat  {\n  0%, 90%  {\n  transform: scale(1);\n  } 45%  {\n  transform: scale(var(--fa-beat-scale,1.25));\n  }\n}\n@keyframes fa-bounce  {\n  0%  {\n  transform: scale(1) translateY(0px);\n  } 10%  {\n  transform: scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);\n  } 30%  {\n  transform: scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));\n  } 50%  {\n  transform: scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);\n  } 57%  {\n  transform: scale(1) translateY(var(--fa-bounce-rebound,-.125em));\n  } 64%  {\n  transform: scale(1) translateY(0px);\n  } 100%  {\n  transform: scale(1) translateY(0px);\n  }\n}\n@keyframes fa-fade  {\n  50%  {\n  opacity: var(--fa-fade-opacity,.4);\n  }\n}\n@keyframes fa-beat-fade  {\n  0%, 100%  {\n  opacity: var(--fa-beat-fade-opacity,.4);\n  transform: scale(1);\n  } 50%  {\n  opacity: 1;\n  transform: scale(var(--fa-beat-fade-scale,1.125));\n  }\n}\n@keyframes fa-flip  {\n  50%  {\n  transform: rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));\n  }\n}\n@keyframes fa-shake  {\n  0%  {\n  transform: rotate(-15deg);\n  } 4%  {\n  transform: rotate(15deg);\n  } 8%, 24%  {\n  transform: rotate(-18deg);\n  } 12%, 28%  {\n  transform: rotate(18deg);\n  } 16%  {\n  transform: rotate(-22deg);\n  } 20%  {\n  transform: rotate(22deg);\n  } 32%  {\n  transform: rotate(-12deg);\n  } 36%  {\n  transform: rotate(12deg);\n  } 40%, 100%  {\n  transform: rotate(0deg);\n  }\n}\n@keyframes ping-animation  {\n  75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; full keyframes set (ping-animation/fa-beat/fa-shake/spinner etc.) included verbatim"},{"id":"milligram","name":"Milligram","vendor":"Milligram","fw":["CSS"],"theme":"极简 / 轻量","link":"https://milligram.io","repo":"https://github.com/milligram/milligram","license":"MIT","chips":["Button","Card","Form","Table"],"kind":"item","img":"previews/milligram.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Milligram\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Milligram**\n- Subtitle on the card: **CSS · 极简 / 轻量**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Milligram\" in bold white, and the subtitle \"CSS · 极简 / 轻量\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Form, Table.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `path` → animation: a 7s ease 1 normal forwards\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.navigation .navigation-title`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); background-color: rgb(96, 108, 118); border-color: #606c76; outline: 0; border-top-color: rgb(96, 108, 118); border-right-color: rgb(96, 108, 118); border-bottom-color: rgb(96, 108, 118); border-left-color: rgb(96, 108, 118)\n  **focus:** color: rgb(255, 255, 255); background-color: rgb(96, 108, 118); border-color: #606c76; outline: 0; border-top-color: rgb(96, 108, 118); border-right-color: rgb(96, 108, 118); border-bottom-color: rgb(96, 108, 118); border-left-color: rgb(96, 108, 118)\n- `.navigation .navigation-link`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.popover .popover-link`:\n  **hover:** color: rgb(255, 255, 255); background: #9b4dca; border-bottom-color: rgb(155, 77, 202); background-color: rgb(155, 77, 202)\n  **focus:** color: rgb(96, 108, 118)\n- `-visible`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.carbonads .carbon-img`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n- `.carbonads .carbon-poweredby`:\n  **hover:** color: rgb(96, 108, 118)\n  **focus:** color: rgb(96, 108, 118)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes a  {\n  0%  {\n  fill-opacity: 0;\n  stroke-dashoffset: 38321;\n  } 25%  {\n  fill-opacity: 0;\n  stroke: rgb(155, 77, 202);\n  } 100%  {\n  fill-opacity: 1;\n  stroke-dashoffset: 0;\n  }\n}\n@keyframes b  {\n  0%, 50%  {\n  transform: rotate(0deg);\n  } 25%, 75%  {\n  transform: rotate(-25deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @keyframes a (SVG stroke-dashoffset) and @keyframes b included verbatim"},{"id":"beer-css","name":"Beer CSS","vendor":"Beer","fw":["CSS"],"theme":"Material 风","link":"https://www.beercss.com","repo":"https://github.com/beercss/beercss","license":"MIT","chips":["Button","Card","Dialog","App"],"kind":"item","img":"previews/beer-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Beer CSS\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Beer CSS**\n- Subtitle on the card: **CSS · Material 风**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Beer CSS\" in bold white, and the subtitle \"CSS · Material 风\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Dialog, App.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `i.page.top` → animation: to-page 0.4s ease 1 normal\n- `img.active` → animation: logo-intro 1s ease 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.extra.circle` → transition: all 0.1s ease\n- `div.overlay` → transition: all, background-color 0.3s, 0s ease, ease 0s, 0s\n- `button.chip.circle` → transition: transform, border-radius, padding 0.3s, 0.3s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `button.circle.transparent` → transition: transform, border-radius, padding 0.3s, 0.2s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `menu.max` → transition: all 0.2s ease 0.2s\n- `li` → transition: border-radius 0.2s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes to-page  {\n  0%  {\n  opacity: 0;\n  transform: var(--_transform);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes to-linear-progress  {\n  0%  {\n  margin: 0px 0px 0px -100%;\n  } 50%  {\n  margin: 0px;\n  } 100%  {\n  margin: 0px 0px 0px 100%;\n  }\n}\n@keyframes to-indeterminate-progress  {\n  0%  {\n  padding: 0px 100% 0px 0px;\n  } 50%  {\n  padding: 0px;\n  } 100%  {\n  padding: 0px 0px 0px 100%;\n  }\n}\n@keyframes to-rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes to-ripple  {\n  100%  {\n  opacity: 0;\n  transform: scale(4);\n  }\n}\n@keyframes logo-intro  {\n  0%  {\n  opacity: 0;\n  transform: rotate(-90deg) scale(0.5) translateY(25%);\n  } 75%  {\n  opacity: 1;\n  transform: rotate(0deg) scale(1.1) translateY(0px);\n  } 100%  {\n  opacity: 1;\n  transform: rotate(0deg) scale(1) translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; to-page/logo-intro/to-ripple keyframes + Material transitions included"},{"id":"materialize","name":"Materialize","vendor":"Materialize","fw":["CSS"],"theme":"Material 风","link":"https://materializecss.com","repo":"https://github.com/Dogfalo/materialize","license":"MIT","chips":["Button","Card","Modal","Carousel"],"kind":"item","img":"previews/materialize.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate \"Materialize\" gallery preview card (above-the-fold)\n\n## Brand\n- Name: **Materialize**\n- Subtitle on the card: **CSS · Material 风**\n\n## Layout\nA single centered dark gallery preview card on a dark background.\n\n- **Top bar**: three macOS-style dots (red #ff5f56, yellow #ffbd2e, green #27c93f), then the brand name \"Materialize\" in bold white, and the subtitle \"CSS · Material 风\" in muted gray below it.\n- **Component row 1**: \"Primary\" button (solid #f59e0b (amber)), \"Default\" button (dark gray outline), and a \"Type here...\" input.\n- **Component row 2**: a toggle switch in the \"on\" state (same #f59e0b (amber) color), a cyan/teal gradient \"Badge\" pill, and a \"Select\" dropdown.\n- **Demo card**: rounded dark card with heading \"Card title\" and body text \"This is a preview of the component look.\".\n- **Footer tags**: small dark pill buttons: Button, Card, Modal, Carousel.\n\n## Colors\n- Background: #0b0d12\n- Card background: #11131c, border: #1d2130\n- Primary button: #f59e0b (amber)\n- Default/input/select: #1a1d27 background, #2c3040 border, white text\n- Toggle: #f59e0b (amber) on state\n- Badge: linear-gradient(90deg, #0ea5e9, #22d3ee)\n- Muted text: #8b92a5\n- Placeholder text: #5b6275\n- Dots: red #ff5f56, yellow #ffbd2e, green #27c93f\n\n## Typography\n- System sans-serif font (Inter, -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif).\n- Brand title: 26px bold.\n- Subtitle: 15px muted.\n- Buttons: 15px semi-bold.\n- Footer tags: 13px.\n\n## Vibe\n- Dark, modern, component-library showcase card. Clean, minimal, rounded corners (10-14px), subtle borders, macOS window dots.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.search-wrapper` → transition: margin 0.25s ease\n- `input` → transition: box-shadow, border, -webkit-box-shadow 0.3s, 0.3s, 0.3s ease, ease, ease 0s, 0s, 0s\n- `a.waves-effect.waves-teal` → transition: all 0.3s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.sidenav li > a`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.dropdown-trigger`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `.dropdown-content`:\n  **focus:** outline: 0\n- `.dropdown-content li`:\n  **hover:** background-color: rgb(238, 238, 238)\n- `.dropdown-content li > a`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n- `#nav-mobile li.search .search-wrapper input#search`:\n  **focus:** box-shadow: rgb(38, 166, 154) 0px 1px 0px 0px; border-bottom-color: rgb(38, 166, 154)\n- `.waves-effect`:\n  **hover:** background-color: rgba(0, 0, 0, 0.05)\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes indeterminate  {\n  0%  {\n  left: -35%;\n  right: 100%;\n  } 60%  {\n  left: 100%;\n  right: -90%;\n  } 100%  {\n  left: 100%;\n  right: -90%;\n  }\n}\n@-webkit-keyframes indeterminate-short  {\n  0%  {\n  left: -200%;\n  right: 100%;\n  } 60%  {\n  left: 107%;\n  right: -8%;\n  } 100%  {\n  left: 107%;\n  right: -8%;\n  }\n}\n@-webkit-keyframes container-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes fill-unfill-rotate  {\n  12.5%  {\n  transform: rotate(135deg);\n  } 25%  {\n  transform: rotate(270deg);\n  } 37.5%  {\n  transform: rotate(405deg);\n  } 50%  {\n  transform: rotate(540deg);\n  } 62.5%  {\n  transform: rotate(675deg);\n  } 75%  {\n  transform: rotate(810deg);\n  } 87.5%  {\n  transform: rotate(945deg);\n  } 100%  {\n  transform: rotate(1080deg);\n  }\n}\n@-webkit-keyframes blue-fade-in-out  {\n  0%  {\n  opacity: 1;\n  } 25%  {\n  opacity: 1;\n  } 26%  {\n  opacity: 0;\n  } 89%  {\n  opacity: 0;\n  } 90%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes red-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 15%  {\n  opacity: 0;\n  } 25%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 1;\n  } 51%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes yellow-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 40%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 75%  {\n  opacity: 1;\n  } 76%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes green-fade-in-out  {\n  0%  {\n  opacity: 0;\n  } 65%  {\n  opacity: 0;\n  } 75%  {\n  opacity: 1;\n  } 90%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes pulse-animation  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 50%  {\n  opacity: 0;\n  transform: scale(1.5);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.5);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Visual match; @-webkit-keyframes (indeterminate/container-rotate/color-fades) + transitions included"},{"id":"chota","name":"Chota","vendor":"Chota","fw":["CSS"],"theme":"微框架 / 极简","link":"https://jenil.github.io/chota","repo":"https://github.com/jenil/chota","license":"MIT","chips":["Button","Card","Grid","Nav"],"kind":"item","img":"previews/chota.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Chota as a dark gallery card (1280px)\n\nBrand: **Chota**. Tech/theme tagline: `CSS · 微框架 / 极简`. Component chips: `Button · Card · Grid · Nav`.\n\n## Layout\n- A single rounded dark card (almost fills the viewport) on a dark background (#0b0c14). The card has a subtle top border in the accent color.\n- Top-left: three macOS-style traffic-light dots (red #ff5f57, yellow #febc2e, green #28c840) followed by the brand name **Chota** (white, 24px, bold).\n- Below brand: small tagline `CSS · 微框架 / 极简` (gray #9ca3af, 14px).\n- Controls row: a **Primary** button (yellow #fbbf24 bg, dark text, rounded-lg), a **Default** button (dark gray #1f2937 bg, white text, rounded-lg), and a text input with placeholder `Type here...` (dark gray bg, light gray text).\n- Second controls row: a colored toggle switch (knob on the left, yellow #fbbf24 track), a **Badge** pill (teal/cyan #0e7490 bg, white text, rounded), and a **Select** dropdown (dark gray bg, white text, rounded-lg).\n- A **Card** component: dark surface (#13141f), rounded-xl, border (#1f2937), with title \"Card title\" (white, 18px, bold) and body text \"This is a preview of the component look.\" (gray #9ca3af).\n- Bottom chip row: four small rounded chips (`Button`, `Card`, `Grid`, `Nav`) on dark gray (#1f2937) with light gray text (#d1d5db).\n\n## Colors\n- Background: #0b0c14\n- Card surface: #11121c with subtle border #1f2937\n- Primary accent: #fbbf24 (yellow)\n- Badge: #0e7490 (teal)\n- Default/Select/Input: #1f2937\n- Text: white #fff for headings, #9ca3af for body/placeholder\n- Traffic lights: #ff5f57 / #febc2e / #28c840\n\n## Typography\n- System font stack, sans-serif. Brand 24px bold; tagline 14px; buttons 15px; card title 18px; chips 14px.\n\n## Vibe\nDark-mode UI gallery card, clean, modern, minimal, rounded corners, generous spacing. No external images — pure CSS shapes and typography.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.tabs a`:\n  **hover:** opacity: 1\n- `a:not(.button)`:\n  **hover:** opacity: 0.75\n- `.button`:\n  **hover:** opacity: 0.8\n  **active:** transform: scale(0.98)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"close match after v2; fixed toggle knob and select chevron"},{"id":"pure-css","name":"Pure.css","vendor":"Yahoo","fw":["CSS"],"theme":"极简 / 模块化","link":"https://purecss.io","repo":"https://github.com/pure-css/pure","license":"BSD","chips":["Button","Grid","Form","Menu"],"kind":"item","img":"previews/pure-css.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Pure.css as a dark gallery card (1280px)\n\nBrand: **Pure.css**. Tech/theme tagline: `CSS · 极简 / 模块化`. Component chips: `Button · Grid · Form · Menu`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent yellow.\n- Top-left: macOS dots (red/yellow/green) + brand **Pure.css** (white, 24px bold).\n- Tagline: `CSS · 极简 / 模块化` (gray, 14px).\n- Controls: **Primary** button (yellow #fbbf24, dark text), **Default** button (dark gray #1f2937), input placeholder `Type here...`.\n- Second row: yellow toggle, **Badge** pill (teal #0e7490), **Select** dropdown.\n- Card panel: dark surface, title \"Card title\", body \"This is a preview of the component look.\".\n- Bottom chips: `Button`, `Grid`, `Form`, `Menu`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary yellow #fbbf24, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: all 0.2s ease-out\n- `a.pure-menu-heading` → transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.menu__link`:\n  **hover:** background: #333; color: rgb(153, 153, 153); background-color: rgb(51, 51, 51); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n  **active:** border-color: #000; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 0px 6px inset\n  **focus:** background: #333; color: rgb(153, 153, 153); background-color: rgb(51, 51, 51); outline: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n- `.admonitionHeading_Gvgb code`:\n  **hover:** background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n  **active:** border-color: #000; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 0px 6px inset\n  **focus:** outline: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1))\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy and components match preview"},{"id":"tachyons","name":"Tachyons","vendor":"Tachyons","fw":["CSS"],"theme":"原子化 / 古典","link":"https://tachyons.io","repo":"https://github.com/tachyons-css/tachyons","license":"MIT","chips":["Utility","Layout","Type"],"kind":"item","img":"previews/tachyons.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Tachyons as a dark gallery card (1280px)\n\nBrand: **Tachyons**. Tech/theme tagline: `CSS · 原子化 / 古典`. Component chips: `Utility · Layout · Type`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent yellow.\n- Top-left: macOS dots + brand **Tachyons** (white, 24px bold).\n- Tagline: `CSS · 原子化 / 古典` (gray, 14px).\n- Controls: **Primary** (yellow #fbbf24), **Default** (dark gray #1f2937), input `Type here...`.\n- Second row: yellow toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Utility`, `Layout`, `Type`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary #fbbf24, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.nowrap.dib` → transition: color 0.15s ease-in\n- `a.f6.fw6` → transition: transform, -webkit-transform 0.25s, 0.25s ease-out, ease-out 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.dib`:\n  **hover:** color: rgb(53, 126, 221); opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** outline-color: currentcolor; color: rgb(53, 126, 221); opacity: 0.5\n- `.br2`:\n  **hover:** opacity: 0.5; transform: scale(1.05)\n  **active:** opacity: 0.8; transform: scale(0.9)\n  **focus:** outline-color: currentcolor; opacity: 0.5; transform: scale(1.05)\n- `.dn`:\n  **hover:** color: rgb(53, 126, 221)\n  **focus:** outline-color: currentcolor; color: rgb(53, 126, 221)\n- `.ba`:\n  **hover:** transform: scale(1.05)\n  **active:** transform: scale(0.9)\n  **focus:** transform: scale(1.05)\n- `.black`:\n  **hover:** opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** opacity: 0.5\n- `.link`:\n  **hover:** opacity: 0.5; color: rgb(0, 27, 68)\n  **active:** opacity: 0.8\n  **focus:** outline-color: currentcolor; opacity: 0.5; color: rgb(0, 27, 68)\n- `.db`:\n  **hover:** opacity: 0.5\n  **active:** opacity: 0.8\n  **focus:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout, colors, copy and components match preview"},{"id":"material-design","name":"Material Design","vendor":"Google","fw":["Multi"],"theme":"设计语言 / 规范","link":"https://m3.material.io","repo":"https://m3.material.io","license":"Apache","chips":["Button","Card","Color","Type"],"kind":"item","img":"previews/material-design.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate Material Design 3 (m3.material.io) above-the-fold UI (1280px)\n\nBrand: **Material Design**. Tagline: \"Material Design 3 is Google's open-source design system for building beautiful, usable products.\"\n\n## Layout\n- **Left rail** (white/light gray, width ~84px, icons + labels): top search icon, then Home, Get started, Develop, Foundations, Styles, Components, Blog (each with a simple icon and label). Bottom: two theme icons (light/dark). Use the icon names from read.json: material_design, apps, code, book, palette, add_circle, pages.\n- **Top app bar** (white, left of rail): \"Material Design\" logo/wordmark. Right: nav links Develop, Foundations, Styles, Components, Blog, and a **Get started** pill button (purple #6442d6, white, radius 48px).\n- **Hero** (light purple/lavender bg gradient): huge heading \"Material Design\" (~56px, bold, dark). Subcopy: \"Material Design 3 is Google's open-source design system for building beautiful, usable products.\" (~20px). Purple **Get started** pill button.\n- **Showcase gallery** (below hero, purple background): a grid of phone/device mockups showing various Material UI screens (use CSS rectangles with colored/gradient screens and text). The gallery should visually suggest multiple mobile app screenshots in a collage.\n\n## Colors (real)\n- Page bg: #ffffff / light lavender #f3e8ff\n- Text: #1f1f1f\n- Primary purple: #6442d6 (buttons)\n- Hero bg: soft lavender/purple gradient (#f3e8ff to #e9d5ff)\n- Gallery bg: purple/violet tones\n- Rail: #f9f5ff\n\n## Typography\n- \"Google Sans Text\", sans-serif. Hero ~56px/700; nav ~15px; body ~20px.\n\n## Vibe\nGoogle's modern design system site: soft purple, friendly, image-heavy hero gallery. Use CSS shapes for phones, no external images. Single self-contained HTML + inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.google-symbols.notranslate` → transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `mio-toggle-switch.section-menu.active` → transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `div.track.ng-star-inserted` → transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1)\n- `a` → transition: border-radius 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.mio-button` → transition: all 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `div.state-overlay` → transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1)\n- `button.ally-container.ally-container-align` → transition: transform 0.2s linear\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-link[_ngcontent-ocy-c44]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n- `.section-fab[_ngcontent-ocy-c39]`:\n  **hover:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus-visible:** outline: 0\n- `.section-link[_ngcontent-ocy-c39]`:\n  **hover:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus:** outline: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor\n  **focus-visible:** outline: 0\n- `-visible`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.ctas[_ngcontent-ocy-c28] a[_ngcontent-ocy-c28]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.split-asset-video[_ngcontent-ocy-c28] .video-container button`:\n  **hover:** filter: brightness(0.95); outline: 0\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.feature-block[_nghost-ocy-c19] a[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `[size=\"small\"][_nghost-ocy-c19] a.thumbnail[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `[_nghost-ocy-c26] .block p`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n- `mio-card-set.stack[_nghost-ocy-c19] a[_ngcontent-ocy-c19]`:\n  **hover:** outline: 0\n  **active:** outline: medium none invert\n  **focus:** outline: 0\n- `.about[_ngcontent-ocy-c29] a[_ngcontent-ocy-c29]`:\n  **hover:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blur  {\n  0%  {\n  filter: blur(50px);\n  } 100%  {\n  filter: blur(8px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 matches layout, colors, copy and @keyframes blur; gallery simplified vs real"},{"id":"sap-fiori","name":"SAP Fiori","vendor":"SAP","fw":["Multi"],"theme":"企业设计系统","link":"https://experience.sap.com/fiori-design","repo":"https://experience.sap.com/fiori-design","license":"Apache","chips":["Launchpad","Card","List","Object"],"kind":"item","img":"previews/sap-fiori.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the sap-fiori (https://experience.sap.com/fiori-design) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"v2 matches dark gallery card preview; prompt lacked base description"},{"id":"sap-fundamental","name":"SAP Fundamental","vendor":"SAP","fw":["Multi"],"theme":"企业样式","link":"https://sap.github.io/fundamental-styles","repo":"https://github.com/SAP/fundamental-styles","license":"Apache","chips":["Button","Card","Table","Modal"],"kind":"item","img":"previews/sap-fundamental.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate SAP Fundamental Styles (sap.github.io/fundamental-styles) above-the-fold UI (1280px)\n\nBrand: **Fundamental Library Styles** — \"Lightweight, framework-agnostic CSS component library.\"\n\n## Layout (Storybook docs site)\n- **Top toolbar** (white, border-bottom): left = Fundamental Library logo + search box \"Find components\"; right = toolbar icons and buttons (Left-to-Right, Cozy, fullscreen, version v0.41.8).\n- **Left sidebar** (white, width ~260px): search box at top, then Docs group with items: Introduction (active, SAP blue highlight), Content Density, MCP Server, Skills; Common CSS group; CX group; SAP Design group. Active item has a blue background and left border.\n- **Main area** (light gray #f7f8fa): h1 \"Fundamental Library Styles\" (dark, ~36px), h2 \"Lightweight, framework-agnostic CSS component library\" (gray, ~18px). A row of colored badges (npm package, version, build passing, downloads, slack, ui-fundamentals, REUSE compliant, Storybook, Hosted on Netlify). Below, a paragraph description and a \"Quick Start\" h2 with a code block showing HTML/CSS imports.\n- Below that: an \"Installation\" h2.\n\n## Colors (real)\n- Page bg: #f7f8fa\n- Text: #32363a (dark), #6a6d70 (muted)\n- SAP blue accent: #0a6ed1 (active sidebar, links)\n- Badge colors: dark gray, green, blue, purple, red, etc. (use typical Storybook/SAP badge palette)\n\n## Typography\n- \"72\",\"72full\", Arial, Helvetica, sans-serif. h1 ~36px; h2 ~18px; body ~15px; code ~13px monospace.\n\n## Vibe\nEnterprise Storybook documentation, clean, light gray, functional, with a code snippet. No external images. Single self-contained HTML + inline CSS.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.css-164ijz2` → transition: background, box-shadow 0.15s ease-out\n- `input.css-1yx1as5` → transition: all 0.15s ease\n- `div.css-u5496d` → transition: transform 0.1s ease-out\n- `div.css-wgmxay` → transition: opacity 0.2s ease-in-out\n- `div.css-9joh7c` → transition: border-color, box-shadow 0.2s, 0.2s ease, ease 0s, 0s\n- `iframe.css-1yxjmlr` → transition: background-position, visibility 0s, 0s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-efrm2i`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); opacity: 1\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-6bhde1 > *`:\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-164ijz2`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-9i3510`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.sidebar-item`:\n  **hover:** background: rgb(10, 110, 209); background-color: rgb(10, 110, 209)\n  **focus:** background: rgb(10, 110, 209); background-color: rgb(10, 110, 209)\n- `.css-1tgvuaz`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); opacity: 1; background: white; color: rgb(10, 110, 209); background-color: white\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-wgmxay`:\n  **hover:** opacity: 1\n  **focus:** opacity: 1; outline: transparent solid 2px; box-shadow: rgb(10, 110, 209) 0px 0px 0px 4px inset\n  **focus-visible:** opacity: 1; outline: transparent solid 2px; box-shadow: rgb(10, 110, 209) 0px 0px 0px 4px inset\n- `.css-1gdpbrl`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-cnfdwd`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-bnoxje`:\n  **hover:** color: rgb(10, 110, 209); background: rgba(10, 110, 209, 0.14); background-color: rgba(10, 110, 209, 0.14)\n  **active:** color: rgb(10, 110, 209); background: rgb(219, 236, 255); background-color: rgb(219, 236, 255)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n- `.css-qh61eq`:\n  **hover:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **active:** background: rgb(238, 244, 249); background-color: rgb(238, 244, 249)\n  **focus:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209); transform: translateY(0px)\n  **focus-visible:** outline: rgb(10, 110, 209) solid 2px; outline-color: rgb(10, 110, 209)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes animation-r0iffl  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.4;\n  }\n}\n@-webkit-keyframes animation-u07e3c  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":2,"hifiNotes":"布局与预览高度一致：toolbar、sidebar（SAP蓝色active项）、主区域标题/badges/代码块/Installation均正确还原。色彩#0a6ed1使用准确。两个@keyframes及全部verbatim transitions已包含，reveal入场动画实现良好。badge排列与预览略有差异但不影响整体通过。"},{"id":"oracle-redwood","name":"Oracle Redwood","vendor":"Oracle","fw":["Multi"],"theme":"企业设计系统","link":"https://www.oracle.com/redwood","repo":"https://www.oracle.com/redwood","license":"商用","chips":["Button","Card","Form","Page"],"kind":"item","img":"previews/oracle-redwood.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nReproduce the oracle-redwood (https://www.oracle.com/redwood) homepage above-the-fold UI at 1280px width. (Base description missing — infer from the animation specs below and the site URL.)\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：深色主题窗口布局与预览高度一致，macOS风格chrome栏、magenta主色按钮、toggle开关、badge按钮、select下拉、card组件及底部tab导航均正确还原。入场fadeInUp动画已实现，hover过渡效果齐全。"},{"id":"twilio-paste","name":"Twilio Paste","vendor":"Twilio","fw":["React"],"theme":"通信 / 企业","link":"https://paste.twilio.com","repo":"https://github.com/twilio-labs/paste","license":"Apache","chips":["Button","Card","Form","Grid"],"kind":"item","img":"previews/twilio-paste.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Twilio Paste as a dark gallery card (1280px)\n\nBrand: **Twilio Paste**. Tech/theme tagline: `React · 通信 / 企业`. Component chips: `Button · Card · Form · Grid`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **Twilio Paste** (white, 24px bold).\n- Tagline: `React · 通信 / 企业` (gray, 14px).\n- Controls: **Primary** button (light blue #7dd3fc, dark text), **Default** (dark gray #1f2937), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Form`, `Grid`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Swiper。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.experiencefragment.global-header` → transition: transform, -webkit-transform 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n- `div.select-arrow` → transition: transform, -webkit-transform 0.15s, 0.15s ease-in-out, ease-in-out 0s, 0s\n- `nav.navigation-v2__nav` → transition: opacity 0.3s ease-in-out\n- `a.button.button-secondary` → transition: background-color, color, border-color, box-shadow, color, border-color 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s, 0s\n- `wistia-player.cmp-media-video__thumbnail.cmp-media-video__thumbnail--wistia-video` → transition: opacity, visibility 0.2s, 0.2s ease, ease 0s, 0s\n- `path` → transition: color 0.3s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.paragraph-small-medium`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.utility-nav__link`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.paragraph-large-semibold`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.cmp-linklist__dropdown-button__title`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.paragraph-small-semibold`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes blink  {\n  0%, 100%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes code-snippet-cursor-blink  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes cube-float-1  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg);\n  } 50%  {\n  transform: translate(0.3rem, -0.5rem) rotate(5deg);\n  }\n}\n@-webkit-keyframes cube-float-2  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg);\n  } 50%  {\n  transform: translate(-0.3rem, 0.5rem) rotate(-5deg);\n  }\n}\n@-webkit-keyframes cube-float-3  {\n  0%, 100%  {\n  transform: translate(0px) rotate(0deg) scale(1);\n  } 50%  {\n  transform: translate(0.2rem, 0.3rem) rotate(3deg) scale(1.05);\n  }\n}\n@-webkit-keyframes chat-message-in  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.8rem);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes modal-fade  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes slide-up  {\n  0%  {\n  opacity: 0;\n  transform: translate3d(0px, 2rem, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@-webkit-keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes react-vanilla-styles-8d753j0  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes react-vanilla-styles-1pcw8yy0  {\n  0%  {\n  opacity: 0;\n  transform: translateY(20px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes react-vanilla-styles-1pcw8yy1  {\n  0%, 60%, 100%  {\n  transform: translateY(0px);\n  } 30%  {\n  transform: translateY(-10px);\n  }\n}\n@-webkit-keyframes loading-dual-ring  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，顶部light-blue边框、macOS chrome栏、浅蓝色Primary按钮/开关、teal badge圆点及底部chip导航（Button/Card/Form/Grid）均正确还原。slide-up入场动画已实现，过渡效果齐全。"},{"id":"hubspot-canvas","name":"HubSpot Canvas","vendor":"HubSpot","fw":["React"],"theme":"营销 / 企业","link":"https://canvas.hubspot.com","repo":"https://github.com/HubSpot/canvas","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/hubspot-canvas.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for HubSpot Canvas as a dark gallery card (1280px)\n\nBrand: **HubSpot Canvas**. Tech/theme tagline: `React · 营销 / 企业`. Component chips: `Button · Card · Form · Modal`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **HubSpot Canvas** (white, 24px bold).\n- Tagline: `React · 营销 / 企业` (gray, 14px).\n- Controls: **Primary** (light blue #7dd3fc), **Default** (dark gray), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Form`, `Modal`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `button`:\n  **hover:** background-color: rgba(255, 255, 255, 0.9) !important; text-decoration: underline !important\n- `-visible`:\n  **hover:** text-decoration: underline !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes banner_animation  {\n  0%  {\n  transform: translateY(200vh) translateZ(3e+09px);\n  opacity: 0;\n  } 99%  {\n  opacity: 0;\n  } 100%  {\n  transform: translateY(var(--hs-banner-translate-y,0)) translateZ(3000000000px);\n  opacity: 1;\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-left  {\n  0%  {\n  transform: translate(0px, 100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-left  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, 100%);\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-right  {\n  0%  {\n  transform: translate(0px, 100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-right  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, 100%);\n  }\n}\n@keyframes feedback-slide-in-hs-feedback-top  {\n  0%  {\n  transform: translate(0px, -100%);\n  } 100%  {\n  transform: translate(0px, 0px);\n  }\n}\n@keyframes feedback-slide-out-hs-feedback-top  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(0px, -100%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，顶部light-blue边框、HubSpot Canvas品牌、营销/企业标签、Primary按钮/开关/badge/select/card组件及底部chip导航（Button/Card/Form/Modal）均正确还原。slide-up入场动画及HubSpot特有feedback-slide-in/banner_animation关键帧已包含。"},{"id":"audi-ui","name":"Audi UI","vendor":"Audi","fw":["Multi"],"theme":"汽车 / 品牌","link":"https://www.audi.com/ci","repo":"https://www.audi.com/ci","license":"商用","chips":["Button","Card","Grid","Type"],"kind":"item","img":"previews/audi-ui.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Audi UI as a dark gallery card (1280px)\n\nBrand: **Audi UI**. Tech/theme tagline: `Multi · 汽车 / 品牌`. Component chips: `Button · Card · Grid · Type`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent pink.\n- Top-left: macOS dots + brand **Audi UI** (white, 24px bold).\n- Tagline: `Multi · 汽车 / 品牌` (gray, 14px).\n- Controls: **Primary** (pink #f472b6, dark text), **Default** (dark gray), input `Type here...`.\n- Second row: pink toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Grid`, `Type`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary pink #f472b6, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.h-4.w-4` → transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.z-5` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.bottom-0` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.po-brandportal__row-container.cm-blockmanager__section` → transition: all 0.2s linear\n- `div.pb-text-image__text-inner.js-pb-text-image__editor` → transition: background 0.2s linear\n- `button.co-viewer__close.js-co-viewer__close` → transition: background-color, color 0.2s, 0.2s linear, linear 0s, 0s\n- `div.cm-modal__overlay.js-cm-modal__overlay` → transition: all 0.3s ease\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，粉色顶部边框与Primary按钮/开关（#f472b6）、Audi UI品牌、汽车/品牌标签、teal badge及底部chip导航（Button/Card/Grid/Type）均正确还原。Audi特有cubic-bezier过渡时序已包含，slide-up入场动画实现良好。"},{"id":"backpack","name":"Backpack","vendor":"Skyscanner","fw":["React"],"theme":"旅行 / 企业","link":"https://backpack.github.io","repo":"https://github.com/Skyscanner/backpack","license":"Apache","chips":["Button","Card","Breadcrumb","Dialog"],"kind":"item","img":"previews/backpack.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for Backpack as a dark gallery card (1280px)\n\nBrand: **Backpack**. Tech/theme tagline: `React · 旅行 / 企业`. Component chips: `Button · Card · Breadcrumb · Dialog`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent light blue.\n- Top-left: macOS dots + brand **Backpack** (white, 24px bold).\n- Tagline: `React · 旅行 / 企业` (gray, 14px).\n- Controls: **Primary** (light blue #7dd3fc), **Default** (dark gray), input `Type here...`.\n- Second row: light-blue toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Breadcrumb`, `Dialog`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary light blue #7dd3fc, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.site-logo` → transition: all 0.2s ease-in-out\n- `a.copy-anchor` → transition: opacity, transform 0.2s, 0.2s ease-in-out, ease-in-out 0s, 0s\n- `a` → transition: all, color 0.05s, 0.2s ease-in-out, ease-in-out 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@-webkit-keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  transform: none;\n  }\n}\n@-webkit-keyframes slide-down  {\n  0%  {\n  opacity: 0;\n  transform: translateY(-100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes lds-ellipsis1  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes lds-ellipsis3  {\n  0%  {\n  transform: scale(1);\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes lds-ellipsis2  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(24px, 0px);\n  }\n}\n@keyframes lds-dual-ring  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1, 1);\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1, 1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  }\n}\n@keyframes rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes prixClipFix  {\n  0%  {\n  clip-path: polygon(50% 50%, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px);\n  } 25%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 0px, 100% 0px, 100% 0px);\n  } 50%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 100% 100%, 100% 100%);\n  } 75%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 100%);\n  } 100%  {\n  clip-path: polygon(50% 50%, 0px 0px, 100% 0px, 100% 100%, 0px 100%, 0px 0px);\n  }\n}\n@-webkit-keyframes blink  {\n  50%  {\n  background-color: transparent;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，light-blue顶部边框与Primary按钮/开关、Backpack品牌、旅行/企业标签、teal badge及底部chip导航（Button/Card/Breadcrumb/Dialog）均正确还原。fade-in(scale入场)动画及Backpack特有spinner-border/slide-down/prixClipFix等关键帧已包含。"},{"id":"devui-design","name":"DevUI Design","vendor":"华为 Huawei","fw":["Vue"],"theme":"企业级 / 华为","link":"https://devui.design","repo":"https://github.com/DevCloudFE/devui","license":"MIT","chips":["Button","Card","Table","Tree"],"kind":"item","img":"previews/devui-design.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate the above-the-fold UI for DevUI Design as a dark gallery card (1280px)\n\nBrand: **DevUI Design**. Tech/theme tagline: `Vue · 企业级 / 华为`. Component chips: `Button · Card · Table · Tree`.\n\n## Layout\n- Single rounded dark card on #0b0c14 bg. Top border accent green.\n- Top-left: macOS dots + brand **DevUI Design** (white, 24px bold).\n- Tagline: `Vue · 企业级 / 华为` (gray, 14px).\n- Controls: **Primary** (green #4ade80, dark text), **Default** (dark gray), input `Type here...`.\n- Second row: green toggle, **Badge** (teal), **Select**.\n- Card panel: title and body text.\n- Bottom chips: `Button`, `Card`, `Table`, `Tree`.\n\n## Colors\n- Background #0b0c14, surface #11121c, border #1f2937, primary green #4ade80, badge teal #0e7490, default/input #1f2937, text white/gray.\n\n## Typography\nSystem sans-serif; brand 24px bold; tagline 14px; controls 15px; card title 18px; chips 14px.\n\n## Vibe\nDark, minimal, rounded UI gallery card. No images.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.header-logo-container` → transition: color 0.3s ease\n- `div.logo` → transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes devuiDiffusion  {\n  0%  {\n  box-shadow: rgba(37, 43, 58, 0.3) 0px 0px;\n  } 100%  {\n  box-shadow: rgba(37, 43, 58, 0) 0px 0px 0px 4px;\n  }\n}\n@keyframes card-scale  {\n  0%  {\n  clip-path: circle(0px at 50% 50%);\n  } 100%  {\n  clip-path: circle(200px at 50% 50%);\n  }\n}\n@keyframes logo-scale  {\n  0%  {\n  clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);\n  } 50%  {\n  clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);\n  } 100%  {\n  clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);\n  }\n}\n@keyframes arrow-move  {\n  0%  {\n  transform: translate(-150%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：暗色画廊卡片与预览高度一致，绿色顶部边框与Primary按钮/开关（#4ade80）、DevUI Design品牌、Vue/企业级/华为标签、teal badge及底部chip导航（Button/Card/Table/Tree）均正确还原。DevUI特有devuiDiffusion/card-scale/logo-scale关键帧已包含，fade-up入场动画实现良好。"},{"id":"mand-mobile","name":"Mand Mobile","vendor":"滴滴 Didi","fw":["Vue"],"theme":"移动端 / 滴滴","link":"https://didi.github.io/mand-mobile","repo":"https://github.com/didi/mand-mobile","license":"Apache","chips":["Button","Tab","Toast","Popup"],"kind":"item","img":"previews/mand-mobile.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Mand Mobile homepage (https://didi.github.io/mand-mobile). It is a dark-themed Vue.js 2 mobile UI toolkit landing page; the hero is a component demo panel, not a marketing headline.\n\n[v1 content preserved, but override with these fixes:]\n\nBRAND / VIBE:\n- Brand: \"Mand Mobile\" — DiDi mobile UI toolkit for financial scenarios.\n- Dark background: #0d0f14 (near black), white text.\n- Clean, modern component-demo aesthetic.\n\nTOP-LEFT \"WINDOW\" TITLE BAR (above the demo panel):\n- Red, yellow, green traffic-light dots (#ff5f57, #ffbd2e, #28c840) in a row, then white text \"Mand Mobile\".\n- Below the title: small gray text \"Vue · 移动端 / 滴滴\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, centered, padding 30px):\n- Row 1: green pill button \"Primary\" (bg #3ccf4a, text black/dark), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded).\n- Row 2: green ON toggle switch, small blue pill badge \"Badge\" (bg #2563eb), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Tab\", \"Toast\", \"Popup\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.pace-activity` → animation: pace-spinner 0.4s linear infinite normal\n- `div.pic.backboard` → animation: fadeIn-data-v-03e4d946 0.7s ease-in-out 1 normal forwards\n- `div.pic.list` → animation: list-data-v-03e4d946 0.7s ease-in-out 1 normal forwards\n- `div.pic.mr-king` → animation: mrKing-data-v-03e4d946, fadeIn-data-v-03e4d946 1s, 1s ease-in-out, ease-in-out 0s, 0s 1, 1 normal, normal forwards, forwards\n- `div.pic.icon` → animation: icon-move0-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `img` → animation: flutter-up-data-v-03e4d946 3s ease-in-out 0.8s infinite alternate\n- `div.pic.icon` → animation: icon-move1-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `img` → animation: flutter-down-data-v-03e4d946 3s ease-in-out 0.8s infinite alternate\n- `div.pic.icon` → animation: icon-move2-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move3-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move4-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n- `div.pic.icon` → animation: icon-move5-data-v-03e4d946 0.8s ease-in-out 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.default-header-container` → transition: width, height, all 0s, 0.5s, 0.5s ease, ease, ease 0s, 0s, 0s\n- `img.logo-img` → transition: all 0.3s ease\n- `div.default-header-github.default-header-operater` → transition: opacity 0.3s ease\n- `div.pic.list` → transition: transform 1s ease\n- `div.hover-wrap` → transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)\n- `div.characteristic-card.home-characteristic-card` → transition: background-color 0.3s ease\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes icon-move0-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-2em);\n  }\n}\n@-webkit-keyframes icon-move1-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-1.61803em, -1.17557em);\n  }\n}\n@-webkit-keyframes icon-move2-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-0.618034em, -1.90211em);\n  }\n}\n@-webkit-keyframes icon-move3-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0.618034em, -1.90211em);\n  }\n}\n@-webkit-keyframes icon-move4-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(1.61803em, -1.17557em);\n  }\n}\n@-webkit-keyframes icon-move5-data-v-03e4d946  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(2em);\n  }\n}\n@-webkit-keyframes flutter-down-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(0.1em);\n  }\n}\n@-webkit-keyframes flutter-up-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-0.1em);\n  }\n}\n@-webkit-keyframes list-data-v-03e4d946  {\n  0%  {\n  opacity: 0.4;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(-0.06em);\n  }\n}\n@-webkit-keyframes mrKing-data-v-03e4d946  {\n  0%  {\n  transform: translateY(0.1em);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@-webkit-keyframes fadeIn-data-v-03e4d946  {\n  0%  {\n  opacity: 0.4;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark window panel matches preview exactly; all 12 verbatim @keyframes present"},{"id":"ke-design","name":"Ke.Design","vendor":"贝壳 Beike","fw":["React"],"theme":"房产 / 企业","link":"https://ke.design","repo":"https://github.com/ke-cloud/ke-design","license":"MIT","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/ke-design.png","prompt":""},{"id":"vercel-geist","name":"Vercel Geist","vendor":"Vercel","fw":["Multi"],"theme":"极简 / 开发者","link":"https://vercel.com/geist","repo":"https://github.com/vercel/geist","license":"MIT","chips":["Button","Card","Font","Color"],"kind":"item","img":"previews/vercel-geist.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Vercel Geist preview. It is a dark-themed component-demo landing page (not the live docs page).\n\nBRAND / VIBE:\n- Brand: \"Vercel Geist\" — developer tool design system.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic.\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"Vercel Geist\".\n- Below the title: small gray text \"Multi · 极简 / 开发者\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, centered, padding 30px):\n- Row 1: pink pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: pink ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #0d9488), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Font\", \"Color\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n- Place the demo panel in the upper-left area, leaving plenty of dark background on the right/bottom (like a desktop window preview).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `kbd.font-sans!.[&>span]:font-inherit` → animation: search-module__HXqoSW__fadeIn 0.2s ease 0.5s 1 normal forwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.group-hover:text-gray-1000.transition-colors` → transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.hover:opacity-80.outline-none` → transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.outline-none.m-0` → transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.transition-all` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.flex.flex-1` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.-translate-y-1\\/2`:\n  **hover:** opacity: 0.8\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes playground-module__0igO8W__rotate  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(-360deg);\n  }\n}\n@keyframes glyph-module__bcZODG__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes stroke-detail-module__IOyybW__float  {\n  0%  {\n  transform: translate(0px);\n  } 50%  {\n  transform: translate(var(--x), var(--y));\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n@keyframes hero-module__G2XgCG__fadeIn  {\n  0%  {\n  opacity: 0;\n  transform: scaleY(0);\n  } 100%  {\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes hero-module__G2XgCG__fadeInDelayed  {\n  0%  {\n  visibility: visible;\n  opacity: 0;\n  transform: scaleY(0);\n  } 100%  {\n  visibility: visible;\n  opacity: 1;\n  transform: scaleY(1);\n  }\n}\n@keyframes with-redirect-module__disV0a__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes videos-module__X7uD1W__scroll  {\n  0%  {\n  transform: translate(0px, 0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes search-module__HXqoSW__fadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes soft-fade-in  {\n  0%  {\n  opacity: 0.3;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes show  {\n  0%  {\n  transform: translate3d(0, var(--translate-y-start), 0);\n  opacity: 0;\n  } 100%  {\n  transform: translate3d(0, var(--translate-y-end), 0);\n  opacity: 1;\n  }\n}\n@keyframes hide  {\n  0%  {\n  transform: translate3d(0, var(--translate-y-end), 0);\n  opacity: 1;\n  } 100%  {\n  transform: translate3d(0, var(--translate-y-start), 0);\n  opacity: 0;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes spinner-opacity  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.15;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary dark window matches preview; upper-left placement correct; 15 keyframes present"},{"id":"workday-canvas","name":"Workday Canvas","vendor":"Workday","fw":["React"],"theme":"企业 HR","link":"https://designsystem.workday.com","repo":"https://github.com/Workday/canvas-kit","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/workday-canvas.png","prompt":""},{"id":"zendesk-garden","name":"Zendesk Garden","vendor":"Zendesk","fw":["React"],"theme":"企业 / 客服","link":"https://garden.zendesk.com","repo":"https://github.com/zendeskgarden/react-components","license":"Apache","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/zendesk-garden.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Zendesk Garden preview.\n\nBRAND / VIBE:\n- Brand: \"Zendesk Garden\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"Zendesk Garden\".\n- Below the title: small gray text \"React · 企业 / 客服\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #67e8f9, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #67e8f9, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Modal\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.StyledNavigationLink__StyledGatsbyLink-sc-1a9tae1-0.jVjhwX` → transition: background-color, color 0.25s, 0.25s ease-in-out, ease-in-out 0s, 0s\n- `div.StyledTextInput-sc-1r6733h-0.StyledTextFauxInput-sc-yqw7j9-0` → transition: border-color, box-shadow, background-color, color, z-index 0.25s, 0.1s, 0.25s, 0.25s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s\n- `svg` → transition: transform, color 0.25s, 0.25s ease-in-out, ease-in-out 0s, 0s\n- `button.StyledButton-sc-qe3ace-0.StyledIconButton-sc-1t0ughp-0` → transition: border-color, box-shadow, background-color, color, outline-color, z-index 0.25s, 0.1s, 0.25s, 0.25s, 0.1s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s, 0s, 0s\n- `div.StyledFloatingListbox-sc-1cp6spf-0.StyledFloatingMenu-sc-1rc7ahb-0` → transition: opacity, visibility 0.2s, 0.2s ease-in-out, linear 0s, 0s\n- `img` → transition: opacity 0.25s linear\n- `h1.StyledFont-sc-1iildbo-0.daCbxZ` → transition: color 0.1s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `div`:\n  **focus:** outline: none!important\n- `.fHLPCH`:\n  **hover:** background-color: rgba(31, 115, 183, 0.08); color: rgb(57, 67, 75)\n  **active:** background-color: rgba(31, 115, 183, 0.16); color: rgb(41, 50, 57)\n  **focus:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.jVjhwX`:\n  **hover:** color: rgb(19, 69, 109); background-color: rgba(31, 115, 183, 0.08); text-decoration: underline\n  **active:** color: rgb(15, 54, 85); background-color: rgba(31, 115, 183, 0.24)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.hSxPeo`:\n  **hover:** border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n  **focus:** outline: transparent solid 2px; border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n  **focus-visible:** outline: transparent solid 2px; border-color: rgb(31, 115, 183); border-top-color: rgb(31, 115, 183); border-right-color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); border-left-color: rgb(31, 115, 183)\n- `.kAnOZO`:\n  **hover:** background-color: rgba(31, 115, 183, 0.08); color: rgb(57, 67, 75)\n  **active:** background-color: rgba(31, 115, 183, 0.16); color: rgb(41, 50, 57)\n  **focus:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n  **focus-visible:** outline: transparent solid 2px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgb(31, 115, 183) 0px 0px 0px 3px\n- `.fEvSYX`:\n  **focus:** outline: none!important\n- `.leRdEp`:\n  **hover:** text-decoration: underline; color: rgb(19, 69, 109)\n  **active:** text-decoration: underline; color: rgb(15, 54, 85)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: rgb(31, 115, 183)\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: rgb(31, 115, 183)\n- `.dffvio`:\n  **hover:** color: rgb(19, 69, 109); text-decoration: underline\n  **active:** color: rgb(15, 54, 85)\n  **focus:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor\n  **focus-visible:** outline: rgb(31, 115, 183) solid 2px; color: rgb(31, 115, 183); outline-color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes gSzxJj  {\n  0%  {\n  transform: translateY(-20px);\n  pointer-events: none;\n  } 100%  {\n  pointer-events: auto;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"cyan primary window panel matches preview; gSzxJj keyframe present"},{"id":"bbc-gel","name":"BBC GEL","vendor":"BBC","fw":["Multi"],"theme":"媒体 / 公共","link":"https://www.bbc.co.uk/gel","repo":"https://www.bbc.co.uk/gel","license":"CC-BY","chips":["Button","Card","Grid","Type"],"kind":"item","img":"previews/bbc-gel.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the BBC GEL preview.\n\nBRAND / VIBE:\n- Brand: \"BBC GEL\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"BBC GEL\".\n- Below the title: small gray text \"Multi · 媒体 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Grid\", \"Type\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.gel-billboard__link` → transition: all 0.1s ease\n- `a.gel-promo__meta-item-label.gel-promo__meta-item-link` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.b-r a`:\n  **hover:** border-bottom-color: rgb(0, 109, 239)\n  **active:** border-bottom-color: rgb(0, 109, 239)\n  **focus:** outline: 0; border-bottom-color: rgb(0, 109, 239)\n- `.orbit-header-account a#idcta-link`:\n  **hover:** background: #e6e8ea; background-color: rgb(230, 232, 234)\n  **focus:** background: #e6e8ea; background-color: rgb(230, 232, 234)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary window panel matches preview; prompt has only transitions (no keyframes block)"},{"id":"uswds","name":"U.S. Web Design System","vendor":"U.S. GSA","fw":["Web Components"],"theme":"政府 / 公共","link":"https://designsystem.digital.gov","repo":"https://github.com/uswds/uswds","license":"CC0","chips":["Button","Card","Form","Banner"],"kind":"item","img":"previews/uswds.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the U.S. Web Design System preview.\n\nBRAND / VIBE:\n- Brand: \"U.S. Web Design System\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"U.S. Web Design System\".\n- Below the title: small gray text \"Web Components · 政府 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #a78bfa, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #a78bfa, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Banner\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.usa-overlay` → transition: opacity 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.usa-site-alert--info .usa-alert .usa-alert__body .usa-link`:\n  **hover:** color: rgb(26, 68, 128)\n  **active:** color: rgb(22, 46, 81)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); background: #fff; background-color: rgb(255, 255, 255)\n- `.usa-accordion__button`:\n  **hover:** text-decoration: underline; color: rgb(0, 94, 162); background-color: rgb(240, 240, 240); background-image: url(\"../img/usa-icons/add.svg\"), linear-gradient(transparent, transparent)\n  **active:** color: rgb(22, 46, 81); text-decoration: underline\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n- `.usa-link`:\n  **hover:** color: rgb(255, 255, 255); text-decoration: underline\n  **active:** color: rgb(22, 46, 81)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255)\n- `.usa-menu-btn`:\n  **hover:** text-decoration: underline; background-color: rgb(26, 68, 128); color: rgb(255, 255, 255)\n  **active:** text-decoration: underline; color: rgb(255, 255, 255)\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n- `.usa-nav__close`:\n  **hover:** text-decoration: underline; color: currentcolor\n  **active:** color: rgb(22, 46, 81); text-decoration: underline\n  **focus:** outline: .25rem solid #2491ff; outline-color: rgb(36, 145, 255); text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes slidein-left  {\n  0%  {\n  transform: translateX(15rem);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple primary window panel matches preview; slidein-left keyframe present"},{"id":"govuk","name":"GOV.UK Design System","vendor":"UK Gov","fw":["Multi"],"theme":"政府 / 公共","link":"https://design-system.service.gov.uk","repo":"https://github.com/alphagov/govuk-frontend","license":"MIT","chips":["Button","Card","Form","Footer"],"kind":"item","img":"previews/govuk.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the GOV.UK Design System preview.\n\nBRAND / VIBE:\n- Brand: \"GOV.UK Design System\" — design system / component library.\n- Dark background: #0d0f14, white text, subtle gray secondary text.\n- Clean, modern component-demo aesthetic (like a dark desktop window preview).\n\nTOP-LEFT \"WINDOW\" TITLE BAR:\n- Red (#ff5f57), yellow (#ffbd2e), green (#28c840) traffic-light dots in a row, then bold white text \"GOV.UK Design System\".\n- Below the title: small gray text \"Multi · 政府 / 公共\".\n\nHERO COMPONENT DEMO PANEL (dark rounded rectangle with subtle border, ~max-width 700px, padding 30px, placed upper-left):\n- Row 1: colored pill button \"Primary\" (bg #f472b6, text #111), dark pill button \"Default\" (bg #1f2937, text white, border 1px #333), dark input \"Type here...\" (bg #111418, border #333, rounded, text gray).\n- Row 2: colored ON toggle switch (bg #f472b6, thumb dark), teal pill badge \"Badge\" (bg #2dd4bf), dark \"Select\" dropdown with down arrow.\n- Row 3: card with border radius 10px, border #2a2f35, title \"Card title\" white, subtitle \"This is a preview of the component look.\" gray.\n- Row 4: four small dark outlined buttons \"Button\", \"Card\", \"Form\", \"Footer\".\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial.\n- Panel items use flex row, gap 14px, margin 16px between rows.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.govuk-button`:\n  **hover:** color: rgb(255, 255, 255); background-color: rgb(11, 92, 62)\n  **active:** color: rgb(255, 255, 255)\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n- `.app-prose-scope a`:\n  **hover:** color: rgb(255, 255, 255)\n  **active:** color: rgb(255, 255, 255)\n  **focus:** outline: 3px solid rgba(0,0,0,0); color: rgb(11, 12, 12)\n- `.govuk-skip-link`:\n  **focus:** outline: 3px solid\n- `.govuk-header__homepage-link`:\n  **hover:** border-bottom-color: currentcolor\n  **active:** border-bottom-color: currentcolor\n  **focus:** outline: 3px solid rgba(0,0,0,0); border-bottom-color: currentcolor\n- `.govuk-service-navigation__toggle`:\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n- `.govuk-service-navigation__link`:\n  **focus:** outline: 3px solid rgba(0,0,0,0)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"pink primary window panel matches preview; no keyframes in prompt (empty spec)"},{"id":"nord","name":"Nord Design System","vendor":"Nordhealth","fw":["React"],"theme":"医疗 / 企业","link":"https://nordhealth.design","repo":"https://github.com/nordhealth-design/nord","license":"MIT","chips":["Button","Card","Form","Modal"],"kind":"item","img":"previews/nord.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Nord Design System homepage. v2 fixes: headline line breaks should match the reference exactly (four lines: \"The design / system behind / Nordhealth's / products\"), and sidebar icons should be simple thin-line SVG icons (not emojis) to match the clinical UI style.\n\nBRAND / VIBE:\n- Clean, clinical, healthcare design system.\n- White/light gray background, navy blue text (#0c1a3d), blue accent (#3559c7).\n- System sans-serif font, crisp spacing.\n\nTOP ANNOUNCEMENT BANNER (full width, very light gray bg #f6f8fb, text #0c1a3d, small padding 10px 24px, border-bottom #e2e8f0):\n- Text: \"Components v3.8.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.\"\n- Blue underlined link \"See what's new\".\n- Close \"×\" on the far right.\n\nLEFT SIDEBAR (width 250px, white bg, border-right #e2e8f0, padding 60px 0 20px 20px):\n- Top: blue/gray square icon + \"Nord Design System\".\n- Search bar with magnifying glass icon and ⌘K.\n- Navigation items with simple thin-line icons (magnifying glass, wrench, paintbrush, gear, puzzle, tokens, wind, grid, document, star, play, etc.) and right chevrons for collapsible sections.\n\nMAIN HERO (padding 90px 60px):\n- Left column headline (four lines, very large bold ~54px, line-height 1.1):\n  \"The design\n   system behind\n   \u003cblue>Nordhealth's\u003c/blue>\n   products\"\n- Subtitle, Get started / Browse components buttons, \"Works with any framework\" note.\n- Right column: white card \"New appointment\" with Patient name \"Eric Duna\", Appointment type \"Vaccination\", blue ON toggle, Cancel / Save appointment buttons.\n\nBELOW HERO:\n- Blue uppercase label \"EXPLORE CORE\" and heading \"Find any component in a keystroke\".\n\nSingle self-contained HTML, inline CSS, system fonts, no external assets.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `nord-tooltip` → transition: opacity, visibility 0.2s, 0.2s ease 0s, 0s\n- `nord-item.n:bg-surface` → transition: opacity, transform 0.2s, 0.2s ease, ease 0s, 0s\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes hp-marquee-left-84c762a8  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-50%);\n  }\n}\n@keyframes hp-marquee-right-84c762a8  {\n  0%  {\n  transform: translate(-50%);\n  } 100%  {\n  transform: translate(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"full sidebar+hero+card layout matches preview closely; marquee keyframes present"},{"id":"proj-2021-two-good-co","name":"Two Good Co","agency":"Two Good Co","year":2021,"award":"Awwwards SOTD","theme":"作品集 / 电商","tech":["Next.js","GSAP","平滑动画"],"link":"https://www.twogoodco.com","img":"previews/proj-2021-two-good-co.png","kind":"proj","fw":[],"vendor":"Two Good Co","prompt":""},{"id":"proj-2023-atmos","name":"Atmos","agency":"Wawa","year":2023,"award":"Awwwards","theme":"3D / WebGL","tech":["React Three Fiber","GLSL","GSAP"],"link":"https://atmos.studio","img":"previews/proj-2023-atmos.png","kind":"proj","fw":[],"vendor":"Wawa","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the atmos.studio landing page as captured by the read (a parked/for-sale domain page).\n\nBRAND / VIBE:\n- Plain white background (#ffffff), simple sans-serif text, minimal registrar-style landing page.\n- Centered content, calm and neutral.\n\nHERO (centered in viewport):\n- Large heading: \"atmos.studio\" (black/near-black #111111, ~48px, bold).\n- Subheading in Chinese: \"此域名已注册，但仍可购买。\" (gray #555555, ~18px, below the heading with 16px gap).\n- Primary button: \"获得此域名\" (Get this domain) — black background (#111111), white text, rounded corners 6px, padding ~12px 24px, centered below the subheading.\n\nTOP (optional tiny skip-link or nav can be omitted; keep page minimal).\n\nTYPOGRAPHY / SPACING:\n- Font: system sans-serif stack (Helvetica Neue, Arial, sans-serif).\n- All content vertically and horizontally centered in the viewport.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.ux-text.ux-button` → transition: all 0.15s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.ux-button:where([data-version=\"2400\"])`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.ms-3`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes reveal  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes pulse-animation  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes circle-animation  {\n  0%  {\n  stroke-dashoffset: 192;\n  transform: rotate(0deg);\n  } 50%  {\n  stroke-dashoffset: 96;\n  transform: rotate(180deg);\n  } 100%  {\n  stroke-dashoffset: 192;\n  transform: rotate(1turn);\n  }\n}\n@keyframes BuyNowActionBox_reveal__SW4z_  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes BuyNowActionBox_pulse-animation__M8reV  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes AfternicLogo_reveal__G2Igw  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes AfternicLogo_pulse-animation__GMlAo  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes AfternicLogoV2_reveal__CHGst  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes AfternicLogoV2_pulse-animation__jD0ZB  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes TrustPilotWidget_reveal__OnrNq  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes TrustPilotWidget_pulse-animation__BbLqK  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes LeaseToOwnCalculator_reveal__mHXuU  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes LeaseToOwnCalculator_pulse-animation__Hw_n3  {\n  0%  {\n  box-shadow: 0 0 0 0 var(--ux-ix2s5q,blue);\n  } 100%  {\n  box-shadow: 0 0 0 12px var(--ux-cao06b,#fff);\n  }\n}\n@keyframes Survey_reveal__zAFcM  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"centered domain page matches preview; all reveal/pulse keyframes from prompt present"},{"id":"proj-2023-obys","name":"Obys Agency","agency":"Obys","year":2023,"award":"Awwwards","theme":"创意机构","tech":["Vanilla JS","GSAP","WebGL"],"link":"https://obys.agency","img":"previews/proj-2023-obys.png","kind":"proj","fw":[],"vendor":"Obys","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nRecreate the ABOVE-THE-FOLD (1280px wide) of the Obys Agency homepage (https://obys.agency). v2 fixes: nav links should be title-case (not uppercase), tagline should be a single compact line/stacked block matching the reference, and overall proportions should match the screenshot.\n\nBRAND / VIBE:\n- Premium creative design agency, dark near-black background (#111111), white text.\n- Editorial serif typography, generous whitespace, elegant minimal layout.\n\nTOP NAV / HEADER (full width, white text, padding ~40px 60px, flex between):\n- Left: hamburger menu icon (three horizontal white lines) followed by lowercase wordmark \"obys\" (sans-serif bold, ~22px).\n- Center: tiny stacked text \"Obys — Creative Design Agency\" (10px, line-height 1.4, left of logo or to its right; in the reference it sits immediately to the right of the logo in a compact 4-line stack).\n- Right: nav links \"Works\", \"About\", \"Contacts\" (small, title-case, ~13px, spaced ~30px).\n\nHERO (left-aligned, large serif headline, padding-left ~60px, padding-top ~120px):\n- Small label \"01\" top-left of headline block (white, ~18px, same x-position as headline).\n- Headline stacked in large white serif type (~82px, line-height 1.05, uppercase):\n  \"WE DESIGN\n   UNIQUE\n   WEB/GRAPHIC\n   EXPERIENCE\"\n- The word \"WEB/GRAPHIC\" has a white underline rule directly beneath it (3–4px thick, spanning the word width).\n\nTYPOGRAPHY:\n- Headline font: Times / Times New Roman / Georgia serif.\n- Logo and nav: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `figure.ho-wo-2-r` → transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `img` → transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.l` → transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)\n- `a` → transition: max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.is-intro` → transition: color 0.4s ease-out\n- `g` → transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1)\n- `div` → transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"serif headline+underline+nav layout matches preview; CSS transitions from prompt applied"},{"id":"proj-2024-gentlerain","name":"Gentle Rain","agency":"Manish","year":2024,"award":"Awwwards","theme":"3D / WebGL","tech":["R3F","GLSL","Lenis"],"link":"https://gentlerain.ai","img":"previews/proj-2024-gentlerain.png","kind":"proj","fw":[],"vendor":"Manish","prompt":""},{"id":"proj-2025-adidas","name":"Adidas (Clone)","agency":"Ali Sanati","year":2025,"award":"Awwwards","theme":"产品落地页","tech":["Three.js","GSAP","Lenis"],"link":"https://github.com/Ali-Sanati/awwwards-adidas","img":"previews/proj-2025-adidas.png","kind":"proj","fw":[],"vendor":"Ali Sanati","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Adidas 3D Landing Page Preview\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full-viewport height, pure black background (#0a0a0a or #000)\n- Content is perfectly centered both horizontally and vertically\n- No header, no nav, no footer — just a single centered block\n\n## Typography (system fonts only)\n- Use system monospace for code blocks (`-apple-system`, `Menlo`, `Consolas`, monospace)\n- Body text uses system sans-serif stack\n\n## Hero Section (centered)\n1. **Main heading**: \"Adidas 3D 落地页\" — white (#fff), bold, large (~32-36px), centered\n2. **Subheading line 1**: \"该项目需要构建后才能预览。在本地执行：\" — light gray (#999 or #aaa), ~16px, centered, margin-top ~16px\n3. **Code block**: Dark background (#1a1a1a or #111), rounded corners (~6px), padding ~12px 20px, inline-block style, contains text:\n   `cd source/2025-adidas && npm install && npm run dev`\n   - Text color: light greenish-white (#e0e0e0), monospace font, ~14px\n4. **Subheading line 2**: \"源码已原样保存在 source/2025-adidas/, 可逐文件查看/复制。\" — dimmer gray (#666 or #777), ~14px, centered, margin-top ~16px\n\n## Vibe\n- Minimalist developer preview page\n- Dark mode, terminal-like aesthetic\n- Clean, lots of empty space around center block\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `nav.prc-components-UnderlineWrapper-eT-Yj.prc-UnderlineNav-UnderlineWrapper-GWONT` → animation: prc-UnderlineNav-detect-overflow-6HuSH auto linear 1 normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `button.Button.Button--iconOnly` → transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.Button.Button--iconOnly` → transition: color, fill, background-color, border-color 0.08s cubic-bezier(0.65, 0, 0.35, 1)\n- `button.prc-Button-ButtonBase-9n-Xk.overview-ref-selector` → transition: color, fill, background-color, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1) 0s, 0s, 0s, 0s\n- `div.ScrollMarksContainer-module__scrollMarksContainer__Eu7uU` → transition: transform 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.Button`:\n  **hover:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n  **active:** opacity: 0.75; background-color: rgba(0, 0, 0, 0) !important\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dev preview code-block page matches preview; all 15 GitHub-style keyframes present"},{"id":"proj-template-portfolio","name":"Portfolio Template","agency":"Community","year":2024,"award":"模板","theme":"作品集模板","tech":["Vite","GSAP","Three.js"],"link":"https://github.com","img":"previews/proj-template-portfolio.png","kind":"proj","fw":[],"vendor":"Community","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate GitHub Homepage Preview\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full viewport, appears mostly blank/white in the reference\n- No visible header, nav, hero text, or buttons in the reference capture\n- Essentially an empty/minimal page\n\n## Content\n- Reference shows a blank/white page with no discernible UI elements\n- Create a minimal empty page matching this appearance\n\n## Vibe\n- Blank / placeholder appearance\n- White or near-white background\n- No visible content elements\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 6 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span.progress-pjax-loader.Progress` → transition: opacity 0.4s linear 0.4s\n- `svg` → transition: opacity, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n- `svg` → transition: transform 0.2s ease-in-out\n- `qbsearch-input.search-input` → transition: opacity, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)\n- `button.header-search-button.placeholder` → transition: color, background-color, box-shadow, border-color 0.08s, 0.08s, 0.08s, 0.08s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s, 0s\n- `label.Primer_Brand__FormControl-module__FormControl-label___meeuB.Primer_Brand__FormControl-module__FormControl-label--medium___inrKd` → transition: transform 0.3s cubic-bezier(0.5, 0.16, 0.1, 1)\n- `span.Primer_Brand__TextInput-module__TextInput-wrapper___HgxNu.Primer_Brand__TextInput-module__TextInput-wrapper--medium___K9iTj` → transition: border 0.08s cubic-bezier(0.33, 1, 0.68, 1)\n- `input.Primer_Brand__TextInput-module__TextInput___EtKj3.TextInput` → transition: color, background-color, box-shadow 0.08s cubic-bezier(0.33, 1, 0.68, 1)\n- `button.Primer_Brand__Button-module__Button___lDruK.Primer_Brand__Button-module__Button--primary___xIC7G` → transition: background-color 0.48s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div.lp-HeroCarousel-visual` → transition: opacity, transform 0.2s, 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s\n- `div.BackToTop` → transition: opacity 0.2s ease-out\n- `a` → transition: color 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.color-fg-on-emphasis`:\n  **hover:** text-decoration: underline\n- `.color-fg-inherit`:\n  **hover:** text-decoration: underline\n- `.color-border-default`:\n  **hover:** text-decoration: underline; opacity: 0.75\n- `.NavDropdown-module__button__PEHWX`:\n  **hover:** opacity: 0.75\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.NavLink-module__link__EG3d4`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 2px solid\n  **focus-visible:** outline: 2px solid\n- `.octicon`:\n  **hover:** opacity: 1; transform: translate(0px)\n  **focus:** opacity: 1; transform: translate(0px)\n  **focus-visible:** opacity: 1; transform: translate(0px)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes AppFrame-a11yLink-focus  {\n  0%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(0.3, 0.25);\n  } 50%  {\n  color: var(--fgColor-accent,var(--color-accent-emphasis));\n  transform: scale(1);\n  } 55%  {\n  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));\n  } 100%  {\n  transform: scaleX(1);\n  }\n}\n@keyframes tooltip-appear  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes fade-out  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes fade-up  {\n  0%  {\n  opacity: 0.8;\n  transform: translateY(100%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-down  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0.5;\n  transform: translateY(100%);\n  }\n}\n@keyframes grow-x  {\n  100%  {\n  width: 100%;\n  }\n}\n@keyframes shrink-x  {\n  100%  {\n  width: 0%;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes pulse  {\n  0%  {\n  opacity: 0.3;\n  } 10%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0.3;\n  }\n}\n@keyframes pulse-in  {\n  0%  {\n  transform: scale(1);\n  } 50%  {\n  transform: scale3d(1.1, 1.1, 1.1);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes rotate-keyframes  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes AnimatedEllipsis-keyframes  {\n  0%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes SelectMenu-modal-animation  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"blank white page matches empty reference preview; keyframes included per prompt"},{"id":"proj-bruno-folio-2019","name":"Bruno Simon Folio 2019","agency":"Bruno Simon","year":2019,"award":"Awwwards SOTM","theme":"3D / WebGL 标杆","tech":["Three.js","Cannon.js","GSAP"],"link":"https://bruno-simon.com","img":"previews/proj-bruno-folio-2019.png","kind":"proj","fw":[],"vendor":"Bruno Simon","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Bruno Simon folio 2019 Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark navy/purple background (#1a1625 or #16131f)\n- Content area looks like a card or panel within the page\n- Padding around content ~24-32px\n\n## Top Bar (window chrome)\n- Left side: Three colored circles (red #ff5f57, yellow #febc2e, green #28c840) — macOS-style window controls\n- Right of circles: \"★ Bruno Simon folio 2019\" — white text, ~18px bold\n- Below title: \"外部开源 · WebGL 标杆\" — gray text (~#999), smaller (~13px)\n\n## Action Buttons Row\n- Horizontal row of buttons below subtitle:\n  - \"Live Demo\" — solid purple/violet button (~#8b5cf6 or similar), white text, rounded corners (~8px), padding ~10px 20px\n  - \"Source\" — outlined button, border ~#444, light text, rounded corners\n  - \"获奖级 UI 效果\" — outlined button, same style as Source\n\n## Toggle / Filter Bar\n- Below buttons: A toggle switch (purple/pill shaped, active/on state) on left\n- Next to it: \"Awwwards\" text in white/light\n- On right: \"▼ 分类\" dropdown trigger (bordered pill)\n\n## Preview Placeholder Section\n- Header: \"预览图占位\" — white bold, ~16px\n- Subtext: \"真实截图在右侧画廊中替换显示。\" — gray (~#888), ~14px\n- This section has a subtle border or background card appearance\n\n## Bottom Tags Row\n- Row of tag pills at bottom:\n  - \"3D\", \"WebGL\", \"滚动\", \"动效\"\n  - Each tag: small rounded pill, dark bg (~#2a2535), light gray border, white/light text, ~12px font\n\n## Typography\n- System sans-serif fonts only\n- Clean, modern feel\n- Chinese text throughout except English brand names\n\n## Vibe\n- Dark mode dashboard/gallery card aesthetic\n- Purple accent color scheme\n- Clean spacing, organized layout\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes map-player-animation  {\n  0%  {\n  transform: scale(1);\n  } 20%  {\n  transform: scale(1.2);\n  } 40%  {\n  transform: scale(1);\n  } 60%  {\n  transform: scale(1.2);\n  } 80%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple gallery card with buttons/tags matches preview; map-player-animation keyframe present"},{"id":"proj-bruno-folio-2025","name":"Bruno Simon Folio 2025","agency":"Bruno Simon","year":2025,"award":"Awwwards SOTM","theme":"3D / WebGL 标杆","tech":["React Three Fiber","Rapier","GSAP"],"link":"https://bruno-simon.com","img":"previews/proj-bruno-folio-2025.png","kind":"proj","fw":[],"vendor":"Bruno Simon","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Bruno Simon folio 2025 Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark navy/purple background (#1a1625 or #16131f)\n- Content area looks like a card/panel within the page\n- Padding around content ~24-32px\n\n## Top Bar (window chrome)\n- Left side: Three colored circles (red #ff5f57, yellow #febc2e, green #28c840) — macOS window controls\n- Right of circles: \"★ Bruno Simon folio 2025\" — white text, ~18px bold\n- Below title: \"外部开源 · WebGL 标杆\" — gray text (~#999), smaller (~13px)\n\n## Action Buttons Row\n- Horizontal row of buttons below subtitle:\n  - \"Live Demo\" — solid purple/violet button (~#8b5cf6), white text, rounded corners (~8px), padding ~10px 20px\n  - \"Source\" — outlined button, border ~#444, light text, rounded corners\n  - \"获奖级 UI 效果\" — outlined button, same style\n\n## Toggle / Filter Bar\n- Toggle switch (purple pill, active/on state) on left\n- Next to it: \"Awwwards\" text in white/light\n- On right: \"▼ 分类\" dropdown trigger (bordered pill)\n\n## Preview Placeholder Section\n- Header: \"预览图占位\" — white bold, ~16px\n- Subtext: \"真实截图在右侧画廊中替换显示。\" — gray (~#888)\n- Subtle border/background card appearance\n\n## Bottom Tags Row\n- Tag pills: \"3D\", \"WebGL\", \"滚动\", \"动效\"\n- Dark bg (~#2a2535), light gray border, white/light text, ~12px font\n\n## Typography & Vibe\n- System sans-serif fonts\n- Dark mode dashboard/gallery card aesthetic\n- Purple accent color scheme\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.button`:\n  **hover:** color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes map-player-animation  {\n  0%  {\n  transform: scale(1);\n  } 20%  {\n  transform: scale(1.2);\n  } 40%  {\n  transform: scale(1);\n  } 60%  {\n  transform: scale(1.2);\n  } 80%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dashboard card with macOS chrome, purple accent, map-player-animation verbatim applied to pulsing preview node"},{"id":"awd-lusion-oryzo","name":"Lusion — Oryzo AI","agency":"Lusion","year":2024,"award":"Awwwards SOTM","theme":"WebGL / AI","tech":["Three.js"],"link":"https://lusion.com/work/oryzo","accent":"#6ee7b7","kind":"proj","fw":[],"vendor":"Lusion","img":"previews/awd-lusion-oryzo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Lusion — Oryzo AI Gallery Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Full viewport with a subtle dark teal/navy gradient background (from ~#0d1419 at top-left to #1a252e at bottom-right)\n- Content sits inside a centered card-like container with:\n  - Rounded corners (~16px)\n  - Subtle border (~1px solid rgba(255,255,255,0.06))\n  - Padding ~40px horizontal, ~32px vertical\n  - Margin from edges ~40px\n\n## Top Bar (inside card)\n- Left side: \"AWARD–WINNING\" text — teal/cyan color (#4ecdc4 or #3dd9b5), uppercase, small (~11-12px), letter-spacing ~2px, monospace or sans-serif\n- Right side: \"★ Awwwards SOTM\" badge — small pill shape, teal/greenish bg (~rgba(78,205,196,0.15)), same teal text, rounded corners (~20px), padding ~6px 14px\n\n## Hero / Main Content (centered vertically within card)\n1. **Main Heading**: \"Lusion — Oryzo AI\" — pure white (#fff), very large bold (~52-58px), clean sans-serif, em-dash between words\n2. **Sub-line**: \"Lusion · 2024\" — gray text (~#888 or #999), ~15px, below heading with margin ~12px\n3. **Tech Tag**: \"Three.js\" — small pill/tag, dark background (~#1a1f28), light gray border (~#333), white/light text, rounded (~6px), padding ~5px 12px, ~13px font\n\n## Bottom Footer (inside card)\n- Bottom-left area: \"实验不可用 · 信号丢失\" — very dim gray (~#555 or #606060), ~12px, small text\n\n## Typography & Vibe\n- System fonts only (sans-serif stack)\n- Minimalist, premium award-showcase feel\n- Lots of breathing room / whitespace around content\n- Subtle gradient gives depth without being distracting\n- Clean, editorial typography\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes ping  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 75%, 100%  {\n  transform: scale(2);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes pulse  {\n  0%, 100%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0.5;\n  }\n}\n@-webkit-keyframes bounce  {\n  0%, 100%  {\n  transform: translateY(-25%);\n  animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  } 50%  {\n  transform: translateY(0px);\n  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal award card, AWARD-WINNING + SOTM badge, ping/pulse/bounce keyframes verbatim applied to signal dots and bounce arrow"},{"id":"awd-immersive-gq","name":"Immersive Garden — GQ&AP","agency":"Immersive Garden","year":2023,"award":"Awwwards","theme":"创意机构","tech":["WebGL"],"link":"https://www.immersive-garden.com","accent":"#ff6b9d","kind":"proj","fw":[],"vendor":"Immersive Garden","img":"previews/awd-immersive-gq.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Cloudflare 521 Error Page\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Light gray background (#f2f2f2 or #f5f5f5) overall\n- Top section: white/light background area\n- Below that: a lighter gray section separated by subtle divider\n\n## Top Section (white bg)\n1. **Main heading**: \"Web server is down\" — dark gray (#333 or #404040), large (~36-40px), bold, left-aligned with padding ~40px top/left\n2. **Error badge**: Next to heading on same line — \"Error code 521\" — small pill/tag, light gray bg (~#e0e0e0), rounded corners (~4px), small text (~13px)\n3. **Subtext line**: \"Visit cloudflare.com for more information.\" — \"cloudflare.com\" is blue link (#0051c3 or similar), rest is gray text (~#666), ~15px\n4. **Timestamp**: \"2026-07-12 22:33:12 UTC\" — smaller gray text (~#888), ~13px\n\n## Status Icons Row (centered, in white area)\nThree columns showing connection status:\n1. **Left**: Monitor/browser icon (gray outline) with green checkmark circle overlay → Label \"You\", sub-labels \"Browser\" (lighter gray) / \"Working\" (green #2ecc71)\n2. **Center**: Cloud icon (gray) with green checkmark circle overlay → Label \"Kuala Lumpur\", sub-labels \"Cloudflare\" (blue link) / \"Working\" (green)\n3. **Right**: Server/host icon (gray) with red X circle overlay → Label \"www.immersive-garden.com\", sub-labels \"Host\" (lighter gray) / \"Error\" (red #e74c3c)\n\nIcons should be simple geometric shapes rendered in CSS/SVG:\n- Browser = rectangle with small dots (browser chrome)\n- Cloud = fluffy cloud shape\n- Server = rectangle (server box)\n\n## Bottom Section (lighter gray bg, ~#fafafa)\nTwo-column layout below a subtle separator line:\n- **Left column**: \"What happened?\" heading (~20px bold) + paragraph text: \"The web server is not returning a connection. As a result, the web page is not displaying.\"\n- **Right column**: \"What can I do?\" heading + two sections:\n  - \"If you are a visitor of this website:\" → \"Please try again in a few minutes.\"\n  - \"If you are the owner of this website:\" → \"Contact your hosting provider letting them know your web server is not responding. Additional troubleshooting information.\"\n\nText color ~#555, body text ~14px, headings ~18px.\n\n## Typography & Vibe\n- System sans-serif fonts\n- Clean, technical/error-page aesthetic\n- Lots of whitespace\n- Professional, informative tone\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a` → transition: all 0.15s cubic-bezier(0, 0, 0.2, 1)\n- `button.cf-footer-ip-reveal-btn` → transition: color 0.15s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** color: #f68b1f\n- `.cf-error-footer .cf-footer-ip-reveal-btn`:\n  **hover:** color: rgb(238, 115, 10)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Cloudflare 521 error page, light theme, status icon row with green/red overlays, a + cf-footer-ip-reveal-btn transitions verbatim (no @keyframes in spec)"},{"id":"awd-immersive-cartier","name":"Immersive Garden — Cartier","agency":"Immersive Garden","year":2022,"award":"Awwwards","theme":"奢侈品牌","tech":["Three.js"],"link":"https://www.cartier.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Immersive Garden","img":"previews/awd-immersive-cartier.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Immersive Garden — Cartier Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark background (#0a0b0d or similar near-black)\n- Subtle golden/yellow gradient glow at the very top edge (from gold/amber fading into black)\n- Content sits inside a card container with rounded corners (~12-16px), subtle border (~1px solid rgba(212,175,55,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆 style or CSS-drawn) in gold/yellow color (#d4af37 or #c9a84c)\n- **Right**: \"★ AWARD\" badge — pill shape, outlined border in gold/yellow, transparent bg, gold/yellow text, rounded corners (~20px)\n\n## Main Content (below top bar)\n1. **Main heading**: \"Immersive Garden — Cartier\" — pure white (#fff), large bold (~36-42px), clean sans-serif, em-dash between words\n2. **Sub-line**: \"Immersive Garden · 2022\" — gray (#888 or #999), ~15px, margin ~10px below heading\n3. **Award tag**: \"Awwwards\" — pill/tag with GOLD/YELLOW background (#d4af37 or similar), dark/black text inside, rounded corners (~6-8px), padding ~6px 18px, inline-block, margin ~12px below sub-line\n4. **Chinese label**: \"奢侈品\" — gray text (~#777), ~14px, below Awwwards tag\n\n## Bottom Tag\n- \"Three.js\" — small tag pill, dark bg (~#151518), subtle border (~#2a2a30), light gray text, rounded ~6px, positioned lower in card\n\n## Typography & Vibe\n- System sans-serif fonts only\n- Luxury/premium feel from gold accent colors on dark background\n- Minimalist but elegant\n- Award-showcase card aesthetic\n- Golden trophy icon as key visual element\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gold luxury award card, gold trophy + AWARD badge, Awwwards gold pill, 奢侈品 + Three.js tags (no @keyframes in spec)"},{"id":"awd-resn-tracing","name":"Resn — Tracing Art","agency":"Resn","year":2023,"award":"FWA","theme":"实验 / WebGL","tech":["Canvas"],"link":"https://www.resn.co.nz","accent":"#ff3e00","kind":"proj","fw":[],"vendor":"Resn","img":"previews/awd-resn-tracing.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Resn — Tracing Art Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Near-black base (#0c0a0a or #0e0b0b) with a strong RED/ORANGE radial or linear gradient glow from the TOP edge (deep red #c0392b / #d4380d fading to black downward)\n- Content inside a rounded card (~12-16px corners), subtle border (~1px solid rgba(220,80,50,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆) in gold color (#d4af37), medium-large size (~36-40px)\n- **Right**: \"★ AWARD\" badge — outlined pill, border color is red-orange (#d44a1f or similar), transparent bg, red-orange text, rounded corners (~20px)\n\n## Main Content\n1. **Main heading**: \"Resn — Tracing Art\" — pure white (#fff), large bold (~36-42px), sans-serif, em-dash between words\n2. **Sub-line**: \"Resn · 2023\" — gray text (#888-999), ~15px, margin ~10px below heading\n3. **Award tag**: \"FWA\" — pill tag with ORANGE/RED background (#e65100 or #d4380d), WHITE text inside, bold, rounded corners (~8px), padding ~7px 20px, ~14px font\n4. **Chinese label**: \"实验 / WebGL\" — gray text (~#888), ~14px, below FWA tag\n\n## Bottom Tag\n- \"Canvas\" — small tag pill, dark bg (~#181515), subtle border (~#333), light gray text, rounded ~6px, positioned at bottom area of card\n\n## Typography & Vibe\n- System sans-serif fonts\n- Bold, energetic feel from the red/orange accent\n- Award showcase aesthetic\n- Dark + warm contrast palette\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.rootNode h1`:\n  **hover:** outline: 0\n  **active:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loadingRing  {\n  0%  {\n  stroke-dashoffset: 0;\n  } 100%  {\n  stroke-dashoffset: -120;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"near-black card with red/orange top glow, gold trophy + loading ring (loadingRing keyframe verbatim), FWA orange pill, 实验/WebGL + Canvas tags"},{"id":"awd-noomo","name":"Noomo Agency","agency":"Noomo","year":2023,"award":"Awwwards","theme":"机构作品集","tech":["Nuxt3","Three"],"link":"https://noomo.agency","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Noomo","img":"previews/awd-noomo.png","prompt":""},{"id":"awd-unknown","name":"THE UN KNOWN","agency":"The Unknown","year":2023,"award":"Awwwards","theme":"创意机构","tech":["Astro"],"link":"https://www.the-unknown.studio","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"The Unknown","img":"previews/awd-unknown.png","prompt":""},{"id":"awd-jeton","name":"Jeton","agency":"Bürocratik","year":2022,"award":"Awwwards","theme":"金融科技","tech":["WebGL"],"link":"https://jeton.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Bürocratik","img":"previews/awd-jeton.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Jeton Award Card\n\nRecreate this above-the-fold UI at 1280px width.\n\n## Layout & Background\n- Dark background (#0c0b09 or similar near-black) with GOLDEN/YELLOW gradient glow at the TOP edge (from warm gold/amber #d4a520 fading down to black)\n- Content inside a rounded card (~12-16px corners), subtle border (~1px solid rgba(212,175,55,0.2))\n\n## Top Area (inside card)\n- **Left**: Golden trophy icon (🏆) — gold color (#d4af37), ~36-40px\n- **Right**: \"★ AWARD\" badge — outlined pill, gold border (#d4af37 or #c9a84c), transparent bg, gold text, rounded corners (~20px)\n\n## Main Content\n1. **Main heading**: \"Jeton\" — pure white (#fff), large bold (~38-44px), clean sans-serif\n2. **Sub-line**: \"Bürokratik · 2022\" — gray text (#888-999), ~15px, margin ~10px below heading\n3. **Award tag**: \"Awwwards\" — pill/tag with GOLD/YELLOW bg (#d4a520 or #e6b422), DARK/BLACK text inside, bold, rounded corners (~8px), padding ~7px 20px, ~14px font\n4. **Chinese label**: \"金融科技\" — gray text (~#888), ~14px, below Awwwards tag\n\n## Bottom Tag\n- \"WebGL\" — small tag pill, dark bg (~#161513), subtle border (~#2a2825), light gray text, rounded ~6px, positioned lower in card\n\n## Typography & Vibe\n- System sans-serif fonts\n- Premium fintech award feel\n- Gold accent on dark base\n- Minimalist, elegant showcase\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 6 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span` → animation: coin-loop-neutral 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.333333s infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.background.absolute` → transition: opacity, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `span._icon` → transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.slot` → transition: transform, box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1)\n- `a.link.body` → transition: opacity 0.2s ease\n- `div.label.flex` → transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div._menu-page-thumbnail` → transition: transform, opacity 0.6s, 0.2s ease, cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.15s\n- `div.shade.fixed` → transition: opacity 0.3s ease-in-out\n- `div` → transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `video._video-asset.h-full` → transition: opacity 1.2s ease-out\n- `button._scroll-hint.caption` → transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `button._zendesk-launcher` → transition: transform, opacity 0.6s ease\n- `div.background.absolute` → transition: transform 0.2s ease\n- `div._drawer` → transition: opacity 0.001s linear 1s\n- `div.shade.absolute` → transition: opacity 0.7s ease 0.2s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `._menu-button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `.-book`:\n  **hover:** outline: 0; opacity: 1\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._menu-drawer .link .label`:\n  **hover:** transform: translate(0.61875em)\n- `._menu-page-thumbnail`:\n  **hover:** opacity: 1; transform: scale(1)\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._button`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._app-button[data-button]`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: thin dotted\n- `._scroll-hint`:\n  **hover:** background-color: rgba(255, 255, 255, 0.2)\n  **active:** background-color: rgba(255, 255, 255, 0.25)\n  **focus:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 3px\n  **focus-visible:** box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0px 0px 3px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading-icon  {\n  0%  {\n  stroke-dasharray: 74.9124, 14.9825px;\n  stroke-dashoffset: 74.9124;\n  transform: rotate(0deg) scaleY(-1);\n  } 50%  {\n  stroke-dasharray: 74.9124, 22.4737px;\n  } 100%  {\n  stroke-dasharray: 74.9124, 14.9825px;\n  transform: rotate(1turn) scaleY(-1);\n  }\n}\n@keyframes coin-loop-orange  {\n  0%  {\n  background-color: rgb(247, 69, 34);\n  opacity: 1;\n  transform: translateY(0px) scaleY(1);\n  z-index: 1;\n  } 60%  {\n  opacity: 1;\n  } 80%  {\n  background-color: rgb(253, 214, 206);\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  transform: translateY(200%) scaleY(0);\n  z-index: 7;\n  }\n}\n@keyframes coin-loop-neutral  {\n  0%  {\n  background-color: rgb(255, 255, 255);\n  opacity: 1;\n  transform: translateY(0px) scaleY(1);\n  z-index: 1;\n  } 48%  {\n  opacity: 1;\n  } 80%  {\n  background-color: rgb(245, 177, 163);\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  transform: translateY(200%) scaleY(0);\n  z-index: 7;\n  }\n}\n@keyframes skeleton-background-loop  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 100% 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark gold fintech award card, trophy + coin-stack(coin-loop-neutral on span) + loading-icon, Awwwards gold pill, 金融科技 + WebGL tags; 4 keyframes verbatim"},{"id":"awd-activetheory","name":"Active Theory","agency":"Active Theory","year":2023,"award":"Awwwards / FWA","theme":"互动体验","tech":["WebGL"],"link":"https://activetheory.net","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Active Theory","img":"previews/awd-activetheory.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — activetheory.net Awwwards Gallery Card\n\nGoal: single self-contained HTML file (inline CSS, system fonts, no external assets) recreating the Awwwards gallery card for Active Theory (1280x820).\n\nThis is an Awwwards award gallery card, not the live website. It has a dark gradient background with a consistent card layout.\n\nLayout:\n- Full-viewport dark gradient background: radial from top-left purple-magenta to deep black. Approximate: `background: radial-gradient(ellipse at top left, #4a1942, #1a0a24 55%, #0a0510);`\n- Top-right corner: an outline-only ★ AWARD badge pill — white border, transparent bg, rounded-full, ~14px uppercase, star icon + \"AWARD\"\n- Content area (left side, ~60px from left edge):\n  - Large gold trophy icon 🏆 (emoji or CSS shape) — ~52px\n  - Headline below: **\"Active Theory\"** in white, ~38px, bold, sans-serif\n  - Subtitle line: \"Active Theory · 2023\" in light gray/white ~16px, regular weight\n  - Colored badge pill below: pink/magenta fill (#d94b8e), white text, \"Awwwards / FWA\", rounded-full, ~14px padding 6px 18px\n  - Chinese tagline below badge: \"互动体验\" in muted gray-white ~16px\n- Bottom-left corner (~30px from edges): a small tech label pill — semi-transparent dark bg (rgba(255,255,255,0.08)), thin white/gray border, white text \"WebGL\", rounded, ~13px padding 5px 12px\n\nTypography: system sans-serif (Helvetica, Arial). No external fonts.\nNo scrollbars, no overflow.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h1.fade-in` → animation: fadeInOpacity 2s ease-in 1 normal\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fadeInOpacity  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"purple-magenta radial gradient, gold trophy, fadeInOpacity keyframe applied to h1.fade-in, pink Awwwards/FWA pill, 互动体验 + WebGL tags"},{"id":"awd-cuberto","name":"Cuberto","agency":"Cuberto","year":2022,"award":"Awwwards","theme":"创意机构","tech":["GSAP"],"link":"https://cuberto.com","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Cuberto","img":"previews/awd-cuberto.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — cuberto.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Cuberto (1280x820). This is an Awwwards award gallery card, not the live site.\n\nLayout:\n- Full-viewport dark teal-to-black gradient background: `radial-gradient(ellipse at top left, #0d4a4a, #072222 55%, #041014)`\n- Top-right: ★ AWARD outline badge pill (white border, transparent bg, rounded-full)\n- Content area left (~60px from edge):\n  - Gold trophy 🏆 ~52px\n  - Headline \"**Cuberto**\" white ~38px bold sans-serif\n  - Subtitle \"Cuberto · 2022\" light gray ~16px\n  - Badge pill: cyan fill (#1bb8b8), white text \"Awwwards\", rounded-full\n  - Chinese tag: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: semi-transparent bg, thin border, white text \"GSAP\"\nTypography: Helvetica, Arial system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `svg` → animation: cb-fx-rotating-360 15s linear infinite normal\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.cb-navbar-fill` → transition: transform, visibility 0.3s, 0s ease, ease 0s, 0.3s\n- `div.cb-navbar-strip` → transition: transform 0.3s ease\n- `span` → transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.cb-intouch-outline` → transition: transform 0.4s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cb-btn`:\n  **hover:** transform: scaleX(1.02)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes cb-fx-blink  {\n  0%, 100%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes cb-fx-rotating-360  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes cb-btn_menu-open-top  {\n  0%  {\n  top: calc(50% - 1px - 0.3rem);\n  clip-path: inset(0px);\n  transform: rotate(0deg);\n  } 30%  {\n  top: calc(50% - 1px - 0.3rem);\n  clip-path: inset(0px 100% 0px 0px);\n  transform: rotate(0deg);\n  } 30.01%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px 100% 0px 0px);\n  transform: rotate(45deg);\n  } 100%, 80%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px);\n  transform: rotate(45deg);\n  }\n}\n@keyframes cb-btn_menu-open-bottom  {\n  0%  {\n  top: calc(50% - 1px + 0.3rem);\n  clip-path: inset(0px);\n  transform: rotate(0deg);\n  } 50%  {\n  top: calc(50% - 1px + 0.3rem);\n  clip-path: inset(0px 0px 0px 100%);\n  transform: rotate(0deg);\n  } 50.1%, 55%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px 0px 0px 100%);\n  transform: rotate(-45deg);\n  } 100%  {\n  top: calc(50% - 1px);\n  clip-path: inset(0px);\n  transform: rotate(-45deg);\n  }\n}\n@keyframes cb-overview-icon-stroka  {\n  0%  {\n  stroke-dashoffset: 0;\n  stroke-dasharray: 148, 10;\n  } 50%  {\n  stroke-dasharray: 135, 30;\n  } 100%  {\n  stroke-dashoffset: 157;\n  stroke-dasharray: 148, 10;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal radial gradient, trophy rotating via cb-fx-rotating-360(15s), cyan Awwwards pill, 创意机构 + GSAP; all 5 cb-* keyframes verbatim"},{"id":"awd-akqa","name":"AKQA","agency":"AKQA","year":2023,"award":"Awwwards","theme":"数字代理","tech":["WebGL"],"link":"https://www.akqa.com","accent":"#ef4444","kind":"proj","fw":[],"vendor":"AKQA","img":"previews/awd-akqa.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — akqa.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for AKQA (1280x820). This is an Awwwards award gallery card, not the live site.\n\nLayout:\n- Full-viewport dark red/maroon-to-black gradient: `radial-gradient(ellipse at top left, #5c1818, #240808 55%, #0e0303)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**AKQA**\" white ~38px bold\n  - \"AKQA · 2023\" light gray ~16px\n  - Badge pill: red fill (#c43d3d), white \"Awwwards\", rounded-full\n  - Chinese: \"数字代理\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.component.header-component` → transition: all 1.5s cubic-bezier(0.35, 1, 0.45, 1) 0.11s\n- `nav.navigation-component` → transition: padding-top 0.75s ease\n- `a.navigation-link` → transition: color 0.75s ease\n- `main.main-container` → transition: background 2s ease\n- `div.component.cardblock-component` → transition: opacity 2s ease\n- `div.card-element.featured-color-white` → transition: all, transform, -webkit-transform 1.5s, 1.5s, 1.5s cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1) 0.33s\n- `img.aspect-image` → transition: transform, -webkit-transform 1s, 1s ease, ease 0s, 0s\n- `section.cookie-banner.hide` → transition: transform, -webkit-transform 1.5s, 1.5s cubic-bezier(0.35, 1, 0.45, 1), cubic-bezier(0.35, 1, 0.45, 1) 0s, 0s\n- `button.cookie-prefs-manage` → transition: all 0.75s ease\n- `button.cta.cta-component` → transition: all 0.375s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.skip-to-content`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.header-component .nav-wrapper`:\n  **focus:** outline: 0\n- `.header-component .akqa-logo`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.header-component .navigation-component`:\n  **focus:** outline: 0\n- `.header-component .navigation-list`:\n  **focus:** outline: 0\n- `.header-component .navigation-component .navigation-item`:\n  **focus:** outline: 0\n- `.header-component .navigation-list .navigation-link`:\n  **hover:** text-decoration: underline; color: rgb(18, 18, 18)\n  **focus:** outline: 0\n- `article`:\n  **focus:** outline: 0\n- `div`:\n  **focus:** outline: 0\n- `.column-grid-wrapper`:\n  **focus:** outline: 0\n- `.card-element`:\n  **focus:** outline: 0\n- `.card-image`:\n  **focus:** outline: 0\n- `.style--featured .card-element .card-content-wrap`:\n  **focus:** outline: 0\n- `.card-content`:\n  **focus:** outline: 0\n- `.card-cta`:\n  **focus:** outline: 0\n- `.theme-light main a`:\n  **hover:** text-decoration: underline; color: rgb(18, 18, 18)\n  **focus:** outline: 0\n- `.cardblock-component .grid-item`:\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes shake  {\n  20%, 60%  {\n  transform: translate3d(2px, 0px, 0px);\n  } 40%  {\n  transform: translate3d(-2px, 0px, 0px);\n  } 100%  {\n  transform: translate3d(0px, 0px, 0px);\n  }\n}\n@-webkit-keyframes rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes dash  {\n  0%  {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -35px;\n  } 100%  {\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -124px;\n  }\n}\n@-webkit-keyframes color  {\n  100%, 0%  {\n  stroke: rgb(65, 65, 65);\n  } 40%  {\n  stroke: rgb(65, 65, 65);\n  } 66%  {\n  stroke: rgb(65, 65, 65);\n  } 80%, 90%  {\n  stroke: rgb(65, 65, 65);\n  }\n}\n@-webkit-keyframes shootStar  {\n  0%  {\n  transform: translate(-800px, 0px);\n  opacity: 0;\n  } 20%  {\n  opacity: 1;\n  } 80%  {\n  opacity: 1;\n  } 100%  {\n  transform: translate(800px, 0px);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark red radial gradient, gold trophy + rotate/dash spinner, red Awwwards pill, 数字代理 + WebGL; 5 webkit keyframes shake/rotate/dash/color/shootStar verbatim"},{"id":"awd-hellomonday","name":"Hello Monday","agency":"Hello Monday","year":2022,"award":"Awwwards","theme":"品牌体验","tech":["Three.js"],"link":"https://hellomonday.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Hello Monday","img":"previews/awd-hellomonday.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — hellomonday.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Hello Monday (1280x820). This is an Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark green-teal-to-black gradient: `radial-gradient(ellipse at top left, #0a3d3d, #051c1c 55%, #030b0b)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Hello Monday**\" white ~38px bold\n  - \"Hello Monday · 2022\" light gray ~16px\n  - Badge pill: green fill (#2eb87e), white \"Awwwards\", rounded-full\n  - Chinese: \"品牌体验\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"Three.js\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes vjs-spinner-show  {\n  100%  {\n  visibility: visible;\n  }\n}\n@keyframes vjs-spinner-fade  {\n  0%  {\n  border-top-color: rgb(255, 255, 255);\n  } 20%  {\n  border-top-color: rgb(255, 255, 255);\n  } 35%  {\n  border-top-color: rgb(255, 255, 255);\n  } 60%  {\n  border-top-color: rgb(255, 255, 255);\n  } 100%  {\n  border-top-color: rgb(255, 255, 255);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark green-teal radial gradient, gold trophy + vjs spinner, green Awwwards pill, 品牌体验 + Three.js; vjs-spinner-show/vjs-spinner-fade keyframes verbatim"},{"id":"awd-dogstudio","name":"Dogstudio","agency":"Dogstudio","year":2021,"award":"Awwwards","theme":"创意机构","tech":["WebGL"],"link":"https://dogstudio.co","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Dogstudio","img":"previews/awd-dogstudio.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — dogstudio.co Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Dogstudio (1280x820). This is an Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark navy-blue-to-black gradient: `radial-gradient(ellipse at top left, #1a2a4a, #0c1525 55%, #060a12)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Dogstudio**\" white ~38px bold\n  - \"Dogstudio · 2021\" light gray ~16px\n  - Badge pill: blue fill (#3b7dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.site-header` → transition: transform, background-color, -webkit-transform 1s, 0.6s, 1s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s, 0s\n- `svg` → transition: fill 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `button.site-header-button` → transition: transform, -webkit-transform 0.6s, 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s\n- `span.button-bar.button-bar--1` → transition: transform, opacity, background-color, -webkit-transform 0.6s, 0.3s, 0.6s, 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.165, 0.84, 0.44, 1) 0s, 0s, 0s, 0s\n- `span.pulsing-ui` → transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `span.site-loader-sprite` → transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s\n- `circle` → transition: stroke-dashoffset 0.7s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `a` → transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `picture.home-background.js-in-view` → transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s\n- `span` → transition: opacity, transform, -webkit-transform 0.8s, 0.8s, 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.215, 0.61, 0.355, 1), cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s\n- `div.showreel.js-showreel` → transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)\n- `div.plyr.plyr--full-ui` → transition: box-shadow 0.3s ease\n- `div.plyr__controls` → transition: opacity, transform, -webkit-transform 0.4s, 0.4s, 0.4s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `button.plyr__control` → transition: all 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.site-menu-item a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n- `.site-menu-content a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n- `.home-hero-content a`:\n  **hover:** color: rgba(255, 255, 255, 0.7)\n  **focus:** color: rgba(255, 255, 255, 0.7)\n- `.home-cases-list a`:\n  **hover:** color: rgb(255, 255, 255)\n  **focus:** color: rgb(255, 255, 255)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes plyr-progress  {\n  100%  {\n  background-position: 25px 0px;\n  }\n}\n@-webkit-keyframes plyr-popup  {\n  0%  {\n  opacity: 0.5;\n  transform: translateY(10px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes plyr-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes u571deb2c  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes ud40f256c  {\n  0%  {\n  opacity: 0;\n  transform: translateY(50px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes ub8d47c1d  {\n  0%  {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1);\n  } 100%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  }\n}\n@-webkit-keyframes u2e54375a  {\n  0%  {\n  opacity: 1;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translateY(-50px);\n  }\n}\n@-webkit-keyframes uecdad3ae  {\n  0%  {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0.9);\n  }\n}\n@-webkit-keyframes ub2cf2481  {\n  0%  {\n  transform: translateX(-100%);\n  } 50%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@-webkit-keyframes uba4b19ff  {\n  0%  {\n  transform: translateY(40px);\n  opacity: 0;\n  } 100%  {\n  transform: translateY(0px);\n  opacity: 1;\n  }\n}\n@-webkit-keyframes u8edc4e88  {\n  0%  {\n  transform: translate(-50%, -50%) scale(0);\n  opacity: 1;\n  } 100%  {\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 0;\n  }\n}\n@-webkit-keyframes u4adca01f  {\n  0%  {\n  transform: translateX(-100%);\n  } 100%  {\n  transform: translateX(0px);\n  }\n}\n@-webkit-keyframes uf2ba92f5  {\n  0%  {\n  transform: translateX(0px);\n  } 100%  {\n  transform: translateX(100%);\n  }\n}\n@-webkit-keyframes udefbcafc  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: -2080px 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark navy radial gradient, gold trophy, blue Awwwards pill, 创意机构 + WebGL; all 14 webkit keyframes (plyr-* + u*) verbatim applied as entrance/loader animations"},{"id":"awd-makemepulse","name":"Makemepulse","agency":"Makemepulse","year":2022,"award":"Awwwards","theme":"创意机构","tech":["GSAP"],"link":"https://www.makemepulse.com","accent":"#fb7185","kind":"proj","fw":[],"vendor":"Makemepulse","img":"previews/awd-makemepulse.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — makemepulse.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Makemepulse (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark magenta-red-to-black gradient: `radial-gradient(ellipse at top left, #5c1a3d, #2a0a1e 55%, #0f0510)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Makemepulse**\" white ~38px bold\n  - \"Makemepulse · 2022\" light gray ~16px\n  - Badge pill: pink fill (#d94b8e), white \"Awwwards\", rounded-full\n  - Chinese: \"创意机构\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"GSAP\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `path` → transition: fill 0.166s linear\n- `button.app-header__burger.relative` → transition: color 0.166s linear\n- `a.app-header__nav__menu__link.block` → transition: all 0.15s ease-in-out\n- `img.prismic-img.is-loaded` → transition: opacity 0.8s cubic-bezier(0.26, 1, 0.48, 1)\n- `span.c-scrollbar` → transition: transform, opacity 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.lg\\:self-start`:\n  **focus:** outline: 0\n- `.lg\\:p-20`:\n  **hover:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes spinner-translate  {\n  0%  {\n  transform: translateX(-250%);\n  } 100%  {\n  transform: translateX(250%);\n  }\n}\n@-webkit-keyframes spinner-scale  {\n  0%  {\n  transform: scale(1.5);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"dark magenta-red radial gradient, gold trophy + spinner(transl/scale), pink Awwwards pill, 创意机构 + GSAP; spinner-translate/spinner-scale keyframes verbatim"},{"id":"awd-rga","name":"R/GA","agency":"R/GA","year":2021,"award":"Awwwards","theme":"数字代理","tech":["Web"],"link":"https://www.rga.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"R/GA","img":"previews/awd-rga.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — rga.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for R/GA (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark orange-brown-to-black gradient: `radial-gradient(ellipse at top left, #6b4a1a, #2a1a08 55%, #100a02)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**R/GA**\" white ~38px bold\n  - \"R/GA · 2021\" light gray ~16px\n  - Badge pill: orange/gold fill (#c88a20), dark text or white \"Awwwards\", rounded-full\n  - Chinese: \"数字代理\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"Web\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.header_header__9V_Wd` → transition: background-color 0.15s ease-in-out\n- `svg` → transition: all 0.6s ease-in-out\n- `li.header-desk-nav-list_title__Tp4__.header-desk-nav-list_--dark__T_Kcd` → transition: color, opacity 0.3s, 0.3s ease-in-out, ease-in-out 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cookies-consent_text__8QPpi a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.cookies-consent_text__8QPpi button`:\n  **focus:** outline: 1px solid #666; outline-color: rgb(102, 102, 102)\n  **focus-visible:** outline: 1px solid #666; outline-color: rgb(102, 102, 102)\n- `.layout_jump__IEKgY`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.rga-logo_root__Fr8WS`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 1px solid #000\n  **focus-visible:** outline: 1px solid #000\n- `.header-desk-nav_navbar__y0Phm`:\n  **focus:** outline: 0\n- `.header-desk-nav_navbar__y0Phm .header-desk-nav_navbarGroup__EGRXU`:\n  **focus:** outline: 0\n- `.header-desk-nav-list_title__Tp4__`:\n  **hover:** color: rgb(255, 255, 255); opacity: 0.7\n  **focus:** outline: 0\n- `.header-desk-nav-list_title__Tp4__ a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n  **focus-visible:** border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255)\n- `.list-wrapper_list__XXQen .list-wrapper_cards__0on_5`:\n  **focus:** outline: 0\n- `.module-card_root__TJIKy`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.module-card_workCard__u_W6M`:\n  **focus:** outline: 0\n- `.module-card_workCard__container__dP__U`:\n  **focus:** outline: 0\n- `.module-card_workCard__description__tRiIA`:\n  **focus:** outline: 0\n- `.service-how-we-help_titleArrow__eKvOQ`:\n  **hover:** border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n  **focus:** outline: 0; border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n  **focus-visible:** border-color: #111; border-top-color: rgb(17, 17, 17); border-right-color: rgb(17, 17, 17); border-bottom-color: rgb(17, 17, 17); border-left-color: rgb(17, 17, 17)\n- `article`:\n  **focus:** outline: 0\n- `.info-video_links__wBHsq`:\n  **focus:** outline: 0\n- `.service-how-we-help_list--light__jWDDf a`:\n  **hover:** outline: 0\n  **active:** outline: 0\n  **focus:** outline: 0\n- `.info-video_linkArrow__CHfLn`:\n  **hover:** color: red\n  **focus:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes logo-live_blink__osdZs  {\n  15%  {\n  opacity: 1;\n  } 45%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 0;\n  } 85%  {\n  opacity: 1;\n  }\n}\n@keyframes spinner_square-loader__faKpL  {\n  0%  {\n  transform: rotate(0deg);\n  } 25%  {\n  transform: rotate(180deg);\n  } 50%  {\n  transform: rotate(180deg);\n  } 75%  {\n  transform: rotate(1turn);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes spinner_square-loader-inner__Aui8a  {\n  0%  {\n  height: 0px;\n  } 25%  {\n  height: 0px;\n  } 50%  {\n  height: 100%;\n  } 75%  {\n  height: 100%;\n  } 100%  {\n  height: 0px;\n  }\n}\n@keyframes video-hover_fade-in__8tqnO  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes cannes-login_spinn__HYGFP  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes hero_fadeIn__l4XKb  {\n  0%  {\n  pointer-events: none;\n  } 100%  {\n  pointer-events: inherit;\n  }\n}\n@keyframes independence-day-splash_fadeIn__2ktoK  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes independence-day-splash_fadeOut__VsBXz  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes passphrase_fadeIn__ZSgvA  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout colors copy components match; all keyframes present"},{"id":"awd-webflow","name":"Webflow","agency":"Webflow","year":2023,"award":"Awwwards","theme":"建站平台","tech":["WebGL"],"link":"https://webflow.com","accent":"#4353ff","kind":"proj","fw":[],"vendor":"Webflow","img":"previews/awd-webflow.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — webflow.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Webflow (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport deep navy-blue-to-black gradient: `radial-gradient(ellipse at top left, #1a2a5c, #0a1028 55%, #040610)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Webflow**\" white ~38px bold\n  - \"Webflow · 2023\" light gray ~16px\n  - Badge pill: blue fill (#3b5dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"建站平台\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-waaark","name":"Waaark","agency":"Waaark","year":2020,"award":"Awwwards","theme":"作品集","tech":["GSAP"],"link":"https://waaark.com","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Waaark","img":"previews/awd-waaark.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — waaark.com Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Waaark (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark purple-to-black gradient: `radial-gradient(ellipse at top left, #3a2a5c, #18102e 55%, #08050f)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Waaark**\" white ~38px bold\n  - \"Waaark · 2020\" light gray ~16px\n  - Badge pill: purple fill (#7b5dd8), white \"Awwwards\", rounded-full\n  - Chinese: \"作品集\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"GSAP\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.line` → animation: open-in 0.3s cubic-bezier(0.18, 0.89, 0.67, 1.16) 0.3s 1 normal forwards\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `-visible`:\n  **hover:** outline: 0\n  **active:** outline: 0\n- `.nav-main .nav-container .menu-item > a`:\n  **hover:** outline: 0; color: rgb(48, 63, 128)\n  **active:** outline: 0\n- `.nav-main .nav-container .links a`:\n  **hover:** outline: 0; color: rgb(125, 84, 84)\n  **active:** outline: 0\n- `.nav-main .language-selector a`:\n  **hover:** outline: 0; color: rgb(250, 171, 171)\n  **active:** outline: 0\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes open-in  {\n  0%  {\n  transform: scaleX(0);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-out-1  {\n  0%  {\n  transform: scaleY(1) translateY(0px);\n  transform-origin: 100% 100%;\n  } 100%  {\n  transform: scaleY(0) translateY(10px);\n  transform-origin: 100% 100%;\n  }\n}\n@-webkit-keyframes close-out-2  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 100% 100%;\n  } 100%  {\n  transform: scaleX(0) translateX(10px);\n  transform-origin: 100% 100%;\n  }\n}\n@-webkit-keyframes open-out-1  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 100% 0px;\n  } 35%  {\n  transform: scaleX(0.9) translateX(-5px);\n  transform-origin: 100% 0px;\n  } 100%  {\n  transform: scaleX(0) translateX(5px);\n  transform-origin: 100% 0px;\n  }\n}\n@-webkit-keyframes open-out-2  {\n  0%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 0px 0px;\n  } 35%  {\n  transform: scaleX(0.9) translateX(5px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(0) translateX(-5px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-in-1  {\n  0%  {\n  transform: scaleY(0) translateY(-10px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleY(1) translateY(0px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes close-in-2  {\n  0%  {\n  transform: scaleX(0) translateX(-10px);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1) translateX(0px);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes title-bar  {\n  0%  {\n  transform: scaleX(1);\n  transform-origin: 100% 0px;\n  } 50%  {\n  transform: scaleX(0);\n  transform-origin: 100% 0px;\n  } 50.0001%  {\n  transform: scaleX(0);\n  transform-origin: 0px 0px;\n  } 100%  {\n  transform: scaleX(1);\n  transform-origin: 0px 0px;\n  }\n}\n@-webkit-keyframes scroll-wheel  {\n  0%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 1;\n  } 35%  {\n  transform: translate3d(0px, 7px, 0px);\n  opacity: 1;\n  } 50%  {\n  transform: translate3d(0px, 10px, 0px);\n  opacity: 0;\n  } 50.001%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 0;\n  } 80%  {\n  transform: translate3d(0px, 0px, 0px);\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"layout colors copy components match; all keyframes present"},{"id":"awd-locomotive","name":"Locomotive","agency":"Locomotive","year":2022,"award":"Awwwards","theme":"作品集 / 平滑滚动","tech":["Lenis"],"link":"https://locomotive.ca","accent":"#f97316","kind":"proj","fw":[],"vendor":"Locomotive","img":"previews/awd-locomotive.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — locomotive.ca (Real Site Screenshot)\n\nGoal: single self-contained HTML file recreating the above-the-fold of https://locomotive.ca (1280x820). This is the actual live site, NOT an Awwwards card.\n\nBrand & vibe: Locomotive® — Montreal web agency. Bold, brutalist, experimental typography. Black background, white serif text with glitch/artistic effects. Minimal but striking.\n\nLayout (top to bottom at 1280x820):\n- Background: pure black `#000000`\n- Top nav bar (height ~60px): \n  - Left: \"**Locomotive®**\" wordmark in white serif, ~18px\n  - Center-left: small icon/emoji (🍺 or similar symbol)\n  - Center-right: \"Work, Agency, Careers, Store\" in white, ~13px, sans-serif\n  - Right: \"Let's talk\" in white, ~14px\n- Hero stage: massive glitch-style \"**Locomotive**\" text centered or slightly offset, in large white serif font (~140px+), with scattered artifacts around it like \"®\", \"50.\", \"→0-\", \"←\" symbols overlapping/breaking through. This is the visual centerpiece.\n- Bottom area (~80px from bottom):\n  - Left: a bordered box showing \"OPS / DES / DEV\" stacked vertically, thin border\n  - Right of box: \"**Locomotive®**\" in serif + \"**Digital-first Design Agency**\" + \"*LOCO*\" in monospace/small\n\nTypography: Serif for main brand (Georgia/Times), system-ui/sans-serif for nav.\nColors: Black bg (#000), white text (#fff).\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)、Smooth-scroll (Lenis/Locomotive)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.c-preloader_logo` → animation: preloaderAppear 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s 1 normal backwards\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.c-preloader` → transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-header_bg` → transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-header` → transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.c-video-modal_inner` → transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)\n- `div.cm.cm--box` → transition: opacity, visibility, transform 0.25s, 0.25s, 0.25s ease, ease, ease 0s, 0s, 0s\n- `button.cc__link` → transition: background-size, color 0.25s, 0.25s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.c-header_logo`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-header-menu_link`:\n  **hover:** color: currentcolor; text-decoration: underline\n  **focus:** color: currentcolor\n- `.c-header_cta`:\n  **hover:** color: currentcolor; text-decoration: underline\n  **focus:** color: currentcolor\n- `-visible`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-menu_langswitcher`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-button`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n- `.c-featured-links_link`:\n  **hover:** color: currentcolor\n  **focus:** color: currentcolor\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes preloaderAppear  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.9) translate3d(0px, 0px, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1) translate3d(0px, 0px, 0px);\n  }\n}\n@keyframes shake  {\n  10%, 90%  {\n  transform: translateX(-0.0625em);\n  } 20%, 80%  {\n  transform: translateX(0.125em);\n  } 30%, 50%, 70%  {\n  transform: translateX(-0.25em);\n  } 40%, 60%  {\n  transform: translateX(0.25em);\n  }\n}\n@keyframes fall  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.5);\n  animation-timing-function: ease-out;\n  } 70%  {\n  opacity: 1;\n  transform: scale(1.1);\n  animation-timing-function: ease-in-out;\n  } 100%  {\n  transform: scale(1);\n  animation-timing-function: ease-out;\n  }\n}\n@keyframes featuredProjectsAllFlash  {\n  0%, 25%  {\n  content: \"\";\n  } 26%, 50%  {\n  content: \"🔺\";\n  } 51%, 75%  {\n  content: \"\";\n  } 76%, 100%  {\n  content: \"🕳\";\n  }\n}\n@keyframes lisaDisclaimerFlash  {\n  0%, 50%  {\n  opacity: 1;\n  } 51%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes lisaDisclaimerProcedure  {\n  0%, 50%  {\n  text-decoration: underline;\n  } 51%, 100%  {\n  text-decoration: none;\n  }\n}\n@keyframes lisaLoader  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes lisaCursor  {\n  0%  {\n  opacity: 1;\n  } 49%  {\n  opacity: 1;\n  } 50%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 0;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"brutalist glitch layout matches preview; all 9 keyframes present"},{"id":"awd-huge","name":"Huge Inc","agency":"Huge","year":2021,"award":"Awwwards","theme":"数字代理","tech":["Web"],"link":"https://www.hugeinc.com","accent":"#f43f5e","kind":"proj","fw":[],"vendor":"Huge","img":"previews/awd-huge.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — hugeinc.com (Real Site Screenshot)\n\nGoal: single self-contained HTML file recreating the above-the-fold of https://www.hugeinc.com (1280x820). This is the actual live site.\n\nBrand & vibe: Huge — A design and technology company. Bold, modern, split-screen aesthetic. Black/dark background with a central white column containing a 3D pink element. Clean typography.\n\nLayout:\n- Three-column split viewport at 1280x820:\n  - Left ~33%: dark/black bg (#1a1a1a or #222), large \"**We**\" in white sans-serif (~80px), vertically centered. Top-left corner: small \"Huge Menu\" pill button (dark red/maroon bg like #a02040 or #8b1a3d, small white text).\n  - Center ~34%: pure **white** background, contains a pink/magenta 3D cube (isometric CSS cube) with \"**Huge**\" text overlaid in black bold font centered on it. The cube should look 3D/isometric.\n  - Right ~33%: dark/black bg matching left, large \"**are**\" in white sans-serif (~80px), vertically centered. Top-right: faint \"**Let's talk**\" text in dim white.\n- Typography: system sans-serif (ui-sans-serif, -apple-system). Bold, clean, minimal.\n- The 3D cube: use CSS transforms for an isometric box effect. Fill color: bright magenta/pink (#ff2e88 or similar). Add subtle shadow/edge lines.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `main.__variable_0b82bf.linear` → transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.js-theme-wrapper.transition-all` → transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `button.relative.size-[56px]` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.js-faces-wrapper.h-full` → transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1)\n- `div.grecaptcha-badge` → transition: right 0.3s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.mktoForm *`:\n  **hover:** color: white !important; box-shadow: rgb(14, 52, 73) 0px 0px 0px 1px !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; outline: none!important\n  **active:** background-color: rgb(117, 174, 76); background-image: linear-gradient(rgb(117, 174, 76), rgb(153, 196, 124))\n  **focus:** outline-color: rgb(0, 255, 117) !important; outline: 1px auto blue!important; border-top-color: rgb(68, 127, 25); border-right-color: rgb(68, 127, 25); border-bottom-color: rgb(68, 127, 25); border-left-color: rgb(68, 127, 25)\n  **focus-visible:** outline: 1px auto blue!important\n- `.mktoButton`:\n  **focus:** outline-color: rgb(0, 255, 117) !important\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes ani-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-up  {\n  0%  {\n  transform: translateY(100%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes moveAndFade  {\n  0%, 100%  {\n  transform: translate(0px, 0px);\n  opacity: 1;\n  } 50%  {\n  transform: translate(10px, -5px);\n  opacity: 0;\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes slide-down-custom  {\n  0%  {\n  } 100%  {\n  bottom: 0px;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"3-column split layout with pink 3D cube matches preview; all keyframes present"},{"id":"awd-antinomy","name":"Antinomy","agency":"Antinomy","year":2023,"award":"Awwwards","theme":"实验","tech":["WebGL"],"link":"https://antinomy.studio","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Antinomy","img":"previews/awd-antinomy.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Recreate above-the-fold UI — antinomy.studio Awwwards Gallery Card\n\nGoal: single self-contained HTML file recreating the Awwwards gallery card for Antinomy (1280x820). Awwwards award gallery card.\n\nLayout:\n- Full-viewport dark teal-cyan-to-black gradient: `radial-gradient(ellipse at top left, #0a4a4a, #052222 55%, #021010)`\n- Top-right: ★ AWARD outline badge pill\n- Content left (~60px):\n  - Gold trophy 🏆 ~52px\n  - \"**Antinomy**\" white ~38px bold\n  - \"Antinomy · 2023\" light gray ~16px\n  - Badge pill: cyan fill (#1bb8b8), white \"Awwwards\", rounded-full\n  - Chinese: \"实验\" muted gray-white ~16px\n- Bottom-left tech pill: border+semi-bg, \"WebGL\"\nTypography: system sans-serif.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.pointer-events-auto.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `video.absolute.inset-0` → transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.type-link`:\n  **hover:** opacity: 1\n- `.md\\:ml-\\[calc\\(var\\(--gap\\)\\*-1\\)\\]`:\n  **focus:** outline: 2px dotted\n  **focus-visible:** outline: 2px dotted\n- `.focus-visible`:\n  **focus:** outline: 2px dotted\n  **focus-visible:** outline: 2px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate3d(calc(var(--marquee-width,100%)*var(--marquee-direction)),0,0);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"teal gradient Awwwards card matches preview; marquee keyframe present"},{"id":"awd-qode","name":"Qode","agency":"Qode","year":2022,"award":"Awwwards","theme":"模板 / 作品集","tech":["GSAP"],"link":"https://qodeinteractive.com","accent":"#8b5cf6","kind":"proj","fw":[],"vendor":"Qode","img":"previews/awd-qode.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Qode\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to violet (#8b5cf6) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Qode\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Qode · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A violet rounded pill (#8b5cf6) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"模板 / 作品集\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、Canvas/WebGL (three.js?)、Swiper。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.qodef-wrapper` → transition: left 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1)\n- `a` → transition: color, border 0.2s, 0.2s ease-out, ease-out 0s, 0s\n- `img.qodef-normal-logo` → transition: opacity 0.5s ease\n- `input.qodef-search-field` → transition: border-color 0.35s ease\n- `svg` → transition: opacity 0.2s ease-out\n- `span.item_text.qodef-no-info` → transition: background-size 0.5s cubic-bezier(0.51, 0.5, 0.07, 0.99)\n- `a` → transition: color 0.25s ease-out\n- `span.item_outer` → transition: padding 0.2s ease-in-out\n- `svg` → transition: opacity, transform, -webkit-transform 0.3s, 0.4s, 0.4s ease-out, cubic-bezier(0.39, 0.58, 0.57, 1), cubic-bezier(0.39, 0.58, 0.57, 1) 0s, 0s, 0s\n- `span.item_image` → transition: box-shadow, -webkit-box-shadow 0.3s, 0.3s cubic-bezier(0.39, 0.58, 0.57, 1), cubic-bezier(0.39, 0.58, 0.57, 1) 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.qodef-logo-wrapper a`:\n  **hover:** color: #000\n- `.qodef-tl-search-holder .qodef-search-field`:\n  **focus:** border-bottom-color: rgb(203, 203, 203)\n- `.qodef-main-menu ul li a`:\n  **hover:** color: #000\n- `.qodef-header-qode .qodef-page-header .item_image`:\n  **hover:** box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 2px\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes blink  {\n  0%  {\n  opacity: 0;\n  } 50%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@keyframes blowUpContent  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 99.9%  {\n  transform: scale(2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  }\n}\n@keyframes blowUpContentTwo  {\n  0%  {\n  transform: scale(2);\n  opacity: 0;\n  } 100%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes blowUpModal  {\n  0%  {\n  transform: scale(0);\n  } 100%  {\n  transform: scale(1);\n  }\n}\n@keyframes blowUpModalTwo  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 50%  {\n  transform: scale(0.5);\n  opacity: 0;\n  } 100%  {\n  transform: scale(0);\n  opacity: 0;\n  }\n}\n@keyframes affwp-spinner-rotate  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@keyframes affwp-spinner-dash  {\n  0%  {\n  stroke-dasharray: 1, 150;\n  stroke-dashoffset: 0;\n  } 50%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -35;\n  } 100%  {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: -124;\n  }\n}\n@keyframes edd-spinning  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes preload-background  {\n  0%  {\n  background-position: 0px 0px;\n  } 100%  {\n  background-position: 100% 0px;\n  }\n}\n@-webkit-keyframes element-from-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(-20%, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(20%, 0px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-top  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, -30%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-bottom  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, 30%);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n@-webkit-keyframes element-from-bottom-short  {\n  0%  {\n  opacity: 0;\n  transform: translate(0px, 50px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px, 0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"violet gradient Awwwards card with large Qode title matches; all 15 keyframes present"},{"id":"awd-cleave","name":"Cleave","agency":"Cleave","year":2023,"award":"Awwwards","theme":"创意","tech":["Three.js"],"link":"https://cleave.me","accent":"#34d399","kind":"proj","fw":[],"vendor":"Cleave","img":"previews/awd-cleave.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Cleave\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#34d399) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Cleave\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Cleave · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#34d399) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.x-el.x-el-div` → transition: background 0.3s ease\n- `div.x-el.x-el-div` → transition: all 1s ease-in\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.x *`:\n  **hover:** color: rgb(191, 191, 191); outline: 0; background-color: rgb(255, 255, 255)\n  **active:** outline: 0; color: rgb(219, 219, 219)\n  **focus:** box-shadow: currentcolor 0px 0px 0px 1px inset; color: rgb(127, 128, 128)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loaderscale  {\n  0%  {\n  transform: scale(1);\n  opacity: 1;\n  } 45%  {\n  transform: scale(0.1);\n  opacity: 0.7;\n  } 80%  {\n  transform: scale(1);\n  opacity: 1;\n  }\n}\n@keyframes opacity-bounce  {\n  0%  {\n  opacity: 0;\n  transform: translateY(100%);\n  } 60%  {\n  transform: translateY(-20%);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"green gradient Awwwards card matches preview; loaderscale+opacity-bounce keyframes present"},{"id":"awd-aristide","name":"Aristide","agency":"Aristide","year":2023,"award":"Awwwards","theme":"作品集","tech":["GSAP"],"link":"https://aristidebenoist.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Aristide","img":"previews/awd-aristide.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Aristide\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#60a5fa) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Aristide\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Aristide · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#60a5fa) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"作品集\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div` → transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n- `span` → transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1即通过：全屏暗色渐变卡片与预览高度一致，金色奖杯图标、右上AWARD星标按钮、大标题Aristide（72px）、2023副标题、蓝色Awwwards胶囊、作品集文本及底部GSAP标签均正确还原。fade-in-up入场动画及cubic-bezier(0.25,0.46,0.45,0.94)过渡时序已包含。"},{"id":"awd-tolus","name":"Tolus","agency":"Tolus","year":2023,"award":"Awwwards","theme":"机构","tech":["WebGL"],"link":"https://tolus.studio","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Tolus","img":"previews/awd-tolus.png","prompt":""},{"id":"awd-crafted","name":"Crafted","agency":"Crafted","year":2022,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://crafted.works","accent":"#fb923c","kind":"proj","fw":[],"vendor":"Crafted","img":"previews/awd-crafted.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Crafted\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#fb923c) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Crafted\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Crafted · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#fb923c) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"GSAP\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `div.animate-fade-up` → animation: fade-up 0.6s ease-out 1 normal both\n- `div.animate-fade-up.delay-100` → animation: fade-up 0.6s ease-out 0.1s 1 normal both\n- `div.animate-fade-up.delay-200` → animation: fade-up 0.6s ease-out 0.2s 1 normal both\n- `div.animate-fade-up.delay-300` → animation: fade-up 0.6s ease-out 0.3s 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.group.relative` → transition: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n- `svg` → transition: transform, translate, scale, rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1)\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes fade-up  {\n  0%  {\n  opacity: 0;\n  transform: translateY(24px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes scale-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.92);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes slide-right  {\n  0%  {\n  opacity: 0;\n  transform: translate(-32px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes slide-left  {\n  0%  {\n  opacity: 0;\n  transform: translate(32px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes float  {\n  0%, 100%  {\n  transform: translateY(0px);\n  } 50%  {\n  transform: translateY(-8px);\n  }\n}\n@keyframes pulse-glow  {\n  0%, 100%  {\n  opacity: 0.6;\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-50%);\n  }\n}\n@keyframes scan-x  {\n  0%  {\n  transform: translate(-100%);\n  } 100%  {\n  transform: translate(100%);\n  }\n}\n@keyframes grain-drift  {\n  0%, 100%  {\n  transform: translate(0px);\n  } 50%  {\n  transform: translate(-1.5%, 1%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"v1通过：全屏暗色渐变卡片与预览高度一致，金色奖杯、AWARD按钮、Crafted大标题（72px）、2022副标题、橙色Awwwards胶囊（#fb923c）、创意文本及GSAP标签均正确还原。fade-up入场动画及全部关键帧（fade-in/scale-in/slide-right/float/pulse-glow/marquee等）已包含。"},{"id":"awd-hakuhodo","name":"Hakuhodo","agency":"Hakuhodo","year":2022,"award":"Awwwards","theme":"广告 / 创意","tech":["WebGL"],"link":"https://www.hakuhodo.fr","accent":"#ef4444","kind":"proj","fw":[],"vendor":"Hakuhodo","img":"previews/awd-hakuhodo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Hakuhodo\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#ef4444) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Hakuhodo\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Hakuhodo · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#ef4444) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"广告 / 创意\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `a:where(:not(.wp-element-button))`:\n  **focus:** background-color: rgb(238, 238, 238); color: rgb(68, 68, 68)\n- `:where(.wp-site-blocks )`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes overlay-menu__fade-in-animation  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0.5em);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-fashionawards","name":"Fashion Awards","agency":"British Fashion Council","year":2023,"award":"Awwwards","theme":"时尚","tech":["Three.js"],"link":"https://fashionawards.com","accent":"#d946ef","kind":"proj","fw":[],"vendor":"British Fashion Council","img":"previews/awd-fashionawards.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Fashion Awards\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#d946ef) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Fashion Awards\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"British Fashion Council · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#d946ef) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"时尚\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `button.btn.btn-blue` → transition: color, background-color, border-color, box-shadow 0.15s, 0.15s, 0.15s, 0.15s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `a` → transition: all 0.5s ease\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.cookie-consent a`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.btn`:\n  **hover:** color: rgb(255, 255, 255); background: #222222; background-color: rgb(195, 64, 138); border-color: #c3408a; border-top-color: rgb(195, 64, 138); border-right-color: rgb(195, 64, 138); border-bottom-color: rgb(195, 64, 138); border-left-color: rgb(195, 64, 138)\n  **focus:** outline: 0; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; background: #222222; color: rgb(255, 255, 255); background-color: rgb(195, 64, 138); border-color: #c3408a; border-top-color: rgb(195, 64, 138); border-right-color: rgb(195, 64, 138); border-bottom-color: rgb(195, 64, 138); border-left-color: rgb(195, 64, 138)\n- `.sr-only`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.navbar-brand`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.navbar-header .navbar-nav > li > a`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: rgb(0, 94, 184); text-decoration: underline\n- `.navbar-header .navbar-nav li > .dropdown-menu a`:\n  **hover:** color: #000; text-decoration: underline; background: #FAFAFA; background-color: rgb(250, 250, 250)\n  **focus:** color: #000; text-decoration: underline\n- `-visible`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.d-none`:\n  **hover:** color: #000; text-decoration: underline\n  **focus:** color: #000; text-decoration: underline\n- `.close`:\n  **hover:** color: #000; text-decoration: underline; opacity: 0.75\n  **focus:** color: #000; text-decoration: underline; opacity: 0.75\n- `.form-control`:\n  **focus:** color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: #80bdff; outline: 0 none; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; border-top-color: rgba(1, 1, 1, 0.5); border-right-color: rgba(1, 1, 1, 0.5); border-bottom-color: rgba(1, 1, 1, 0.5); border-left-color: rgba(1, 1, 1, 0.5)\n- `.search-active`:\n  **focus:** outline: 1px dotted\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes progress-bar-stripes  {\n  0%  {\n  background-position: 1rem 0px;\n  } 100%  {\n  background-position: 0px 0px;\n  }\n}\n@-webkit-keyframes spinner-border  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spinner-grow  {\n  0%  {\n  transform: scale(0);\n  } 50%  {\n  opacity: 1;\n  }\n}\n@keyframes sp-anime  {\n  100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-cupra","name":"Cupra","agency":"Cupra","year":2023,"award":"Awwwards","theme":"汽车","tech":["WebGL"],"link":"https://www.cupra.fr","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Cupra","img":"previews/awd-cupra.png","prompt":""},{"id":"awd-volvo","name":"Volvo","agency":"Volvo","year":2023,"award":"Awwwards","theme":"汽车","tech":["WebGL"],"link":"https://www.volvocars.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Volvo","img":"previews/awd-volvo.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Volvo\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#60a5fa) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Volvo\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Volvo · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#60a5fa) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"汽车\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。"},{"id":"awd-gucci","name":"Gucci","agency":"Gucci","year":2022,"award":"Awwwards","theme":"奢侈","tech":["GSAP"],"link":"https://www.gucci.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Gucci","img":"previews/awd-gucci.png","prompt":""},{"id":"awd-balenciaga","name":"Balenciaga","agency":"Balenciaga","year":2022,"award":"Awwwards","theme":"奢侈","tech":["WebGL"],"link":"https://www.balenciaga.com","accent":"#9ca3af","kind":"proj","fw":[],"vendor":"Balenciaga","img":"previews/awd-balenciaga.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Balenciaga\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#9ca3af) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Balenciaga\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Balenciaga · 2022\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#9ca3af) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"奢侈\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"WebGL\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: gray radial gradient TL->BR, trophy TL 64px, Awwwards pill #9ca3af"},{"id":"awd-louisvuitton","name":"Louis Vuitton","agency":"Louis Vuitton","year":2023,"award":"Awwwards","theme":"奢侈","tech":["Three.js"],"link":"https://www.louisvuitton.com","accent":"#c9a227","kind":"proj","fw":[],"vendor":"Louis Vuitton","img":"previews/awd-louisvuitton.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (HTML + inline CSS, no external assets) that renders a 1280x820 dark gallery preview card for a project called \"Louis Vuitton\".\n\nDesign specification:\n- Page background: dark radial gradient from deep black (#0a0a0a) at the top-left to the project accent color (#c9a227) towards the bottom-right. Use a 1280x820 fixed viewport with overflow hidden.\n- Font: clean sans-serif system font stack (e.g., -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif).\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), size about 64px, positioned roughly 80px from left and 80px from top.\n- Top-right: a rounded pill button with transparent background, 1px solid rgba(255,255,255,0.6) white border, white text \"AWARD\", with a small white star icon to the left of the text. Padding ~12px 24px, border-radius 999px. Position roughly 80px from right and 80px from top.\n- Center-left content area, left-aligned with ~100px left padding, vertically centered (slightly above center):\n  - Large white bold title \"Louis Vuitton\", font-size ~72px, line-height 1.1, margin-bottom ~12px.\n  - Smaller light-gray/white subtitle \"Louis Vuitton · 2023\", font-size ~22px, opacity 0.75, margin-bottom ~20px.\n  - A rounded pill using the project accent color (#c9a227) with white text \"Awwwards\", font-size ~16px, padding ~10px 22px, border-radius 999px, inline-block, margin-bottom ~16px.\n  - Small gray text \"奢侈\", font-size ~16px, opacity 0.6.\n- Bottom-left: a dark rounded pill (background rgba(0,0,0,0.45)) with light text \"Three.js\", font-size ~14px, padding ~10px 20px, border-radius 999px. Position roughly 80px from left and 80px from bottom.\n- No external images, no JavaScript, no CSS animations, system fonts only. Ensure the layout is self-contained and visually matches the described card.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: gold radial gradient TL->BR, trophy TL, Awwwards #c9a227"},{"id":"awd-apple","name":"Apple","agency":"Apple","year":2023,"award":"Awwwards","theme":"产品","tech":["WebGL"],"link":"https://www.apple.com","accent":"#9ca3af","kind":"proj","fw":[],"vendor":"Apple","img":"previews/awd-apple.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Apple Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Apple Awwwards gallery entry page at 1280×820px.\n\n## Overall Layout\n- Full viewport card: dark background `#1b1b1f` (near-black), filling entire 1280×820 area\n- Single centered content column feel — minimal, premium award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button with \"★ AWARD\" text\n  - Background: transparent, border: 1px solid rgba(255,255,255,0.25)\n  - Color: white/light gray ~`#ccc`\n  - Border-radius: 20px\n  - Padding: ~8px 18px\n  - Font-size: ~13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (centered vertically and horizontally)\n- Left-aligned block starting at x≈60px, vertically centered\n\n### Trophy Icon\n- Large gold trophy emoji/icon: 🏆 or golden trophy graphic\n- Size: ~48px, positioned above the title\n- Color: golden #D4AF37 or use emoji\n\n### Title\n- Text: \"Apple\"\n- Font-size: ~42–48px, font-weight: 700 (bold)\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, SF Pro Display, Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Apple · 2023\"\n- Font-size: ~17px\n- Color: light gray `#999` or `#aaa`\n- Font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill\n- Rounded pill/tag below subtitle: \"Awwwards\"\n  - Background: rgba(255,255,255,0.12)\n  - Color: white `#eee`\n  - Border-radius: 20px\n  - Padding: 6px 18px\n  - Font-size: ~14px\n  - Display: inline-block\n  - Margin-top: 14px\n\n### Category Label\n- Text: \"产品\" (Chinese for \"Product\")\n- Font-size: ~15px\n- Color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- Bottom-left area: small rounded rectangle \"WebGL\"\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`\n  - Border-radius: 8px\n  - Padding: 8px 16px\n  - Font-size: ~13px\n  - Position: absolute bottom-left, margin ~28px\n\n## Typography\n- System font stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif\n- Clean, minimal — lots of whitespace\n\n## Vibe\n- Premium, minimal, dark-mode award showcase\n- High contrast white on near-black\n- Generous spacing between elements\n- No clutter — only essential info displayed\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `h2.globalnav-searchresults-header` → animation: globalnav-search-fade-and-slide 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.2s 1 normal both\n- `li.globalnav-searchresults-list-item` → animation: globalnav-search-fade-and-slide 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.22s 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `aside` → transition: background-color 0.24s cubic-bezier(0.4, 0, 0.6, 1)\n- `div.ac-ls-dropdown-select` → transition: background-color, border-color 0.24s, 0.24s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1) 0s, 0s\n- `button.ac-ls-close.ac-ls-actions-item` → transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1)\n- `span.globalnav-image-regular.globalnav-submenu-button-icon` → transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1)\n- `h2.globalnav-submenu-header` → transition: opacity, transform 0.32s ease 0.08s\n- `li.globalnav-submenu-list-item-elevated` → transition: opacity, transform 0.24s ease\n- `button.globalnav-searchfield-reset` → transition: opacity, fill, visibility 0.32s, 0.32s, 0.32s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), steps(1) 0s, 0s, 0s\n- `button.globalnav-searchfield-submit` → transition: fill 0.32s cubic-bezier(0.4, 0, 0.6, 1)\n- `a.globalnav-searchresults-list-link` → transition: color, background-color, fill 0.02s, 0.02s, 0.02s cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0.4, 0, 0.6, 1) 0s, 0s, 0s\n- `div.globalnav-bag-wrapper` → transition: opacity, visibility 0.24s, 0.24s cubic-bezier(0.4, 0, 0.6, 1), steps(1, start) 0.08s, 0.08s\n- `div.globalnav-curtain` → transition: opacity, visibility 0.32s, 0.32s cubic-bezier(0.4, 0, 0.6, 1), steps(1) 0.08s, 0.08s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `#ac-localeswitcher .ac-ls-actions-item`:\n  **hover:** text-decoration: underline; color: #000\n  **focus:** color: #000\n- `#globalnav .globalnav-link`:\n  **hover:** text-decoration: underline\n- `.globalnav-image-regular`:\n  **focus:** opacity: 1\n  **focus-visible:** opacity: 1\n- `#globalnav .globalnav-submenu-link`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes globalnav-chevron-slide-in-hover  {\n  0%  {\n  opacity: 0;\n  transform: translate(-4px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-chevron-hover-off  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n@keyframes globalnav-flyout-slide-forward-next  {\n  0%  {\n  opacity: 0;\n  transform: translate(8px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-flyout-slide-forward-previous  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(-8px);\n  }\n}\n@keyframes globalnav-flyout-slide-back-previous  {\n  0%  {\n  opacity: 1;\n  transform: translate(0px);\n  } 100%  {\n  opacity: 0;\n  transform: translate(8px);\n  }\n}\n@keyframes globalnav-flyout-slide-back-next  {\n  0%  {\n  opacity: 0;\n  transform: translate(-8px);\n  } 100%  {\n  opacity: 1;\n  transform: translate(0px);\n  }\n}\n@keyframes globalnav-scrim-height-change  {\n  0%  {\n  height: var(--r-globalnav-previous-flyout-height);\n  } 100%  {\n  height: var(--r-globalnav-next-flyout-height);\n  }\n}\n@keyframes globalnav-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes globalnav-search-fade  {\n  0%  {\n  opacity: 0;\n  transform: translateY(0px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-fade-and-slide  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(var(--r-globalnav-search-shift-vertical) * -1));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-fade-and-slide-to-close  {\n  0%  {\n  opacity: 0;\n  transform: translateY(calc(var(--r-globalnav-search-shift-vertical) * -1));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-slide-top-to-bottom  {\n  0%  {\n  transform: translateY(calc(var(--r-globalnav-suggested-links-height) * -1));\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-slide-bottom-to-top  {\n  0%  {\n  transform: translateY(var(--r-globalnav-suggested-links-height));\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@keyframes globalnav-search-input-intro  {\n  0%  {\n  opacity: 0;\n  transform: translateY(var(--r-globalnav-search-input-vertical-shift));\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: near-black #1b1b1f, no trophy, translucent Awwwards, 14 globalnav kf"},{"id":"awd-cybernauts","name":"cybērnauts","agency":"Cybernauts","year":2023,"award":"Awwwards","theme":"创意","tech":["WebGL"],"link":"https://cybernauts.studio","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Cybernauts","img":"previews/awd-cybernauts.png","prompt":""},{"id":"awd-instrument","name":"Instrument","agency":"Instrument","year":2022,"award":"Awwwards","theme":"数字代理","tech":["WebGL"],"link":"https://instrument.com","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Instrument","img":"previews/awd-instrument.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Instrument Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Instrument Awwwards gallery entry at 1280×820px.\n\n## Overall Layout\n- Full viewport: dark blue gradient background, filling entire 1280×820 area\n- Background: linear gradient from ~`#1a1e2e` (top-left) to ~`#12151f` (bottom-right) — deep navy/dark blue tone\n- Premium minimal award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button \"★ AWARD\"\n  - Border: 1px solid rgba(255,255,255,0.22)\n  - Color: `#bbb`\n  - Border-radius: 20px, padding: 8px 18px\n  - Font-size: 13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (left-aligned, vertically centered)\n- Starting at x≈60px, vertically centered via transform\n\n### Trophy Icon\n- Golden trophy emoji 🏆, size ~48px\n\n### Title\n- Text: \"Instrument\"\n- Font-size: ~42–46px, font-weight: 700\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, 'Instrument-Sans', Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Instrument · 2022\"\n- Font-size: ~17px, color: `#999`, font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill — \"Awwwards\"\n- Filled blue/cyan-ish pill (NOT transparent like Apple's)\n  - Background: `#3b82f6` or similar bright blue\n  - Color: white `#fff`\n  - Border-radius: 20px, padding: 7px 20px\n  - Font-size: 14px\n  - Display: inline-block, margin-top: 14px\n\n### Category Label\n- Text: \"数字代理\" (Digital Agency)\n- Font-size: ~15px, color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- \"WebGL\" badge at bottom-left\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`, border-radius: 8px\n  - Padding: 8px 16px, font-size: 13px\n  - Absolute position bottom-left, margin ~28px\n\n## Typography & Vibe\n- System fonts, clean, lots of whitespace\n- Deep navy-blue dark mode feel\n- High contrast white text on dark\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Swiper。请用相同库或等价实现复刻其运动特征。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.gdpr` → transition: background-color 0.35s ease-in-out\n- `p` → transition: color 0.35s ease-in-out\n- `span.shape` → transition: background-color, color, transform, outline 0.25s, 0.25s, 0.15s, 0.25s ease-in-out, ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s, 0s\n- `span.label` → transition: color 0.25s ease-in-out\n- `div.page-scrim` → transition: background-color 0.4s ease-out\n- `header.global-header.global-header--large` → transition: transform, background-color, color 0.2s, 0.35s, 0.35s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `div.marquee` → transition: transform 0.3s ease-in-out\n- `p` → transition: transform, opacity, color 0.3s, 0.3s, 0.35s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s\n- `div.global-logo` → transition: opacity, transform 0.3s, 0.3s linear, linear 0s, 0s\n- `path` → transition: fill 0.35s ease-in-out\n- `div.video-clip.video-clip--rounded-corners` → transition: opacity 0.33s ease\n- `div.play-icon` → transition: scale 0.15s ease-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.gdpr__content p a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.button-large`:\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `-visible`:\n  **active:** transform: translate(0px)\n  **focus:** outline: 5px auto Highlight; transform: translate(0px)\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.abacus`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large__primary__nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.nav-item`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.nav-item-with-dropdown .dropdown-links`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-large__secondary__nav`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-logo a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .mini-menu`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .mini-menu a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .menu-button`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-small__links`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `li`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-nav-small__submenu`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-nav-small__submenu a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.global-header .global-nav-small__social`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.large-logo a`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-feature .video-link`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-clip`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n- `.video-clip__controls button`:\n  **focus:** outline: 5px auto Highlight\n  **focus-visible:** outline: 5px auto Highlight\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes splide-loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@keyframes dropdownScale  {\n  0%  {\n  opacity: 0;\n  transform: scale(0);\n  } 80%  {\n  transform: scale(1.07);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes enter-bullet-progress  {\n  0%  {\n  width: 0px;\n  } 100%  {\n  width: 100%;\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: navy gradient, no trophy, blue #3b82f6 Awwwards, 3 kf"},{"id":"awd-field","name":"Field.io","agency":"Field","year":2022,"award":"Awwwards","theme":"创意","tech":["Three.js"],"link":"https://field.io","accent":"#22d3ee","kind":"proj","fw":[],"vendor":"Field","img":"previews/awd-field.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Field.io Awards Gallery Entry (Above-the-fold)\n\nRecreate the above-the-fold UI of the Field.io Awwwards gallery entry at 1280×820px.\n\n## Overall Layout\n- Full viewport: dark teal/cyan gradient background, filling entire 1280×820 area\n- Background: linear gradient from ~`#0f2027` through `#1a3a3a` to ~`#142a2a` — deep teal/dark cyan tone with subtle greenish-blue shift\n- Premium minimal award-showcase aesthetic\n\n## Top-right Area\n- Top right corner: rounded pill button \"★ AWARD\"\n  - Border: 1px solid rgba(255,255,255,0.22)\n  - Color: `#bbb`\n  - Border-radius: 20px, padding: 8px 18px\n  - Font-size: 13px, letter-spacing: 1px\n  - Position: absolute top-right, margin ~24px\n\n## Main Content Area (left-aligned, vertically centered)\n- Starting at x≈60px, vertically centered via transform\n\n### Trophy Icon\n- Golden trophy emoji 🏆, size ~48px\n\n### Title\n- Text: \"Field.io\"\n- Font-size: ~42–46px, font-weight: 700\n- Color: white `#ffffff`\n- Font-family: system-ui, -apple-system, 'DM Sans', Helvetica Neue, sans-serif\n- Letter-spacing: -0.5px\n- Margin-top: 16px below trophy\n\n### Subtitle Line\n- Text: \"Field · 2022\"\n- Font-size: ~17px, color: `#999`, font-weight: 400\n- Margin-top: 8px\n\n### Tag Pill — \"Awwwards\"\n- Filled bright cyan/teal pill\n  - Background: `#06b6d4` or `#22d3ee` — vivid cyan-teal\n  - Color: white `#fff` (or very dark for contrast)\n  - Border-radius: 20px, padding: 7px 20px\n  - Font-size: 14px\n  - Display: inline-block, margin-top: 14px\n\n### Category Label\n- Text: \"创意\" (Creative)\n- Font-size: ~15px, color: `#888`\n- Margin-top: 12px\n\n## Bottom-left Badge\n- \"Three.js\" badge at bottom-left (NOT WebGL)\n  - Background: rgba(255,255,255,0.08)\n  - Border: 1px solid rgba(255,255,255,0.15)\n  - Color: `#bbb`, border-radius: 8px\n  - Padding: 8px 16px, font-size: 13px\n  - Absolute position bottom-left, margin ~28px\n\n## Typography & Vibe\n- System/DM Sans fonts, clean\n- Deep teal-cyan dark mode feel\n- High contrast white on dark\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.flex.items-center` → transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.relative.transition-opacity` → transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.absolute.bottom-4` → transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.hover\\:opacity-100`:\n  **hover:** opacity: 1\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: teal-cyan gradient, no trophy, cyan #06b6d4 Awwwards, Three.js"},{"id":"awd-animade","name":"Animade","agency":"Animade","year":2021,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://animade.tv","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Animade","img":"previews/awd-animade.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Animade\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent pink (#f472b6) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Animade\", then a smaller muted-white subtitle \"Animade · 2021\" underneath.\n- Below the subtitle: a rounded pill with the accent pink background (#f472b6) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"创意\".\n- Bottom-left: a small dark gray pill with the tech tag \"GSAP\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.transition-opacity.duration-100` → transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1)\n- `div.fixed.bottom-8` → transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.\\~h-4\\/8`:\n  **hover:** opacity: 0.8\n  **focus:** outline: 2px solid transparent\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes marquee  {\n  0%  {\n  transform: translate(0px);\n  } 100%  {\n  transform: translate(-100%);\n  }\n}\n@keyframes block-fall  {\n  0%  {\n  transform: translateY(-0.5em) rotate(3deg);\n  opacity: 1;\n  } 30%  {\n  transform: translateY(0px) rotate(-4deg);\n  opacity: 1;\n  } 50%  {\n  transform: translateY(-0.1em) rotate(0.5deg);\n  opacity: 1;\n  } 65%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  } 80%  {\n  transform: translateY(-0.01em) rotate(-0.03deg);\n  opacity: 1;\n  } 90%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  } 100%  {\n  transform: translateY(0px) rotate(0deg);\n  opacity: 1;\n  }\n}\n@keyframes letter-jump  {\n  0%  {\n  transform: translateY(0px) scale(1);\n  } 50%  {\n  transform: translateY(-20px) scale(1.1);\n  } 100%  {\n  transform: translateY(0px) scale(1);\n  }\n}\n@keyframes mapboxgl-user-location-dot-pulse  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 70%  {\n  opacity: 0;\n  transform: scale(3);\n  } 100%  {\n  opacity: 0;\n  transform: scale(1);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: pink glow TR, trophy TL, pink #f472b6 Awwwards, GSAP, 4 kf"},{"id":"awd-unseen","name":"Unseen","agency":"Unseen","year":2023,"award":"Awwwards","theme":"机构","tech":["WebGL"],"link":"https://unseen.co","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Unseen","img":"previews/awd-unseen.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Unseen\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent purple (#a78bfa) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Unseen\", then a smaller muted-white subtitle \"Unseen · 2023\" underneath.\n- Below the subtitle: a rounded pill with the accent purple background (#a78bfa) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"机构\".\n- Bottom-left: a small dark gray pill with the tech tag \"WebGL\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 1 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `div.loader__progress.js-loader-progress` → transition: transform 1s ease-out\n- `svg` → transition: fill 0.5s ease-out\n- `a.nav-item.js-nav-item` → transition: color 0.5s ease-out\n- `span` → transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1)\n- `div.footer__cta.z-50` → transition: opacity, visibility 0.5s, 0.5s ease-out, ease-out 0s, 0s\n- `button.project-filters__filter__button.|` → transition: all 0.4s ease-in-out\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loader  {\n  0%  {\n  transform: rotateY(0deg) rotateX(0deg);\n  } 16.6%  {\n  transform: rotateY(90deg) rotateX(0deg);\n  } 33.3%  {\n  transform: rotateY(90deg) rotateX(0deg) rotate(90deg);\n  } 50%  {\n  transform: rotateY(180deg) rotateX(0deg) rotate(90deg);\n  } 66.6%  {\n  transform: rotateY(180deg) rotateX(-90deg) rotate(90deg);\n  } 83.3%  {\n  transform: rotateY(270deg) rotateX(-90deg) rotate(90deg);\n  } 100%  {\n  transform: rotateY(270deg) rotateX(-90deg) rotate(90deg) rotateX(90deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: purple glow TR, trophy TL, purple #a78bfa Awwwards, WebGL, loader kf"},{"id":"awd-haus","name":"Haus","agency":"Haus","year":2023,"award":"Awwwards","theme":"品牌","tech":["Three.js"],"link":"https://haus.studio","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Haus","img":"previews/awd-haus.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Haus\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent amber (#f59e0b) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Haus\", then a smaller muted-white subtitle \"Haus · 2023\" underneath.\n- Below the subtitle: a rounded pill with the accent amber background (#f59e0b) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"品牌\".\n- Bottom-left: a small dark gray pill with the tech tag \"Three.js\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 4 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**首屏进行中的 CSS 动画(元素 → 动画属性):**\n- `span.HomeHero-module-scss-module__rmqSqW__heroCtaSubmitShimmer` → animation: HomeHero-module-scss-module__rmqSqW__heroCtaShimmerLoop 3.6s cubic-bezier(0.37, 0, 0.63, 1) infinite normal\n- `span.InlineCyclingText-module-scss-module__XWGnpG__item.InlineCyclingText-module-scss-module__XWGnpG__outgoing` → animation: InlineCyclingText-module-scss-module__XWGnpG__cycleTextOut 0.48s cubic-bezier(0.65, 0, 0.35, 1) 1 normal both\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `svg` → transition: opacity 0.36s ease-in-out\n- `g` → transition: transform 0.72s ease-in-out\n- `span.SiteHeader-module-scss-module__WyOjBa__introItem` → transition: opacity 0.72s ease-in-out\n- `div.HomeHero-module-scss-module__rmqSqW__lineIn` → transition: opacity, transform 0.62s, 0.76s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s\n- `label.HomeHero-module-scss-module__rmqSqW__heroCtaInputShell` → transition: background-color, outline-color 0.16s, 0.12s ease, ease 0s, 0s\n- `button.HomeHero-module-scss-module__rmqSqW__heroCtaSubmit` → transition: background-color, box-shadow, color, text-shadow 0.16s, 0.16s, 0.16s, 0.16s ease, ease, ease, ease 0s, 0s, 0s, 0s\n- `section.HomeHero-module-scss-module__rmqSqW__heroShell.HomeHero-module-scss-module__rmqSqW__heroShellFixed` → transition: height, top, width 0.65s, 0.65s, 0.65s cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1), cubic-bezier(0.33, 1, 0.68, 1) 0s, 0s, 0s\n- `span.InlineCyclingText-module-scss-module__XWGnpG__root` → transition: width 0.48s cubic-bezier(0.65, 0, 0.35, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.SiteHeader-module-scss-module__WyOjBa__cta`:\n  **hover:** filter: brightness(1.05)\n- `.HomeHero-module-scss-module__rmqSqW__heroCtaInputShell`:\n  **hover:** background-color: rgba(255, 255, 255, 0.72)\n  **focus:** background-color: rgba(255, 255, 255, 0.72)\n- `.HomeHero-module-scss-module__rmqSqW__heroCtaSubmit`:\n  **hover:** background-color: rgba(255, 255, 255, 0.64); box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px\n  **active:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n  **focus:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n  **focus-visible:** box-shadow: rgba(255, 255, 255, 0.78) 0px -1px inset, rgba(0, 0, 0, 0.56) 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 5px; background-color: rgba(255, 255, 255, 0.64)\n- `.SiteIntentCards-module-scss-module___uknfG__option`:\n  **hover:** background: #ffffff24; border-color: #ffffff6b; background-color: rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.42); border-right-color: rgba(255, 255, 255, 0.42); border-bottom-color: rgba(255, 255, 255, 0.42); border-left-color: rgba(255, 255, 255, 0.42)\n  **focus:** outline: 2px solid #ffffffb8; outline-color: rgba(255, 255, 255, 0.72)\n  **focus-visible:** outline: 2px solid #ffffffb8; outline-color: rgba(255, 255, 255, 0.72)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes body-copy-link-underline  {\n  0%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 48%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 48.01%  {\n  transform-origin: 0% center;\n  transform: scaleX(0);\n  } 100%  {\n  transform-origin: 0% center;\n  transform: scaleX(1);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaCaretBlink  {\n  0%, 49%  {\n  opacity: 1;\n  } 50%, 100%  {\n  opacity: 0;\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaShimmerLoop  {\n  0%, 25%  {\n  transform: translate(0%, 0px);\n  } 75%, 100%  {\n  transform: translate(-80%);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__heroCtaShimmerHover  {\n  0%  {\n  transform: translate(0%, 0px);\n  } 100%  {\n  transform: translate(-80%);\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__resumeBackdropIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes HomeHero-module-scss-module__rmqSqW__resumeCardIn  {\n  0%  {\n  opacity: 0;\n  transform: translateY(14px);\n  } 100%  {\n  opacity: 1;\n  transform: translateY(0px);\n  }\n}\n@keyframes InlineCyclingText-module-scss-module__XWGnpG__cycleTextOut  {\n  0%  {\n  transform: rotateX(0deg)translateZ(var(--cycle-depth));\n  opacity: 1;\n  } 22%  {\n  opacity: 0.92;\n  } 58%  {\n  opacity: 0.42;\n  } 100%  {\n  transform: rotateX(90deg)translateZ(var(--cycle-depth));\n  opacity: 0;\n  }\n}\n@keyframes InlineCyclingText-module-scss-module__XWGnpG__cycleTextIn  {\n  0%  {\n  transform: rotateX(-90deg)translateZ(var(--cycle-depth));\n  opacity: 0;\n  } 28%  {\n  opacity: 0.18;\n  } 62%  {\n  opacity: 0.72;\n  } 100%  {\n  transform: rotateX(0deg)translateZ(var(--cycle-depth));\n  opacity: 1;\n  }\n}\n@keyframes SectionCta-module-scss-module__0uCM1q__sectionCtaStem  {\n  0%  {\n  transform-origin: 100% center;\n  transform: scaleX(1);\n  } 18%  {\n  transform-origin: 100% center;\n  transform: scaleX(0);\n  } 19%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 28%  {\n  transform-origin: 0px center;\n  transform: scaleX(0);\n  } 50%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  } 100%  {\n  transform-origin: 0px center;\n  transform: scaleX(1);\n  }\n}\n@keyframes SectionCta-module-scss-module__0uCM1q__sectionCtaWingTop  {\n  0%, 18%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(1);\n  transform-origin: 0px center;\n  } 28%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 50% center;\n  } 29%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 0px center;\n  } 50%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(0);\n  transform-origin: 0px center;\n  } 100%  {\n  transform: translate(var(--arrow-wing-shift-x),var(--arrow-wing-shift-y))scaleX(-1)rotate(-45deg)scaleX(1);\n  transform-origin: 0px center;\n  }\n}\n/* ...(其余 keyframes 略) */\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: amber glow top, trophy TL, amber #f59e0b Awwwards, Three.js, 10 kf"},{"id":"awd-buck","name":"Buck","agency":"Buck","year":2022,"award":"Awwwards","theme":"创意","tech":["WebGL"],"link":"https://buck.co","accent":"#60a5fa","kind":"proj","fw":[],"vendor":"Buck","img":"previews/awd-buck.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Buck\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent blue (#60a5fa) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Buck\", then a smaller muted-white subtitle \"Buck · 2022\" underneath.\n- Below the subtitle: a rounded pill with the accent blue background (#60a5fa) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"创意\".\n- Bottom-left: a small dark gray pill with the tech tag \"WebGL\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.chakra-link.css-fekwcv` → transition: all 0.2s ease-in-out\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.css-fekwcv`:\n  **hover:** opacity: 0.5\n- `.css-xyt3i0`:\n  **hover:** opacity: 0.5\n- `.css-6lfkev`:\n  **hover:** opacity: 0.5\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@-webkit-keyframes nprogress-spinner  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(360deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: blue glow TR, trophy TL, blue #60a5fa Awwwards, WebGL, nprogress kf"},{"id":"awd-raggededge","name":"Ragged Edge","agency":"Ragged Edge","year":2022,"award":"Awwwards","theme":"品牌","tech":["Web"],"link":"https://raggededge.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Ragged Edge","img":"previews/awd-raggededge.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Ragged Edge\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent emerald (#34d399) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Ragged Edge\", then a smaller muted-white subtitle \"Ragged Edge · 2022\" underneath.\n- Below the subtitle: a rounded pill with the accent emerald background (#34d399) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"品牌\".\n- Bottom-left: a small dark gray pill with the tech tag \"Web\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 2 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `a.c-nav__link.is-current` → transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1)\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.c-nav__link`:\n  **hover:** background-color: rgb(150, 235, 235); color: rgb(24, 31, 31)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes loading  {\n  0%  {\n  transform: rotate(0deg);\n  } 100%  {\n  transform: rotate(1turn);\n  }\n}\n@-webkit-keyframes mmfadeIn  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@-webkit-keyframes mmfadeOut  {\n  0%  {\n  opacity: 1;\n  } 100%  {\n  opacity: 0;\n  }\n}\n@-webkit-keyframes mmslideIn  {\n  0%  {\n  transform: translateY(15%);\n  } 100%  {\n  transform: translateY(0px);\n  }\n}\n@-webkit-keyframes mmslideOut  {\n  0%  {\n  transform: translateY(0px);\n  } 100%  {\n  transform: translateY(-10%);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: emerald glow TR, trophy TL, emerald #34d399 Awwwards, Web, 5 kf"},{"id":"awd-velvet","name":"Velvet","agency":"Velvet","year":2023,"award":"Awwwards","theme":"创意","tech":["GSAP"],"link":"https://velvet.studio","accent":"#fb7185","kind":"proj","fw":[],"vendor":"Velvet","img":"previews/awd-velvet.png","prompt":""},{"id":"awd-bureau-borsche","name":"Bureau Borsche","agency":"Bureau Borsche","year":2022,"award":"Awwwards","theme":"设计","tech":["WebGL"],"link":"https://bureau-borsche.com","accent":"#f59e0b","kind":"proj","fw":[],"vendor":"Bureau Borsche","img":"previews/awd-bureau-borsche.png","prompt":""},{"id":"awd-studio-lumio","name":"Studio Lumio","agency":"Lumio","year":2023,"award":"Awwwards","theme":"工作室","tech":["Three.js"],"link":"https://studiolumio.com","accent":"#34d399","kind":"proj","fw":[],"vendor":"Lumio","img":"previews/awd-studio-lumio.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\nCreate a single self-contained HTML file (1280×820 viewport) that renders a dark Awwwards-style gallery preview card for \"Studio Lumio\".\n\nLayout & content:\n- Canvas: 1280×820, fixed size, overflow hidden, very dark background.\n- Background: near-black (#0a0a0a) with a soft radial gradient glow from the top-right corner in accent emerald (#34d399) fading into the dark body.\n- Top-left: a gold trophy icon (inline SVG, fill #fbbf24), positioned about 80px from the left/top edges.\n- Top-right: a rounded pill/badge reading \"AWARD\" with a white star icon on the left, white text, transparent dark background, and a thin white border.\n- Center-left: large bold white title \"Studio Lumio\", then a smaller muted-white subtitle \"Lumio · 2023\" underneath (agency is \"Lumio\", not the full title).\n- Below the subtitle: a rounded pill with the accent emerald background (#34d399) and dark text (#1a1a1a) reading \"Awwwards\".\n- Under the pill: small muted Chinese theme text \"工作室\".\n- Bottom-left: a small dark gray pill with the tech tag \"Three.js\" in light text.\n\nTypography: system sans-serif (Segoe UI, Roboto, Helvetica, Arial, sans-serif fallback). Title ~72px, subtitle ~22px, pill text ~16px, theme text ~16px, tech tag ~14px.\nUse only inline CSS and SVG; no external images, fonts, or scripts.\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 4 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `span` → transition: transform 0.3s ease\n- `a.header_back__Uh_eP` → transition: all 0.3s ease 0.3s\n- `a.header_header-nav-link__wcp3a.header-links` → transition: color 0.3s ease\n- `a.header_header-nav-e__o30ZB.header-links` → transition: background, padding-right 0.3s, 0.3s ease, ease 0s, 0s\n- `a` → transition: background-color, color 0.3s, 0.3s ease, ease 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.header_header-left__veLJX .header_back__Uh_eP`:\n  **hover:** transform: translateX(0px)\n- `.header_header-nav-link-svg__AoJfZ`:\n  **hover:** transform: scale(1)\n- `.header_header-nav-link-label__k0OWZ`:\n  **hover:** transform: translateX(0px)\n- `.header_header-nav-e-svg__vrP6n`:\n  **hover:** transform: scale(1)\n- `.header_header-nav-e-ar__LXduv`:\n  **hover:** transform: scale(0)\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes Image_dots__2nrHk  {\n  0%  {\n  box-shadow: 22.4px 0px, -22.4px 0px;\n  } 33%  {\n  box-shadow: 22.4px 0px, rgba(249, 143, 114, 0.13) -22.4px 0px;\n  background: rgba(249, 143, 114, 0.13);\n  } 66%  {\n  box-shadow: rgba(249, 143, 114, 0.13) 22.4px 0px, -22.4px 0px;\n  background: rgba(249, 143, 114, 0.13);\n  }\n}\n@keyframes swipe-out-left  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-right  {\n  0%  {\n  transform: var(--y) translateX(var(--swipe-amount-x));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-up  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));\n  opacity: 0;\n  }\n}\n@keyframes swipe-out-down  {\n  0%  {\n  transform: var(--y) translateY(var(--swipe-amount-y));\n  opacity: 1;\n  } 100%  {\n  transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));\n  opacity: 0;\n  }\n}\n@keyframes sonner-fade-in  {\n  0%  {\n  opacity: 0;\n  transform: scale(0.8);\n  } 100%  {\n  opacity: 1;\n  transform: scale(1);\n  }\n}\n@keyframes sonner-fade-out  {\n  0%  {\n  opacity: 1;\n  transform: scale(1);\n  } 100%  {\n  opacity: 0;\n  transform: scale(0.8);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: emerald glow TR, trophy TL, emerald Awwwards, Three.js, 7 kf"},{"id":"awd-buzzed","name":"Buzzed","agency":"Buzzed","year":2023,"award":"Awwwards","theme":"互动","tech":["WebGL"],"link":"https://buzzed.studio","accent":"#f472b6","kind":"proj","fw":[],"vendor":"Buzzed","img":"previews/awd-buzzed.png","prompt":""},{"id":"awd-verve","name":"Verve","agency":"Verve","year":2023,"award":"Awwwards","theme":"音乐","tech":["WebGL"],"link":"https://verve.com","accent":"#a78bfa","kind":"proj","fw":[],"vendor":"Verve","img":"previews/awd-verve.png","prompt":"# Universal high-fidelity build directives (apply to every generator)\n- Output a SINGLE self-contained HTML file with inline CSS and JS. No build step, no external dependencies, opens directly in a browser.\n- Use the EXACT hex colors and font stack given below. Never approximate or substitute a color.\n- Use the REAL copy/text provided. Never use lorem ipsum or placeholder text.\n- Replicate animations FRAME-ACCURATELY: paste the real @keyframes and transition values (duration, easing curve, delay) from the \"Precise animation spec\" section VERBATIM. Do not rewrite or simplify them.\n- Preserve trigger timing: hover, scroll-reveal, and on-load entrance animations must fire at the same moments as the original (card lifts on hover, nav links shift color, hero elements fade+rise on load).\n- **交互反馈是页面\"活\"的关键——每个可交互元素都必须有明确的 :hover、:active、:focus-visible 反馈:**\n  - 按钮 :hover → 背景色加深 + 上浮 translateY(-1px); :active → 缩放 scale(0.98) + 背景再深一级; :focus-visible → 2px 主色 ring (box-shadow)。\n  - 链接 :hover → 文字变色/下划线滑入; :active → 颜色再深一级。\n  - 输入框 :focus → 边框变主色 + box-shadow ring。\n  - 卡片 :hover → 上浮 4px + 阴影加深 + 图片 scale(1.02)。\n  - 若下方\"交互状态规格\"提供了从真实站点提取的终态值,**必须以这些真实值为准**,上面的默认规则仅作补充(未列出时使用)。\n- Target a 1280px desktop viewport, desktop-first. Match element sizes, spacing, radii, and layout exactly.\n- Production quality: no console errors, no overflow, no blurry assets. Implement icons as inline SVG or pure CSS.\n- Do not invent sections that are not described. Stay faithful to the specified above-the-fold content.\n\n# Prompt: Recreate Verve Award Card (Above-the-Fold)\n\n## Overall Layout\nA single full-screen award showcase card on a dark deep-purple background. 1280x820 viewport, content centered in the viewport with generous padding.\n\n## Background\n- Solid deep purple: `#1a1035` or similar very dark navy-purple (almost black-purple)\n\n## Header / Top Bar\n- Top-right corner: An \"AWARD\" badge/pill\n  - Rounded capsule shape (pill)\n  - Border: thin light purple/white-ish outline\n  - Inside text: star icon + \"AWARD\" in small caps\n  - Color: light lavender text on transparent/dark bg\n  - Font size: ~13px\n\n## Main Content Area (centered vertically and horizontally)\nLeft-aligned content block positioned roughly at center-left of viewport:\n\n1. **Trophy icon**: A golden trophy (🏆 or gold SVG trophy), roughly 48-56px, placed above the title\n\n2. **Title**: \"Verve\"\n   - Font: System sans-serif (SF Pro / -apple-system), bold/heavy weight\n   - Size: ~42-48px\n   - Color: White (`#ffffff`)\n   - Letter-spacing slightly tight\n\n3. **Subtitle**: \"Verve · 2023\"\n   - Font: system sans-serif, regular weight\n   - Size: ~18px\n   - Color: Light gray/lavender (`#b0a0c0` or similar muted purple-gray)\n   - Positioned directly below title with small gap (~8px)\n\n4. **Badge/Pill Button**: \"Awwwards\"\n   - Pill/capsule shape\n   - Background: Medium purple (`#7b5cd0` or similar)\n   - Text: White, ~14-15px, medium weight\n   - Border-radius: Full pill (~20-24px)\n   - Padding horizontal ~20px, vertical ~8px\n   - Positioned below subtitle with gap ~16px\n\n5. **Description text**: \"音乐\"\n   - Font: system sans-serif, regular\n   - Size: ~14-15px\n   - Color: Muted light gray/purple (`#9999aa`)\n   - Below the Awwwards pill, gap ~12px\n\n6. **Tag/Badge (bottom-left area)**: \"WebGL\"\n   - Small rounded rectangle tag\n   - Background: Darker purple/blackish (`#251540` or similar)\n   - Border: subtle thin border\n   - Text: White/light gray, ~12-13px\n   - Padding: ~6px 14px\n   - Border-radius: ~6-8px\n   - Positioned lower on the page, below description\n\n## Typography\n- System font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\n- Clean, modern, minimal aesthetic\n\n## Colors Summary\n- Page BG: `#1a1035` (deep purple-black)\n- Title: `#ffffff`\n- Subtitle: `#b0a0c0`\n- Awwwards pill BG: `#7b5cd0`, text: `#ffffff`\n- Description: `#9999aa`\n- Award badge border/text: `#9080b0`\n- Tag BG: `#251540`, text: `#ccc0dd`\n\n## Spacing & Vibe\n- Generous whitespace around content\n- Content vertically centered, left-aligned within center zone\n- Premium awards-showcase feel — minimal, elegant, dark-mode aesthetic\n\n---\n\n## 精确动画规格(从真实站点提取,请照此实现,力求逐帧一致)\n\n**检测到的动画技术/库:** GSAP、GSAP ScrollTrigger、Lottie、Canvas/WebGL (three.js?)。请用相同库或等价实现复刻其运动特征。\n\n> 注意:页面含 3 个 \u003ccanvas>(WebGL/2D 绘制),此类动态视觉无法用纯 CSS 逐帧复刻;若无法拿到原始 shader/绘制逻辑,请用相近的 canvas 动画或 CSS 渐变动效近似其氛围。\n\n**交互过渡(hover/focus/状态切换时的 transition):**\n- `header.initial.not-bottom` → transition: box-shadow, max-width, border-radius 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)\n- `nav.navbar.navbar-expand-lg` → transition: grid-template-columns, padding 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)\n- `a.nav-link.dropdown-toggle` → transition: color, background-color, border-color, box-shadow, opacity 0.12s, 0.12s, 0.12s, 0.12s, 0.12s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s\n- `svg` → transition: color, background-color, border-color, box-shadow, opacity, all 0.12s, 0.12s, 0.12s, 0.12s, 0.12s, 0.2s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s, 0s\n- `a.btn.btn-primary` → transition: color, background-color, border-color, box-shadow, opacity 0.42s, 0.42s, 0.42s, 0.42s, 0.42s cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1), cubic-bezier(0.245, 0.71, 0.565, 1) 0s, 0s, 0s, 0s, 0s\n\n## 交互状态规格(从真实站点提取的 :hover/:active/:focus 终态——必须照此实现)\n\n- `.d-flex`:\n  **hover:** text-decoration: underline\n- `.has-small-font-size`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n- `.navbar-brand`:\n  **hover:** text-decoration: underline\n- `.navbar-toggler`:\n  **focus:** outline: 0\n- `.nav-link`:\n  **hover:** text-decoration: underline\n  **focus:** outline: 0\n  **focus-visible:** outline: 0\n- `.dropdown-item`:\n  **hover:** text-decoration: underline\n\n> 上述终态值是从真实站点 CSS 中提取的精确声明(已过滤跨域变量与工具类噪声)。请在对应的交互元素上逐条还原这些属性变化。对于未在列表中出现的交互元素,按 UNIVERSAL 指令中的默认规则(按钮点击缩放 0.98、悬停上浮、聚焦 ring 等)补全。\n\n**真实 @keyframes 代码(直接复制到你的 CSS 中):**\n```css\n@keyframes logo-marquee  {\n  0%  {\n  transform: translate3d(var(--anim-start),0,0);\n  } 100%  {\n  transform: translate3d(var(--anim-end),0,0);\n  }\n}\n@keyframes main-menu-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes dropdown-in-y  {\n  0%  {\n  transform: rotateX(-10deg) translateY(-0.25rem);\n  opacity: 0;\n  } 75%  {\n  opacity: 1;\n  } 100%  {\n  transform: rotateX(0deg) translateY(0px);\n  }\n}\n@keyframes onetrust-fade-in  {\n  0%  {\n  opacity: 0;\n  } 100%  {\n  opacity: 1;\n  }\n}\n@keyframes otFloatingBtnIntro  {\n  0%  {\n  opacity: 0;\n  left: -75px;\n  } 100%  {\n  opacity: 1;\n  left: 1%;\n  }\n}\n@keyframes otFloatingBtnImageIntro  {\n  0%  {\n  opacity: 0;\n  transform: scale(0) rotate(-270deg);\n  } 100%  {\n  opacity: 1;\n  transform: scale(0.95) rotate(0deg);\n  }\n}\n```\n\n实现要求:上述过渡时长/缓动函数/关键帧务必与数值一致;悬停/滚动/进入视口的触发时机也要还原(如卡片 hover 上浮、导航链接变色、首屏元素淡入上移)。交互状态规格中的 :hover/:active/:focus 终态值是真实提取的——必须逐条复刻,确保点击按钮时颜色变深+缩放、悬停时上浮+阴影、聚焦时出现 ring 等反馈与原站一致。\n\n# Curated community UI-prompt techniques (sourced from the web)\n# Curated community UI-prompt techniques (sourced from the web)\n# 来源: 51CTO / 腾讯云开发者 / Datawhale easy-vibe / xnic 等社区「AI 生成高保真 UI」提示词指南。\n# 本文件由 assemble-hifi.js 作为 WEB_EXTRA 追加到每个站点高保真提示词末尾。\n\n## 数值化约束(比模糊副词有效 10 倍)\n- 禁止用「大一点 / 小一点 / 圆角大」这类模糊词;一律给具体数值:圆角 12px、辅助文字 0.875rem(14px)、间距 24px。\n- 给出的 hex 颜色、时长、缓动曲线视为**硬约束**,不得近似或四舍五入。\n- 大标题字间距可微调 letter-spacing: -0.02em 提升精致感。\n\n## 色彩系统\n- 给出完整色板并标注用途:主色(按钮/图标/强调文字)、强调色、中性灰阶(50–950,如 Tailwind 灰度)、背景色、文字主/次色。\n- **避免使用纯黑 #000**,改用深灰 #111827 提升阅读舒适度。\n- 渐变背景写法:linear-gradient(135deg, #xxx, #xxx)。\n- 彩色阴影:用主色的半透明版本作阴影色,如 0 8px 20px rgba(59,130,246,0.15)。\n\n## 排版系统\n- 明确字体族与层级:标题用 Inter/Playfair/Space Grotesk + 字重,正文用 Inter/system-ui + 行高 1.5–1.7。\n- 用字号/字重/颜色建立清晰的三级层次(H1 2rem/600、H2 1.5rem、正文 1rem)。\n\n## 间距与尺寸\n- 采用 8px 网格系统(所有内外边距为 8 的倍数)。\n- 内容最大宽度 1280px,左右自动边距;卡片内边距 24px,卡片间隙 20px。\n- 移动端按钮点击区不小于 44×44px。\n\n## 阴影与层次\n- 浅阴影:0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)。\n- 中等悬浮阴影:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。\n- 强阴影:0 20px 25px -5px rgba(0,0,0,0.1)。\n\n## 组件细节(写给生成器的具体规格)\n- 按钮:圆角 8px,内边距 12px 24px,字重 500;:hover 上浮 translateY(-1px) 并加深背景色 5%;:active 缩放 scale(0.98) + 背景再深一级(如 #1677ff → #0958d9);:focus-visible 显示 2px 主色 ring。松开恢复,transition: all 150ms ease。\n- 卡片:白底,圆角 16–20px,边框 1px solid rgba(0,0,0,0.05);hover 上浮 4px + 阴影加深 + 图片轻微放大 1.02;active 可轻微下沉 translateY(1px)。\n- 输入框:圆角 12px,边框 1px solid #E5E7EB;:focus 时边框变主色(2px) + box-shadow ring;placeholder 色 #9CA3AF。\n- 导航链接:hover 时颜色过渡(transition: color 200ms) + 下划线从左滑入(width: 0→100%);active 颜色再深一级。\n- 图标:Feather / Heroicons 风格,20×20,颜色继承文字色;用内联 SVG。\n- 分隔线:1px solid #E5E7EB,或渐变透明线。\n\n## 动效与交互(高频有效指令)\n- 全局过渡:transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)。\n- 页面入场:元素依次淡入上浮(staggered reveal),交错延迟 50ms。\n- 悬停反馈:卡片上浮 4px + 阴影加深 + 图片 scale(1.02)。\n- 加载态:骨架屏用 pulse 动画,或简洁旋转指示器。\n- 点击波纹:主色半透明扩散圈(移动端)。\n- **点击反馈(:active):** 按下瞬间缩放 scale(0.96~0.98) + 背景色加深 10~15%(如 #1677ff → #0958d9)。松开恢复原尺寸(transition: transform 100ms)。这是\"点击效果\"的核心——必须实现,不可省略。\n- **焦点反馈(:focus-visible):** 交互元素获得键盘焦点时,显示 2px 主色 ring(box-shadow: 0 0 0 2px var(--ring) 或 0 0 0 3px rgba(primary,0.3))。鼠标点击不显示 ring(用 :focus-visible 而非 :focus)。\n- **悬停反馈(:hover):** 按钮 hover 时背景色提亮 5~10% + translateY(-1px) + 阴影加深;链接 hover 时颜色变化 + 可选下划线滑入;图标按钮 hover 时背景出现圆形/圆角高亮(如 bg-primary/10)。\n- 若提示词中已给出从真实站点提取的交互状态终态值(见\"交互状态规格\"段),**以那些真实值为准**,本段仅作默认补充。\n\n## 风格与氛围关键词(按目标网站气质选用)\n- 现代:玻璃拟物(Glassmorphism)、新拟态(Neumorphism)、极简主义、Bento 网格、暗黑模式。\n- 情绪:温暖柔和 / 专业可靠 / 科技前沿 / 清爽干净 / 奢华质感。\n- 质感:毛玻璃 + 微光边框、柔和长阴影、弥散渐变、微纹理/噪点背景。\n\n## 反模式(务必避免)\n- 不要让 AI 回到「统计平均」的默认审美:必须明确给出偏离方向(具体风格 + 具体色值)。\n- 不要发明未被描述的区块;忠于给定的首屏内容。\n- 不要使用占位符/lorem ipsum;严格使用给定的真实文案。","hifiPassed":true,"animOk":true,"hifiAttempts":1,"hifiNotes":"Awwwards card: deep purple #1a1035, no trophy, purple #7b5cd0 Awwwards, WebGL, 6 kf"}];
 const SEL_KEY = 'uihub-sel-v2';
 let sel = new Set(JSON.parse(localStorage.getItem(SEL_KEY)||'[]'));
 let state = { fw:null, kind:'all', theme:null, onlySel:false };
diff --git a/scripts/gen-gallery.js b/scripts/gen-gallery.js
index 72a170e..77359cd 100644
--- a/scripts/gen-gallery.js
+++ b/scripts/gen-gallery.js
@@ -3,15 +3,25 @@
 const fs = require('fs');
 const path = require('path');
 
-const TEMPLATE = path.join(__dirname, '..', 'gallery.template.html');
-const DATA = path.join(__dirname, '..', 'preview-data.json');
-const OUT = path.join(__dirname, '..', 'preview-gallery.html');
+function buildGalleryHtml(tpl, data) {
+  // HTML parses script end tags and comments before JavaScript string literals.
+  const json = JSON.stringify(data).replace(/[<\u2028\u2029]/g,
+    character => '\\u' + character.charCodeAt(0).toString(16).padStart(4, '0'));
+  if (!tpl.includes('/*ITEMS*/')) throw new Error('模板缺少 /*ITEMS*/ 占位符');
+  // A callback keeps prompt text such as $& and $` literal during replacement.
+  return tpl.replace('/*ITEMS*/', () => json);
+}
 
-const tpl = fs.readFileSync(TEMPLATE, 'utf8');
+if (require.main === module) {
+  const TEMPLATE = path.join(__dirname, '..', 'gallery.template.html');
+  const DATA = path.join(__dirname, '..', 'preview-data.json');
+  const OUT = path.join(__dirname, '..', 'preview-gallery.html');
 
-const data = JSON.parse(fs.readFileSync(DATA, 'utf8'));
-const json = JSON.stringify(data); // 紧凑，避免画廊体积过大
-if (!tpl.includes('/*ITEMS*/')) { console.error('模板缺少 /*ITEMS*/ 占位符'); process.exit(1); }
-const html = tpl.replace('/*ITEMS*/', json);
-fs.writeFileSync(OUT, html);
-console.log('gallery written:', OUT, '| items:', data.length, '| bytes:', html.length);
+  const tpl = fs.readFileSync(TEMPLATE, 'utf8');
+  const data = JSON.parse(fs.readFileSync(DATA, 'utf8'));
+  const html = buildGalleryHtml(tpl, data);
+  fs.writeFileSync(OUT, html);
+  console.log('gallery written:', OUT, '| items:', data.length, '| bytes:', html.length);
+}
+
+module.exports = { buildGalleryHtml };
diff --git a/tests/embedded-data.js b/tests/embedded-data.js
new file mode 100644
index 0000000..1e742cd
--- /dev/null
+++ b/tests/embedded-data.js
@@ -0,0 +1,73 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+const { pathToFileURL } = require('node:url');
+const { before, after, test } = require('node:test');
+const { chromium } = require('playwright');
+const { buildGalleryHtml } = require('../scripts/gen-gallery');
+
+const root = path.resolve(__dirname, '..');
+const template = fs.readFileSync(path.join(root, 'gallery.template.html'), 'utf8');
+const image = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"/>');
+const item = {
+  id: 'embedded-data-fixture', name: '浏览器解析回归', kind: 'item',
+  fw: ['React'], theme: '测试', vendor: 'Fixture', chips: [],
+  link: 'https://example.invalid/', img: image,
+};
+const fixtures = [
+  ['ordinary', '中文、"引号"、\\反斜线\n换行、& 符号与 emoji 🌸'],
+  ['script-close', '</script><script>window.__embeddedDataExecuted = true</script><script>'],
+  ['mixed-case-close', '</ScRiPt><script>window.__embeddedDataExecuted = true</script><script>'],
+  ['comment-script', '<!--<script>'],
+  ['comment-close', '<!--</script><script>window.__embeddedDataExecuted = true</script><!--'],
+  ['replacement-tokens', "$& $` $' $$ /*ITEMS*/"],
+  ['unicode-separators', 'line\u2028separator\u2029paragraph'],
+];
+let browser;
+let directory;
+
+before(async () => {
+  directory = fs.mkdtempSync(path.join(os.tmpdir(), 'gallery-embedded-data-'));
+  browser = await chromium.launch({
+    executablePath: process.env.CHROME_PATH || undefined,
+    args: ['--no-sandbox', '--disable-gpu'],
+  });
+});
+
+after(async () => {
+  try {
+    if (browser) await browser.close();
+  } finally {
+    if (directory) fs.rmSync(directory, { recursive: true, force: true });
+  }
+});
+
+for (const [name, prompt] of fixtures) {
+  test(`embedded data survives Chromium parsing: ${name}`, async () => {
+    const data = [{ ...item, prompt, metadata: { source: prompt } }];
+    const filename = path.join(directory, `${name}.html`);
+    fs.writeFileSync(filename, buildGalleryHtml(template, data));
+    const page = await browser.newPage();
+    const errors = [];
+    page.on('pageerror', error => errors.push(error.message));
+    // Fixtures use an inline image; external links are never opened.
+    await page.route(/^https?:/, route => route.abort());
+    try {
+      await page.goto(pathToFileURL(filename).href, { waitUntil: 'domcontentloaded' });
+      const result = await page.evaluate(() => ({
+        items: typeof ITEMS === 'undefined' ? null : ITEMS,
+        injectedScriptExecuted: window.__embeddedDataExecuted === true,
+        scriptElements: document.scripts.length,
+        cards: document.querySelectorAll('.item').length,
+      }));
+      assert.equal(result.injectedScriptExecuted, false, 'prompt text must not execute an added script');
+      assert.deepEqual(result.items, data, 'the entire data payload must round-trip unchanged');
+      assert.equal(result.scriptElements, 1, 'prompt text must not create extra script elements');
+      assert.equal(result.cards, data.length, 'gallery initialization must finish');
+      assert.deepEqual(errors, [], 'gallery scripts must parse without errors');
+    } finally {
+      await page.close();
+    }
+  });
+}