内容
# MarkSight
**将任何 Markdown 文档转换为可安装的 Claude 代理技能 — 只需一步，在您的浏览器中。** MarkSight 是一个免费、开源的 Markdown 编辑器，其核心兼作远程 MCP 服务器，Claude Code 可以直接调用。实时预览、GFM、Mermaid 图表和 Markdown/HTML/PDF 导出都包含在内。
🔗 **在线使用（无需注册）：** [marksight.laramateo.com](https://marksight.laramateo.com) · 🧩 一键导出 `.skill` 文件 · 🔌 内置 MCP 服务器 · 🔒 100% 客户端
<!-- Demo GIF slot — drop a ≤2 MB clip at docs/demo.gif (type markdown → ⌘⇧K → .skill downloads → `claude mcp add`), then uncomment the line below. -->
<!--  -->
> ⭐ 如果 MarkSight 对您有帮助，请给仓库点赞以帮助其他人发现它。
## 快速开始
**使用它 — 无需安装：**
1. 打开 [marksight.laramateo.com](https://marksight.laramateo.com)，编写或粘贴 Markdown，然后按 **⌘⇧K** — 可安装的 `.skill` 包将立即下载。
2. 或者，将 MarkSight 的 MCP 服务器添加到 Claude Code，让 Claude 为您构建和验证技能：
```bash
claude mcp add --transport http marksight https://marksight.laramateo.com/api/mcp
```
然后询问 Claude 将 Markdown 转换为技能或转换为 HTML。工具：`create_skill`、`validate_skill`、`markdown_to_html`、`document_outline`、`document_metrics`。
想在本地运行 MarkSight 或贡献代码？请参阅 [入门](#getting-started)。
## 关于
MarkSight 是一个免费、开源的 Markdown 编辑器，完全在您的浏览器中运行 — 无需帐户，无需服务器端存储。文档保存在 `localStorage` 中，导出在客户端生成，因此您的写作永远不会离开您的设备。它由 [Lara Mateo](https://laramateo.com) 创建，并由社区贡献者开发。
## 功能
- **实时预览** — CodeMirror 编辑器，带有即时渲染的预览面板
- **智能工具栏** — 根据上下文的格式化，检测和切换现有的 Markdown
- **键盘快捷键** — 粗体（⌘B）、斜体（⌘I）、删除线（⌘U）、链接（⌘K）、内联代码（⌘`）、标题（⌘⇧1–3）、列表等
- **文档大纲** — 自动生成、可点击的标题导航，滚动预览
- **导出** — 下载原始 Markdown 源代码或样式化的 HTML，打印为 PDF，或在新标签中预览 HTML
- **技能创建器** — 将您的文档打包为 Claude 代理技能（⌘⇧K），Claude 和其他 AI 可以接收：复制生成的 `SKILL.md` 或下载可安装的 `.skill` 包。从 `.skill`/`.zip` 文件或 GitHub 市场导入现有技能（例如 [anthropics/skills](https://github.com/anthropics/skills)），修改它们，然后重新导出，保留捆绑文件
- **GitHub 风格的 Markdown** — 表格、任务列表、删除线（通过 `remark-gfm`）
- **语法高亮** — 使用 Prism 渲染的代码块
- **Mermaid 图表** — 围栏 `mermaid` 块在预览和导出中渲染为实时 SVG，可通过 `%%{init}%%` 指令或 YAML 前言进行主题化
- **浅色/深色主题** — 系统感知，跨会话保存
- **本地持久性** — 您的文档自动保存到 `localStorage`
一个围栏的 `mermaid` 块渲染为图表：
```mermaid
graph LR
A[输入 Markdown] --> B[实时预览]
B --> C{导出？}
C -->|HTML| D[样式化 HTML]
C -->|PDF| E[打印-ready PDF]
C -->|Markdown| F[.md 文件]
```
## 技术栈
- [Next.js 16](https://nextjs.org/) （应用路由器）+ [React 19](https://react.dev/)
- [Tailwind CSS v4](https://tailwindcss.com/) + [shadcn/ui](https://ui.shadcn.com/) 原语
- [CodeMirror](https://codemirror.net/) （`@uiw/react-codemirror`）用于编辑
- [react-markdown](https://github.com/remarkjs/react-markdown) + `remark-gfm` 用于渲染
- [Mermaid](https://mermaid.js.org/) 用于图表渲染
- [next-themes](https://github.com/pacocoursey/next-themes) 用于主题
## 入门
```bash
npm install
npm run dev # 在 http://localhost:3000 启动开发服务器
```
其他脚本：
```bash
npm run build # 生产环境构建
npm run start # 提供生产环境构建
npm run lint # 运行 ESLint
```
### 将文档导出为代理技能
一步到位：点击预览工具栏中的打包图标（或 ⌘⇧K），验证的 `<name>.skill` 包将立即下载 — 元数据来自您的文档（第一个 H1 → 名称，第一个段落 → 描述），并且 toast 显示添加至 Claude 的步骤。
所有可选功能都位于 **代理技能** 侧边栏卡中：内联编辑名称和触发器描述（键入时验证），在说明/知识打包之间切换，使用 AI 完善，或从 `.skill` 文件或 GitHub 市场导入现有技能以编辑和重新导出。所有操作都在浏览器中本地运行。
要将技能添加到 Claude Code：
```bash
unzip -o ~/Downloads/<name>.skill -d ~/.claude/skills/
```
它将在下一个会话中加载（或在 `/reload-plugins` 之后）。在 claude.ai 上，上传 `.skill` 文件到 **设置 › 功能 › 技能**。
可选地，**使用 AI 改进** 按钮通过 Vercel AI 网关完善技能的名称和触发器描述。只有当后端具有网关凭证时，它才会出现 — 请参阅 [`.env.example`](./.env.example)；如果没有它们，整个技能创建工具仍将离线工作。
您还可以从同一个对话框 **导入现有技能**：打开 `.skill`/`.zip` 包或 `SKILL.md` 文件，或粘贴 GitHub URL（仓库、文件夹或 `SKILL.md` 链接 — 例如官方 [anthropics/skills](https://github.com/anthropics/skills) 集合）。技能的前言被保留（前言始终覆盖自动派生的元数据），`references/` 等捆绑文件不受影响，您可以编辑正文并重新导出。
### MCP 服务器（从 Claude 使用 MarkSight）
MarkSight 将其核心暴露为远程 [MCP](https://modelcontextprotocol.io) 服务器，在 `/api/mcp`（可流式传输的 HTTP），因此 Claude 和其他 MCP 客户端可以直接调用它：
```bash
claude mcp add --transport http marksight https://marksight.laramateo.com/api/mcp
```
工具：`create_skill`（Markdown → 验证的 `.skill` 包，base64）、`validate_skill`、`markdown_to_html`、`document_outline`、`document_metrics` — 所有这些都由编辑器使用的相同 `src/lib` 代码支持。包含项目范围的 [`.mcp.json`](./.mcp.json)，因此克隆此仓库会在 Claude Code 中自动连接插件。
### 重新生成品牌资产
应用程序图标和社会图像从内联 SVG 使用 `sharp` 生成：
```bash
node scripts/generate-assets.mjs
```
这会写入清单图标（`public/icon*.png`）和 Next.js 元数据图像（`src/app/apple-icon.png`、`opengraph-image.png`、`twitter-image.png`）。
## 项目结构
```
src/
├── app/ # 应用路由器入口（布局、页面、元数据、路由资产）
│ └── api/ # 路由处理程序（MCP 服务器、AI 技能改进）
├── components/ # UI 组件（编辑器、预览、工具栏、侧边栏等）
│ └── ui/ # shadcn/ui 原语
├── contexts/ # React 上下文提供者
├── hooks/ # 自定义钩子
├── lib/ # 实用程序（slugify、本地存储、语法高亮等）
└── proxy.ts # 安全标头 / CSP
```
## 贡献
欢迎贡献 — 无论是错误报告、功能想法、文档修复还是拉取请求。请参阅 [贡献指南](./CONTRIBUTING.md) 以了解如何设置项目并提交更改，并请遵循我们的 [行为准则](./CODE_OF_CONDUCT.md)。
新来者？查找标有 [`good first issue`](https://github.com/Rinava/MarkSight/issues?q=is%3Aopen+label%3A%22good+first+issue%22) 的问题。
## 社区
问题、想法或只是想展示您使用 MarkSight 构建的内容？在 [GitHub Discussions](https://github.com/Rinava/MarkSight/discussions) 中加入讨论。对于错误和功能请求，请打开一个 [问题](https://github.com/Rinava/MarkSight/issues)。
## 贡献者
感谢所有帮助 MarkSight 变得更好的贡献者：
<a href="https://github.com/Rinava/MarkSight/graphs/contributors">
<img src="https://contrib.rocks/image?repo=Rinava/MarkSight" alt="MarkSight contributors" />
</a>
想看到自己的名字在这里吗？从 [贡献指南](./CONTRIBUTING.md) 开始。
## 作者
MarkSight 由 **[Lara Mateo](https://laramateo.com)** ([@Rinava](https://github.com/Rinava)) 创建和维护。
## 许可证
请参阅 [LICENSE](./LICENSE)。
