企业官网建设流程全解析

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

本文以仓库中的孟加拉语文档 README-lang/README-bn.md 为主体，系统梳理 AiShort（ChatGPT Shortcut）这款"开箱即用"的 AI 提示词管理工具：从无需注册的复制即用流程、标签与关键词检索、18 语言支持，到登录后的我的收藏、自定义提示词、社区投票、等级体系，再到 Chrome/Edge/Firefox 浏览器扩展与 Vercel、Docker、离线版等部署形态。读完本文，你将掌握该提示词库的完整功能地图、底层实现依据（源码路径与调用链）以及一套可直接落地的自托管方案。

项目概览：AiShort 是什么

AiShort（ChatGPT Shortcut）是一个可搜索、可收藏的 AI 提示词（Prompt）库，项目口号是"别再从头写提示词：现成的拿来就用，好用的收进自己的库"。它的核心价值在于：AI 使用与 AI 善用之间的差距，往往就是一条好的提示词——同一个问题，不同的提示词，AI 的输出会从"泛泛而谈"变成"真正有用"。

从仓库工程结构看（package.json），该项目是一个基于Docusaurus 3.10 + React 19 + TypeScript 6 + Ant Design 6构建的静态站点应用，Node 引擎要求>=20.0。其工程核心包括：

• 提示词数据层：src/data/cards/下按编号（100~119）与语言（en/zh-Hans/zh-Hant/ar/bn/ja/ko 等）划分的 JSON 卡片文件，以及src/data/prompt_*.json、src/data/meta_cards.json；
• 国际化层：i18n/目录为 18 种语言分别维护了文档、提示词页面（每个语言 279 个.tsx提示词页面）、导航与页脚资源；
• 前端交互层：src/components/PromptCard/（提示词卡片）、src/components/CopyButton/（一键复制）、src/components/user/MySpace.tsx（我的收藏）、src/pages/community-prompts.tsx（社区页）等。

孟加拉语文档位于 README-lang/README-bn.md，是项目 README 的 18 种语言翻译之一，文档声称收录5000+ 条可直接使用的精选 AI 提示词，覆盖写作、编程、办公、学习、设计、营销等领域，适用于 ChatGPT、Cursor 以及任意 API 调用等场景。

快速开始：30 秒复制即用

孟加拉语文档给出的上手流程只有三步，这也是整个产品"零门槛"定位的体现：

1. 访问官方站点aishort.top（孟加拉语入口为/bn/路径）；
2. 搜索或浏览你需要的提示词；
3. 点击「复制」按钮，粘贴到任意 AI 工具——ChatGPT 等对话页面、Cursor 等编程工具、你自己的 API 调用等。

复制后需要留意的细节是提示词中的占位符：大部分提示词用方括号[...]标记需要你补充的内容，例如[内容]、[主题]。把方括号内的占位文本替换成你的具体需求再发送给 AI（该约定在 docs/guides/getting-started.md 中有明确说明）。这意味着提示词并非"死模板"，而是带参数的专家级指令框架。

核心操作无需注册、无需付费、无需安装——打开即用。关于更多特性（收藏、自定义提示词、社区等），可继续查阅 docs/guides/getting-started.md。

核心功能：无需登录即可使用的四件套

精选提示词（Curated Prompts）

文档宣称提示词库"经过社区实战检验"，覆盖写作、编程、办公、学习、设计、营销等领域，复制即可使用。从数据层实现看，提示词以 JSON 形式集中管理：src/data/cards/下的卡片文件按编号与语言划分（例如100_bn.json、101_en.json、102_zh-Hans.json等），src/data/default/与src/data/meta_cards.json提供默认与元信息数据。提示词卡片组件 src/components/PromptCard/DataCard.tsx 会按当前语言读取title/remark/prompt/description字段并渲染，这就是"一份数据、多语言展示"的实现基础。

标签 + 关键词搜索（Tag + Keyword Search）

按场景标签过滤，或按关键词检索。前端由src/components/SearchBar/提供搜索交互，本地检索逻辑集中在 src/api/homepage.ts 的searchCardsLocally中；场景标签数据维护在 src/data/tags.tsx。搜索能力不仅覆盖首页，也覆盖登录后的"我的收藏"（本地多字段检索 + 降级到精选库/社区搜索）。

18 种语言支持

