AI探索指南

  1. - 使用HTML5、TailwindCSS 3.0+(通过CDN引入)和必要的JavaScript

    AI探索指南
    昨天发了可以将任何文档变成精美网页杂志的提示词 我本来就是随手发一下,没想到远远低估了这套提示词的价值。 看到大家的玩法才发现这玩意太有用了。 👇下面是升级版提示词和如何插入图片和视频: 这次主要的升级点就是如何插入视频和图片。 因为是在线引用所以我们需要获得在线视频和图片的链接才行,关于图片链接,如果你是在网页上的图片只需要右键在新标签页中打开图片就可以获得图片的在线链接了。 如果你是自己下载的图片,我们可以使用图床托管,我用的 sm. ms 只需要登录之后上传图片就行,他会给你图片的在线链接。…
    - 使用HTML5、TailwindCSS 3.0+(通过CDN引入)和必要的JavaScript
    - 实现完整的深色/浅色模式切换功能,默认跟随系统设置
    - 代码结构清晰,包含适当注释,便于理解和维护

    ## 响应式设计

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

    ## 媒体资源

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

    ## 图标与视觉元素

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

    ## 交互体验

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

    ## 性能优化

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

    ## 输出要求

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

    请根据上传文件的内容类型(文档、数据、图片等),创建最适合展示该内容的可视化网页。

    最后是分享:如果你用的 Claude 和 POE 都可以直接点击分享按钮获得分享的网页链接直接给别人看。

    如果你用的其他不支持分享代码渲染结果的客户端的话可以用我推荐的 YOURWARE (www.yourware. so)复制代码然后点击按钮就能获得一个可以分享的链接。
    FrgW6yXG2iL8WW9aD1E0YFpSo-okv3.png
    1.8 MB
    FlBUaC83Mfc3bhid8UoWPBRmH_YAv3.png
    1.2 MB

  2. 昨天发了可以将任何文档变成精美网页杂志的提示词

    昨天发了可以将任何文档变成精美网页杂志的提示词

    我本来就是随手发一下,没想到远远低估了这套提示词的价值。

    看到大家的玩法才发现这玩意太有用了。

    👇下面是升级版提示词和如何插入图片和视频:

    这次主要的升级点就是如何插入视频和图片。

    因为是在线引用所以我们需要获得在线视频和图片的链接才行,关于图片链接,如果你是在网页上的图片只需要右键在新标签页中打开图片就可以获得图片的在线链接了。

    如果你是自己下载的图片,我们可以使用图床托管,我用的 sm. ms 只需要登录之后上传图片就行,他会给你图片的在线链接。

    我们现在已经获得图片链接了,然后怎么办呢。

    我推荐将是所有的文字和图片链接都放在一个 Markdown 文件中,你甚至可以用图片插入的 Markdown 语法给图片进标记:![]() 方括号写图片的标记比如这张图片是东京,就可以写东京,这样模型就会把它插入描写东京的位置,圆括号里面放你刚才获得的图片链接就行。

    当然如果你不会 Markdown 语法用 Doc 也是一样的,直接用文字写上东京:链接就行。

    然后是视频如何嵌入。

    其实各大视频网站在分享的时候你都会看到一个按钮是嵌入,点这个按钮你就会获得一串代码,只需要把这串代码粘贴到你刚才要准备的文档里面就可以了。

    所以这时候我们就会获得一个包含视频、图片链接和文案内容的资料文档。

    最后一步就是提示词出场的时候了,复制下面提示词粘贴到 Claude 、POE、Monica 等可以使用 Claude 3.7 的软件中,然后把文档也拖进去,点击回车,结束了,你获得了一个精美的展示类网页、简历、攻略......

    记得把下面提示词中我的名字和推特链接换成你的:

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

    ## 内容要求

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

    ## 设计风格

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

    ## 技术规范

  3. 2 个目前已经自负盈亏的的 AI 项目招人

    2 个目前已经自负盈亏的的 AI 项目招人

    招产品经理、前端、后端

    什么项目
    一个是 AI 海外达人营销 saas 系统,目前垂直赛道第一
    一个是月收入几十万的的严肃恋爱dating app 的 AI 方向改造

    想找什么人
    产品经理:负责 AI dating app 的改造策略执行和思考,不做傻傻的 AI 辅助聊天,让 AI 在脱单这件事情上做他能做的

    前端、后端:需要你喜欢写代码,喜欢做产品,喜欢用 AI 提效,目前的 2 个 AI 项目都重度依赖数据的筛选和推荐

    有兴趣的可以加我微信:630443747

    对 AI 的观点
    今天的 AI 笨笨的,但是好的 AI 手艺人可以在细分任务上,让 AI 产生实际价值

  4. Ludo AI - 推荐!快速帮助游戏开发者进行创造过程

    Ludo AI - 推荐!快速帮助游戏开发者进行创造过程
    Ludo AI 推荐!快速帮助游戏开发者进行创造过程

    链接:
    https://ludo.ai/

    #Ai工具推荐 The #1 AI sprite generator + every game asset you need | Ludo.ai

  5. 没人觉得现在AI,人形机器人有点像国内学生学英语的状况吗?学习然后考试,拿考试卷子展示自己能力

    没人觉得现在AI,人形机器人有点像国内学生学英语的状况吗?学习然后考试,拿考试卷子展示自己能力。这对吗?
    最好的学英语方法应该是去国外,那么同样最好的训练方法也应该是到真实场景中去输入去输出。

  6. 新玩法 get,一套提示词将任何文档变成可视化网页

    新玩法 get,一套提示词将任何文档变成可视化网页

    这不比 PPT 和 PDF 更方便传播和理解?

    比如这个全是文字的 Stripe 年度报告 PDF 文件

    - 支持响应式设计、夜间模式切换
    - 一次成功无需调整

    以后随着模型能力增强估计内容展示方式也需要变化

    灵感来自 padphone 老师,你可以在这里预览这个网页:https://lqb9jj5ryz.yourware.so/

    Invalid media: video

  7. - 图片使用现代格式(WebP)并进行适当压缩

    AI探索指南
    很多朋友问如何将下面的这种全是字的文档,变成上面这种美观、直观的网页。 👇分享一下提示词和逻辑: 其实大部分的技巧和提示词来自我前几天写的这个教程:https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw 我又加了几条要求,确保你可以将任何文件扔进去,不需要一个字的修改就能生成美观的网页: 因为我们很多的文件都是英文的,所以我加了让他变成中文的要求 另外让他参考 Linear App 的设计语言,这个灵感来自 Padphone 老师 还有就是可以在页面加上…
    - 图片使用现代格式(WebP)并进行适当压缩
    - 实现懒加载技术用于长页面内容

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

    请根据上传文件的内容类型(文档、数据、图片等),创建最适合展示该内容的可视化网页。

  8. 很多朋友问如何将下面的这种全是字的文档,变成上面这种美观、直观的网页

    很多朋友问如何将下面的这种全是字的文档,变成上面这种美观、直观的网页。

    👇分享一下提示词和逻辑:

    其实大部分的技巧和提示词来自我前几天写的这个教程:https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw

    我又加了几条要求,确保你可以将任何文件扔进去,不需要一个字的修改就能生成美观的网页:

    因为我们很多的文件都是英文的,所以我加了让他变成中文的要求
    另外让他参考 Linear App 的设计语言,这个灵感来自 Padphone 老师
    还有就是可以在页面加上你的社交媒体链接和你的名字,方便网页传播之后大家可以找到作者
    去掉了 Unsplash 的图片要求,因为免费的 API 不太好查找对应的主题图片

    完整的提示词:

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

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

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

    ## 技术规范
    - 使用HTML5、TailwindCSS 3.0+(通过CDN引入)和必要的JavaScript
    - 实现完整的深色/浅色模式切换功能,默认跟随系统设置
    - 代码结构清晰,包含适当注释,便于理解和维护

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

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

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

    ## 性能优化
    - 确保页面加载速度快,避免不必要的大型资源

  9. MarsX - 使用无代码和零编码技能开始构建微应用程序

    MarsX - 使用无代码和零编码技能开始构建微应用程序
    MarsX 使用无代码和零编码技能开始构建微应用程序

    链接:
    https://www.marsx.dev/

    #Ai工具推荐 MarsX is a dev tool that unites AI, NoCode, Code and MicroApps