
开发者发布免费本地优先的 README 编辑工具 README Studio
来源标题:I built a free, local-first studio for creating better GitHub README files
开发者推出 README Studio,一个免费、本地优先的 Markdown 工作区,用于撰写、预览和打磨 GitHub README。它支持可视化编辑或原始 Markdown 写作,并实时显示 GitHub 风格预览,无需安装或账号即可通过 GitHub Pages 在线试用。应用还提供 AI 助手和质量评分功能,示例 README 可获得 100 分。
以下正文由 AI 翻译自 Hacker News 最新(原文版权归原站所有),可能存在偏差,重要内容请以原文为准。
打造 README 的更好方式。 README Studio 是一个安静、local-first 的 Markdown 工作区,用于起草、预览和打磨项目文档。 你可以用可视化方式或原始 Markdown 写作,即时看到 GitHub 风格的预览,并交付一份让你引以为傲的 README。 演示 · 功能 · 快速开始 · AI 助手 · 质量评分 · 文档 · 成为贡献者 · 技术栈 大多数 README 文件都是在文本框里写完,再切换标签页去检查。README Studio 把整个工作集中在一个专注的地方完成。 这个应用围绕几个简单的信念设计:写文档应该让人感到平静,工作内容应该留在你的机器上,README 应该在发布之前就能被审阅。 理解 README Studio 最快的方式,就是花一分钟用一用它。 在线演示:yxoro.github.io/readme-studio —— 生产构建,托管在 GitHub Pages 上。无需安装,无需账号。 启动应用并打开本地 URL。 在顶栏选择 Import,然后选择 demo/sample-readme.md。 在 Visual Editor 中点击描述,重写一句话。GitHub 风格的预览会随着你的输入实时更新。 打开预览面板中的 Quality 标签。示例得分为 100;删掉它的 ## License 标题,观察得分和建议如何变化。 切换到 Raw Markdown,按 Ctrl / ⌘ + S,然后选择 Export README.md 下载文件。 完整操作演示见 demo/README.md。你在演示中做的一切都留在浏览器里——没有账号,也没有后端需要事后清理。 真正的 Markdown 编辑器 Visual Editor 将文档渲染为格式化区块。点击任意区块即可就地编辑其 Markdown。 Raw Markdown 在等宽编辑器中展示完整源码。 格式化工具栏支持标题、粗体、斜体、行内代码、围栏代码块、列表、有序列表、引用、链接、图片、表格和分隔线。 支持撤销和重做历史,并提供键盘快捷键。 字数统计、字符统计和预估阅读时间。 实时文档预览 使用 remark-gfm 渲染 GitHub 风格的 Markdown。 支持表格、任务列表、图片、徽章、引用块和链接。 为围栏代码块提供语法高亮。 Preview 面板与当前文档保持同步。 模板与可复用组件 从完整结构开始,而不是从空白页开始。 组件库会在光标处插入可直接编辑的区块:项目描述、功能、安装、使用、截图、技术栈、路线图、贡献、许可证、致谢、GitHub 徽章和在线演示。 创建、打开、重命名、复制和删除 README 文档。 自动保存,并显示 Saved / Saving 状态指示。 文档通过本地存储,在页面刷新后依然保留。 导入已有的 .md 文件,并将当前文档导出为真正的 README.md。 复制 Markdown、清空文档,并通过低调的通知查看导入或导出错误。 不会有任何内容上传到 README Studio 后端,因为根本没有后端。 可搜索的项目库,配有简洁的空状态。 可设置编辑器字号、默认编辑模式和预览偏好。 文档内置于应用中。 响应式布局,适配桌面、平板和手机。 安静的 Apple 风格视觉系统:明亮的表面、细致的边框、宽松的间距和克制的动效。 快速开始 要求:Node.js 18 或更高版本,以及 npm。 npm install npm run dev 打开 Vite 打印的本地 URL,通常是 http://localhost:5173。 npm run build npm run preview 不需要环境变量。AI 提供商设置在应用内配置,绝不会提交到仓库。 继续阅读入门指南,或先运行 60 秒演示。 README Studio 包含一个可选的 AI 编辑面板,使用你自己的 API key 即可工作。 默认配置指向 Z.ai: 可以配置任何兼容的提供商。当 base URL 尚未包含 /chat/completions 时,浏览器会自动追加。 用自然语言描述你想要什么。助手会返回一份完整更新后的 README,编辑器会在响应流式返回时实时应用。 Promo README 标签可以将一个原始想法转化为推广概念型 README。 API key 安全:key 存储在你浏览器的本地存储中,并直接发送到你配置的端点。请使用带有消费限额的专用 key,不要使用权限超出必要的 key。部分提供商会阻止浏览器请求(CORS);Test connection 按钮会暴露该问题。 Quality 面板会分析当前 README,并给出满分 100 的评分和可操作的改进建议。 五个核心部分合计 100 分。可访问性、链接和空区块问题会扣分,得分会随文档变化实时更新。建议会明确说明需要改进什么。 四份指南从不同深度介绍本项目。 同样的指导内容也可在应用内通过侧边栏的 Documentation 获取,因此离线也能使用。 快捷键 操作 Ctrl / ⌘ + S 立即保存 Ctrl / ⌘ + Z 撤销 Ctrl / ⌘ + Shift + Z 重做 Ctrl / ⌘ + Y 重做 Esc 关闭对话框并结束区块编辑 Ctrl / ⌘ + Enter 结束区块编辑 设计原则 平静的软件才是有用的软件。 flowchart TB User[You] --> UI[React interface] UI --> Editor[Visual / Raw Markdown editor] Editor --> Source[(Markdown source)] Source --> Preview[Live GitHub-style preview] Source --> Quality[Quality checker] Source --> AI[AI assistant] AI -. BYOK request .-> Provider[Your OpenAI-compatible API] Source --> Storage[(Browser localStorage)] UI --> Storage UI --> Export[README.md export] Loading 一切都在浏览器中运行: 关注点 技术 框架 React 18 语言 TypeScript,严格模式 构建工具 Vite 5 样式 Tailwind CSS 3 Markdown 渲染 react-markdown、remark-gfm、rehype-highlight 图标 Lucide React 持久化 浏览器本地存储 AI 传输 fetch 到 OpenAI 兼容端点 项目结构 . ├── assets/ README wordmark assets ├── logo/ Original brand logo
(原文较长,此处译出前 6000 字,完整内容请点「打开原文」。)
正文由 探How 从来源站点 RSS 同步,内容未经改写;遇到排版缺失或需要图片、视频时请以原文为准。