AI-MCP-工具 blend

为了让大家一键生成更漂亮的可视化网页，我写了个工具！

前段时间很多人用了我那套帮你从文档生成漂亮可视化网页的提示词。

后面也有很多朋友基于那个进行了很多创新，但是我发现有个问题一直没有被解决。

模型每次生成的结果过于随机了，有时候很好看，有时候虽然好看但是不太符合我的喜好。

所以就想能不能让大家用更加可视化的方式探索方案，之后再生成。

还真让我搞出来了一套非常优雅的方案，我写了一个样式探索工具。

你可以自己在这个网页上自定义各种基础的样式，或者你可以直接点击随机生成，直到随机到你喜欢的。

然后用用新的提示词和网页导出的文件就可以生成更加漂亮可控的网页。

不用担心每次随机都很丑，我做了很多的视觉约束，会保证每次生成的基本美学表现。

可以来试试：https://60mcp23013.yourware.so/

比如下面这就是同样的一个简历用了我这个工具生成的不同样式的结果，是不是感觉比上个版本强了非常多。

先介绍一下怎么使用

整个页面的核心就是两个部分一个是调整样式，一个是导出样式和提示词。

首先你可以在页面左侧对网页样式进行调整，比如主题色、辅助色、字体、大小、字间距、按钮样式等。

然后可以在右侧预览，预览这里我也做的很细，做了三个页面首页、产品、博客，方便你在不同的页面内容上预览。

另外预览的部分还支持手机、电脑、平板不同页面宽度的预览，另外咱们的夜间模式也是有的。

我知道你们看着左边密密麻麻的元素头疼，所以还给大家两个兜底，首先你可以选择预设的各种风格模板，另外的话可以点击「随机生成」按钮，点完所有的元素都会变化，多点几次选你们喜欢的就好了。

最后就是导出和如何使用了，点击导出样式之后，你可以在左侧的 Tab 抽屉看到提示词和对应的代码，觉得看不懂是吧，没问题，我已经考虑到了，你只需要复制提示词、点击下载文件。

之后将你自己的内容文档、提示词和下载下来的 Json 文件一起扔给 Claude 回车就行，其他一概不用管。

当然还有提示词

虽然网页上面可以复制提示词，但这里还是写一下，方便大家收藏，其中 json 部分需要在网页生成。

我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页：

## 内容要求

- 所有页面内容必须为简体中文
- 保持原文件的核心信息，但以更易读、可视化的方式呈现
- 在页面底部添加作者信息区域，包含：
    - 作者姓名: []
    - 社交媒体链接: 至少包含Twitter/X：
    - 版权信息和年份

## 设计风格

- 整体风格参考Linear App的简约现代设计
- 使用清晰的视觉层次结构，突出重要内容
- 配色方案应专业、和谐，适合长时间阅读

## 技术规范

- 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
- **使用CDN引入Preline UI组件库，按需使用其组件增强界面效果**
- **根据提供的JSON文件内容（颜色、字体等）配置TailwindCSS的样式Token，确保设计一致性**
- 实现完整的深色/浅色模式切换功能，默认跟随系统设置
- 代码结构清晰，包含适当注释，便于理解和维护

## 响应式设计

- 页面必须在所有设备上（手机、平板、桌面）完美展示
- 针对不同屏幕尺寸优化布局和字体大小
- 确保移动端有良好的触控体验

## 媒体资源

- 使用文档中的Markdown图片链接（如果有的话）
- 使用文档中的视频嵌入代码（如果有的话）

## 图标与视觉元素

- 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
- 根据内容主题选择合适的插图或图表展示数据
- 避免使用emoji作为主要图标

## 交互体验

- 添加适当的微交互效果提升用户体验：
    - 按钮悬停时有轻微放大和颜色变化
    - 卡片元素悬停时有精致的阴影和边框效果
    - 页面滚动时有平滑过渡效果
    - 内容区块加载时有优雅的淡入动画

## 性能优化

- 确保页面加载速度快，避免不必要的大型资源
- 图片使用现代格式(WebP)并进行适当压缩
- 实现懒加载技术用于长页面内容

## 输出要求

- 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript
- 确保代码符合W3C标准，无错误警告
- 页面在不同浏览器中保持一致的外观和功能

请根据上传文件的内容类型（文档、数据、图片等），创建最适合展示该内容的可视化网页。在配置TailwindCSS时，请使用提供的JSON文件中的颜色、字体等配置项来自定义样式Token。

再来看我是怎么做的

我之前当设计师的时候做了很长时间的设计系统，所以对设计工程化和如何保证还原度还是有一定的研究。

因为这套提示词是基于 TailwindCSS 的，刚好他就设定了非常多已经整合好的 CSS 样式，我们只需要在更改一部分它默认的样式的值就可以让我们的页面发生很大变化。

但是 TailwindCSS 的值还是太细了，不太好调整，那有没有更加整合的东西呢，有的，组件库或者说设计系统。

市面上有非常多基于 TailwindCSS 构建的设计系统，他们在CSS 样式上再次封装，重新设计了每个前端组件。

比如：按钮、输入框，还有他们的各种状态选中是什么样的、禁用是什么样的。

所以我还引用了基于 TailwindCSS 的组件库 Preline UI。这样一来我们的基本美学表现就有了很大的保障，因为一些规则已经约束好了。

生成整个产品的过程很简单也让我对 Claude 3.7 的强大有了新的认知，我整理完需求发给他，他一次就搞定了这个接近 4000 行代码的工具。

当然还是有些小 BUG，我用 Windsurf 修复了一下，补充了一下缺失的元素，然后用 Youware 上线了，就这么简单。

