企业官网建设流程全解析

• AI 应用
• 提示工程
• 人工智能
• 前端

AiShort（又名 ChatGPT Shortcut）是一个面向 ChatGPT、Claude、Gemini、Cursor 等 AI 工具的可搜索提示词库，核心理念是"别再从头写提示词：现成的拿来就用，好用的收进自己的库"。本文基于仓库 README-lang/README-th.md 的官方文档骨架，结合 package.json、docker-compose.yml、docs/deploy 系列部署文档与 src/components 源码实现，系统梳理该项目的功能矩阵、浏览器扩展用法、自部署方案与源码级工作机制，帮助读者快速上手使用，并具备独立部署与二次定制的能力。

项目概览与技术底座

AiShort 定位是"提示词管理系统"：社区提供经过验证的高质量提示词，覆盖写作、编程、办公、学习、设计、营销等场景，用户复制即用。官方标语将项目价值概括为——"会用 AI" 与 "用好 AI" 的差距，往往就是一条好提示词。

从 package.json 可以确认项目的技术底座：

• Docusaurus 3.10（@docusaurus/core+@docusaurus/preset-classic）——静态站点骨架与文档体系；
• React 19 + TypeScript 6——页面组件与类型系统；
• Ant Design 6（antd）——UI 组件库，提示词卡片、弹窗等交互组件均基于它构建；
• dnd-kit（@dnd-kit/core/@dnd-kit/sortable）——"我的收藏"的拖拽排序能力；
• axios + lscache——API 请求与本地缓存；
• emoji-mart / giphy——评论区的表情与 GIF 选择器。

构建语言清单由 scripts/i18nLocales.mjs 统一管理，locales数组包含zh-Hans、en、ja、ko、th等18 种语言，默认语言为zh-Hans。README 文档树中每个语言（含泰语th）都维护着完整的文档、导航与提示词数据（见 i18n/th），这正是"18 种语言、UI 与提示词完整翻译"这一特性的事实来源。

快速上手：三条命令之外的三步操作

官方文档给出的使用路径非常简单，网页版无需注册、无需付费、无需安装：

1. 访问官方站点（泰语入口为/th/路径，多语言站点会按语言渲染对应界面）；
2. 搜索或浏览你需要的提示词；
3. 点击Copy，粘贴到任意 AI 工具——ChatGPT 等对话页、Cursor 等编程工具、或你自己的 API 调用。

配合 docs/guides/getting-started.md 中的进阶说明：大部分提示词使用方括号[...]标记占位内容（如[内容]、[主题]），粘贴后把占位文本替换成你的具体需求再发送，即可获得符合预期的输出。

核心价值与功能矩阵

无需登录的基础功能

需登录的高级功能

这些高级功能在源码中均有对应实现：My Collection与收藏逻辑见 src/components/user/MySpace.tsx 与 src/hooks/useFavorite.tsx；社区提示词页与卡片见 src/components/CommunityPromptPage.tsx、src/components/PromptCard/CommunityCard.tsx；评论系统见 src/components/Comments.tsx（内含 Emoji 选择器与 Giphy 选择器）；等级体系见 src/components/LevelSystem.tsx。API 侧则由 src/api 下的auth.ts、favorites.ts、myspace.ts、comments.ts、prompts.ts等模块提供接口契约。

核心界面模块

官方文档以截图表格展示了四个核心界面：

• My Collection（我的收藏）——拖拽、打标签、整理提示词；
• Browser Extension（浏览器扩展侧边栏）——嵌入 ChatGPT、Gemini、Claude 对话页的侧边栏；
• Prompt Card（提示词卡片）——预览与一键复制；
• Community（社区页）——发现提示词并投票。

从源码结构看，提示词卡片体系被拆分为Base、DataCard、FavoriteCard、CommunityCard、UserCard等组件（见 src/components/PromptCard），按数据来源区分渲染形态；卡片弹窗详情见 src/components/PromptDetailModal.tsx。社区页与收藏页的交互入口分别位于 src/pages/community-prompt.tsx 与 src/pages/user。

浏览器扩展：把提示词库嵌入对话页

扩展是 AiShort 的高频使用形态——把提示词库直接放进 ChatGPT、Gemini、Claude、豆包等 AI 对话页的侧边栏，免去来回切换标签页复制粘贴的麻烦。

