web-to-app skill

by anbeime·anbeime/skill·7.3k stars

网页开发工程师当需要将任意网页URL封装为独立桌面客户端时，使用此技能可一键生成体积仅约5MB的跨平台（Win/Mac/Linux）原生应用安装包。支持自定义图标与高级配置，助你快速交付轻量级桌面端产品。

A100/100content scan

Is the web-to-app skill safe?

Clean: nothing in its files matched our rules. We read 4 files in the folder on 2026-09-28.

No findings.

Install the web-to-app skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.

git clone --depth 1 https://github.com/anbeime/skill.git /tmp/skill
mkdir -p ~/.claude/skills
cp -r /tmp/skill/skills/web-to-app/web-to-app ~/.claude/skills/web-to-app

available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Web to App

任务目标

本 Skill 用于：将任意网页 URL 打包成原生桌面应用
能力包含：

自动检测并安装 pake-cli 工具
支持自定义应用名称、图标、窗口尺寸等配置
生成 macOS/Windows/Linux 平台的应用安装包
支持高级配置（隐藏标题栏、多实例、代理等）

触发条件：用户提出"将网页打包成应用"、"制作桌面应用"等需求

前置准备

环境要求

Node.js：版本 ≥ 18.0.0（推荐 22.0+）
Rust：≥ 1.85.0（首次使用会自动安装）
系统工具：
macOS/Linux：需要 curl、wget、file、tar
Windows：自动处理依赖

安装依赖

首次使用前，需要安装 pake-cli 工具：

npm install -g pake-cli
# 或使用 pnpm（推荐）
pnpm install -g pake-cli

操作步骤

标准流程

收集需求

确认网页 URL（必需）
应用名称（建议英文）
目标平台（自动检测当前系统）
自定义需求（图标、窗口大小等）

环境准备

调用 scripts/install_pake.py 检查并安装 pake-cli
验证 Node.js 和 Rust 环境

执行打包

根据用户需求生成配置参数
调用 scripts/build_app.py 执行打包
监控执行进度和错误信息

输出验证

确认生成的应用安装包
提供安装和使用说明

可选分支

当需要自定义图标：
提供图标文件路径（支持本地或远程 URL）
自动转换为平台特定格式（.icns/.ico/.png）

当需要高级配置：
参考 references/parameter-guide.md
添加对应参数（如 --hide-title-bar、--multi-instance）

当打包失败：
检查网络连接（需要下载依赖）
验证 Node.js 和 Rust 版本
使用 --debug 参数查看详细日志

资源索引

必要脚本

scripts/installpake.py**
用途：检查并安装 pake-cli 工具
参数：无
返回：安装状态和版本信息

scripts/buildapp.py**
用途：执行网页打包命令
参数：
url：网页 URL（必需）
name：应用名称
icon：图标路径
width：窗口宽度
height：窗口高度
options：其他可选参数（字典格式）
返回：生成的应用文件路径

领域参考

references/parameter-guide.md
何时读取：需要配置高级选项时
内容：完整的参数说明和使用示例

注意事项

⏰ 首次打包较慢：需要下载和编译 Rust 依赖，后续打包会快很多
📦 输出位置：默认在当前工作目录（./）生成应用安装包
🖥️ 平台适配：
macOS：生成 .dmg 安装包（设置 PAKECREATEAPP=1 可生成 .app）
Windows：生成 .msi 安装包
Linux：生成 .deb 或 .AppImage 包
🚀 调试模式：遇到问题时添加 --debug 参数查看详细日志
🔐 证书问题：如果是内网或自签名证书，使用 --ignore-certificate-errors

使用示例

示例 1：基础打包

功能说明：将 GitHub 网页打包成应用执行方式：脚本调用

from scripts.build_app import build_app

result = build_app(
    url="https://github.com",
    name="GitHub"
)
# 输出：GitHub.dmg / GitHub_x64.msi / GitHub_x86_64.deb

示例 2：自定义配置

功能说明：自定义窗口大小和图标执行方式：脚本调用

