分享博客还写代码？AI静态 HTML 一键起飞！

思路

1. 使用 github 作为网站中介
   本地使用 git 维护静态网站，如 /ai/test.html
2. 使用 vercel 作为网站
   一年多了，都能免费使用。也不知道它咋赚钱。
   创建 vercel网站，绑定到github地址。
   只要提交git，就会自动化部署
3. 拿出一个库存域名，绑定到 vecel上
   vercel上会引导。并自动生成了https证书

万事俱备，只差写html了。

你已经是成熟ai了，请自动生成html

我最近喜欢的做法，是使用 gemini pro 2.5

https://aistudio.google.com/prompts/new_chat

因为他摘要能力极强，尤其是对他自己的youtube、公开的电子书、pdf

我对感兴趣的出版物pdf、研究报告pdf、演讲播客 youtube url，会直接让gemini生成
prompt如下：prompt中可以加上任何你个性化的要求。后续可以根据自己的笔记生成为你的喜好特别优化的阅读摘要。

请使用中文，生成html5，以html5动态交互的方式，生成pdf(播客、音频、或一大段复制的文本）的摘要，要求提炼全部核心要点，高亮事实和观点(做成有趣的闪卡形式、书籍层次目录的形式、也可以提供样式模板）。

经过1-3分钟。他就会生成一个html文件。点击下载就是很友好的交互式网页。
这种阅读方式，极大的降低了认知负荷，甚至超过了我喜爱的 roam research 大纲方式。

样例：
短视频刷到 zark和satya的对谈ai
youtube上找到原视频 https://www.youtube.com/watch?v=hbFzq3wsma4

输入给gemini，生成了 code.html

直接分享到我的网站，使用 sharehtml.app (后面有过程）
code.html文件右键，快捷分享html，并改名为 llamacon.html

他会复制到git目录，并提交到github，并自动分发到vercel网站上。

将链接分享给朋友 https://www.xiaobu.net/ai/llamacon.html

这样可以3分钟读完一本英文原版书:https://www.xiaobu.net/ai/anxiousgen.html
1分钟读完调研报告: https://www.xiaobu.net/ai/camping.html
半分钟读完公众号文章: https://www.xiaobu.net/ai/atlas.html

以下是应用制作方法：

---

先写需求，让AI自动编程

1. 口述需求

快捷分享Html 应用需求描述

技术要求
- 使用python语言，macos下的 gui 应用，源文件名为 sharehtml.py
- 应用名字叫: sharehtml.app 应用中文：快捷分享Html


功能需求
- 本地化文件 .html .htm 这样的文件，当在Finder中右键打开方式中，出现sharehtml.app，打开后，当做输入参数进入主界面。
- 主界面有几个输入框
    - 1. 待分享文件名输入框，步骤一选择的html，后面有选择按钮，可以弹出文件框，选择 .html .htm文件。例如/path/xxx.html
    - 2. 本地git地址输入框，默认为 /home/bruce/git/xiaobu/ai, 修改后，下次打开使用上次修改的地址
    - 3. 分享后文件名输入框，默认为 待分享文件名xxx.html，xxx部分默认选中，可修改
    - 4. 执行分享脚本文件，默认为 /home/bruce/git/xiaobu/push.sh，下次打开使用上次修改的地址
    - 5. 网站地址输入框，默认为 https://www.xiaobu.net/ai/ ，下次打开使用上次修改的地址
    - 6. 复制分享链接按钮，将网站地址+分享后文件名拼接为 url字符串，复制入粘贴板
    - 5. 分享按钮，点击后，将待分享文件复制到本地git地址，改名为分享后文件名。并执行分享脚本文件。执行和输出的结果，都显示在日志框中。如果执行成功，则执行复制分享链接按钮，将url复制到粘贴板
    - 6. 日志框限制脚本运行情况。

人类语言总是那么不严谨和啰嗦，那么

让AI重新整理需求

prompt: 优化以下我的需求表述，让它更清晰

快捷分享 HTML 应用需求说明

一、基本信息
    •    应用名称：sharehtml.app
    •    应用中文名：快捷分享 HTML
    •    开发语言：Python
    •    运行平台：macOS（GUI 应用）
    •    源文件名：sharehtml.py

⸻

二、功能需求

1. 文件关联与启动方式
    •    支持在 Finder 中右键以“打开方式”选择 sharehtml.app 打开 .html 或 .htm 文件；
    •    被打开的文件路径作为参数传入应用主界面，用作默认“待分享文件”。

2. 主界面功能

主界面包含以下输入项和操作按钮：
    1.    待分享文件输入框
      •    默认值：启动时传入的 .html/.htm 文件路径；
      •    提供“选择文件”按钮，可通过文件对话框重新选择。
    2.    本地 Git 仓库路径
      •    默认值：/home/bruce/git/xiaobu/ai；
      •    可编辑，修改后记忆上次设置。
    3.    分享后文件名
      •    默认值：保留原文件名，如 xxx.html；
      •    xxx 部分默认选中，便于修改。
    4.    分享脚本路径
      •    默认值：/home/bruce/git/xiaobu/push.sh；
      •    可编辑，修改后记忆上次设置。
    5.    网站地址
      •    默认值：https://www.xiaobu.net/ai/；
      •    可编辑，修改后记忆上次设置。
    6.    复制分享链接按钮
      •    功能：将“网站地址 + 分享后文件名”拼接为完整 URL，并复制到剪贴板。
    7.    分享按钮
      •    操作流程：
      •    将“待分享文件”复制至本地 Git 路径；
      •    重命名为“分享后文件名”；
      •    执行指定分享脚本；
      •    输出结果显示在日志框；
      •    若执行成功，自动执行“复制分享链接”功能。
    8.    日志框
      •    显示分享脚本执行的过程和结果，便于排查问题。

直接复制到cursor 中让他自己编程。可以刷一下小红书

选择 Agent模式，claude-3.7-sonnet
prompt：请根据 @sharehtmlreq.md 需求说明书，生成代码到当前目录下

开始自动编程，过了一会生成应用

所有按钮工作正常。

一次成功，太牛B了

将sharehtml.py 安装为mac下的应用

cursor贴心的生成了readme.md和setup.py

# 快捷分享HTML应用

一个用于快速分享HTML文件的macOS桌面应用，能够将HTML文件复制到Git仓库并推送到服务器，然后生成可分享的链接。

## 功能特点

- 支持在Finder中右键选择以"打开方式"打开HTML文件
- 允许用户自定义本地Git仓库路径
- 允许用户自定义分享脚本路径
- 允许用户自定义网站地址
- 提供日志查看功能，方便排查问题
- 自动复制分享链接到剪贴板

## 依赖项

- Python 3.6+
- PyQt5

## 安装依赖

bash
pip3 install -r requirements.txt


## 使用方法

1. 直接运行脚本：

bash
python3 sharehtml.py


2. 或者通过命令行参数指定HTML文件：

bash
python3 sharehtml.py /path/to/your/file.html


3. 也可以将应用打包为macOS应用程序，然后在Finder中右键HTML文件，选择"打开方式"，选择sharehtml.app进行打开。

## 打包为应用程序

可以使用py2app将脚本打包为macOS应用程序：

1. 安装py2app：

bash
pip3 install py2app

setup.py文件：略

执行 python setup.py 即可
出现了一些错误，不要紧，错误信息让cursor自己处理
prompt：让它跑通

不久后，生成好了可运行的 快捷分享HTML.app
运行后报错，但cursor会继续修正直到运行成功。

应用拖到macos的应用里即可

再使用雕花工艺，用chatgpt4o生成一个应用图标

prompt：
请生成一个图标png，大小1024x1024。要求是macos最新的图标风格。里面是一个英国灰燧石的图案，有锋利的边缘。