安装方式

1. 应用商店一键安装：Chrome Web Store、Microsoft Edge Addons、Firefox Add-ons 均提供官方扩展（Firefox 安装后需完成一次授权设置，否则侧边栏不显示，见 docs/extension/firefox-extension-setting.md）；
2. 本地安装包：从项目 Releases 下载 CRX 或 ZIP 包后手动安装，教程见 docs/extension/manual-chrome-extension.md 与 docs/extension/manual-chrome-extension-zip.md。

使用要点

• 快捷键：按Alt + Shift + S快速唤出扩展；
• 三种显示模式：侧边栏模式（与网页并排）、弹窗模式（快速查看即关）、独立窗口模式（可拖到副屏）；
• 保持侧边栏打开：开启后切换浏览器标签页时侧边栏保持开启；
• 深色模式：设置页可切换深色外观；
• 语言跟随：扩展语言根据浏览器环境自动设置，也可手动更改。

油猴脚本方案

除扩展外，项目还提供ChatGPT Shortcut Anywhere油猴脚本（Tampermonkey），可在任意网站调出 AiShort 侧边栏（详见 docs/extension/README.md）。注意：由于 ChatGPT 官方页面限制脚本注入，在该页面中脚本以弹窗而非侧边栏形式运行；在其他支持网页的右下角会出现绿色图标开关，点击即可开闭侧边栏。

自部署：四种标准形态与离线版

如果你不需要自部署，直接使用官方站点即可；需要自建实例的开发者可参考 docs/deploy.md 选择部署形态：

标准部署：本地构建 / Vercel / Cloudflare Pages / Docker

环境要求：Node.js 20 或更高版本（见 package.json 的engines字段），支持 macOS、Windows（含 WSL）与 Linux。

本地构建（参见 docs/deploy/standard.md）：

# 安装依赖 yarn # 本地开发 yarn start # 构建：默认按 scripts/i18nLocales.mjs 的 defaultLocale 生成静态产物到 build 目录 yarn build

只构建部分语言时使用yarn build --locale <locale>（如zh-Hans、en、ja、th……完整列表见 scripts/i18nLocales.mjs），多语言可串联执行。构建入口是scripts/buildPhased.mjs（见 package.json 的build脚本），按阶段拆分构建以控制内存占用。

Vercel 部署：点官方文档中的 Deploy 按钮即可一键部署。注意 Vercel 免费版可能因内存不足报错，此时应改为单语言构建：进入项目Settings → Build & Deployment → Build Command，点击Override，改为yarn build --locale zh-Hans（或其他 locale）。

Cloudflare Pages 部署：先 fork 本项目，然后在 Cloudflare Pages 创建项目并绑定 fork 的仓库，构建命令填yarn build --locale zh-Hans（按需换 locale），输出目录填build，之后每次推送代码自动触发构建部署。

Docker 部署：一行命令即可（官方预构建镜像）：

# ghcr.io docker run -d -p 3000:3000 --name chatgpt-shortcut ghcr.io/rockbenben/chatgpt-shortcut:latest # Docker Hub docker run -d -p 3000:3000 --name chatgpt-shortcut rockben/chatgpt-shortcut:latest

仓库根目录自带的 docker-compose.yml 提供了等价编排：

services: chatgpt-shortcut: container_name: chatgpt-shortcut image: ghcr.io/rockbenben/chatgpt-shortcut:latest ports: - "3000:3000" restart: unless-stopped

离线部署版（企业内网）

离线版基于offline分支，是纯静态网站：无后端、无需注册，所有个人数据（收藏、自建提示词、排序、标签）保存在各自浏览器的 localStorage 中，服务器上只有共享的、构建时打包的只读提示词库（详见 docs/deploy/offline.md）。

Docker 部署（推荐）：

docker run -d -p 3000:3000 --name aishort-offline ghcr.io/rockbenben/chatgpt-shortcut:offline

或使用 compose：

services: aishort-offline: container_name: aishort-offline image: ghcr.io/rockbenben/chatgpt-shortcut:offline ports: - "3000:3000" restart: unless-stopped

源码构建（需自定义提示词或修改配置时）：