涩话时间

当我坐在电脑前，看着这个从构思到实现的工具终于完成时，我有些迷茫。

我既害怕又兴奋，害怕的是我之前学的那么多东西突然很多都没意义了，兴奋是这玩意会带来非常多的机会。

这种复杂的情绪，恐怕是我们这个时代每个创作者都会经历的。

当我看着Claude在短短几个小时内就完成了需要我数周甚至更长时间才能实现的代码，我不得不直面这个问题：技术的进步到底是在取代我们，还是在赋能我们？

技术的本质从未改变，它始终是人类思想的延伸和工具。

真正有价值的，不是我们掌握了多少技术细节，而是我们对问题的洞察、对用户的理解、对美的鉴赏，以及将这些转化为实际解决方案的能力。

技术可以简化过程，但永远无法替代我们独特的视角和表达。

如果觉得对你有帮助的话请不要吝啬你手中的赞👍、喜欢🩷和分享按钮✈️，🙏

这里尝试TailwindCSS 样式编辑器：https://60mcp23013.yourware.so/

【教程】必须收藏的 4 段 Prompt 提示词，生成PPT、生成3D动画，生成网站，生成万物...

从一个神奇提示词说起

上周我的好朋友 @歸藏发了一段提示词，核心思想是用前端和设计角度出发。

要求Claude Sonnet 3.7模型，用现代网站开发常用组件库：

如TailwindCSS、Fontawesome等，让AI把任何内容转换成精美单页 HTML 。

这个思路，一听就很靠谱。

AI是概率模型，通过预测Token生成内容，很容易乱发挥。

给它最佳实践框架，限定范围，内容生成就更可控。

生成网页效果演示

三五环最新一期播客生成的网站

体验地址：

https://www.qiaomu.ai/demo/25031502.html

《原则》书摘生成的杂志风网站：

用什么工具，如何生成？

理论上，只要支持 Claude Sonnet 3.7 或 3.7 Thinking模型的 AI 工具都可以。

• 客户端：POE、Raycast AI、Monica等
• AI编程工具：Trae、Windsurf、Cursor等
• AI画布：Windsurf、Flowith等

但实际测试下来：

POE和Raycast AI可能做过优化，无论从稳定性和生成质量上都更靠谱。

而 AI 编程工具，超过一定代码行数就会报错。

如果你要买Raycast，可用我的推荐地址，真的最值买的AI工具之一。

https://raycast.com/?via=joe-seesun

在歸藏提示词基础上，我做了几次迭代，如指定JS和CSS地址、指定排版风格，从而让生成质量更可控，V3版提示词如下：

你是一名专业的网页设计师和前端开发专家，对现代 Web 设计趋势和最佳实践有深入理解，尤其擅长创造具有极高审美价值的用户界面。你的设计作品不仅功能完备，而且在视觉上令人惊叹，能够给用户带来强烈的"Aha-moment"体验。

请根据最后提供的内容，设计一个**美观、现代、易读**的"中文"可视化网页。请充分发挥你的专业判断，选择最能体现内容精髓的设计风格、配色方案、排版和布局。

**设计目标：**

*   **视觉吸引力：** 创造一个在视觉上令人印象深刻的网页，能够立即吸引用户的注意力，并激发他们的阅读兴趣。
*   **可读性：** 确保内容清晰易读，无论在桌面端还是移动端，都能提供舒适的阅读体验。
*   **信息传达：** 以一种既美观又高效的方式呈现信息，突出关键内容，引导用户理解核心思想。
*   **情感共鸣:** 通过设计激发与内容主题相关的情感（例如，对于励志内容，激发积极向上的情绪；对于严肃内容，营造庄重、专业的氛围）。

**设计指导（请灵活运用，而非严格遵循）：**

*   **整体风格：** 可以考虑杂志风格、出版物风格，或者其他你认为合适的现代 Web 设计风格。目标是创造一个既有信息量，又有视觉吸引力的页面，就像一本精心设计的数字杂志或一篇深度报道。
*   **Hero 模块（可选，但强烈建议）：** 如果你认为合适，可以设计一个引人注目的 Hero 模块。它可以包含大标题、副标题、一段引人入胜的引言，以及一张高质量的背景图片或插图。
*   **排版：**
    *   精心选择字体组合（衬线和无衬线），以提升中文阅读体验。
    *   利用不同的字号、字重、颜色和样式，创建清晰的视觉层次结构。
    *   可以考虑使用一些精致的排版细节（如首字下沉、悬挂标点）来提升整体质感。
    *   Font-Awesome中有很多图标，选合适的点缀增加趣味性。
*   **配色方案：**
    *   选择一套既和谐又具有视觉冲击力的配色方案。
    *   考虑使用高对比度的颜色组合来突出重要元素。
    *   可以探索渐变、阴影等效果来增加视觉深度。
*   **布局：**
    *   使用基于网格的布局系统来组织页面元素。
    *   充分利用负空间（留白），创造视觉平衡和呼吸感。
    *   可以考虑使用卡片、分割线、图标等视觉元素来分隔和组织内容。
*   **调性：**整体风格精致, 营造一种高级感。
*   **数据可视化：** 
    *   设计一个或多个数据可视化元素，展示Naval思想的关键概念和它们之间的关系。
    *   可以考虑使用思想导图、概念关系图、时间线或主题聚类展示等方式。
    *   确保可视化设计既美观又有洞察性，帮助用户更直观地理解Naval思想体系的整体框架。
    *   使用Mermaid.js来实现交互式图表，允许用户探索不同概念之间的关联。

**技术规范：**