文档强调"完整 UI 和提示词翻译，用母语获得回复"。仓库的 i18n/ 目录为此提供了结构性证据：ar/bn/de/en/es/fr/hi/ind/it/ja/ko/pt/ru/th/tr/vi/zh-Hant共 17 个显式语言目录 + 默认简体中文（zh-Hans），合计 18 种语言；每个语言目录下包含docusaurus-plugin-content-docs/current/（18 篇翻译文档）、docusaurus-plugin-content-pages/prompt/（279 个提示词页面）以及navbar.json、footer.json、code.json。语言列表由 scripts/i18nLocales.mjs 作为单一数据源统一维护，供 Docusaurus 配置与分段构建共用。

即开即用（Ready to Use）

无需注册，打开站点即可浏览与复制。这是产品"零摩擦"设计的核心卖点。

登录后的高级功能：六项能力详解

孟加拉语文档列出登录后可用的六项高级功能，本文逐一结合源码给出实现层面的印证。

📂 我的收藏：拖拽排序与自定义标签

支持拖拽排序与自定义标签分类。实现位于 src/components/user/MySpace.tsx：

• 拖拽基于@dnd-kit/core与@dnd-kit/sortable（DndContext+PointerSensor/KeyboardSensor+arrayMove），拖拽结束后调用updateMySpaceOrder自动保存顺序（见handleDragEnd，MySpace.tsx），失败时回滚乐观更新；
• 自定义标签为{ id, name, color, order }结构，管理弹窗提供 11 种预设颜色（magenta/red/volcano/orange/gold/lime/green/cyan/blue/geekblue/purple，见 MySpace.tsx），保存时通过updateCustomTags一次性提交definitions与itemTags；
• 视图内还提供"全部/提示词/收藏"分段筛选、标签单选的过滤以及Ctrl+K/⌘K聚焦搜索框的终端式快捷键。

✏️ 自定义提示词：创建、编辑与导入导出

登录后可创建、编辑和管理自己的提示词。前端由src/hooks/useUserPrompt.tsx与src/components/user/modal/PromptFormModal.tsx支撑，API 层对应src/api/prompts.ts中的用户提示词接口；收藏的社区提示词还可一键"转为私有提示词"（handleConvertToPrivate，见 MySpace.tsx）。详细操作指南见 docs/guides/user-prompts.md。

🗳️ 社区：分享、投票与评论

社区页 src/pages/community-prompts.tsx 完整实现了"发现-投票-讨论"闭环：

• 支持按最新发布（id）与最多赞（upvoteDifference）两种排序，以及无需登录的公开搜索；
• 投票（upvote/downvote）采用乐观更新：点击后立即更新本地计数，同时通过voteOnUserPrompt请求后端，成功后以后端返回的真实计数校准、失败则回滚（community-prompts.tsx），并以会话级Set防止重复点击；
• 评论能力由src/api/comments.ts与src/components/Comments.tsx、CommentComponent/提供（含表情与 Giphy 选择器）；
• 构建期通过scripts/genCommunitySnapshot.mjs生成社区快照，首页/默认排序用快照直接做 SSG 首屏填充，后续翻页、搜索再走 API，兼顾首屏性能与数据新鲜度。

📤 数据导出：一键 JSON 导出

文档承诺"所有提示词一键导出为 JSON"，便于数据迁移与备份。账户与数据管理细节见 docs/guides/account.md。

🔐 多种登录方式

支持密码、Google 账号、无密码邮箱链接三种登录方式。登录组件位于 src/components/user/login.tsx，会话状态由 src/components/AuthContext.tsx 全局管理。

🏆 等级体系：L0–L9

通过向社区分享提示词积累等级（L0–L9），等级组件与展示逻辑位于 src/components/LevelSystem.tsx，形成"分享-贡献-激励"的正向循环。

提示词卡片与一键复制：交互细节与计数机制

提示词以卡片形式呈现，卡片基础结构由 src/components/PromptCard/Base.tsx 提供（基于 Ant DesignCard，支持 hoverable、loading、actions 插槽等），业务卡片在 src/components/PromptCard/DataCard.tsx 中组合了标题、复制数统计（火焰图标 + 紧凑数字格式化）、提示词摘要、场景标签与来源链接。

一键复制由统一组件 src/components/CopyButton/CopyButton.tsx 实现，它有三个值得注意的设计点：

