HTML Design

简体中文 | English

用一句自然语言描述需求，创建可以独立运行的轻量网页应用。

HTML Design 是一个面向 AI 编程助手的技能包。它默认把应用做成一个 index.html：不用安装前端框架，不用运行构建命令，也不依赖某个发布平台。 完成后可以直接在浏览器打开、放进 U 盘、发给别人，或者部署到任意静态网站服务。

如果应用需要 AI，也可以连接你自己电脑上的模型或其他 OpenAI-compatible 接口；普通计算器、小游戏等应用完全不需要模型。

为什么默认是单个 HTML

• 双击即可运行，迁移和备份都很简单
• 不依赖 React、Tailwind、npm 或构建服务器
• HTML、样式和逻辑都能直接查看和修改
• 普通静态托管、局域网和离线环境都能使用
• 本地模型配置与应用文件分离，不把凭证交给网页

当图片、音视频、WASM 或复杂逻辑过大时，也可以拆成多个本地文件；项目仍保持纯静态和可移植。

能做什么

• 小工具：计算器、转换器、生成器、表单和文件处理工具
• 数据看板：指标、趋势、筛选、对比和异常列表
• 引导流程：配置向导、诊断问答和分步骤任务
• 知识应用：指南、FAQ、笔记和可搜索资料
• 网页小游戏：适配鼠标、键盘和触屏的轻量游戏
• HTML 演示：全屏播放、键盘翻页和打印输出
• AI 工具：文本生成、图片理解、图片生成和代码辅助

所有类型都优先采用原生 HTML、CSS 和 JavaScript，保持轻量、透明、容易修改。

安装技能

最省事的方式，是把仓库地址交给支持自定义技能的 Agent，让它替你完成安装。 以 Codex 为例，新建一个对话，把下面这段话发给它：

请从 https://github.com/NimaChu/html-design 安装并启用 HTML Design 技能。 安装前先查看仓库中的 SKILL.md 和脚本，把它放到当前用户的技能目录，不要修改其他技能。 安装后运行技能自带的检查，并告诉我是否需要重启或新建对话，以及以后该怎样调用它。

Agent 可能会请求访问 GitHub，以及向用户技能目录写入文件；确认目标是这个仓库和 html-design 技能后即可授权。安装完成后，按照 Agent 的提示重新打开应用或新建对话。

如果你已经下载了这个仓库，也可以直接告诉 Agent：

请把我下载的 html-design 仓库安装为当前用户可用的技能，检查安装是否成功，并告诉我调用方式。

开始使用

不需要先决定技术方案，像平时说话一样告诉 AI：

使用 html-design 做一个旅行费用分摊工具。支持多人、多币种，结果可以复制，手机也要好用。

或者：

使用 html-design 做一个单词消除小游戏。保存最高分，触屏和键盘都能玩，最后交付一个 index.html。

再比如本地 AI 工具：

使用 html-design 做一个本地文章改写工具，连接 OpenAI-compatible 模型，支持流式输出和取消生成。

AI 会根据需求选择合适的应用类型，完成界面、交互、验证和本地预览。