💬 对话输出示例

展示「地图指挥官」技能在对话中返回特效HTML的效果

🧑
用户:帮我搜索北京的咖啡馆,我想找一家适合工作的
🤖

好的!正在为你搜索北京适合工作的咖啡馆...

✨ 返回的特效HTML内容

🔍 搜索参数

城市:北京
类型:咖啡馆
标签:适合工作、WiFi、安静

📍 推荐结果(模拟)

☕ 星巴克(国贸店)
WiFi快 座位多
📍 朝阳区建国路88号
☕ %Arabica(三里屯)
环境好 咖啡棒
📍 朝阳区三里屯路19号
☕ Manner Coffee(望京)
性价比高 安静
📍 朝阳区望京SOHO

🗺️ 地图预览

地图加载中...
(实际使用时接入腾讯地图API)

💡 以上结果为模拟数据。实际使用时,我会调用腾讯地图POI搜索API获取真实数据。

🧑
用户:帮我规划从北京西站到天安门的跑步路线,大概5公里
🤖

收到!正在为你规划北京西站→天安门的5公里跑步路线...

🏃 跑步路线规划结果

📊 路线概览

5.2
公里
38
分钟
412
卡路里

🗺️ 路线预览

📍
🏁
实际路线以腾讯地图API返回为准

📍 途经点

  1. 起点:北京西站
  2. 途经:军事博物馆 → 木樨地 → 南礼士路
  3. 终点:天安门广场

✅ 路线规划完成!需要我发送到你的手机吗?

📝 返回的HTML代码结构

用户提问后,AI返回的完整响应应包含:

1. 简要文字说明(1-2句话)
2. HTML代码块(用```html包裹)

示例代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        /* 赛博朋克配色 */
        :root {
            --primary: #00d4ff;
            --secondary: #7b2dff;
            --accent: #ff00ff;
        }
        
        /* 卡片悬浮特效 */
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <div class="card">
        <h2 class="gradient-text">搜索结果</h2>
        <!-- 内容 -->
    </div>
</body>
</html>
```

🎨 必须包含的特效要素

🎨 配色方案

  • 主色:#00d4ff (青色)
  • 副色:#7b2dff (紫色)
  • 强调:#ff00ff (粉色)
  • 背景:#0a0a1a (深蓝黑)

✨ 动画效果

  • 渐变文字(background-clip)
  • 发光效果(text-shadow)
  • 扫光动画(::before + left)
  • 脉冲动画(@keyframes pulse)
  • 悬浮3D(transform: translateY + scale)

🎯 交互效果

  • 卡片悬浮特效
  • 按钮悬浮放大
  • 鼠标跟随光效
  • 滚动渐入动画
  • 点击波纹效果

📱 响应式

  • 移动端适配(@media)
  • 弹性布局(Flexbox/Grid)
  • 字体大小自适应
  • 间距动态调整
  • 触摸优化

💡 以上示例展示了如何在对话中返回带有炫酷特效的HTML内容

查看完整技能文档