YOURWARE：Claude 生成的前端怎么一键上线

Claude、ChatGPT 或 Cursor 把页面写完了，缺的往往只是一个能点开的链接。不想配 Vercel、也不想买域名的时候，可以把 HTML / React / TSX 丢到 YOURWARE，点一下 Ship It 就上线。注意：本文说的是 yourware.so 这条「拖进去就部署」的分享层，别和同名的 YouWare.com（那种跟 AI 聊天写整站的 vibe coding 平台）搞混。

它能干什么，不能干什么

能做的事很窄也很实用：

接 Claude、ChatGPT、Cursor 吐出来的静态前端：单文件 HTML，或带 CSS / JS / TSX 的小目录
在网页里拖进去，点 Ship It，拿到形如 *.app.yourware.so 的公开地址（示例：v9gfmmif5s.app.yourware.so）
通过 MCP 让 Claude Code、Cursor、Cline 在编辑器里直接 upload_project，不用切浏览器

做不了的事也写清楚：没有真正的后端、数据库、登录体系，也没有长期运维承诺。把它当成原型、组件 demo、临时给同事点的预览主机就行，别当成生产环境。

适合的场景大概是这些：落地页草稿、交互原型、单页工具、README 里要贴的 live demo。不适合的：带服务端渲染的全栈应用、要写库的后台、需要账号体系的产品。

上传前先整理一下目录

模型刚吐出来的文件经常是散的：一个 App.tsx、一个 styles.css、再夹两段内联说明。上传前花半分钟整理，能少翻一次车。

建议的最小结构：

text

demo/
  index.html
  app.tsx        # 或 app.js
  styles.css

index.html 里用相对路径引用同目录资源即可。如果是 React/TSX 且平台按静态文件托管、不会在云端帮你跑打包器，优先让模型直接产出「浏览器能打开的 HTML」，或先在本地 build 出 dist 再传 dist。多文件务必先放进同一个目录，再拖目录或对目录跑 upload_project；不要一次选一堆散落在不同路径的文件。

浏览器里拖拽上线

流程可以压成四步。

打开 https://www.yourware.so，登录账号。
把单个 HTML 文件，或已经整理好的前端目录拖进去。支持 HTML、CSS、JS、TSX。多文件时先把它们放进同一个文件夹，再拖整个文件夹。
点 Ship It，等部署完成。
拷贝生成的 *.app.yourware.so 链接，发给同事或贴进 PR / Issue。

几点实操上的习惯：

入口尽量叫 index.html。没有入口文件，打开域名后很容易空白或 404。
只传要给人看的那一层。Vite / Next 的构建产物一般在 dist 或 out，传那个目录就够了。
单文件 demo 最省事：让模型直接吐一个完整的 .html，拖上去就完事。
链接是公开的。别把还在保密期的客户稿件随便挂出去。

适合「今天刚生成的页面，明天就要给人点」。体积别塞 node_modules，也别把 .env 一起打包。

用 MCP 从编辑器直接上传

日常和 Claude Code / Cursor 一起干活时，切浏览器拖文件会打断节奏。官方有一个 MCP：ai-zerolab/yourware-mcp，PyPI 包名 yourware-mcp（截至 2025-04-09 为 1.0.2）。装上之后，模型可以在对话里直接上传。

提供三个工具：

check_credentials：检查本机凭证是否有效
create_api_key：把 API key 写到 ~/.yourware/credentials.json（也可以自己设环境变量 YOURWARE_API_KEY）
upload_project：上传单个文件或整个目录；尽量传绝对路径。多文件先收进一个目录再传

通用 MCP 配置

Cline、Cursor、Windsurf 一类客户端都能用这份 JSON：

json

{
  "mcpServers": {
    "yourware-mcp": {
      "command": "uvx",
      "args": ["yourware-mcp@latest", "stdio"],
      "env": {}
    }
  }
}

Claude Code

一条命令挂上用户级 MCP：

bash

claude mcp add yourware-mcp -s user -- uvx yourware-mcp@latest stdio

