id: 0991ab0c5ce44b9697877caf7167e9bd
parent_id: 
item_type: 1
item_id: 59837376905242c5936db1bad98e3986
item_updated_time: 1764365023199
title_diff: "[{\"diffs\":[[1,\"文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":36}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"38258\\\"></a>\\\r\\\n<h1>文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=MzI3Mjg1MDU5Mg==&amp;mid=2247483746&amp;idx=1&amp;sn=49bf20b24e842b0d6ae5e5fd334d06dc&amp;chksm=ea702fa026b1a422c1ee6e72fd0e8d48b8cc4f8901b72969013f15221e9c8f2032f92df3f0cc&amp;mpshare=1&amp;scene=1&amp;srcid=03162rrp0gFYmI9pTXdOmBfd&amp;sharer_shareinfo=9d893d5b74534a667c442a6cc9d30431&amp;sharer_shareinfo_first=9d893d5b74534a667c442a6cc9d30431#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=MzI3Mjg1MDU5Mg==&amp;mid=2247483...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span><span style=\\\"\\\">张大猫zzz</span></span><span><a style=\\\"\\\"> CatLord的AIGC探索 </a></span><span><em></em></span></div><div style=\\\"\\\"><div><span><br/></span></div><div style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); white-space: normal; background-color: rgb(255, 255, 255); overflow-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(26, 173, 25); font-size: 24px; word-wrap: break-word;\\\"><span>01</span></span></p><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; letter-spacing: 0px; color: rgb(26, 173, 25); font-size: 20px; word-wrap: break-word;\\\"><span>—</span></span></p></div></div></div></div><p style=\\\"\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); text-align: center; box-sizing: border-box; overflow-wrap: break-word;\\\"><span style=\\\"max-width: 100%; font-size: 20px; box-sizing: border-box; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><span>前言</span></span></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>最近看到了数字生命卡兹克的文章《</span><span style=\\\"color: rgba(0, 0, 0, 0.9);\\\"><span>用AI把PDF一键变成能玩的可视化网页，这不比PPT酷多了</span></span><span>》，他介绍了一种方法，即通过大模型+提示词，把非常难以阅读的文字报告，一键转成更舒服用户体验更好的可视化网页。</span></p><p style=\\\"min-height: 24px;\\\"><span>具体可以看他的原文：<a href=\\\"https://mp.weixin.qq.com/s?__biz=MzIyMzA5NjEyMA==&amp;mid=2647669480&amp;idx=1&amp;sn=5cbd5759e5f123f895c110b4d3b16fa0&amp;scene=21#wechat_redirect\\\" style=\\\"\\\" target=\\\"_blank\\\">用AI把PDF一键变成能玩的可视化网页，这不比PPT酷多了</a></span><a href=\\\"https://mp.weixin.qq.com/s?__biz=MzIyMzA5NjEyMA==&amp;mid=2647669480&amp;idx=1&amp;sn=5cbd5759e5f123f895c110b4d3b16fa0&amp;scene=21#wechat_redirect\\\" target=\\\"_blank\\\"><span><br/></span></a></p><p style=\\\"\\\"><span><br/></span></p><div style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); white-space: normal; background-color: rgb(255, 255, 255); overflow-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(26, 173, 25); font-size: 24px; word-wrap: break-word;\\\"><span>02</span></span></p><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; letter-spacing: 0px; color: rgb(26, 173, 25); font-size: 20px; word-wrap: break-word;\\\"><span>—</span></span></p></div></div></div></div><p style=\\\"\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); text-align: center; box-sizing: border-box; overflow-wrap: break-word;\\\"><span style=\\\"max-width: 100%; font-size: 20px; box-sizing: border-box; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><span>操作流程</span></span></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>按照他的教程，我试了试效果，以下是更具体的操作流程：</span></p><div style=\\\"text-align: center;\\\"><img src=\\\"文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧_files/640.png\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><p style=\\\"min-height: 24px;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>第一步，使用Trae国际版，选择Claude-3.7模型，上传一张ppt的截图；</span></p><p style=\\\"min-height: 24px;\\\"><span>第二步，输入以下提示词：</span></p><ul style=\\\"\\\"><li><div><div><div style=\\\"--en-codeblock: true; --en-meta: {&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true}; box-sizing: border-box; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;\\\"><pre><span>我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页作品集：</span><br/><span>内容要求</span><br/><span>保持原文件的核心信息，但以更易读、可视化的方式呈现</span><br/><span>在页面底部添加作者信息区域，包含：</span><br/><span>作者姓名: [CatLord]</span><br/><span>版权信息和年份</span><br/><span>设计风格</span><br/><span>整体风格参考Linear App的简约现代设计</span><br/><span>使用清晰的视觉层次结构，突出重要内容</span><br/><span>配色方案应专业、和谐，适合长时间阅读</span><br/><span>技术规范</span><br/><span>使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript</span><br/><span>实现完整的深色/浅色模式切换功能，默认跟随系统设置</span><br/><span>代码结构清晰，包含适当注释，便于理解和维护</span><br/><span>响应式设计</span><br/><span>页面必须在所有设备上（手机、平板、桌面）完美展示</span><br/><span>针对不同屏幕尺寸优化布局和字体大小</span><br/><span>确保移动端有良好的触控体验</span><br/><span>媒体资源</span><br/><span>使用文档中的Markdown图片链接（如果有的话）</span><br/><span>使用文档中的视频嵌入代码（如果有的话）</span><br/><span>图标与视觉元素</span><br/><span>使用专业图标库如Font Awesome或Material Icons（通过CDN引入）</span><br/><span>根据内容主题选择合适的插图或图表展示数据</span><br/><span>避免使用emoji作为主要图标</span><br/><span>交互体验</span><br/><span>添加适当的微交互效果提升用户体验：</span><br/><span>按钮悬停时有轻微放大和颜色变化    </span><br/><span>卡片元素悬停时有精致的阴影和边框效果    </span><br/><span>页面滚动时有平滑过渡效果    </span><br/><span>内容区块加载时有优雅的淡入动画</span><br/><span>性能优化</span><br/><span>确保页面加载速度快，避免不必要的大型资源</span><br/><span>实现懒加载技术用于长页面内容</span><br/><span>输出要求</span><br/><span>提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript</span><br/><span>确保代码符合W3C标准，无错误警告</span><br/><span>页面在不同浏览器中保持一致的外观和功能</span><br/><span>请根据上传文件的内容类型（文档、数据、图片等），创建最适合展示该内容的可视化网页。</span><br/></pre></div></div></div><div style=\\\"\\\"><span><br/></span><span><br/></span></div></li><ul style=\\\"\\\"><li><div><span><br/></span></div></li><li><div><span><br/></span></div></li><li><div><span><br/></span></div></li><li><div><span><br/></span></div></li><li><div><span><br/></span></div></li></ul></ul><p style=\\\"min-height: 24px;\\\"><span>注意，提示词部分内容要求-作者名称可以更换成自己的名字</span></p><p style=\\\"min-height: 24px;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>第三步，点击发送，此时会自动生成代码。如果提示输出过长，请输入“继续”后获得更多结果，按照要求即可继续生成代码；</span></p><div style=\\\"text-align: center;\\\"><img src=\\\"文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧_files/640 [1].png\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><p style=\\\"min-height: 24px;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>第四步，把生成的代码拷贝到本地生成html文件，即可在本地预览效果。如果需要把生成的效果发给别人看，可以把生成的代码直接复制到这个网站里，https://www.yourware.so/，然后点deploy code，稍等一会，就有预览了。</span></p><div style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); white-space: normal; background-color: rgb(255, 255, 255); overflow-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; word-wrap: break-word;\\\"><strong style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; color: rgb(136, 136, 136); font-size: 20px; box-sizing: border-box; word-wrap: break-word;\\\"><span><br/></span></span></strong></p></div></div></div></div><p style=\\\"\\\"><span><br/></span></p><div style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); white-space: normal; background-color: rgb(255, 255, 255); overflow-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(26, 173, 25); font-size: 24px; word-wrap: break-word;\\\"><span>03</span></span></p><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; text-align: center; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; letter-spacing: 0px; color: rgb(26, 173, 25); font-size: 20px; word-wrap: break-word;\\\"><span>—</span></span></p></div></div></div></div><p style=\\\"\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); text-align: center; box-sizing: border-box; overflow-wrap: break-word;\\\"><span style=\\\"max-width: 100%; font-size: 20px; box-sizing: border-box; word-wrap: break-word;\\\"><span style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><span>效果展示</span></span></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span><br/></span></p><div style=\\\"text-align: center;\\\"><img src=\\\"文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧_files/640 [2].png\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div><span>上面这张图片是我上传的PPT截图，来看看</span><span>Claude-3.7生成的具体效果吧，地址如下：</span></div><p style=\\\"min-height: 24px;\\\"><span>https://ngg52f9xmv.yourware.so/</span></p><div style=\\\"text-align: center;\\\"><img src=\\\"文字太枯燥读不进去？试试用Claude-3.7把文档内容变成可视化网页吧_files/640.jpg\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><p style=\\\"min-height: 24px;\\\"><span><br/></span></p><p style=\\\"min-height: 24px;\\\"><span>单看网页效果确实已经很棒了，目前来看对于一些需要向上汇报的场景特别适用，甚至</span><span style=\\\"color: rgb(64, 64, 64); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline;\\\"><span>从「文字阅读者」进化为「数字造物者」，</span></span><span>你也上手试试吧！</span></p><p style=\\\"max-width: 100%; min-height: 1em; color: rgb(62,62,62); white-space: normal; background-color: rgb(255,255,255); box-sizing: border-box; overflow-wrap: break-word;\\\"><span><br/></span></p><p style=\\\"\\\"><span><br/></span></p><div style=\\\"max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); white-space: normal; background-color: rgb(255, 255, 255); overflow-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><div style=\\\"max-width: 100%; box-sizing: border-box; word-wrap: break-word;\\\"><p style=\\\"max-width: 100%; box-sizing: border-box; min-height: 1em; word-wrap: break-word;\\\"><span><br/></span></p></div></div></div></div><div><span><br/></span></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":14406}]"
metadata_diff: {"new":{"id":"59837376905242c5936db1bad98e3986","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348857426,"user_updated_time":1764345622459,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":1764365023199},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:24:52.781Z
created_time: 2025-11-28T21:24:52.781Z
type_: 13