悦读——基于微信读书MCP的阅读畅想

我是个前端的小白，之前是做嵌入式开发的程序员，一直很酷爱悦读，平时又自由惯了，不喜欢被条条框框给束缚，便养成了一个畅读的习惯，阅读了大量书籍之后，发现零零散散记录了好多笔记，但由没有好好整理，这么多宝藏知识库最后没有好好利用起来实在是可惜，最近出了微信读书MCP，我想我心心念想做的事情终于可以用AI来帮我完成了，想想整个过程都让人感到很惊喜。有了想法之后，我就用豆包帮我做需求分析。之前我看过陈天老师的AI分享，和AI做提示词交互其实有很多门道，比如苏格拉底式的提问可以帮助我们启发思路，于是我让豆包同学引导我完成产品的构思。

灵感起点：一个酷爱阅读的追求自由创新的驰骋者 灵感来源于MBTI，感觉自己好孤独啊，但是又特别崇拜学识渊博的人，哪天要是能够企及就好了，那不妨和那些驰骋各个领域的大佬来一场时空对话，对同一本书他们的观念怎么样的，能不能阅读的时候可以和他们辩论组成圆桌会议，想想都很有意思。

假设你是一名优秀的提示词专家，我现在设计一款微信读书MCP智能体应用，你的任务是运用苏格拉底式的提问，帮我一起理清思路并形成完整的项目编程提示词

经过和AI的沟通和思辨，我慢慢的形成了自己的想法，我设计的应用给他取名叫"悦读"，记录我读书过程中的点滴趣事。 整体的设计风格还是黑白灰，简洁，低调，带有古典中国风。我还想加一些Material Design,手机时代的Android5.0的设计典范，堪称经典！

你还需要再帮我做一个欢迎页面，展示应用的标题"悦读"，和微信读书的应用风格保持一致，然后有一个加载5秒的动画，动画加载完毕跳转到主页

欢迎页中阅读下方添加一句话“学而时习之不亦说乎”，这句话添加逐字渐入效果，字体用行书，突出水墨中国风效果，外加添加一个孔子的卡通动漫图片，风格简洁，使用Material Design的风格

分这四个模块 ： 即刻 ，对话，探友，我的 四大模块。外加添加一个欢迎界面，是一个孔子老先生的形象，并附上"学而时习之不亦说乎"，倒是有一份书生的意境 。

即刻： 可以显示阅读的时间轴，每个月读过的代表性书籍和读书进度。时间轴呈现清清楚楚，顺着时间的流我要追溯回到过去的感觉，唤醒那一次次美好的记忆。

对话： 和名人来一场穿越时空的对话， 看看古今名人对同一本书有什么想法。同时你也可以畅所欲言，没有IDEA，世界将会怎样！你可以畅所欲言 。

探友： 大牛分享的书单可是不可多得的宝藏呢，而且可以链接到微信读书的号，可以找到id，给大佬留言，甚至可以去up主的B站上看看那些大佬都在学习什么，分享哪些有意思的新知识，二手书籍线下活动可以做一些交易，顺便线下可以链接并交流读书心得，把二手书给盘活了是个小小的盈利点，买书更多的是一种情怀，一种在嘈杂生活中寻求宁静的生活方式 。

我的： 记录我这1年的读书计划，我甚至觉得作为INTJ的人，天然的孤独感把自己形成了一道难以逾越的屏障，拆掉思维的墙，我也可以这样活，不如来一个INTJ的相反人格的书单推荐，加入到自己的计划中，让自己有着别样的人生。话说：逆向思维刀刃向内，自我革命是一种精神更是一种态度。生成统计图饼图显示2025阅读进度完成情况，思路来源于前工作被强迫症领导逼着数据展示要画一个圆满的饼图，被迫学会了哈哈哈。对了中学那会儿不是流行座右铭嘛！加一个呗，怀念一下那个还没那么疯狂内卷的时代！

帮我制作一个主页，包含四个tab页，分别是"即刻"，“对话”,"探友"，“我的”，点击四个tab页可以相互切换对应功能的页面,每个按钮上添加点击变色效果

先做一个小的功能 ，用提示词给他生成

假设你是一名提示词专家，我现在要设计一款基于微信读书的名人对话智能体，功能输入一个书名，读取用户的微信读书书评和划线数据，获取这本书所有的读者的书评，然后对书的内容进行探讨，利用网络资源搜索名人书评内容，形成人物对话：1.马斯克 2.孔子 3.尼采 4.马克思 5.比尔盖茨

请调用微信读书MCP的服务，获取微信阅读书目最大的人的id和他们正在阅读的书籍做成书单以动画滚屏的形式在story.html中

其中很重要的一个提示词是卡片布局的效果，我是参照了一篇文章写的提示词，详见reference :

你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。请设计高级时尚杂志风格的知识卡片，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。# 设计风格：## 样式 ios消息## 头像 改用UI Avatars服务生成文字头像为每个人物设置了独特的背景色，与其消息气泡颜色相匹配：# 技术规范：* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript  * Font Awesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css * Tailwind CSS: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css * 中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap * 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈* 确保代码简洁高效，注重性能和可维护性* 使用CSS变量管理颜色和间距，便于风格统一# 输出要求：* 提供一个完整的HTML文件，* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的数字杂志式卡片，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。

剩下的就是一股脑儿的生成页面，慢慢调吧，直到可以达到完美的效果。 数据是微信MCP生成的，贴一段主要的代码吧，不知道AI生成的代码效果怎么样 ，待大神来评论。