Cursor

打开 Settings → Features → MCP Servers，新增一条：name 填 yourware-mcp，command 填：

bash

uvx yourware-mcp@latest stdio

API Key

先在 yourware.so 登录并创建 API key，再在本机：

bash

export YOURWARE_API_KEY="你的密钥"

不设环境变量也可以：让模型先调用 check_credentials，无效就走 create_api_key，密钥会落到 ~/.yourware/credentials.json。配好后对模型说一句类似「把 /absolute/path/to/dist 上传到 YOURWARE」，它会调用 upload_project。成功时返回里会有 project_url（以及 iframe_url），把 project_url 拷出来即可。

本机需要先有 uv / uvx。没有的话按 uv 文档装一下。uvx yourware-mcp@latest 会临时拉包跑 stdio，一般不用单独 pip install。

一个常见用法：让 Claude Code 先改页面，再自己上传。对话可以写成「改完按钮颜色，然后用 yourware-mcp 把当前目录部署出去，把链接贴回来」。少开一个浏览器标签，预览链路会短很多。

和「自己搭静态托管」差在哪

自己上 Vercel / Netlify / Cloudflare Pages 当然也能发静态站，但链路更长：要账号、要连 Git 或装 CLI、还要处理构建命令和域名。YOURWARE 把这些砍到「文件进、链接出」，代价是可控性和功能都更少。

可以这么选：

只要一个能点的预览、五分钟内给人口径 → YOURWARE
要自定义域名、预览环境、CI 自动发版 → 还是用正规静态托管
要 SSR、Server Actions、边缘函数 → 直接上对应框架的托管，别绕这里

MCP 的价值主要在「模型改完就能部署」。浏览器拖拽适合偶尔一次；一天要出三四个 demo 时，编辑器里直接 upload_project 更不打断思路。

常见翻车

多文件却没有入口。 目录里没有 index.html，部署后打开是空白或 404。先确认入口文件名，或让模型生成一个指向主组件的 index.html。

把整个 node_modules 拖进去。 体积爆炸、上传慢，静态托管也跑不了 Node 依赖。只传构建产物（dist / out）或纯前端源文件。MCP 侧会把目录打成 zip 再传，目录越大越慢。

密钥写进前端。 YOURWARE 给的是公开 URL，谁拿到链接谁都能看页面源码。API key、数据库密码、Webhook 地址不要写进会被打包出去的 JS。

当真后端用。 没有服务端运行时，接口、鉴权、写库都别指望。需要服务端就另找平台，这里只负责把前端亮出来。

路径传相对路径翻车。 upload_project 更稳的做法是绝对路径；相对路径记得同时给 cwd（也要绝对路径）。在仓库根目录随口说「上传 .」之前，先确认当前工作目录是不是你以为的那个。

域名认错产品。 搜索「YouWare」很容易点到 vibe coding 那家。本文这条链路以 yourware.so、MCP 仓库和 *.app.yourware.so 为准；不确定时先看 MCP README 里的链接。

小结

流程可以压成两步：模型写完页面 → YOURWARE 出链接。浏览器拖拽适合偶尔发一个 demo；日常和 Claude Code / Cursor 一起干活，装上 yourware-mcp 更省事。它解决的是「有个能点的预览地址」，不是「有个能上线的完整产品」。

若链接打不开，先检查是不是贴成了别的 YouWare 产品域名，再确认上传的目录里真有 index.html。凭证失效就重新跑一遍 check_credentials / create_api_key，不必重装 MCP。

站点：https://www.yourware.so
MCP 仓库：https://github.com/ai-zerolab/yourware-mcp
PyPI：https://pypi.org/project/yourware-mcp/

字节笔记本

YOURWARE：Claude 生成的前端怎么一键上线

它能干什么，不能干什么

上传前先整理一下目录

浏览器里拖拽上线

用 MCP 从编辑器直接上传

通用 MCP 配置

Claude Code

Cursor

API Key

和「自己搭静态托管」差在哪

常见翻车

小结