result = build_app(
    url="https://chat.openai.com",
    name="ChatGPT",
    icon="https://example.com/icon.png",
    width=1400,
    height=900,
    options={
        "hide-title-bar": True,
        "always-on-top": False
    }
)

示例 3：多实例应用

功能说明：允许同时打开多个应用窗口执行方式：脚本调用

result = build_app(
    url="https://example.com",
    name="MyApp",
    options={
        "multi-instance": True,
        "activation-shortcut": "CmdOrControl+Shift+P"
    }
)

快捷键说明

生成的应用内置以下快捷键：

More skills from anbeime/skill

APDF Processing Pro综合办公文员与软件开发工程师当需要批量处理PDF表单、提取表格或进行OCR识别时，使用内置脚本一键完成自动化提取与数据校验，彻底告别繁琐的手动录入，让复杂文档工作流高效、稳健落地。
Aagent-team产品经理与项目管理专家在应对复杂项目时，使用此技能可动态组建包含“执行、指挥、评审”的专属AI团队。实时查看多智能体辩论与决策全过程，共享统一上下文记忆，一键完成从会议决策到系统构建的全流程高效协同！
Aagentkit-multimedia-shopping电商运营与内容创作者在需要制作带货短视频时，用此技能一键生成9:16竖屏数字人成片。自动编排AI绘画、语音合成与视频生成，快速产出“小省导购员”专属形象与专业配音，让多模态视频制作省时省力。
Aantinet-doc-parse软件开发工程师与数据科学家在构建RAG系统时，当需处理PDF/Word/Excel等多格式复杂文档，用此技能可自动触发三级解析降级，一键输出高置信度结构化Markdown与元数据，免去繁琐清洗，直接夯实企业知识库数据底座！
Aantinet-four-color-cards财务和投资分析师、律师助理与法律助手在撰写金融研报或分析法律文档时，必用此技能！基于解析文档一键生成事实蓝卡、解释绿卡、风险黄卡与行动红卡。自动完成深度剖析与风险排查，产出100%可溯源的结构化四色报告，让复杂分析高效且严谨。
Aantinet-provenance软件开发工程师与信息安全分析师在构建多智能体系统时，当需全链路可观测与安全审计，请用此技能。它自动收集操作日志，生成可追溯证据链与向量索引，开箱即用实现系统审计与精准回放，让Agent运行安全透明。
Aantinet-security-scan信息安全分析师与软件开发工程师在搭建文档处理流水线时，当需要拦截违规文件或外部URL，请挂载此技能作为强制前置安检，自动输出 pass/reject 判定与详细合规扫描报告，一键守住零信任安全底线。
AarchifyCreate polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
Aarticle-illustrator内容创作者与自媒体创作者在撰写长文缺乏视觉辅助时，当需要给文章配图或生成插图请使用。自动分析文章结构，精准识别位置并生成插画插入段落，将抽象概念具象化。一键完成智能图文排版，省去手动找图时间，大幅提升阅读体验！
Aarticle-illustrator内容创作者和自媒体创作者在撰写长文时，当需要“给文章配图”或“添加插图”时使用。自动分析文章结构，精准识别需要视觉辅助的位置，生成并插入契合语境的插画，将抽象概念具象化，一键完成高质量图文排版，大幅提升阅读体验。
Aatutun-xhs-cover阿囤囤风格小红书封面提示词生成。用于AI工具、效率方法、产品测评、教程部署、个人经验、播客推荐、职场认知类内容的爆款竖版封面设计。特点是真人出镜、超大柔和浅黄（#FDFFA7）/白色中文标题、粗黑描边、人物抠图描边、绿色勾选清单、emoji贴纸、箭头标注、高对比高密度构图。关键词：小红书封面、爆款封面、阿囤囤风格、AI教程封面、产品测评封面、封面提示词。
Abaoyu-format-markdown技术写作员与内容创作者在处理纯文本或 Markdown 稿件时，若需优化文章结构、添加 frontmatter 或自动修正中英文排版间距，使用此技能可一键生成专业美观的 {filename}-formatted.md 文件，让文档排版更完美。

All agent skills → · MCP servers