git clone -b offline https://gitcode.com/gh_mirrors/ch/ChatGPT-Shortcut.git cd ChatGPT-Shortcut yarn # 安装依赖 yarn start # 本地开发 yarn build --locale zh-Hans # 构建单语言版本 yarn build # 构建全部语言

构建产物在build/目录，可部署到任意静态服务器，官方给出的 Nginx 配置示例：

server { listen 3000; server_name _; root /path/to/build; index index.html; location / { try_files $uri $uri/ /index.html; } }

离线版数据存储键（见 docs/deploy/offline.md 及 src/utils/cache.js 的缓存实现）：

注意：浏览器本地存储约 5MB 上限；清除浏览器数据、使用无痕模式、更换电脑或浏览器都会导致个人数据丢失，建议定期通过「我的账户 → 数据管理 → 导出数据」备份为 JSON。离线版与在线版导出的 JSON格式互通，可在两版本间互相导入（按标题去重，社区收藏会自动转为本地提示词）。

同步更新

Vercel 一键部署创建的是新项目而非 fork，因此无法检测上游更新。官方方案（见 docs/deploy/sync-updates.md）：先删除原仓库，用页面右上角Fork按钮 fork 本项目，再在 Vercel 的 Import Git Repository 中重新选择该 fork 并部署。fork 后需手动在 Actions 页面启用 Workflows 并跑一次Upstream Sync Action，启用后项目每天自动同步上游更新；若执行报错，可手动执行一次 Sync Fork。

配置与自定义：改标题、增提示词、接后端

项目开源，可自由定制（详见 docs/deploy/configuration.md）：

• 网站标题与描述：编辑根目录 docusaurus.config.js；
• 使用说明与介绍：修改 docs 目录下的对应文档；
• 主页提示词：源数据在 src/data/prompt.json，是一个数组，每个对象按zh/en/ja等语言代码键存放所有语言版本，新增格式示例：

{ "zh": { "title": "custom prompt", "prompt": "custom prompt", "description": "custom description", "remark": "custom mark" }, "en": { "title": "custom prompt", "prompt": "custom prompt", "description": "custom description", "remark": "custom mark" }, "website": null, "tags": ["music"], "id": 500, "weight": 1 }

编辑后运行根目录的python CodeUpdateHandler.py，脚本会按预设规则拆分prompt.json，生成各语言的prompt_<locale>.json，并同步更新各语言主页与精选提示词页面（包括各 id 的卡片 JSON 与详情页）。建议将id设为 500 以上，避免与现有提示词或社区内容的 ID 冲突。

• 自定义后端：项目默认连接一个共享后端（登录、收藏、社区、评论、跨设备同步都依赖它），src/api 提供了完整接口契约：config.ts（API URL 配置）、client.ts（Axios 客户端，含认证拦截器）、auth.ts（认证）、prompts.ts（提示词 CRUD + 搜索 + 投票）、favorites.ts（收藏）、myspace.ts（我的空间数据）、comments.ts（评论）、user.ts（用户信息）。缓存机制通过lscache结合 ETag 实现——服务器返回 304 Not Modified 时直接复用本地缓存，减少数据传输。

参与贡献与社区

官方文档欢迎各类贡献：提交提示词或报告 bug 可开 Issue；提交改进可 fork 仓库、创建分支并发起 Pull Request；翻译或改进文档可关注i18n/与docs/目录；点赞收藏也有助于让更多人发现优质提示词。项目社区渠道包括 Telegram 群组与 Discord 服务器，用于讨论与反馈。

许可证

项目采用MIT 许可证（见根目录 LICENSE），可自由使用、修改与分发。

小结

AiShort 是一个"文档 + 源码 + 部署方案"完备的提示词管理开源项目：网页版即开即用覆盖日常提示词查找与复制；浏览器扩展把提示词库嵌入 AI 对话页侧边栏提升效率；标准部署与离线部署版分别满足公网自建与内网隔离两类需求；而 src/api 的模块化接口与 src/data/prompt.json 的数据结构则为二次开发与内容定制提供了清晰的扩展点。无论你只是想要一个现成的提示词库，还是打算自建一套企业级提示词管理平台，这个仓库都提供了可直接落地的方案。

• AI 应用
• 提示工程
• 人工智能
• 前端