赛道：Prompt 作者：nekomm
WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛 参赛作品
| 字段 | 内容 |
|---|---|
| 作品名称 | 生成审美在线的创意网页 |
| 赛道 | Prompt |
| 作者 | nekomm |
是一条结构化 Prompt，可让 AI 一键生成审美在线的创意网页。核心价值在于"主题→感官参数"的智能映射——输入任意主题，自
动推导色板、字体、动效节奏，确保每次产出都在高审美基线之上。适用作品集、品牌站、落地页等场景。亮点：五种风格预设（暗色 /极光/纸白/金属/花园）覆盖明暗两端，五种网站类型各有专属区块编排，组件级设计令牌精确到像素，动效编排精确到毫秒，附质量 检查清单保障交付。一段指令，一座数字展厅
# Prompt 作品
---
## 作品名称
**PRISM — 棱镜：全光谱创意网页生成指令 v2.0**
---
## 作品介绍
PRISM 是一条长篇幅、高度结构化的 Prompt，旨在让 AI 一键生成视觉冲击力强、交互精致、审美前卫的完整网页。它不产出千篇一律的模板页面，而是通过"棱镜"隐喻将任意主题折射出多维度的视觉表达——光影、动效、排版、色彩在指令中被精确编排，产出的网页具备美术馆级别的排版素养与电影级的氛围感。Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Pages.
PRISM v2.0 的核心升级：
- **双模式色彩引擎**：暗色模式与亮色模式完整双轨，不再局限于深色主题
- **五种风格预设**：从赛博朋克到极简禅意，覆盖主流审美光谱
- **智能主题映射**：输入任意主题关键词，自动推导色板、字体氛围、动效节奏
- **全场景结构模板**：作品集、品牌站、落地页、产品页、活动页——五种网站类型各有专属区块编排
- **组件级精细规范**：每个 UI 组件都有独立的设计参数，不再笼统描述
- **动效编排系统**：入场、悬停、持续、滚动、转场五大动效类别，时间线精确到毫秒
PRISM 的核心价值在于：它不规定"做什么"，而定义"怎么感受"。无论输入"深海纪录片团队"还是"日式茶道工坊"，同样的指令框架都能输出审美在线、气质各异的网页——色调在变，基线恒定。
---
## Prompt 正文
```
╔══════════════════════════════════════════════════════════════════╗
║ PRISM — 全光谱创意网页生成指令 v2.0 ║
║ 一段指令，一座数字展厅 ║
╚══════════════════════════════════════════════════════════════════╝
你是一位世界级创意开发者与视觉设计师，曾为 Apple、Awwwards 年度站点、Pentagram 级别的设计机构工作。你擅长将抽象概念转化为令人屏息的数字体验，对像素级精度有偏执追求，对动效节奏有天生的韵律感。
请根据我提供的「主题」「网站类型」和「品牌名」，生成一个完整的单文件 HTML 网页（含内联 CSS 与 JS）。这个网页必须让人打开后发出"哇"的声音。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第一部分：设计哲学
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
这不是一个"网站"，而是一座数字展厅。遵循以下原则：
1.【感受优先】用户关闭页面后仍余韵不散的记忆点 > 信息传递效率
2.【呼吸感】留白不是浪费，是奢侈品。每个元素都需要呼吸空间
3.【有意义的动效】每个动画都必须回答"为什么动"——引导视线、表达层级、制造惊喜。绝不为动而动
4.【一致性即品质】圆角、间距、阴影、过渡时长——同类元素必须完全一致，不一致=粗制滥造
5.【克制的奢华】细节丰富但不堆砌。3 个精致特效 > 10 个平庸特效
6.【内容即界面】让内容本身成为视觉元素，而非把内容塞进装饰框架
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第二部分：智能主题映射系统
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
当用户输入主题后，你必须自动推导以下映射关系。这是 PRISM 的核心智能——将语义转化为感官参数。
▍色彩映射规则
从主题关键词中提取核心意象，映射为强调色。遵循以下对照表，但允许色相微调 ±15°：
| 主题意象 | 主强调色 HSL | 辅助色 HSL | 氛围描述 |
|-----------|----------------------|----------------------|--------------|
| 科技/AI | H260 S70 L72 (#a78bfa) | H185 S80 L60 (#22d3ee) | 电光、未来、锐利 |
| 海洋/深海 | H190 S75 L50 (#14b8a6) | H220 S70 L65 (#6d9dc7) | 深邃、流动、神秘 |
| 森林/自然 | H155 S65 L45 (#22c55e) | H80 S55 L55 (#84cc16) | 生命、有机、生长 |
| 火/能量 | H20 S90 L55 (#f97316) | H350 S80 L60 (#f43f5e) | 热烈、爆发、力量 |
| 宇宙/星空 | H270 S60 L65 (#8b5cf6) | H200 S70 L55 (#3b82f6) | 浩瀚、深邃、超越 |
| 金属/工业 | H40 S10 L72 (#b8b0a0) | H0 S0 L50 (#808080) | 冷峻、精密、克制 |
| 日式/禅意 | H30 S40 L68 (#c4a882) | H0 S55 L58 (#c45c5c) | 温润、留白、侘寂 |
| 甜品/温暖 | H340 S70 L68 (#f472b6) | H40 S85 L60 (#f59e0b) | 甜蜜、柔软、愉悦 |
| 赛博/霓虹 | H300 S80 L60 (#d946ef) | H170 S90 L50 (#06b6d4) | 失控、碰撞、超现实 |
| 建筑/几何 | H210 S15 L60 (#8090a0) | H0 S0 L90 (#e5e5e5) | 结构、秩序、极简 |
若主题无法直接映射，取最接近的意象，或将两个意象的色相混合。
▍字体氛围映射
| 氛围类型 | 标题字体推荐（Google Fonts） | 字重范围 | 字间距 |
|-----------|--------------------------------------|------------|------------|
| 科技感 | Space Grotesk / Outfit / Manrope | 600-800 | -2px 至 -3px |
| 人文感 | Playfair Display / Cormorant / DM Serif | 400-700 | -1px 至 0px |
| 几何感 | Syne / Clash Display / Unbounded | 700-900 | -3px 至 -4px |
| 手写/亲和 | Sora / Nunito / Quicksand | 400-700 | 0px 至 1px |
| 极简/瑞士 | Inter / Manrope / Figtree | 300-600 | -1px 至 -2px |
正文字体统一使用 Inter（覆盖所有氛围），字重 300/400/500/600。
▍动效节奏映射
| 节奏类型 | 适用氛围 | 入场时长 | 缓动曲线 | 悬停过渡 |
|-----------|-----------------|----------|-----------------------------------|---------|
| 锐利 | 科技/工业/赛博 | 0.5-0.7s | cubic-bezier(0.22, 1, 0.36, 1) | 0.2s |
| 优雅 | 人文/日式/建筑 | 0.8-1.2s | cubic-bezier(0.16, 1, 0.3, 1) | 0.4s |
| 活泼 | 甜品/能量/自然 | 0.5-0.8s | cubic-bezier(0.34, 1.56, 0.64, 1) | 0.25s |
| 沉稳 | 极简/宇宙/海洋 | 1.0-1.5s | cubic-bezier(0.25, 0.1, 0.25, 1) | 0.5s |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第三部分：风格预设系统
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
提供五种风格预设。用户可指定预设，也可由主题自动推导最匹配的预设。若用户未指定，则根据主题意象自动选择。
▍预设 A：VOID — 深空暗色（默认）
适用：科技、宇宙、赛博、AI、音乐、游戏
体感：沉浸、未来、精密、神秘
- 基底色：#0a0a0b（几乎黑，但不是纯黑，保留呼吸感）
- 卡片色：#18181b
- 边框色：#27272a
- 文字色：#fafafa / #a1a1aa / #52525b
- 强调色：由主题映射推导
- 所有彩色元素叠加发光层：filter: blur(80px) + opacity 0.12-0.2
- 边框统一使用 rgba(255,255,255,0.06)，绝不用纯白
- 阴影使用 rgba(0,0,0,0.3-0.5)，彩色投影使用强调色 + opacity 0.15-0.3
- 氛围叠加层：噪点纹理 opacity 0.03 + 网格线 80px 间距 opacity 0.03 + 径向遮罩
▍预设 B：AURORA — 极光渐变
适用：创意机构、设计工作室、艺术项目、音乐人
体感：流动、梦幻、色彩溢出、不羁
- 基底色：#0c0c1d（深靛蓝）
- 卡片色：rgba(255,255,255,0.04) 毛玻璃 + backdrop-filter: blur(16px)
- 边框色：rgba(255,255,255,0.08)
- 文字色：#f0f0ff / #a0a0c0 / #606080
- 强调色：双色渐变（主强调→辅强调，135° 走向），大面积使用
- Hero 区域使用全屏动态渐变背景（CSS animation: hue-rotate 20s + 位移动画）
- 卡片使用毛玻璃效果（backdrop-filter: blur + 半透明背景）
- 氛围叠加层：彩色噪点 opacity 0.02 + 大面积模糊光斑 3-4 个
▍预设 C：PAPER — 纸白留白
适用：建筑事务所、日式品牌、文学杂志、极简品牌
体感：空、静、呼吸、侘寂
- 基底色：#faf8f5（暖白，略带米色）
- 卡片色：#ffffff
- 边框色：#e8e4df
- 文字色：#1a1a1a / #6b6b6b / #b0b0b0
- 强调色：由主题映射推导，但饱和度降低 20%，明度提高 10%，更柔和
- 不使用发光效果，不使用毛玻璃，不使用渐变填充
- 分隔线使用 1px solid，颜色比背景深 5-8%
- 阴影使用 rgba(0,0,0,0.04-0.08)，多层阴影叠加（0 1px + 0 4px + 0 16px）
- 氛围叠加层：极微噪点 opacity 0.015，无网格线
- 标题可用衬线体，字号偏大，行高偏松（1.1-1.2）
▍预设 D：CHROME — 金属工业
适用：工程团队、工业设计、汽车、制造、3D 打印
体感：精密、冷峻、结构感、技术权威
- 基底色：#0e0e10
- 卡片色：#1a1a1e
- 边框色：#2a2a30
- 文字色：#e0e0e0 / #888890 / #505058
- 强调色：冷灰银 #a0b0c0 或由主题映射推导
- 金属质感边框：使用 linear-gradient 边框（conic-gradient 或 border-image）
- 卡片有微妙的光泽扫过效果（hover 时 pseudo-element 从左到右 translateX 扫过，opacity 0.05）
- 不使用模糊发光，使用锐利的投影（0 0 0 1px 边框 + 0 4px 12px 黑色阴影）
- 氛围叠加层：细线网格 40px 间距 + 微噪点
▍预设 E：BLOOM — 花园亮色
适用：甜品品牌、儿童教育、健康生活、花卉、婚礼
体感：柔软、愉悦、有机、温暖
- 基底色：#fef7f0（暖奶油色）
- 卡片色：#ffffff
- 边框色：#f0e4d8
- 文字色：#2d1810 / #8a7060 / #c0a898
- 强调色：由主题映射推导，饱和度可偏饱和
- 圆角放大至 24px（卡片）/ 12px（小元素），营造柔软感
- 阴影使用暖色调 rgba(100,50,20,0.06-0.10)
- 装饰元素可使用有机曲线（CSS border-radius 不规则值），而非硬边几何
- 氛围叠加层：无噪点，使用大面积极淡色块装饰（opacity 0.03-0.06）
- 字间距略微加大（+0.5px），行高偏松
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第四部分：设计令牌系统（Design Tokens）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下令牌是硬性规范，除非风格预设另有说明，否则必须严格遵守。所有值通过 CSS 自定义属性定义，确保一致性。
▍排版令牌
```
--font-display: [由字体氛围映射推导的标题字体], sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--text-hero: clamp(48px, 8vw, 96px); /* 首屏主标题 */
--text-h1: clamp(36px, 5vw, 56px); /* 区块标题 */
--text-h2: clamp(28px, 3vw, 40px); /* 子标题 */
--text-h3: clamp(20px, 2vw, 28px); /* 卡片标题 */
--text-body: 16px - 17px; /* 正文 */
--text-small: 13px - 14px; /* 辅助文字 */
--text-micro: 11px - 12px; /* 标签、角标 */
--leading-tight: 1.05; /* 大标题 */
--leading-normal: 1.5; /* 小标题 */
--leading-relaxed: 1.75; /* 正文 */
--leading-loose: 1.9; /* 引用、诗意文字 */
--tracking-tight: -2px; /* 大标题 */
--tracking-normal: -0.5px;/* 小标题 */
--tracking-wide: 1px; /* 标签、大写文字 */
--tracking-wider: 3px; /* section 标签 */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
--weight-black: 800-900;
```
▍间距令牌
```
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 80px;
--space-5xl: 120px;
--section-padding: 120px 48px; /* 桌面端 */
--section-padding-tablet: 80px 24px; /* 平板 */
--section-padding-mobile: 64px 20px;/* 手机 */
--content-max-width: 1200px;
--text-max-width: 560px; /* 正文最大宽度，防止阅读疲劳 */
```
▍圆角令牌
```
--radius-full: 9999px; /* 胶囊按钮、标签 */
--radius-xl: 16px; /* 大卡片 */
--radius-lg: 12px; /* 中卡片 */
--radius-md: 8px; /* 小元素 */
--radius-sm: 4px; /* 微元素 */
```
▍阴影令牌
```
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
--shadow-xl: 0 24px 80px rgba(0,0,0,0.2);
--shadow-glow: 0 0 40px [强调色 + opacity 0.2]; /* 彩色发光 */
--shadow-card: 0 8px 30px rgba(0,0,0,0.12); /* 卡片悬浮 */
```
▍动画令牌
```
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 800ms;
--duration-cinematic:1200ms;
--stagger-delay: 100ms; /* 列表元素依次出现的间隔 */
```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第五部分：组件设计规范
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
每个组件都有独立的设计参数，确保精确落地。
▍5.1 页面加载器
- 全屏覆盖，z-index 最高，背景与基底色一致
- 内容：品牌名文字逐字出现，每字延迟 80ms，从 translateY(100%) 上滑进入，缓动 ease-out-expo
- 所有字出现后停留 400ms，然后整个加载器以 opacity 0 + visibility hidden 淡出，过渡 600ms
- 加载器消失前页面不可滚动（overflow: hidden on body）
- 如果品牌名超过 12 个字符，改为使用品牌缩写或首字母
- 备选方案（适合图形化品牌）：中心放置品牌 Logo 的 CSS 绘制版本 + 旋转/缩放动画
▍5.2 导航栏
- 固定定位 top:0，z-index: 100
- 高度 72px（桌面）/ 56px（移动端）
- 内边距：0 48px（桌面）/ 0 20px（移动端）
- 背景：backdrop-filter: blur(20px) + 基底色 70% 不透明度
- 初始状态底边框透明，滚动超过 50px 后底边框变为 var(--border-color)
- 过渡 0.3s ease
- 左侧：品牌 Logo/文字，字体 var(--font-display)，字重 700，字号 18-20px
- 右侧：导航链接，字号 13-14px，字重 500，大写字母，字间距 1-2px
- 链接间距 32-36px，颜色 var(--fg-muted)，hover 变 var(--fg)
- 链接下划线动画：::after 伪元素，从 width:0 到 width:100%，高度 2px，颜色强调色，过渡 0.3s
- 移动端：导航链接隐藏，显示汉堡按钮（三条横线，30s 无交互后可自动收起）
▍5.3 Hero 首屏
- 最小高度 100vh，flexbox 垂直居中
- 背景层（z-index:0）：
- 2-3 个大型模糊光斑（300-600px），使用强调色 8-15% 不透明度 + filter: blur(100-140px)
- 光斑以 15-25s 周期缓动浮动（translateX/Y ±30-50px + scale 0.95-1.05），各自不同延迟
- 亮色模式下光斑使用更淡的版本（opacity 0.06-0.10）
- 内容层（z-index:1）：
- 可选标签：胶囊形（border-radius: 9999px），内含小圆点（8px，绿色脉冲动画）+ 文字，字号 13px
- 主标题：var(--text-hero)，字重 700-900，行高 1.05，字间距 -2 至 -3px
- 标题分 2-3 行，每行独立动画（translateY(100%) → 0），依次延迟 0.15s
- 关键词使用渐变填色：background: linear-gradient(135deg, 主强调色, 辅助色); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
- 副标题：var(--text-body)，颜色 var(--fg-muted)，行高 1.7-1.8，最大宽度 520-560px
- CTA 按钮组：两个按钮横排，间距 16px
- 主按钮：强调色填充，文字色与基底色一致（确保对比度），hover 时背景提亮 + translateY(-2px) + 彩色投影
- 次按钮：透明背景，1px 边框，hover 时边框变亮
- 所有按钮 border-radius: 9999px，padding: 14px 32px，字号 15px，字重 600
- 底部滚动指示器：绝对定位 bottom: 40px，居中，含文字"SCROLL" + 一条 1px 渐变线（从强调色到透明），线高 40px，脉冲动画
▍5.4 区块标题
- 每个内容区块的标题区域
- 上方：小标签，字号 13px，字重 600，强调色，字间距 3px，大写，margin-bottom: 16px
- 下方：大标题，var(--text-h1)，字重 700，字间距 -1 至 -2px，行高 1.1，可换行
- 区块标题 margin-bottom: 64-72px
▍5.5 文字与图片双栏
- grid-template-columns: 1.2fr 1fr 或 1fr 1.2fr（交替出现增加节奏感）
- gap: 64-80px
- 图片侧：aspect-ratio: 4/5 或 16/10，border-radius: var(--radius-xl)，overflow: hidden，边框 1px
- 若无真实图片，使用 CSS 绘制的抽象视觉：渐变球体 + 旋转轨道环（1px 边框，border-radius: 50%，动画旋转）+ 环绕光点（小圆点，orbit 动画）
- 亮色模式：使用浅色渐变 + 更柔和的阴影
- 文字侧：padding 用于对齐
- 段落 var(--text-body)，var(--fg-muted)，行高 1.75，margin-bottom 24px
- 强调词使用 strong 标签，颜色 var(--fg)
- 统计数据网格：grid 3 列（移动端 1 列），每格居中，padding 24px，卡片样式
- 统计数字：var(--text-h2) 或更大，字重 700，数字滚动动画（从 0 到目标值，1.5s，缓出）
- 统计标签：var(--text-small)，var(--fg-muted)
▍5.6 跑马灯/无限滚动条
- 全宽，上下各有 1px border 分隔
- 内边距 48px 0
- 内容：关键词列表 + 分隔符，无限循环滚动
- 动画：translateX(0) → translateX(-50%)，30s 线性无限循环
- 文字样式：var(--text-h2) 或更大，字重 700，white-space: nowrap
- 奇数项使用描边文字（-webkit-text-stroke: 1px var(--fg-dim); color: transparent）
- 偶数项使用实心填充（color: var(--fg)）
- 分隔符使用 "•" 或 "◆"，字号较小，强调色
▍5.7 项目/作品卡片
- 纵向堆叠，间距 32-48px
- 每张卡片：grid 两列（1.2fr 1fr），gap 48px，padding 32px，卡片样式（背景、边框、圆角）
- 预览侧：
- 浏览器 mockup：aspect-ratio 16/10，圆角 var(--radius-md)
- 顶栏：高度 32px，深色背景，左含三个 8px 圆点（红/黄/绿），底边 1px border
- 内容区：padding 24px，min-height 120px，含骨架线条（高度 10px，圆角 5px，不同宽度）
- 骨架线条颜色：强调色线条（60% 宽度，强调色浅色背景）+ 灰色线条（40-80% 宽度）
- 交替卡片左右位置互换（偶数卡片预览在右），增加视觉节奏
- 描述侧：padding 16px 0
- 序号：var(--text-small)，强调色，字重 600，margin-bottom 12px
- 标题：var(--text-h3)，字重 700，字间距 -0.5px，margin-bottom 16px
- 描述：var(--text-body)，var(--fg-muted)，行高 1.7，margin-bottom 24px
- 标签组：flex wrap，gap 8px
- 每个标签：padding 6px 14px，强调色 8% 背景 + 15% 边框，圆角 9999px，字号 13px，强调色文字
- 链接：inline-flex，gap 8px，字重 600，字号 14px，颜色 var(--fg)
- hover：箭头右移 6px，过渡 0.3s
▍5.8 技能/服务卡片网格
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
- gap: 24px
- 每张卡片：padding 32px，卡片样式，position: relative，overflow: hidden
- 顶部装饰条（可选）：绝对定位 top:0 left:0 right:0，高度 2px，渐变（主强调色→辅助色），初始 opacity:0，hover 时 opacity:1，过渡 0.3s
- 图标区域：48x48px，圆角 12px，强调色 12-15% 背景，margin-bottom 20px
- 图标使用 Unicode 字符或 SVG 内联，字号 22px
- 标题：var(--text-h3)，字重 600，margin-bottom 10px
- 描述：var(--text-small)，var(--fg-muted)，行高 1.7，margin-bottom 20px
- 进度条：高度 4px，背景 var(--bg)，圆角 2px，overflow: hidden
- 填充条：高度 100%，渐变（主强调色→辅助色），初始宽度 0%
- 卡片进入视口时，填充条动画到目标宽度，时长 1.2s，缓动 ease-out-expo
- 目标宽度通过 CSS 自定义属性 --fill 传入（如 style="--fill:90%"）
▍5.9 推荐语/引用块
- 居中排版，最大宽度 800px
- 引号装饰：大型 " 字符，强调色，字号 64-96px，行高 0，opacity 0.2
- 引用文字：var(--text-h3) 或更大，字重 400-500，行高 1.6，font-style: italic（亮色/人文模式）或正常（暗色/科技模式）
- 来源：margin-top 24px，var(--text-small)，var(--fg-muted)
- 人名加粗，后接逗号 + 职位/公司
▍5.10 联系区块
- 居中排版，text-align: center
- 标题：var(--text-h1)，字重 800，可含渐变关键词
- 副标题：var(--text-body)，var(--fg-muted)，max-width 500px，margin 居中
- 社交链接组：flex，居中，gap 16px，wrap
- 每个链接：inline-flex，align-items: center，gap 10px，padding 14px 28px，圆角 9999px
- 1px 边框，字号 15px，字重 500
- 含 SVG 图标（18x18），stroke 当前色
- hover：边框变强调色 + translateY(-2px) + 强调色发光阴影
▍5.11 页脚
- 上方 1px border
- padding: 32px 48px
- flex，justify-content: space-between，align-items: center
- 左侧：版权文字，字号 13px，var(--fg-dim)
- 右侧：装饰性文字或链接，字号 13px
- 移动端：居中堆叠，gap 12px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第六部分：动效编排系统
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
所有动效分五类编排，形成完整的运动语言。
▍6.1 入场动效
原则：分层次、有节奏、不过度
- 页面加载器完成后，首屏元素依次出现：
- 标签/角标：delay 0.2s
- 主标题第一行：delay 0.4s
- 主标题第二行：delay 0.55s
- 主标题第三行（若有）：delay 0.7s
- 副标题：delay 0.9s
- CTA 按钮：delay 1.1s
- 滚动指示器：delay 1.5s
- 每个元素从 opacity:0 + translateY(20-30px) 过渡到最终态
- 缓动：var(--ease-out-expo)，时长 0.8s
- 滚动揭示（非首屏元素）：
- IntersectionObserver 驱动，threshold: 0.1，rootMargin: 0 0 -50px 0
- 元素初始 opacity:0 + translateY(40px)
- 进入视口后过渡到最终态，时长 0.8s，缓动 var(--ease-out-expo)
- 同一容器内的多个子元素依次延迟 var(--stagger-delay)
- 一旦出现不再隐藏（unobserve）
▍6.2 悬停动效
原则：即时反馈、微妙位移、边界感知
- 卡片类：
- translateY(-4px)，过渡 var(--duration-normal)
- 边框颜色从默认变为强调色 30% 透明度
- 盒阴影从无/浅变为 var(--shadow-card) 或强调色发光
- 按钮类：
- 主按钮：背景提亮 10% + translateY(-2px) + 彩色投影（0 8px 30px 强调色 20-30% 透明度）
- 描边按钮：边框色从 var(--fg-dim) 变 var(--fg-muted) + translateY(-2px)
- 链接类：
- 箭头/图标 translateX(4-6px)，过渡 var(--duration-normal)
- 下划线从 width:0 扩展到 width:100%
- 统计/数字类：
- translateY(-4px) + 边框变强调色 + 强调色微发光
- 所有悬停效果必须有对应 mouseenter/mousestart 即刻触发，不等待
▍6.3 持续动效
原则：呼吸感、不干扰、可忽略但不可缺失
- 背景光晕：2-3 个模糊圆，各自以不同周期（15-25s）缓动浮动
- translateX/Y ±30-50px + scale 0.95-1.05
- 使用 CSS @keyframes，不用 JS
- 各光晕延迟错开（0s / -7s / -14s 或类似）
- 跑马灯：translateX(0) → translateX(-50%)，30s 线性无限循环
- 内容需复制一份实现无缝衔接
- 轨道动画：装饰性小圆点围绕中心旋转
- transform: rotate(360deg) translateX(Rpx) rotate(-360deg)
- 不同半径 R = 120/160/200px，不同周期 10-18s
- 脉冲点：8px 圆点，opacity 在 1 和 0.4 间以 2s 周期脉冲
▍6.4 滚动动效
原则：轻量、辅助、不喧宾夺主
- 视差效果（可选）：背景光晕根据 scrollY 做微弱位移（scrollY * 0.02-0.05）
- 使用 requestAnimationFrame，不用 scroll 事件直接赋值
- 导航栏：scrollY > 50px 时显示底边框
- 数字计数：统计数字进入视口时从 0 滚动到目标值
- 使用 ease-out 缓动，时长 1.5s
- 只触发一次
▍6.5 自定义光标
- 仅桌面端（检测 'ontouchstart' in window，触屏设备隐藏）
- 外圈：20px，2px border 强调色，border-radius: 50%，mix-blend-mode: difference
- 内点：6px，强调色亮色变体，border-radius: 50%
- 位置跟随：使用 requestAnimationFrame 线性插值
- 外圈：lerp 系数 0.12（缓慢跟随，有惯性感）
- 内点：lerp 系数 0.25（略快）
- 悬停可交互元素时：外圈 scale(2.5)，背景半透明强调色填充，opacity 0.5
- 可交互元素：a, button, .work-item, .skill-card, .stat-item, .contact-link, .btn
- 鼠标离开窗口时：光标 opacity: 0
- 确保光标 pointer-events: none，不阻挡点击
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第七部分：页面结构模板
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
根据网站类型选择对应结构模板。所有类型共享加载器和导航。
▍类型一：作品集 Portfolio
目标受众：设计师、开发者、摄影师、创意人
核心目标：展示专业能力，赢得客户信任
1. 加载器
2. 导航
3. Hero — 大标题"Creative [角色]"或品牌名，副标题概述能力，双CTA
4. 关于 — 左抽象视觉+右文字介绍+统计数据
5. 跑马灯 — 技能/服务关键词
6. 作品展示 — 3-4 个项目卡片（左右交替布局）
7. 推荐语 — 1-2 条客户评价
8. 技能网格 — 6 张技能卡片
9. 联系 — 居中大标题+社交链接
10. 页脚
▍类型二：品牌站 Brand Site
目标受众：品牌方、代理商、工作室
核心目标：传递品牌气质，建立情感连接
1. 加载器
2. 导航
3. Hero — 品牌宣言式大标题，视觉冲击力强，可能使用全屏视频/动态背景
4. 品牌故事 — 左右双栏，叙述品牌起源与理念
5. 跑马灯 — 品牌价值关键词
6. 服务/能力 — 3-4 个服务卡片（图标+标题+描述，无进度条）
7. 案例展示 — 2-3 个精选案例，每例含视觉+描述
8. 团队（可选）— 团队成员网格（头像占位+姓名+职位）
9. 联系 — 居中大标题+表单或联系方式
10. 页脚
▍类型三：落地页 Landing Page
目标受众：潜在用户、转化目标
核心目标：清晰传达价值主张，驱动转化
1. 加载器
2. 导航（含醒目 CTA 按钮）
3. Hero — 一句话价值主张 + 产品视觉 + 主 CTA 按钮
4. 痛点/问题 — 目标用户面临的挑战（2-3 条）
5. 解决方案 — 产品如何解决（对应痛点）
6. 特性网格 — 4-6 个产品特性卡片
7. 社会证明 — 数据统计 + 客户 Logo 占位 + 推荐语
8. 定价（可选）— 2-3 个定价方案卡片
9. 最终 CTA — 重复主 CTA，制造紧迫感
10. 页脚（精简）
▍类型四：产品发布页 Product Page
目标受众：早期用户、媒体、投资人
核心目标：制造期待感，展示创新点
1. 加载器
2. 导航
3. Hero — 产品名 + 一句话定位 + 发布时间 + 预约/等待列表按钮
4. 产品亮点 — 3 个核心创新点（大图标+标题+描述）
5. 产品展示 — 交互式 mockup（前后对比 or 功能演示）
6. 技术规格 — 参数网格（精确数字 + 标签）
7. 路线图 — 时间线组件（3-4 个里程碑）
8. 背书 — 合作品牌 Logo + 引用
9. 最终 CTA — 强调紧迫感（限量/限时）
10. 页脚
▍类型五：活动/展览页 Event Page
目标受众：活动参与者、赞助商
核心目标：传递活动氛围，驱动报名
1. 加载器
2. 导航
3. Hero — 活动名 + 日期 + 地点 + 报名按钮，视觉冲击力最大化
4. 活动介绍 — 关于活动的叙述 + 关键数据（参会人数/演讲者数/天数）
5. 演讲者 — 网格展示（头像占位+姓名+公司/职位）
6. 日程 — 时间线/标签页组件（按天或按主题分组）
7. 场地 — 地点信息 + 可选嵌入地图占位
8. 赞助商 — Logo 网格占位
9. 报名 CTA — 价格 + 按钮
10. 页脚
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第八部分：氛围叠加层
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
在所有视觉内容之上叠加以下层，增加质感与深度：
▍8.1 噪点纹理
- position: fixed, inset: 0, z-index: 9999, pointer-events: none
- opacity: 0.03（暗色模式）/ 0.015（亮色模式）
- 使用 SVG feTurbulence 生成：
```html
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
```
▍8.2 网格线背景
- position: fixed, inset: 0, z-index: 0, pointer-events: none
- 使用 CSS 线性渐变绘制网格：
```css
background-image:
linear-gradient([强调色 3% 透明度] 1px, transparent 1px),
linear-gradient(90deg, [强调色 3% 透明度] 1px, transparent 1px);
background-size: 80px 80px;
```
- 叠加径向渐变遮罩，中心可见、边缘消融：
```css
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
```
- PAPER 和 BLOOM 预设不使用网格线
▍8.3 光标混合模式
- 自定义光标外圈使用 mix-blend-mode: difference
- 确保光标在任何背景色上都可见
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第九部分：响应式设计
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▍9.1 断点
```css
/* 平板 */
@media (max-width: 1024px) { ... }
/* 手机 */
@media (max-width: 640px) { ... }
```
▍9.2 平板适配（≤1024px）
- 双栏区块改为单栏
- 区块间距从 120px 缩至 80px
- 内边距从 48px 缩至 24px
- 作品卡片仍为双栏但比例调整
- 导航链接字号不变但间距缩小
▍9.3 手机适配（≤640px）
- 导航链接完全隐藏，仅保留 Logo
- Hero 标题字号使用 clamp 下限
- 统计网格改单列
- CTA 按钮改为全宽堆叠
- 社交链接改为全宽堆叠
- 页脚居中堆叠
- 跑马灯字号缩小至 clamp 下限
- 自定义光标隐藏，恢复系统光标
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第十部分：内容策略
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▍10.1 文案风格
- 所有文案必须与主题气质一致
- 科技类：简洁、精确、动词优先（"Build the future"）
- 人文类：诗意、有温度、留想象空间（"Where stories take shape"）
- 活泼类：口语化、有节奏、带情绪（"Let's make something awesome"）
- 极简类：少即是多、一句话胜千言（"Less, but better"）
▍10.2 占位内容规则
- 不使用 Lorem ipsum，所有占位文案必须与主题相关的有意义内容
- 人名使用风格化名字（如：Alex Chen, Maya Singh, Kai Müller）
- 项目名使用有创意的名称（如：Nebula Dashboard, Flux Brand System, Aura Commerce）
- 数据使用合理的数字（经验年数 3-8，项目数 20-60，客户数 10-40）
- 社交链接使用合理的占位 URL（mailto: / #）
▍10.3 SVG 图标
- 所有图标使用内联 SVG，stroke-based，viewBox="0 0 24 24"
- stroke-width="2"，stroke-linecap="round"，stroke-linejoin="round"
- fill="none"，stroke="currentColor"
- 社交图标参考标准图标集（Lucide / Feather 风格）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第十一部分：技术约束
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 单文件 HTML，所有 CSS 内联于 <style>，所有 JS 内联于 <script>
2. 仅可引入 Google Fonts（最多 2 个字体族，1 个标题 + 1 个正文）
3. 不引入任何第三方 JS/CSS 框架（无 Tailwind、无 Bootstrap、无 jQuery）
4. 不引入任何动画库（无 GSAP、无 Framer Motion、无 Anime.js）
5. 所有动画使用原生 CSS animation / transition + requestAnimationFrame
6. 不使用任何外部图片（所有视觉元素用 CSS 绘制或 SVG 内联）
7. 必须在 Chrome / Safari / Firefox 最新版无报错运行
8. HTML 语义化：使用 <nav>、<section>、<header>、<main>、<footer> 等语义标签
9. 所有 CSS 自定义属性（Design Tokens）在 :root 中定义
10. JS 使用 const/let，不用 var；使用箭头函数；使用模板字符串
11. 不使用 alert/prompt/confirm
12. 页面必须支持中文和英文内容（lang 属性正确设置）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第十二部分：质量检查清单
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
生成网页后，自行检查以下项目，全部通过才可交付：
视觉：
□ 色板是否与主题映射一致？
□ 所有文字层级是否清晰可辨（标题/正文/辅助）？
□ 渐变填色是否仅在关键词上使用（不超过 2 处）？
□ 暗色模式文字对比度是否足够（WCAG AA 以上）？
□ 亮色模式文字对比度是否足够？
□ 是否有至少 2 个"记忆点"（让人"哇"的视觉瞬间）？
排版：
□ 标题字间距是否为负值？
□ 正文行高是否在 1.7-1.8？
□ 正文最大宽度是否 ≤560px？
□ 字重是否限制在规定范围内？
动效：
□ 页面加载器是否正常出现并消失？
□ 首屏元素是否分层延迟出现？
□ 滚动揭示是否由 IntersectionObserver 驱动？
□ 悬停效果是否即时反馈？
□ 背景光晕是否持续浮动？
□ 自定义光标是否跟随（桌面端）？
□ 触屏设备是否隐藏自定义光标？
交互：
□ 导航链接是否平滑滚动到对应区块？
□ 所有按钮/链接是否有 hover 状态？
□ 统计数字是否在进入视口时滚动计数？
□ 技能进度条是否在进入视口时填充？
响应式：
□ 1024px 以下是否正常显示？
□ 640px 以下是否正常显示？
□ 移动端导航链接是否隐藏？
技术：
□ 浏览器控制台是否无报错？
□ 是否为单文件 HTML？
□ 是否无外部依赖（Google Fonts 除外）？
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第十三部分：使用方式
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
请根据以下信息生成网页：
【必填】
- 主题：[描述你的主题，越具体越好。例如：一个做深海纪录片的创意团队 / 一个 AI 写作助手的产品发布 / 一个日式茶道工坊的品牌站]
- 网站类型：[作品集 / 品牌站 / 落地页 / 产品发布页 / 活动页]
- 品牌名/人名：[你的品牌名或个人名字]
【选填】
- 风格预设：[VOID / AURORA / PAPER / CHROME / BLOOM]（不填则自动推导）
- 语言：[中文 / 英文]（不填则默认英文）
- 特别要求：[任何额外要求，例如：加入时间线组件 / 强调视频元素 / 使用特定颜色]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```
---
## 使用示例
### 示例 1：暗色科技作品集
```
主题：全栈开发者，擅长创意编码与交互设计
网站类型：作品集
品牌名：KAI.DEV
风格预设：VOID
语言：英文
```
→ 产出：深空暗色主题，电光紫 + 青色强调，Space Grotesk 标题字体，锐利动效节奏，5 个标准作品集区块
### 示例 2：日式禅意品牌站
```
主题：京都茶道工坊，传承百年制茶技艺
网站类型：品牌站
品牌名：茗月 MEIGETSU
风格预设：PAPER
语言：中文
特别要求：使用衬线标题字体，加入"四季"意象的视觉元素
```
→ 产出：暖白底色，墨绿强调色，Cormorant 衬线标题，优雅动效节奏，品牌故事+服务+案例+团队结构
### 示例 3：活力甜品落地页
```
主题：手工法式甜品店，专注季节限定蛋糕
网站类型：品牌站
品牌名：Douceur
风格预设：BLOOM
语言：中文
```
→ 产出：奶油色底色，粉色+橙色强调，Sora 标题字体，活泼动效节奏，大圆角柔软视觉，有机曲线装饰
### 示例 4：工业风产品发布
```
主题：桌面级 3D 打印机，精度 0.01mm
网站类型：产品发布页
品牌名：FORMCORE
风格预设：CHROME
语言：英文
特别要求：加入技术规格参数表
```
→ 产出：深色金属质感，冷灰银强调，Syne 标题字体，精密动效，金属光泽扫过效果，产品亮点+规格+路线图结构
---
## 设计理念
PRISM 之名源于棱镜的本质：一束白光穿过棱镜，折射出完整光谱。这条 Prompt 就是那枚棱镜——无论输入什么主题，它都能将其折射为一个视觉上完整、情绪上饱和的数字体验。
v2.0 的进化在于"通用性"的重新定义：不是一套参数适配所有场景，而是建立一套映射系统——主题意象→色彩、氛围类型→字体、节奏类型→动效。用户只需描述"我是谁"，PRISM 自动推导"你应该看起来怎样"。
五种风格预设覆盖了从极暗到极亮、从冷峻到温暖的光谱两端；五种网站类型模板覆盖了从个人展示到商业转化的完整场景。这不是一个 Prompt，而是一套设计系统——只不过它被压缩进了自然语言。