如果你刷到过 Hacker News 的 Show HN 板块大概率会看到这类脑洞项目有人把一个创意丢给大模型再套上一个网页壳就成了一款能在线访问的 AI 应用。这次要聊的项目标题非常直接Show HN: I asked an LLM what it would say to God, then made it a website。意思很明确作者向大模型提了一个终极问题——“如果让你对上帝说一段话你会说什么”然后把生成结果做成网站发布出来。乍看像行为艺术但对做 LLM 应用的人来说这是一个非常好的“最小可用产品”样本一个创意一个 Prompt一个网页一次 API 调用就完成了一次完整的 LLM 应用落地。这篇文章不想只评论这个项目本身而是把它拆开说说如果你想复刻一个类似的 LLM 创意网站应该怎么选技术路线、怎么接大模型 API、怎么设计前端展示、怎么测试效果、怎么处理批量生成和性能问题以及最容易踩的坑在哪里。1. 核心能力速览先给一个整体判断。这类“把 LLM 输出做成网站”的项目核心不在模型训练而在应用编排和内容呈现。能力项说明项目类型LLM 创意应用 / Show HN 展示项目核心功能向大模型提出主题性问题生成回答并通过网页展示技术栈LLM API 前端页面 后端或边缘函数中转是否依赖本地显卡不依赖走云端 API普通电脑即可是否需要 GPU不需要显存占用0只要浏览器能打开就行是否支持 API 接入支持本质就是调用大模型 API是否支持批量任务支持可通过脚本批量生成多组回答是否支持自定义 Prompt支持改 Prompt 就是改整个网站的灵魂核心难度Prompt 设计、API 调用、网页展示、部署上线适合读者LLM 应用开发者、独立开发者、AI 产品经理、创意编程爱好者从材料看这个项目的重点不是“训练一个新的 LLM”也不是“部署一个本地大模型”而是“用一个现成的大模型能力做一个有传播点的网页应用”。这是目前 LLM 应用开发里门槛最低、见效最快的一类。所以本文不会讲怎么训练模型而是完整走一遍“LLM 应用从创意到上线”的流程。2. 适用场景与使用边界2.1 这个项目适合谁想练手 LLM API 接入的开发者完整走一遍注册 API、写 Prompt、调接口、渲染页面、联调部署。对 AI 产品设计感兴趣的人看一个简单的创意如何通过 LLM 网页变成可传播的产品。想做“AI 生成内容展示站”的独立开发者这个思路可以复制到很多领域比如“AI 写给未来自己的一封信”“AI 解读某本书的一句话”等。需要学习前端调用大模型接口的初学者项目不大但链路完整。2.2 能解决什么问题把大模型的文本生成能力封装成普通用户能访问的网页。用最小的成本验证一个 AI 创意是否有传播价值。建立一套可以复用的“LLM API Web 展示”模板后续换主题只需要改 Prompt。2.3 使用边界需要明确的是这个项目本质上属于“生成式 AI 创意内容展示”不是学术研究也不是生产力工具。它更适合作为创意实验和编程练习。在复刻和发布类似项目时有几个边界要注意不要拿真实人物做未经授权的角色扮演生成如果让 LLM 扮演某个真实在世人物说话涉及肖像权和名誉权问题尽量避免。不要生成违法、攻击性、歧视性内容Prompt 里要加系统级安全约束并在前端做好内容过滤。对外发布要标注 AI 生成很多平台已经要求 AI 生成内容进行显著标识。不要过度解读模型的“言论”大模型没有意识输出只是概率预测不要包装成某种“神秘力量”或“超自然回答”。宗教、哲学类话题要尊重多样性这个项目标题本身带有宗教色彩复刻时建议弱化具体宗教立场更多作为“文化创意实验”来呈现。3. 环境准备与前置条件复刻这类项目不需要高配电脑核心是准备一套“能调用大模型 API”的开发环境。3.1 基础环境清单项目说明操作系统Windows / macOS / Linux 均可内存8GB 以上足够磁盘1GB 以上可用空间编辑器VS Code 或任意熟悉编辑器运行环境Node.js 18 或 Python 3.9二选一包管理工具npm / yarn / pnpm 或 pip大模型 API Key需要注册对应平台获取域名可选如果需要部署公网访问3.2 大模型 API 选择在动手之前先选一个可用的 LLM API。常见选择包括OpenAI 兼容接口这是目前兼容性最好的一类很多框架和 SDK 都支持。Anthropic 的 Claude API长文本和语义理解能力较强。国内大模型平台的 API例如通义千问、文心一言、智谱等各有自己的开放平台。开源模型托管平台的 API例如 Together、Groq、DeepInfra 等通常提供低价或免费额度。从材料看热门搜索词里多次出现llm api、llm框架、llm agent、llm studio说明现在主流做法是通过 API 接入而不是本地部署。尤其对于这种轻量级创意网站走 API 成本低、部署快、不占本地资源。3.3 确定技术路线常见有三条路线按复杂度从低到高排列路线说明适用阶段纯前端 API 直连网页直接调用 LLM API不需要后端原型验证但会暴露 Key有安全风险后端代理 前端展示后端保存 Key前端请求后端后端再转发给 LLM生产可用推荐Serverless 函数中转用 Vercel/Cloudflare Workers 等平台转发请求轻量部署省服务器费用这个 Show HN 项目大概率走的是“后端或边缘函数中转 静态页面展示”的路线。下面我按这条路线展开。4. 项目落地从创意到可访问网站这一节直接动手复刻一个类似的“让 LLM 回答主题问题并展示在网页上”的最小项目。4.1 定义产品形态先想清楚网页要展示什么。这个项目的核心是用户打开页面看到“某个 LLM 对某个终极问题的回答”。可以有两种设计静态展示型提前用脚本生成一段回答渲染成精美网页没有交互。动态生成型用户点击按钮页面实时请求 LLM API拿到结果后展示。第二种更符合“LLM 应用”的定位也更有互动感。下面以动态生成型为例。4.2 注册并获取 LLM API Key以 OpenAI 兼容接口为例注册步骤一般是注册平台账号。创建一个 API Key注意保存时只显示一次。查看接口 Base URL 和模型名称。充值或领取免费额度。保存好 Key 之后不要直接写在前端代码里而是放到后端环境变量中。# 示例后端环境变量配置 LLM_API_KEYsk-xxxxxxxxxxxxxxxxxxxx LLM_BASE_URLhttps://api.openai.com/v1 LLM_MODELgpt-4o-mini4.3 搭建前端页面前端不需要复杂框架一个 HTML 文件加少量 CSS 和 JS 就能跑起来。关键是视觉氛围。如果是“让 LLM 对上帝说话”这类主题页面风格可以设计成暗色星空、光束、打字机效果等增强情绪感染力。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLLM 终极回答展示站/title style body { margin: 0; min-height: 100vh; background: #0d0d1a; color: #e8e8f0; font-family: Songti SC, Noto Serif SC, serif; display: flex; align-items: center; justify-content: center; } .container { max-width: 720px; padding: 48px 24px; } .question { font-size: 20px; opacity: 0.7; margin-bottom: 32px; } .answer { font-size: 18px; line-height: 1.9; white-space: pre-wrap; min-height: 200px; } .button { margin-top: 32px; padding: 12px 24px; font-size: 16px; background: transparent; border: 1px solid #8b8bb0; color: #e8e8f0; cursor: pointer; } .button:disabled { opacity: 0.5; cursor: not-allowed; } /style /head body div classcontainer div classquestionIf you could say one thing to God, what would it be?/div div classanswer idanswer正在思考请稍候.../div button classbutton idgenerate换一个回答/button /div script async function fetchAnswer() { const button document.getElementById(generate); const answer document.getElementById(answer); button.disabled true; answer.innerText 正在思考请稍候...; try { const response await fetch(/api/ask, { method: POST, headers: { Content-Type: application/json } }); const data await response.json(); answer.innerText data.answer; } catch (error) { answer.innerText 请求失败请稍后重试。; } finally { button.disabled false; } } document.getElementById(generate).addEventListener(click, fetchAnswer); window.addEventListener(DOMContentLoaded, fetchAnswer); /script /body /html这段代码做两件事页面加载时自动请求一次点击按钮后重新请求。前端本身不接触 API Key所有请求都转发到后端/api/ask接口。4.4 编写后端服务转发 LLM 请求后端可以选择 Node.js 或 Python。这里用 Node.js Express 做示例因为和前端生态比较统一。# 初始化项目 mkdir llm-oracle cd llm-oracle npm init -y npm install express dotenv创建server.jsrequire(dotenv).config(); const express require(express); const app express(); app.use(express.json()); app.use(express.static(public)); const LLM_API_KEY process.env.LLM_API_KEY; const LLM_BASE_URL process.env.LLM_BASE_URL || https://api.openai.com/v1; const LLM_MODEL process.env.LLM_MODEL || gpt-4o-mini; app.post(/api/ask, async (req, res) { try { const systemPrompt 你是一个擅长哲学表达的文字创作者。请以真诚、克制、富有文学性的语言回答用户提出的问题。直接输出正文不要解释。; const userPrompt 如果让你对上帝这个概念说一段话你会说什么请用中文回答500字以内。; const response await fetch(${LLM_BASE_URL}/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${LLM_API_KEY} }, body: JSON.stringify({ model: LLM_MODEL, messages: [ { role: system, content: systemPrompt }, { role: user, content: userPrompt } ], temperature: 0.9, max_tokens: 800 }) }); if (!response.ok) { const errorText await response.text(); return res.status(502).json({ error: LLM API error: ${errorText} }); } const data await response.json(); const answer data.choices[0].message.content.trim(); res.json({ answer }); } catch (error) { res.status(500).json({ error: String(error) }); } }); const PORT process.env.PORT || 3000; app.listen(PORT, () { console.log(Server running at http://localhost:${PORT}); });这个后端做的事情静态托管public目录下的前端页面。接收前端/api/ask请求。拼接系统提示词和用户提示词。转发给 LLM API。解析返回结果返回给前端。4.5 本地启动与访问# 启动服务 node server.js启动后浏览器访问http://localhost:3000页面会自动请求第一段回答。如果能看到文本内容说明“前端 - 后端 - LLM API - 前端”的完整链路已经跑通。到这里一个类似 Show HN 项目的 MVP 就完成了。5. 功能测试与效果验证项目跑通后不要急着上线先按下面几个维度做功能测试。5.1 Prompt 效果测试同一个问题不同的 Prompt 会得到完全不同的回答。建议准备三版 Prompt 对比版本Prompt 倾向预期效果版本 A直接提问不设角色回答偏理性、通用版本 B设定“诗人”角色回答偏文学化、有隐喻版本 C设定“代码也能表达情感”的工程师角色回答偏科技哲学、脑洞更大测试方法修改server.js中的systemPrompt重启服务多刷新几次观察回答风格的差异。判断标准不是“哪个对”而是“哪个更符合网站的定位”。如果做传播型展示站往往需要诗意、有金句、能截图分享的回答。5.2 多模型对比测试如果注册了多个平台或多种模型可以在后端的LLM_MODEL环境变量中切换对比效果。测试维度中文表达流畅度。对抽象主题的理解深度。是否容易出现空话套话。响应速度。成本。这类创意网站一般选性价比高的轻量模型就够了不需要顶级模型。以材料中出现的llm api、llm大语言模型等关键词看当前主流做法都是按 token 计费调用模型选择对成本影响很大。5.3 页面交互与展示验证快速连续点击按钮看是否会出现并发请求异常。断网后点击按钮看前端是否给出了友好错误提示。在手机浏览器上打开看排版是否正常。观察内容过长时页面是否会出现溢出或布局错乱。5.4 判断成功的标准页面打开后 10 秒内能看到第一段回答。点击“换一个回答”能生成不同的内容。多次请求之间回答不完全重复有变化。后端日志没有报错。在移动端和桌面端都能正常展示。5.5 常见失败原因现象可能原因页面一直显示“正在思考”后端没有启动或前端请求地址错误后端报 401API Key 错误或已过期报 429请求频率超限需要控制频率或换模型报 400Prompt 格式问题或模型参数超限前端能打开但接口报错跨域配置问题或后端环境变量没有加载6. 接口 API 与批量任务扩展这类项目不只可以做成单页交互还可以扩展出两个实用能力接口服务和批量内容生成。6.1 暴露一个独立接口如果把“向 LLM 提问哲学问题”抽象成一个通用服务就可以提供接口给其他程序调用。curl -X POST http://localhost:3000/api/ask \ -H Content-Type: application/json \ -d { question: 如果宇宙有意识它会对自己说什么, max_tokens: 600 }后端收到请求后将question传递给 LLM返回{ answer: 我既是提问者也是回答者。 }这样这个网站就从“单一展示页”升级成了“LLM 创意文案生成服务”。6.2 批量生成内容如果需要提前生成一批高质量回答比如为“静态展示版”准备 20 段文案建议写一个独立脚本批量调用而不是靠前端反复点击。import os import time import requests API_URL http://localhost:3000/api/ask OUTPUT_FILE answers.md TOTAL 20 questions [ 如果让你对时间说一段话你会说什么, 如果让你对孤独说一段话你会说什么, 如果让你对一个从未谋面的朋友说一段话你会说什么, ] with open(OUTPUT_FILE, w, encodingutf-8) as f: for i in range(TOTAL): question questions[i % len(questions)] try: resp requests.post(API_URL, json{question: question}, timeout120) resp.raise_for_status() answer resp.json()[answer] f.write(f## Q{i1}: {question}\n\n{answer}\n\n) print(f[{i1}/{TOTAL}] done) except Exception as e: print(f[{i1}/{TOTAL}] failed: {e}) time.sleep(1)批量任务要注意几点每次请求之间加间隔避免触发频率限制。记录成功和失败日志。中间失败不要立刻重启整个任务先看失败原因。生成的文本要人工审核后再上线不能直接无脑发布。6.3 缓存设计同一个问题可能会被多人访问。如果每次都实时调用 LLM成本会越来越高。简单做法把生成过的回答存到本地 JSON 或数据库中。相同问题直接返回历史结果只有新问题才调用真实模型。{ cache: { if_you_could_say_one_thing_to_god: 已生成的回答内容 } }缓存既能降低成本又能加快页面响应速度。7. 资源占用与性能观察这类项目因为是纯 API 调用本地资源占用非常低但也需要实际观察几个指标。7.1 本地资源占用运行 Node.js 后端和静态页面时资源占用主要来自Node.js 进程内存通常几十到几百 MB。浏览器渲染页面内存占用可忽略。没有任何 GPU 或显存占用因为推理发生在云端服务器。启动后可以这样观察任务管理器/活动监视器查看 Node 进程的内存和 CPU。浏览器开发者工具的 Network 面板查看接口响应时间。后端日志查看每次请求耗时。7.2 响应时间拆解一次请求的耗时主要来自四个环节前端到后端本地网络可以忽略。后端到 LLM API取决于模型和 token 数通常 2 到 10 秒。模型推理时间这是大头由模型能力决定。返回内容长度越长传输时间越久。从材料来看llm api、llm框架、llm文本向量api等热词都指向一个趋势现在的 LLM 应用大部分依赖 API 服务本地只是编排层。这意味着性能优化的重点不在本地硬件而在 API 选型、请求参数、缓存策略。7.3 如何降低成本和延迟使用轻量模型处理简单问题。设置max_tokens上限。使用流式输出让用户更快看到开头内容。开启结果缓存。对同 IP 请求做频率限制。8. 常见问题与排查方法做这类项目最容易遇到下面几个问题提前列出来遇到时直接对照处理。问题现象可能原因排查方式解决方案页面打不开Node 服务未启动检查终端日志重新执行node server.js本地能打开手机上打不开防火墙或监听地址限制检查监听地址监听0.0.0.0同一局域网访问前端报跨域错误前后端分离部署未配 CORS打开浏览器控制台看报错后端配置Access-Control-Allow-Origin接口返回 401API Key 错误或过期在环境变量里检查 Key重新生成 Key 并替换接口返回 429请求过于频繁查看错误详情加延时、降并发、开缓存返回内容为空Prompt 被过滤或 max_tokens 太小查看原始返回 JSON调整 Prompt、增大 max_tokens返回内容风格不对Prompt 没有明确角色约束修改 systemPrompt强调“文学性、避免说教”等要求启动时报缺少模块依赖未安装看报错模块名执行npm install环境变量无效.env文件未正确加载在代码里打印环境变量确认dotenv已配置并放在项目根目录部署到线上后接口 404路由路径不一致查看访问日志确认后端路由和前端请求路径一致8.1 依赖安装失败如果在国内网络环境安装 npm 依赖缓慢或失败可以切换镜像源npm config set registry https://registry.npmmirror.comPython 环境也类似可以用国内 pip 镜像pip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple8.2 环境变量加载问题dotenv默认加载项目根目录的.env文件。如果文件没有生效先确认文件是否以.env命名注意没有前缀文件名。是否在项目根目录。变量名是否和process.env.XXX完全一致。也可以在代码里临时打印调试console.log(base url:, LLM_BASE_URL); console.log(model:, LLM_MODEL);确认变量加载后再请求。8.3 模型输出不稳定LLM 本身有随机性同一次请求每次结果都可能不同。如果只是展示站这点反而是优点可以给用户“每次刷新都是新内容”的体验。但如果用于批量生产建议设置temperature较低的值比如0.4并开启缓存保证内容相对稳定。9. 最佳实践与合规建议9.1 先从最小例子跑通不要一上来就写复杂的页面和多个功能。先跑通“一个 HTML 一个后端 一次 API 调用”确认链路没问题再逐步美化页面、扩展交互。9.2 把 Prompt 当作产品核心这类网站的产品灵魂就是 Prompt。同一个问题换一个角色设定、换一个语气要求效果完全不同。建议把 Prompt 集中放到一个独立配置文件里方便反复测试和切换。9.3 做内容审核LLM 可能生成不可控内容尤其是宗教、哲学、社会话题。上线前要设置安全过滤至少做到在 Prompt 里明确禁止生成攻击性内容。对输出内容做关键词过滤。页面上标注“内容由 AI 生成”。保留人工审核机制尤其是批量发布前。9.4 注意版权与隐私如果引用别人的文本、诗句、观点作为 Prompt 素材注意版权边界。不要上传未授权的个人信息、聊天记录。对外展示的内容如果基于特定人物或组织需要获得授权。9.5 接口安全API Key 永远不要暴露在前端。后端对/api/ask做限流防止被刷爆。如果部署在公网加上简单的访问口令或 IP 白名单。10. 总结与下一步这个 Show HN 项目看起来只是一个“脑洞”但它把 LLM 应用开发的核心链路完整走了一遍创意定义、Prompt 设计、API 接入、网页展示、交互验证、部署上线。对刚接触 LLM 开发的读者来说这是非常好的入门练手项目。最值得尝试的点在于成本极低不需要 GPU不需要服务器一个 API Key 两个文件就能做出一个可以分享的网站。最先应该验证的是 LLM 给出的回答是否真的有“被分享的欲望”。这是创意类 AI 应用能否走通的关键技术问题反而是次要的。最容易踩的坑有三个API Key 泄露到前端、请求频率被限制、输出内容没有审核直接发布。前两个是工程问题第三个是合规问题都建议提前处理。后续可以扩展的方向很多换成多模型对比展示、加入用户自定义提问、做成每日一答的生成器、接入评论和分享功能甚至可以做一个“LLM 语录生成器”系列站点。如果你也想做类似的 LLM 创意网站建议先把这个最小版跑通再继续往上加东西。这一套链路不会白搭换一个主题它就是另一个产品。