function switchTab(tabId) {
  // 隐藏所有页面
  document.querySelectorAll('.page').forEach(page => {
    page.classList.remove('active');
  });

  // 显示选中的页面
  document.getElementById(tabId).classList.add('active');

  // 更新tab状态
  document.querySelectorAll('.tab').forEach(tab => {
    tab.classList.remove('active');
  });

  event.target.classList.add('active');
}

async function shareToWeChat() {
  // 生成对话总结
  const messages = document.querySelectorAll('.message-text');
  let summary = '《巨人的陨落》跨时空对话精彩观点：\n\n';

  messages.forEach(msg => {
    const author = msg.closest('.message').querySelector('.message-author').textContent;
    const text = msg.textContent;
    summary += `${author}: ${text}\n\n`;
  });

  // 截取前200字作为分享描述
  const shortDesc = summary.length > 200 ? summary.substring(0, 200) + '...' : summary;

  const currentUrl = encodeURIComponent(window.location.href);
  const title = encodeURIComponent('跨时空对话：《巨人的陨落》');
  const desc = encodeURIComponent(shortDesc);
  const imgUrl = encodeURIComponent('https://example.com/share-image.jpg');

  window.open(`https://connect.qq.com/widget/shareqq/index.html?url=${currentUrl}&title=${title}&desc=${desc}&pics=${imgUrl}&site=微信读书`);
}

// 发送消息函数
function sendMessage() {
  const input = document.querySelector('.chat-input input');
  const message = input.value.trim();
  if (message) {
    const messagesContainer = document.querySelector('.card-body');
    const delay = document.querySelectorAll('.message').length * 100 + 100;

    const newMessage = document.createElement('div');
    newMessage.className = 'message';
    newMessage.style.animationDelay = `${delay}ms`;
    newMessage.innerHTML = `
            <div class="avatar" style="background-color: #8b5cf6">你</div>
            <div class="message-content">
                <div class="message-author">用户</div>
                <div class="message-text">${message}</div>
                <div class="message-time">刚刚</div>
            </div>
        `;

    messagesContainer.appendChild(newMessage);
    input.value = '';
    newMessage.scrollIntoView({
      behavior: 'smooth'
    });
  }
}

// 添加微妙的交互效果
document.addEventListener('DOMContentLoaded', function() {
  const card = document.querySelector('.magazine-card');

  // 点击卡片时的反馈
  card.addEventListener('click', function() {
    this.style.transform = 'scale(0.98)';
    setTimeout(() => {
      this.style.transform = '';
    }, 200);
  });

  // 悬停时的阴影增强
  card.addEventListener('mouseenter', function() {
    this.style.boxShadow = '0 15px 35px rgba(0, 0, 0, 0.15)';
  });

  card.addEventListener('mouseleave', function() {
    this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
  });
});

const ctx = document.getElementById('readingPieChart').getContext('2d');
const readingPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['《人类简史》', '《未来简史》', '《原则》'],
    datasets: [{
      data: [30, 40, 30],
      backgroundColor: [
        'rgb(59, 130, 246)',
        'rgb(16, 185, 129)',
        'rgb(234, 179, 8)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.label}: ${context.raw}%`;
          }
        }
      }
    }
  }
});

const bookData = [{
    title: "2025年时事政治",
    author: "Administrator",
    progress: 57,
    readingTime: "3分钟"
  },
  {
    title: "政治肖八",
    author: "Monday",
    progress: 75,
    readingTime: "0分钟"
  },
  {
    title: "肖四带背重点",
    author: "空卡",
    progress: 92,
    readingTime: "2小时54分钟"
  },
  {
    title: "考研政治",
    author: "xgd",
    progress: 100,
    readingTime: "1小时9分钟"
  },
  {
    title: "心理学考试讲义",
    author: "",
    progress: 83,
    readingTime: "8分钟"
  }
];

// 生成书单卡片
function generateBookCards() {
  const bookScroll = document.getElementById('book-scroll');
  bookScroll.innerHTML = '';

  bookData.forEach(book => {
    const card = document.createElement('div');
    card.className = 'flex-shrink-0 w-48 bg-white rounded-lg shadow-md p-4 book-card';
    card.innerHTML = `
                <h3 class="font-bold text-lg truncate">${book.title}</h3>
                <p class="text-gray-500 text-sm">${book.author}</p>
                <div class="mt-2">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: ${book.progress}%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">阅读进度: ${book.progress}%</p>
                </div>
                <p class="text-xs text-gray-500 mt-2">阅读时长: ${book.readingTime}</p>
            `;
    bookScroll.appendChild(card);
  });

  // 复制卡片以实现无限滚动效果
  const cards = bookScroll.querySelectorAll('div');
  cards.forEach(card => {
    const clone = card.cloneNode(true);
    bookScroll.appendChild(clone);
  });
}

// 实现无限滚动动画
function startScrollAnimation() {
  const bookScroll = document.getElementById('book-scroll');
  const container = document.getElementById('book-scroll-container');
  let scrollPosition = 0;
  const scrollWidth = bookScroll.scrollWidth / 2;

  function animate() {
    scrollPosition -= 1;
    if (Math.abs(scrollPosition) >= scrollWidth) {
      scrollPosition = 0;
    }
    bookScroll.style.transform = `translateX(${scrollPosition}px)`;
    requestAnimationFrame(animate);
  }

  generateBookCards();
  animate();
}

// 页面加载完成后启动动画
document.addEventListener('DOMContentLoaded', startScrollAnimation);

效果图： 欢迎界面：

即刻： 昨日重现！ 对话： 和名家来一场思辨心对心的交流 探友： 发现身边的悦读大神，分享你我的读书故事

我的： 我的悦读空间

参考文章： agent.csdn.net/68353992606… www.woshipm.com/ai/6214510.…