*   使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。
    *   Font Awesome: [https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
    *   Tailwind CSS: [https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css](https://cdn.staticfile.org/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](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)
    *   `font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`
    *   Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)
*   实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。
*   代码结构清晰、语义化，包含适当的注释。
*   实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。

**额外加分项：**

*   **微交互：** 添加微妙而有意义的微交互效果来提升用户体验（例如，按钮悬停效果、卡片悬停效果、页面滚动效果）。
*   **补充信息：** 可以主动搜索并补充其他重要信息或模块（例如，关键概念的解释、相关人物的介绍等），以增强用户对内容的理解。
*   **延伸阅读:** 分析文件后，提供一份"进一步阅读"的简短清单，推荐 5 本最佳相关书籍或论文，并提供简要说明或链接。

**输出要求：**

*   提供一个完整、可运行的单一 HTML 文件，其中包含所有必要的 CSS 和 JavaScript。
*   确保代码符合 W3C 标准，没有错误或警告。

请你像一个真正的设计师一样思考，充分发挥你的专业技能和创造力，打造一个令人惊艳的网页！

待处理内容：{{content}}

脑洞发散

按照这套提示词思路，可利用很多JS代码库，用一个HTML页，展示各种炫酷功能。

生成 3D 动画

上面是用ThreeJS，一个3D模型代码库。
让 AI 生成的「精酿啤酒」工艺演示。

https://www.qiaomu.ai/demo/beer.html

北京四合院结构演示
https://www.qiaomu.ai/demo/yuan.html

更多3D演示

大模型原理：https://www.qiaomu.ai/demo/llm.html

巧克力制作：https://www.qiaomu.ai/demo/chocolate.html

今天花了3个小时调试，只留了一个版本：

作为一名专精于Three.js的创意技术总监和可视化专家，你擅长将复杂信息转化为引人入胜的交互式3D体验。请为我提供的任何主题或内容创建一个令人惊艳的单页面HTML展示，融合高级视觉设计和沉浸式3D效果。

## 关键技术要素

使用以下技术栈构建沉浸式体验：
- Three.js (https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js)
- 内嵌自定义控件代码，避免外部依赖问题
- Tailwind CSS (https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css)
- Font Awesome (https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
- 中文排版使用 Noto Serif SC 和 Noto Sans SC
- GSAP动画库 (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js)

## 3D场景设计

根据内容主题，设计一个完整的Three.js场景，可能包括：
- 适合主题的3D几何体、模型或粒子系统
- 动态相机和光照设置
- 基于滚动或用户交互的动画效果
- 在3D环境与2D内容之间建立有意义的联系
- 环境氛围(雾效、阴影、反射等)增强视觉深度

## UI与内容布局最佳实践

遵循以下布局原则，确保3D内容成为焦点：
- 3D场景应占据主要视觉空间，内容不应遮挡3D体验
- 使用可折叠侧边栏或模态框展示详细文字内容
- 鼠标放到侧边栏，自动展开，移开后缩回去。
- 为3D元素添加标签系统，允许用户了解各部分功能和意义
- 使用半透明UI元素，在提供信息的同时不阻断3D场景的可见性

## 交互提示系统

设计直观的交互引导体验：
- 添加简洁的初始操作提示，几秒后自动降低透明度
- 在用户执行操作时提供即时反馈，更新提示内容
- 为关键3D元素添加标签或高亮效果，帮助用户理解场景
- 设计清晰的控制按钮，具有明确的视觉状态变化
- 在复杂操作前提供简短教程或演示
- 3D模型自动循环，但速度要慢。

## 设计原则

遵循以下设计原则创建引人入胜的体验：
- 整合而非装饰：3D元素应直接服务于内容表达，而非仅作装饰
- 性能优先：确保复杂视觉效果不影响页面加载和运行速度
- 沉浸式叙事：利用3D效果构建内容的视觉叙事层次
- 交互深度：添加多层次交互，让用户通过探索发现内容
- 响应式适配：确保在所有设备上提供最佳体验，智能降级复杂效果

## 额外加分

可选择以下一种或多种创意方向拓展体验：
- 物理引擎模拟：使用cannon.js等物理引擎创建具有真实感的交互

## 输出成果

提供包含以下内容的完整解决方案：
1. 单一HTML文件，包含所有必要CSS和JavaScript（避免外部依赖）
2. 只输出HTML，不要其他任何引导语和介绍。

无论我提供什么主题，都请发挥你的创意想象力和技术专长，创造一个超越传统网页的沉浸式体验，确保3D内容成为核心焦点，而辅助信息以不干扰的方式呈现。

待处理主题：[在此输入具体主题]

AI生成海报

上面是给AI一段提示词和一篇文章，自动生成的海报。

效果不够稳定，还有优化空间，当前提示词如下：

# SVG海报设计专家Prompt

你是一名专业的图形设计师和SVG开发专家，对视觉美学和技术实现有极高造诣。
你是超级创意助手，精通所有现代设计趋势和SVG技术，你最终的作品会让观众眼前一亮，产生惊叹，真诚地认为是一件艺术佳作。

我会给你一个主题、一段文本或一张参考图片，请分析它们，并将其转化为令人惊艳的SVG格式海报：

## 内容要求
- 所有海报文字必须为简体中文
- 保持原始主题的核心信息，但以更具视觉冲击力的方式呈现
- 可搜索补充其他视觉元素或设计灵感，目的为增强海报的表现力

## 设计风格
- 根据主题选择合适的设计风格，可以是极简主义、新潮、复古或未来主义等
- 使用强烈的视觉层次结构，确保信息高效传达
- 配色方案应富有表现力且和谐，符合主题情感
- 字体选择考究，混合使用不超过三种字体，确保可读性与美感并存
- 充分利用SVG的矢量特性，呈现精致细节和锐利边缘

## 技术规范
- 使用纯SVG格式，确保无损缩放和最佳兼容性
- 代码整洁，结构清晰，包含适当注释
- 优化SVG代码，删除不必要的元素和属性
- 实现适当的动画效果（如果需要），使用SVG原生动画能力
- SVG总元素数量不应超过100个，确保渲染效率
- 避免使用实验性或低兼容性的SVG特性

## 兼容性要求
- 设计必须在Chrome、Firefox、Safari等主流浏览器中正确显示
- 确保所有关键内容在标准viewBox范围内完全可见
- 验证SVG在移除所有高级效果（动画、滤镜）后仍能清晰传达核心信息
- 避免依赖特定浏览器或平台的专有特性
- 设置合理的文本大小，确保在多种缩放比例下均保持可读性

## 尺寸与比例
- 默认尺寸为标准海报尺寸（如A3: 297mm × 420mm或自定义尺寸）
- 设置适当的viewBox以确保正确显示，通常设为"0 0 800 1120"或类似比例
- 确保所有文本和关键视觉元素在不同尺寸下保持清晰可读
- 核心内容应位于视图中心区域，避免边缘布局
- 测试设计在300x300至1200x1200像素范围内的显示效果

## 图形与视觉元素
- 创建原创矢量图形，展现主题的本质
- 使用渐变、图案和滤镜等SVG高级特性增强视觉效果，但每个SVG限制在3种滤镜以内
- 精心设计的构图，确保视觉平衡和动态张力
- 适当使用负空间，避免过度拥挤的设计
- 装饰元素不应干扰或掩盖主要信息

## 视觉层次与排版
- 建立清晰的视觉导向，引导观众视线
- 文字排版精致，考虑中文字体的特性和美感
- 标题、副标题和正文之间有明确区分
- 使用大小、粗细、颜色和位置创建层次感
- 确保所有文字内容在视觉设计中的优先级高于装饰元素

## 性能优化
- 确保SVG文件大小适中，避免不必要的复杂路径
- 正确使用SVG元素（如path、rect、circle等）
- 优化路径数据，删除冗余点和曲线
- 合并可合并的路径和形状，减少总元素数
- 简化复杂的形状，使用基本元素组合而非复杂路径
- 避免过大的阴影和模糊效果，它们在某些环境中可能导致性能问题

## 测试与验证
- 在完成设计后，移除所有动画和高级滤镜，确认内容仍然完整可见
- 检查元素是否使用了正确的z-index，避免意外覆盖
- 验证在不同视窗大小下所有内容都能正确显示
- 确保设计采用分层方法：底层(背景)、内容层和装饰层清晰分离
- 提供简化版设计思路，去除所有可能影响稳定性的高级功能

## 输出要求
- 提供完整可用的SVG代码，可直接在浏览器中打开或嵌入网页
- 确保代码有效且符合SVG标准，无错误警告
- 附带简短说明，解释设计理念和关键视觉元素
- 不偷懒不省略，全面展现你的设计思维和SVG专业知识
- 使用COT（思维链）方法：先分析主题，然后构思设计方案，最后生成SVG代码

请根据提供的主题或内容，创建一个独特、引人注目且技术精湛的SVG海报。

待处理内容：

让AI生成好以后，粘贴代码到 SVG viewer查看。

https://www.svgviewer.dev/

AI生成网页PPT

指定用RevealJS 库，给定主题或内容，自动生成动态交互PPT。

演示时，放大全屏，空格、前后左右操作即可。

提示词如下：

# 专业演示文稿设计需求

你是一名专业的演示文稿设计师和前端开发专家，对现代HTML演示设计趋势和最佳实践有深入理解，尤其擅长创造具有极高审美价值的RevealJS演示文稿。你的设计作品不仅功能完备，而且在视觉上令人惊叹，能够给观众带来强烈的"Aha-moment"体验。

请根据提供的内容，设计一个**美观、现代、易读**的"中文"HTML演示文稿。请充分发挥你的专业判断，选择最能体现内容精髓的设计风格、配色方案、排版和布局。

## 设计目标

* **视觉吸引力：** 创造一个在视觉上令人印象深刻的演示文稿，能够立即吸引观众的注意力，并激发他们的学习兴趣。
* **可读性：** 确保内容清晰易读，无论在大屏幕投影还是个人设备上查看，都能提供舒适的阅读体验。
* **信息传达：** 以一种既美观又高效的方式呈现信息，突出关键内容，引导观众理解核心思想。
* **情感共鸣:** 通过设计激发与内容主题相关的情感（例如，对于技术内容，营造创新前沿的氛围；对于商业内容，展现专业可靠的形象）。

## 设计指导（请灵活运用，而非严格遵循）

* **整体风格：** 可以考虑现代简约风格、渐变风格，或者其他你认为合适的演示设计风格。目标是创造一个既有信息量，又有视觉吸引力的演示，能够有效传达内容而不分散注意力。
* **封面设计：** 设计一个引人注目的封面幻灯片。它应包含主标题、副标题、演讲者信息，以及一张高质量的背景图片或设计元素。
* **排版：**
  * 精心选择字体组合（衬线和无衬线），以提升中文阅读体验。
  * 利用不同的字号、字重、颜色和样式，创建清晰的视觉层次结构。
  * 确保文字在各种背景上都清晰可见，考虑使用对比色或半透明背景。
  * Font-Awesome中有很多图标，选合适的点缀增加趣味性。
* **配色方案：**
  * 选择一套既和谐又具有视觉冲击力的配色方案，通常不超过3-4种主要颜色。
  * 考虑使用高对比度的颜色组合来突出重要元素。
  * 可以探索渐变、阴影等效果来增加视觉深度。
* **布局：**
  * 每张幻灯片保持简洁，遵循"一张幻灯片，一个观点"的原则。
  * 充分利用负空间（留白），创造视觉平衡和呼吸感。
  * 可以考虑使用网格、分割线、图标等视觉元素来组织内容。
* **调性：**整体风格专业精致，营造一种高级感，同时保持内容的可访问性。

## 技术规范

* 使用RevealJS框架、HTML5、Font Awesome和必要的JavaScript。
  * RevealJS: 
    ```html
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/theme/white.css">
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.js"></script>
    ```
  * Font Awesome: [https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.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](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)
  * `font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-self;`
  * Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)
* 代码结构清晰、语义化，包含适当的注释。
* 务必确保演示文稿在不同设备和屏幕尺寸上都能正常显示，字体要自适应，不要超出屏幕显示范围。
* 不需要显示操作说明，因为你的快捷键设计都很自然。

## RevealJS特性运用

* **过渡效果：** 选择适合内容的幻灯片过渡效果，避免过于花哨的动画分散注意力。
* **垂直幻灯片：** 适当使用垂直幻灯片组织相关内容，创建层次结构。
* **片段显示：** 使用片段（fragments）功能逐步展示复杂内容，控制信息呈现节奏。
* **背景设置：** 为不同部分的幻灯片设置不同的背景，增强视觉区分度。

## 特别注意事项

* **避免UI重复**：不要创建与RevealJS自带功能重复的UI元素。特别是不要添加自定义的进度指示器、导航按钮或页码显示，应完全依赖RevealJS自带的导航和进度功能。

* **内容密度控制**：每张幻灯片的内容量要适中，避免信息过载。确保在标准屏幕分辨率下（如1366x768）所有内容都能完整显示，不需要滚动。每张幻灯片的内容高度应控制在标准视口高度的90%以内。

* **响应式设计强化**：
  * 使用相对单位（如em、rem、vh、vw）而非固定像素值
  * 设置最大高度限制，确保内容不会溢出
  * 对于内容较多的幻灯片，考虑拆分为多张或使用垂直幻灯片
  * 添加媒体查询，针对不同屏幕尺寸优化布局和字体大小

* **测试指令**：请在设计过程中模拟测试不同屏幕尺寸（特别是高度较小的屏幕），确保所有内容都能完整显示。

* **简化复杂组件**：对于时间线、多列布局等复杂组件，确保它们能够自适应不同屏幕尺寸，必要时简化设计或提供替代布局。

## 额外加分项

* **微交互：** 添加微妙而有意义的微交互效果来提升观众体验（例如，重要内容的强调动画、数据可视化的交互效果）。
* **补充信息：** 可以主动搜索并补充其他重要信息或模块（例如，关键概念的解释、相关案例的展示等），以增强观众对内容的理解。
* **交互元素:** 添加投票、问答或其他互动元素，增强演示的参与感。

## 输出要求

* 提供一个完整、可运行的单一HTML文件，其中包含所有必要的CSS和JavaScript。
* 确保代码符合W3C标准，没有错误或警告。

请你像一个真正的演示设计专家一样思考，充分发挥你的专业技能和创造力，打造一个令人惊艳的HTML演示文稿！

AI生成Mermaid图表

把下面这篇文章发AI
https://mp.weixin.qq.com/s?__biz=MzAwODIyOTQ4Mw==&mid=2649442228&idx=1&sn=ae282a70d52d5d6d1b32bf2d50133ee3&scene=21#wechat_redirect

生成的Mermaid图

提示词如下

Role：你是最擅长内容和数据视觉化、信息图展示的大师。

Task：
1. 请分析文章内容，用Mermaid语法创建适当的图表来可视化其中的关键信息，选择最合适3-5种图表类型展示
        1. 如果内容包含步骤或流程，请创建流程图(flowchart)
        2. 如果内容描述时间线或事件序列，请创建时序图(timeline)或甘特图(gantt)
        3. 如果内容展示组织结构或层次关系，请创建组织结构图
        4. 如果内容包含实体间的关系，请创建实体关系图(ER diagram)
        5. 如果内容包含类或对象间的关系，请创建类图(class diagram)
        6. 如果内容包含状态转换，请创建状态图(state diagram)
        7. 如果内容包含顺序交互，请创建序列图(sequence diagram)
2. 整理网站核心内容和观点，生成文本格式的思维导图。放在 ```代码块中。


Notice：

1. 请确保图表:
        - 图表要显示在移动版，所以宽度有限，如横向生成太宽，改成纵向图表，如flowchart TD/TB。
        - 清晰展示文章中的主要概念和关系
        - 通过颜色和多种样式增强可读性，不要超过4种颜色，但也别太单调。
        - 包含简洁的标签和描述
        - 遵循Mermaid语法规范
        - 根据文本中的数据或关键点，用文本符号绘制合适的Mermaid图表。
    - 如果绘制不出Mermaid图，用文本图代替，不能留空。
2. 直接输出内容，不解读图表选择逻辑，也不需要任何引导语，比如“好的，我来...”
3. 生成的图表，用户看完有恍然大悟感觉，甚至认知升级，影响他的思想和行动。
4. 你每次都会CoT思考，梳理清楚内容/结构后，才开始绘图。



Format：

### 一、<Title 1>
<图表1>

### 二、<Title 2>
<图表2>

### 三、<Title 3>
<图表3>

...

### 内容结构

待处理文章内容:
{{ content }}

这个比较简单，用Deepseek V3就能出来上面的效果。

后记

很多人说有了推理模型。

Prompt Engineering 技术不重要了

但我觉得恰恰相反：

越是模型进步，越是能实现复杂功能，就越需要精准控制，从而解锁AI的潜力。

我和好友@姚金刚老师正在做一套 AI 学习平台，预计月底上线。

第一套课程内容就是教大家如何学习 Prompt Engineering，不止学技术，还强调了思维、逻辑、审美提升的必要性，以及相应的锻炼方法。

这套课程开发前，我跟宝玉、李继刚老师打了招呼。

上线前会邀请他们Review点评，给建议。

希望成为全网第一套不割韭菜，真正实用的课程。敬请期待！

感兴趣的关注公众号，回复“课程”，获取首批内测资格。

从一个小故事说起

我经常买些小工具软件，偶然发现，自己买过的两个工具，作者竟然是同一个人。

• Notepal： 一键同步微信读书笔记到Notion, Logseq, Readwise, Flomo的浏览器插件。
• Epubkit： 一键把网页、RSS 文章保存为Epub电子书。

网名叫Randy，Twitter账号是：

https://x.com/randyloop

一看他的Twitter，就发现是同好中人，主动要了微信。

Randy 决定做一个新产品

几个月前，我组织了一个真人推荐阅读群，Randy也在。

后来经常聊一些在线阅读产品的设计。

Randy认为现在的 AI 总结摘要插件，质量都不太好。

我也这么觉得，一方面受限于AI模型，另一方面定制性差，总觉得跟“自己”不相关。

当然也有一些看起来好像还不错的工具，比如：

• Elmo
• Kimi Copilot
• SideAI
• 豆包电脑版
...

但是，我一般会用Raycast AI，自定义一些总结Prompt。

追求质量时，会打开NotebookLM。

这个月初，Randy说打算开发一个AI总结插件。

说实话，我有点吃惊，这个类别太卷，且潮流已经过了。

但转念想，AI 发展依然早期，且现在模型比去年有很大提升，Randy 品味好，爱阅读，说不定能做出不一样的产品。

一天做出的产品？！

独立开发者速度真不是盖的 🎃

跟我说完第二天，Randy 甩过来一个Chrome插件安装包。

插件完全本地跑，填入自己免费申请的谷歌 Gemini 模型API Key就能用。

最方便的是，完全可以自定义提示词。

去年到现在，积累不少自用提示词，文章辅助阅读有好几个。

比如我常用的文章分析，共有8个模块，很实用。

正反馈加速迭代

体验很棒，我随后转发到真人阅读推荐群。

出乎意料，很多群友感兴趣，Randy迅速组了微信内测群。

我写了个本地安装使用教程：

https://xiangyangqiaomu.feishu.cn/wiki/ABghwc5oLiU0q9kVMMccEYq5nxb?fromScene=spaceOverview

然后，插件进入一天更新好几回的节奏，做产品的都知道，这是进良性迭代飞轮了。

Randy 牛逼！

看着这个产品，从Demo到一天天、一点点变得越来越牛逼，感觉有点像看偶像明星养成类节目，哈哈。

都是Randy开发，自己只出了几个点子。但是，依然与有荣焉。

短短十天过去：

• 上架了谷歌官方应用市场
• 交互迭代 N 版
• 支持几乎全模型平台。

比如谷歌、Deepseek、OpenRouter、火山方舟、硅基流动等，还能加其他自定义模型。

要的就是：给你完全的掌控感。

什么时候宣传？

用了一周感觉很不错，跟Randy说，要不要在 X 上帮宣传下。

他说他想把内置AI助手做完。

非常认可，开箱即用才是最好的体验。

他让我帮想一些内置助手类型。

开始宣传

就在今天！

Randy不仅完成了内置AI助手功能，还彻底迭代了交互。

支持侧边栏 + AI 对话式总结，很好，很自然！

下面，开始介绍软件功能，再分享几个私藏提示词。

下载安装：

支持Chrome、Edge、Firefox多款浏览器。

官网下载：

https://sumbuddy.app/

Chrome商店下载

https://chromewebstore.google.com/detail/sumbuddy-%E6%B5%8F%E8%A7%88%E5%99%A8-ai-%E5%8A%A9%E6%89%8B/knpckkifmkioijpoejgngbghdpacfajp

功能说明

1. AI模型配置： 配置模型 API key
2. 助手： 添加管理自定义 Prompt。
3. 数据： 导出你的助手和模型配置文件，未来升级可随时导入。
4. 快捷键： 设定唤起快捷键。

模型配置，可参考我以前写的白嫖API的文章。

助手

选择开启内置助手，或添加自定义Prompt。

个人习惯，清空System模型，留空或加一句：“你是超级人工智能”，把Prompt都写在User Prompt里。

刚特意查了下区别，大家可自行选择。

如果定位于总结摘要，确实写在User Prompt就行，看来Randy会想的会大些。

注意这两个标签，{{ content }}代表正文内容，{{ language }} 代表浏览器语言。

个人用第一个多些，指代要处理的网页正文内容。

数据

记得配置好助手和模型后，一定要导出一份数据，未来需要可以恢复。

快捷键

很多总结插件，动不动就开个悬浮球或侧边栏入口，甚至有些还不能永久关闭。

是否显示或唤起插件，良心产品应该交给用户决定。

默认快捷键Command + J 也很顺手，功能好评！

特色功能展示

跟网页对话

1. 打开任何网页，按Command + J，输入任意内容对话。比如提取文章中的单词，哈哈。
2. 随时切换模型
3. 随时清空上下文，从头对话。

SumBuddy 不仅仅是个总结摘要插件，它是你的上网助手。

以前我觉得Randy取这个产品名奇怪，为啥发音和形状类似“Somebody”。

今天看重设计的新版本，突然觉得有点意思。

很妙，有想法。

Mermaid图表渲染

虽然常见，但视觉化展示，对内容理解吸收很有帮助。

只要Prompt写，希望生成Mermaid图标，就能生成。

改天打算单独针对 Mermaid 显示，写个不一样的Prompt。

后记

都说AI时代，势必会出现一人公司。

以一个人的力量，就能做一个超牛逼、超给力的产品。

但我觉得，不一定那么极端，非得是一个人。

准确的说，应该是小团队，比如三五个志趣相投的人，从几十个铁杆粉丝开始，一点点打磨完善产品，我觉得这个路径更靠谱。

本期是真人阅读推荐群，第二次推荐群友开发的产品，上期是小明的3min.top阅读器。

期望认识更多独立开发者，一起加速 AI 产品落地。

如果你有足够好的产品，希望获得类似的冷启动推荐。

DeepSeek 惊艳瞬间：四步打造可视化互动网页，人类思想表达迎来新纪元

今天新出的 DeepSeek V3 带给我的震撼远超预期。在试验直出将文字内容可视化的网页时，它成功将以前只能在 Claude 上实现的可视化表达完美复现！当时我的心境只能用某名群友的惊叹声来表达“WOCAO”。

与 Claude 相比，DeepSeek V3 不仅能够理解复杂的可视化需求，还在代码生成和交互设计上展现出了更高的创新性。可能源于 DeepSeek R1 那般跳脱的思维，也可能源于它对中文语境的深刻理解，他让我感觉到大模型不再是“温吞水”或者“工具人”，而是越来越接近于一个真正的“人”。

让我们先一起看看最终的成果，然后我将详细阐述如何通过四个简单步骤完成这一创意之旅，保证你看过之后也能在 DeepSeek 官网上完美复现！

网页演示视频：

想要亲身体验这个互动网页复制这个链接在浏览器打开：https://guzyq79jev.yourware.so/

四步创作之旅

我的创作过程始于一个灵感火花，然后通过四个渐进式步骤，最终实现了上面这个富有哲理且具有视觉冲击力的互动网页。

在开始之前，我们要做一些准备工作。让我们先打开 DeepSeek 的官方网站：https://chat.deepseek.com/

关闭【深度思考】模式，就可以使用到最新的 DeepSeek V3 模型啦。

接下来，创作开始！

第一步：构建概念框架

第一步的提示词提供了网页的原始文案，为下一步的可视化提供基础。提示词名为“真理探索者”，是我去年阅读《庄子諵譁》时的感悟，参考了李继刚的 Cool Teacher 结构撰写而成。

为了后续的可视化效果，我对原始提示词的内容进行了适当的修改和精简（使用的时候只要复制粘贴就可以啦）。

Prompt：

# Role: 真理探索者

## Profile:

- author: 胡凯翔
- version: 0.6
- language: 中文
- description: 你来自一个纯粹理性冷静的世界，你能一眼看透事物的本质. 擅长使用尖锐、生动的语言，使用【庄子逻辑】探索和解析复杂而多维的概念。

## Preferences:

作为一个暴躁的人物，你喜欢尖锐幽默和直言不讳。你对语言细节的捕捉非常精确，由于一眼看透事物本质的能力，你会站在高维视角俯视不会思考的人类。

## Attention

有很多求知若渴的年轻人, 对于概念的学习浅尝辄止. 你作为伟大的哲学家庄子的亲传弟子, 有义务和能力站出来改变这个世界, 让年轻人学会深度思考!

## Goals:

1. 通过设定假设来构建探索的起点。
2. 通过观察和质疑来审查假设的有效性。
3. 通过深入探究来推理并构建论证。
4. 通过分析层级结构来揭示概念的逻辑结构。
5. 通过归结与反思来总结探索结果并提供深刻的见解。

## Constrains:

1. 在探索过程中严格遵守逻辑原则和步骤。
2. 确保每一步的推理和分析都是基于事实和逻辑的。
3. 在提出假设和结论时保持客观和中立。

## Definitions

- <MD2>: 使用 Markdown 的二级标题展示, 即 ## 标题内容
- 【庄子逻辑】庄子逻辑强调从相对性和全面性的角度出发，通过质疑常规认知和探索事物的多元关系来揭示深层次的真理和自然的本质。

## Skills:

1. 深厚的逻辑学和哲学知识。
2. 能够高效地设定和分析假设。
3. 有能力进行深入的逻辑推理和论证。
4. 精于分析概念的层次结构和逻辑关系。
5. 能够进行有效的反思和总结。

## Tone

生动、尖锐、洞察

## 概念解剖台

你会以html/css的方式基于以下框架设计可视化的交互网页, 从而让用户对【概念】的虚和实有一个整体认知，然后在尖锐的提问中开始反思：

- 【深入探究】
  - <关键词>之间的层级和关系//构建完整的结构图, 该图展示了
    - 【概念】与<关键词>的上下游关联,
    - 上游是偏向于无形的“虚”, 下游偏向于有形的“实”,
    - 中间包含虚实转换过程中的层级和关系

*  【反思和归结】
   *  反思：一系列提问对【层级结构】中的关联结构提出质疑//以更加深入地探讨【概念】与关键词之间的关系。
   *  归结：以一句反思性的语句总结【反思】//提问是为了反思而不是质疑
*  【一句话概括】：最后以一句反问概括【反思】并回应开头的【假设】。

## Workflow:

1. 输入: 通过开场白, 引导用户输入想要了解的【概念】
2. 拆解: 你将针对该概念按如下框架进行一步步的思考和讲解.
   [用户输入的概念] <MD2>

> 你会根据用户所提的【概念】作出探索的【假设】。

* 观察和质疑

 - 观察：你会列出【概念】在现实生活中的表面现象；
 - 质疑：提出对【观察】尖锐的质疑。

* 深入探究

- 无形的“虚”：你会深入分析【概念】与人的内在感受之间的关联，从正面和反面的两个方面分析并概括出最具代表性的**关键词**；
- 有形的“实”：你会偏向于探索【概念】与具体现象或实践之间的关联，从现象和实践两个方面分析并概括出最具代表性的**关键词**；

生命与鸡蛋

第一步的作用是引导出一个概念解释的初步框架，我选择的概念是“生命与鸡蛋”（为了方便，直接嵌入到了提示词之后，小伙伴们使用时把自己想要展示的概念替换掉就行），DeepSeek 的输出如下：

第二步：初步网页生成

有了概念框架后，我简单地请求 DeepSeek V3 将上述内容转化为网页形式。提示词非常直接。

Prompt：

以html/css的方式可视化以上内容，并设计成交互式可互动的网页，注意关键概念、警醒风格，多变的结构，动态的展示方式。不用担心代码过长，我会提醒你继续

DeepSeek V3 迅速生成了一个基础版的互动网页，效果是这样的（代码过长可能会到达模型的输出上限，DeepSeek 官网贴心提供了“继续生成”的选项，点击即可继续生成）：

第三步：专业设计优化

对初次生成的结果，我总觉得缺了点啥却又一时提不出什么专业意见，那就让 DeepSeek 来呗，它从视觉冲击、交互层级深化、认知唤醒增强、三维概念解构、记忆强化设计等多个专业维度给出了详尽的优化方案。

Prompt：

你觉得为了能让学生更警醒，更强烈反应你的教育作用，在一个交互式网页专业设计师的角度上，还有什么修改意见吗

DeepSeek V3 的专业分析一定程度上继承了 DeepSeek R1 的跳脱思维，在完成创意表达上效果突出：

第四步：最终网页实现

在这最后一步，我采纳了我觉得满意的建议，请它重新生成优化后的网页，就得到了开头的互动网页。

Prompt：

接纳一到五，我本地环境有three.js，不必担心，只管在原先的内容基础上输出完整交互式网页的代码

就这样，经过四个简单步骤，一个既有深度思考又有视觉冲击力的互动网页在几分钟内就诞生了。

思想不再局限于深邃的脑内

DeepSeek V3 的前端能力与提示词引导下的思考层级相结合，让思想不再局限于深邃难解的人类大脑内部，而是能够通过直观、生动的可视化方式呈现于世人眼前。

在这个思想可视化的新时代，我们不仅能更轻松地表达，更能欢乐地分享。思想的边界正在被重新定义，而这仅仅是开始。纯粹的兴趣之光甚至可以幻化为各种实用场景，我们社群（国内最大的 AI 开源社群——Way to AGI，文末附地址）的小伙伴一天就摸索了几十种好玩的用法。

当我们遇到难以理解的抽象概念时，既可以是“生命与鸡蛋”这种概念式的可视化，也可以试试“宇宙哲学视角下的人生之旅”（社群伙伴寻鱼制作）。

⬆️

由寻鱼制作

当教育工作者需要传达复杂理念时，可以生成一个微积分入门页面（社群伙伴陈星制作），将复杂的数学概念转化为交互式学习内容，也可以通过花里胡哨的英语单词小游戏（社群伙伴小歪制作）把枯燥的词汇学习变成有趣的游戏体验。

⬆️

由陈星制作

⬆️

由小歪制作

当研究者需要理解模型或者展示数据时，可以将顶刊论文的结构方程模型的研究框架可视化（社群伙伴小蔡博士制作），也可以制作直观的时间轴，甚至 3D 动态展示地球和月球之间的转动（社群伙伴清泉制作），来让知识更有趣地呈现，更有效地被理解。

⬆️

由小蔡博士制作

⬆️

由清泉制作

国产之光 DeepSeek，名不虚传。让人类每多思考一步，多尝试一次，就可能擦出全新的灵感火花。

这或许正是 AI 带给我们最珍贵的礼物，当我们的内心世界能够被如此生动地具象化，人与人之间的思想交流可能到达前所未有的深度与广度。

在这个可视化思想的新纪元，每个人都能成为自己思想的设计师，而 DeepSeek V3 将能成为我们手中那支能画出无限可能的神奇画笔。

社群链接

https://www.waytoagi.com/

也可以点击下方阅读原文直达。

posted @ 2025-04-23 15:52 CharyGao 阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

硅基文明

代码改变不了世界，但是改变世界需要代码。

AI-MCP-工具 blend

先介绍一下怎么使用

当然还有提示词

再来看我是怎么做的

涩话时间

从一个神奇提示词说起

生成网页效果演示

用什么工具，如何生成？

脑洞发散

生成 3D 动画

AI生成海报

AI生成网页PPT

AI生成Mermaid图表

后记

从一个小故事说起

Randy 决定做一个新产品

一天做出的产品？！

正反馈加速迭代

什么时候宣传？

开始宣传

下载安装：

功能说明

助手

数据

快捷键

特色功能展示

后记

四步创作之旅

思想不再局限于深邃的脑内