• 提供iconOnly / outlined / primary三种视觉变体，分别适配卡片操作、弹窗头部与详情页大按钮；
• 支持trackingId追踪参数：传入时调用updateCopy(text, trackingId)，会递增服务端复制计数；不传则走本地copyText，不发请求（见 CopyButton.tsx）；
• 复制成功有"图标切换（复制→对勾）+ 脉冲光晕"两层即时反馈，且刻意不使用 Toast（复制是同步瞬时操作）。

浏览器扩展：在任何页面调用提示词

文档说明可通过浏览器扩展随时访问 AiShort 提示词库，支持Chrome、Edge、Firefox三种浏览器，使用快捷键Alt + Shift + S呼出侧边栏，可在 ChatGPT、Gemini、Claude 等对话页面内直接调用；另外还提供一个 Tampermonkey（油猴）用户脚本"ChatGPT Shortcut Anywhere"，可在任意网站上唤起 AiShort 侧边栏。

仓库内docs/extension/目录提供了完整的扩展使用与安装文档：docs/extension/usage.md、docs/extension/README.md、docs/extension/manual-chrome-extension.md（手动加载未打包扩展）、docs/extension/manual-chrome-extension-zip.md（打包 zip 安装）以及 docs/extension/firefox-extension-setting.md（Firefox 配置）。

部署：四种形态与同步更新策略

孟加拉语文档部署章节的核心信息与仓库 docs/deploy.md 一致。部署形态分为三种（docs/deploy.md）：

标准部署支持本地构建、Vercel、Cloudflare Pages、Docker四种方式，详细步骤见 docs/deploy/standard.md；离线版专为"气隙（air-gapped）"的企业内网或政务网络设计，无需后端与账户，数据在浏览器本地存储，浏览/搜索/收藏/自定义提示词功能与在线版一致，见 docs/deploy/offline.md；自定义站点标题、描述、提示词以及对接自定义后端的参数说明见 docs/deploy/configuration.md。

关键提示（来自文档）：Vercel 的一键部署会创建一个新项目（而非 fork），因此上游更新检查不可用。若要获得自动同步，应先 fork 仓库，再在 Vercel 中导入该 fork，完整流程见 docs/deploy/sync-updates.md。

仓库根目录同时提供 Dockerfile 与 docker-compose.yml，本地构建与开发可直接使用。自托管时通过 git clone 拉取源码（例如git clone https://gitcode.com/gh_mirrors/ch/ChatGPT-Shortcut.git），随后按 package.json 中的脚本执行依赖安装与构建：yarn install、yarn build（分段构建，见scripts/buildPhased.mjs），本地预览用yarn start/yarn serve。注意构建前后会通过scripts/genCommunitySnapshot.mjs生成社区快照（prestart/prebuild钩子），这是社区页首屏数据来源，构建环境需要能够访问对应数据源。

参与贡献：四种方式

孟加拉语文档明确欢迎各类贡献，分为四条路径：

1. 提交提示词建议或报告 Bug→ 打开 GitHub Issue；
2. 提交 PR→ fork 仓库、创建分支、发送 Pull Request；
3. 补充翻译或改进文档→ 关注i18n/与docs/目录（这正是孟加拉语文档自身诞生的路径）；
4. Star 并分享→ 让更多用户发现有用的提示词。

本地开发环境搭建同样参考 docs/deploy.md。

社区与开源许可

项目提供Telegram 群组与Discord 服务器两个讨论与反馈渠道（README 中有对应徽章链接，孟加拉语文档同样列出）。相关使用指引与常见问题见 docs/guides/community.md 与 docs/guides/faq.md。

项目采用MIT 开源协议（LICENSE），版权归原作者 rockbenben 所有。这意味着你可以自由地 fork、自托管、二次开发，甚至基于它搭建自己的提示词管理站点——这正是孟加拉语版、简体中文版（README-zh.md）、英文版（README.md）等多语言文档能够并存共生、由社区持续维护的前提。

一句话总结：AiShort 用"精选数据层 + 多语言 i18n + 卡片化前端 + 可选社区后端"的架构，把提示词从"个人收藏夹"升级成了"社区共建、跨语言、可复制部署"的公共基础设施；无论你是普通用户（复制即用）、提示词作者（投稿与等级激励）还是开发者（自托管与二次开发），都能在这套方案中找到对应入口。

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