链接

DESIGN.md - 给智能体阅读的‘UI/UX 说明书’

要更好地理解 DESIGN.md 这个技术，你可以将其核心定位为：“专门给 AI 编码助手（AI Coding Agents）阅读的‘UI/UX 说明书’或‘设计系统提示词（System Prompt）’”。

以下是帮助你深度、立体理解这项技术的 5 个关键维度：

1. 理解它的核心痛点：为什么需要它？

在 DESIGN.md 出现之前，如果你对 AI 说“帮我写一个设置页面”，AI 会基于它在互联网上学习到的通用代码逻辑来生成 UI，这往往会导致：

  • 风格不一致：这次生成的按钮是圆角的，下次生成的变方了；页面 A 的蓝色和页面 B 的蓝色有色差。
  • 缺乏品牌感：生成出来的界面通常非常“大众脸（Generic）”，没有企业的品牌规范。
  • 难以约束：将复杂的 Figma 导出文件或厚重的 JSON 规范喂给 AI，往往因为上下文过大、格式不匹配导致 AI 理解偏差。

DESIGN.md 正是为了解决这个问题而诞生的。它给 AI 建立了一个持久的、结构化的上下文，让 AI 在写每一行 UI 代码前，都先翻看这本“规范指南”。

2. 掌握它的“双层结构”（核心机制）

DESIGN.md 的精妙之处在于它采用了人类与 AI 共同最擅长阅读的 Markdown + YAML 混合格式。它的文件结构分为两个图层：

  1. YAML Front Matter（机器可读层）：
  • 位于文件顶部，由 --- 包裹。
  • 内容：精密的“设计令牌（Design Tokens）”，如具体的颜色 Hex 码、字体大小缩放（Typography）、圆角大小（Rounded）、间距（Spacing）等。
  • 作用：让 AI 精准掌握规范的客观数值，防止 AI 在写 CSS 时“瞎编”参数。
design.md design agent google-labs ui

DESIGN.md - 面向智能体描述视觉识别系统的格式规范

一种用于向编码智能体描述视觉识别系统的格式规范。DESIGN.md 让智能体对设计系统拥有持久、结构化的理解。

格式

DESIGN.md 文件将机器可读的设计令牌（YAML 前置元数据）与人类可读的设计原理（Markdown 正文）相结合。令牌为智能体提供精确值，正文则解释这些值为何存在以及如何使用。

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
  label-caps:
// ...

读取此文件的智能体将生成一个 UI：Public Sans 字体的深墨标题、温暖石灰石背景，以及波士顿陶土色的行动号召按钮。

快速开始

对照规范验证 DESIGN.md，捕获损坏的令牌引用、检查 WCAG 对比度比率，并输出结构化发现——所有结果均以智能体可处理的 JSON 格式呈现。

translationdesign.mddesignagentgoogle-labscli
链接

DSpark：结合半自回归生成与置信度调度的投机解码技术

这篇研究论文介绍了 DSpark，一个由北京大学和 DeepSeek-AI 联合开发的投机采样（Speculative Decoding）大模型推理加速框架。以下是该论文的核心要点总结：

核心痛点

传统的投机采样在提高大模型推理速度上面临两个瓶颈：

  1. 生成质量退化（后缀衰减）： 并行草稿模型（如 DFlash）虽然生成速度快，但因为各 Token 独立预测，缺乏前后依赖关系，容易产生语义冲突（多模态碰撞），导致后面 Token 的接受率急剧下降。
  2. 系统效率浪费： 在高并发的生产环境中，如果不加选择地验证所有生成的草稿 Token，会浪费宝贵的计算算力去验证那些极易被拒绝的末尾 Token，从而降低系统整体吞吐量。

DSpark 的核心架构与创新

DSpark 通过结合高吞吐的并行生成与自适应的负载感知验证，完美平衡了这两大难题：

1. 半自回归生成（Semi-Autoregressive Generation）

  • 并行骨干+轻量串行头： 保持昂贵的草稿模型主干完全并行（继承 DFlash 速度），但仅在输出端附加一个极轻量的串行模块（默认使用低秩因子化的 Markov 头，或使用 RNN 头）。
  • 效果： 在保持高 drafting 速度的同时，为一整块 Token 注入了 causal 上下文依赖，大幅缓解了后缀衰减问题。
paper dspark deepspec deepseek llm speculative-decoding draft-model

基于 DSpark 的投机解码训练框架原理与实现（论文+代码对照）

结合 DSpark 论文与代码实现，全面剖析 DeepSpec 的工作原理与核心组件。

项目地址：https://github.com/deepseek-ai/DeepSpec DSpark 论文：https://github.com/deepseek-ai/DeepSpec/blob/main/DSpark_paper.pdf

DSpark 是 DeepSeek 提出的一套无损加速大模型推理的“看人下菜碟”机制。 传统加速手段（推测解码）通常是让小模型一次性盲目盲猜一大串后续 Token，再让大模型统一验证。但这存在两个痛点：小模型猜得越往后越不准（多模态冲突导致“后缀衰减”）；高并发时，大模型花大力气去验证那些猜得不准的 Token，会严重压垮系统吞吐。

DSpark 的核心突破就在于两点：

  1. 猜得更准（半自回归）： 它在原有的单次并行生成网络后，拼了一个极轻量的小尾巴（顺序头），在几乎不增加延迟的情况下，让后面的 Token 能根据前面猜出的 Token 进行自适应修正，大幅提升长序列的猜测准确度。
  2. 动态裁剪（置信度调度）： 它能实时感知系统的硬件负载与并发压力。如果并发高、大模型很忙，或者发现后面小模型猜的置信度太低，它就会果断把不靠谱的后缀砍掉，只送靠谱的前缀给大模型验证。

通过这种“高质量猜测”与“负载感知动态裁剪”的结合，DSpark 在保障大模型输出质量完全无损的前提下，成功

dsparkpaperdeepspecdeepseekspeculative-decodingllminferencedraft-modelrejection-sampling
链接

SkVM - 面向 LLM 技能的编译与运行时系统

一句话概括

把 Skill 当作"代码"、把 LLM 当作"异构处理器"，借鉴传统编译器（AOT + JIT）设计思想，首次为 LLM Agent 的 Skill 构建了跨模型、跨平台的编译与运行时系统。

一、核心问题：Skill 的"可移植性危机"

当前 Agent 把 Skill 当作原始文本直接塞给模型，导致同一 Skill 在不同模型/Harness 上表现天差地别。作者分析了 118,000+ 个 Skill（clawhub.ai + skills.sh），发现：

问题 数据
使用 Skill 后性能下降 15% 的任务
使用 Skill 后无变化 17% 的任务
至少一个模型无改善 87% 的任务
Token 开销暴增 最高 451%

三大失配：

  • P1 模型失配：Skill 假设模型能区分库 API 与 CLI，小模型直接翻车
  • P2 Harness 失配：同一模型在不同 Harness（Claude Code / OpenCode / BareAgent）上结果差异巨大
  • P3 环境失配：缺少依赖包时，Qwen 成功率从 100% 暴跌到 33-67%，且 Token 消耗翻倍

二、核心类比：编程语言的演进

flowchart LR
    subgraph Stage1["Stage 1: Assembly"]
        A1["汇编代码"]
        B1["Assembler & Linker"]
        C1["操作系统"]
        D1["硬件"]
        A1 --> B1 --> C1 --> D1
    end
    
    subgraph Stage2["Stage 2: High-level Language"]
        A2["C / Java 代码"]
        B2["C Compiler / JVM"]
        C2["操作系统"]
        D2["硬件"]
        A2 --> B2 --> C2 --> D2
    end
    
    subgraph Stage3["Stage 3: Natural Language (Skill)"]
        A3["Skill (自然语言程序)"]
        B3["SkVM<br/>Compiler & Runtime"]
        C3["Agent Harness"]
        D3["LLM (异构处理器)"]
        A3 --> B3 --> C3 --> D3
    end
    
    style Stage3 fill:#e6f3ff,stroke:#0066cc,stroke-width:2px
    style B3 fill:#ffcccc,stroke:#cc0000,stroke-width:2px

    %% 关键改动：使用隐形连线强迫子图横向排列
    Stage1 ~~~ Stage2 ~~~ Stage3

关键洞察：Skill 是"自然语言程序"，LLM 是"异构处理器"，但缺少编译器

arxiv paper skill agent compiler jit harness skvm
链接

MinerU - 高精度文档解析引擎，为 LLM / RAG / Agent 提供结构化数据

MinerU 是 OpenDataLab 开源的一款高精度文档解析引擎，能把 PDF、DOCX、PPTX、XLSX、图片和网页转换成结构化的 Markdown 或 JSON，方便下游 LLM、RAG 和 Agent 工作流直接消费。

What｜是什么

MinerU 的定位是“为 LLM 准备数据”的文档解析基础设施。它支持多种输入格式，输出则强调人类阅读顺序和语义结构：

  • 输入：PDF、图片、DOCX、PPTX、XLSX、网页
  • 输出：Markdown、JSON（按阅读顺序）、多模态 Markdown，以及可可视化的中间格式
  • 核心能力：自动去除页眉页脚页码、识别多栏与复杂版式、提取表格/图片/公式、公式转 LaTeX、表格转 HTML、OCR 识别 109 种语言
  • 提供 CLI、FastAPI、Gradio WebUI、Docker 和 mineru-router 等多种使用形态

Why｜为什么值得关注

MinerU 诞生于 InternLM 预训练过程中的实际需求，最初是为了解决科技文献中的符号转换问题。相比直接购买商业文档解析服务，它的几个亮点很突出：

  • VLM + OCR 双引擎：pipeline 后端快且省资源，vlm-engine / hybrid-engine 后端精度更高，可按场景选择
  • 全格式原生解析：3.0 以后陆续加入 DOCX、PPTX、XLSX 原生解析，避免先转 PDF 再解析带来的信息损失
  • 许可更友好：从 AGPLv3 切换到基于 Apache 2.0 的 MinerU Open Source License，降低了商业部署门槛
  • 数据说话：pipeline 后端在 OmniDocBench v1.6 上整体得分 86.47，hybrid 后端可达 95.39（high 模式）
mineru opendatalab document-parsing pdf rag llm ocr vlm open-source python

链接

Excalidraw - 开源手绘风格虚拟白板

Excalidraw 是一款广受欢迎的开源虚拟白板工具，主打“手绘风格”的图表绘制体验。它让用户在数字画布上画出看起来像随手涂鸦、却又结构清晰的示意图，既保留了手绘的自然感，又具备现代协作工具的便利。

其核心定位可以概括为以下几个方面：

1. 产品核心能力

  • 手绘风格画布：无限画布 + 手绘质感线条，默认的“潦草”风格让技术图表少了些冰冷，多了些亲和力。
  • 实时多人协作：支持多人同时编辑，并通过端到端加密保护协作数据。
  • 本地优先：自动保存到浏览器本地，断网也能继续绘制；支持导出 .excalidraw JSON 文件。
  • 丰富导出格式：可导出 PNG、SVG，或复制到剪贴板，也能生成只读分享链接。
  • 完整绘图工具：矩形、圆形、菱形、箭头、自由绘制、文字、橡皮擦、素材库等一应俱全。

2. 技术栈与开源信息

  • 主要基于 TypeScript 和 React 构建，代码质量高，社区活跃。
  • 采用 MIT 许可证，完全免费开源。
  • 在 GitHub 上已获得超过 126k Stars 和 14.2k Forks。
  • 支持 PWA，可离线使用；也提供 Docker 部署方式。

3. 生态集成

Excalidraw 不只是独立的在线白板，它已经被集成到众多知名工具中：

  • Obsidian：通过插件在笔记中直接绘图。
  • VS Code：官方扩展让开发者在编辑器内画架构图。
  • Notion、Replit、CodeSandbox、Google Cloud：均被采用为内置或推荐绘图方案。
  • npm 包 @excalidraw/excalidraw：开发者可将白板能力嵌入自己的 React 应用。
excalidraw whiteboard diagram drawing-tools open-source collaboration react typescript pwa

本周 AI 新闻 20260626

本周主线：Google 一周内失去四位顶尖 AI 科学家，OpenAI 以 GPT-5.5-Cyber 正面回应 Anthropic 的网络安全布局，SpaceX 凭 63 亿美元算力协议巩固全球最大商业 AI 基础设施商地位，中美 AI 出口管制进入双向对抗阶段。

本周看点

  1. Google 遭遇史上最严重 AI 人才流失潮：诺贝尔化学奖得主 John Jumper 与 Gemini 核心人物 Noam Shazeer 等四位科学家在一周内相继离开，分别加入 Anthropic 与 OpenAI，Alphabet 市值蒸发超 2700 亿美元，Gemini 3.5 Pro 发布计划受挫。
  2. OpenAI 发布 GPT-5.5-Cyber 与 Patch the Planet：直接回应 Anthropic 的 Project Glasswing，将 AI 漏洞扫描嵌入 Codex，并承诺在 30 天内修复 cURL、Python、Linux 内核等 30 多个开源项目的安全漏洞。
  3. SpaceX 与 Reflection AI 签下 63 亿美元算力大单：每月 1.5 亿美元、为期三年的 GB300 算力租赁协议，使 SpaceX 的 AI 算力合同承诺收入超过 800 亿美元，成为全球最大商业 AI 基础设施提供商。
  4. Anthropic 把 Claude 智能体嵌入 Slack：Claude Tag 正式上线，企业用户可在任意频道 @Claude 调用智能体，Anthropic 内部称其已贡献产品团队 65% 的代码产出。
  5. 中国反制美国 AI 出口管制：6 月 24 日，中国将 56 家美国企业列入制裁清单，禁止部分企业参与政府采购并实施出口管制，标志 AI 技术出口战从单向限制转向双向对抗。
ai-weeklyopenaianthropicgooglespacexagentcybersecurityfunding

发布

免费在线翻译工具：无需注册的多源翻译与朗读

免费在线翻译工具是什么

免费在线翻译工具是一款纯前端的浏览器翻译工具，支持 MyMemory、Lingva、LibreTranslate 三种翻译源，无需注册、无需 API Key 即可使用。它采用左右分屏设计，输入内容后会实时翻译，并支持基于 Web Speech API 的本地语音朗读。所有设置与偏好都保存在浏览器本地，文本不会上传至任何服务端。

核心功能

  • 多翻译源可选：支持 MyMemory（免费在线）、Lingva（免费代理）、LibreTranslate（自托管）三种后端，可在设置中一键切换。
  • 实时翻译：输入内容 600ms 防抖后自动发起翻译，切换语言或翻译源时也会即时更新译文。
  • 语言标签页：源语言支持「检测语言」，目标语言覆盖中文、英语、日语、德语、法语、西班牙语等常用语言。
  • 一键互换语言：点击中间互换按钮即可交换源语言与目标语言，并自动重新翻译。
  • 语音朗读：基于 Web Speech API，支持朗读原文与译文；中英文自动检测，英文优先使用 Ava / Samantha 等高质量语音。
  • 朗读播放/停止切换：朗读按钮可一键停止当前播放，再次点击则重新朗读。
  • 长文本分句：朗读时按句末标点自动切分，避免单条语音过长被浏览器截断。
  • 复制译文：点击复制按钮即可将翻译结果复制到剪贴板。
  • 本地记忆偏好：使用 localStorage 自动保存源语言、目标语言、翻译源及服务地址，下次打开无需重新设置。
  • 响应式布局：桌面端左右分屏，窗口自适应高度；移动端自动上下堆叠，小屏也能流畅使用。
tool browser localstorage machine-translation online-translator speech-synthesis translation web-speech-api

笔记

浏览器原生语音合成（TTS）开发经验

最近先后在站点上线了两个纯前端的朗读工具：Read Aloud 和 智能朗读阅读器。两者都基于浏览器的 Web Speech API 实现，没有后端、没有上传、没有第三方语音服务。开发过程中踩了一些坑，也积累了一些可复用的经验，记录如下。

一、Web Speech API 基础

浏览器 TTS 的入口非常简洁：

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
synth.speak(utterance);

window.speechSynthesis 负责全局的语音队列，SpeechSynthesisUtterance 则是每一次发音的单元。在真正可用之前，建议先做兼容性判断：

if (!window.speechSynthesis) {
  alert('当前浏览器不支持 Web Speech API，无法使用朗读功能。');
  return;
}

目前 Safari、Chrome、Edge 等现代浏览器都支持该 API，但不同浏览器在语音质量、语音名、事件触发等方面差异明显，后面会详细说。

二、语音列表是异步加载的

第一次调用 speechSynthesis.getVoices() 时，返回的数组经常为空。

ttstext-to-speechweb-speech-apispeech-synthesisbrowserfrontendjavascript
发布

智能朗读阅读器：浏览器本地中英文长文朗读工具

智能朗读阅读器是什么

智能朗读阅读器是一款基于 Web Speech API 的纯前端朗读工具。它采用左右分屏设计：左侧为阅读区，右侧为可折叠编辑区，适合朗读中文小说、英文范文、演讲稿等长文本。所有文本处理与语音合成都在浏览器本地完成，无需上传、无需后端。

核心功能

  • 左右分屏阅读：左侧阅读区、右侧可折叠编辑区，加载大文本后阅读区独立滚动，页面不再被撑高。
  • 自动分句与高亮：按中英文标点自动切分长文，朗读时当前句高亮显示，已读句子自动淡化。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 语速 / 音调调节：语速支持 0.4x ~ 2.5x，音调支持 0.5 ~ 2.0。
  • 字号 / 行高调节：阅读区字号与行高可调，偏好自动保存到本地。
  • 语音选择：自动加载系统语音，英文文本默认优先使用 Ava 语音。
  • 上下句跳转：支持按钮或键盘 ← / → 快速切换到上一句 / 下一句。
  • 循环播放：支持单句循环与全文循环，适合重点句子跟读或反复听诵。
  • 朗读进度条：底部实时显示整体朗读进度。
  • 预设经典文本：内置《背影》、I Have a Dream、Gettysburg Address 等范文，一键体验。
  • 主题切换：支持浅色 / 深色模式，长时间阅读更护眼。
  • 文件导入：支持 .txt / .md 等文本导入，也支持拖拽文件到阅读区。
  • 快捷键：空格播放 / 暂停，Ctrl + Enter 加载文本，Esc 停止，← / → 切换句子。
  • 纯本地运行：无后端、无上传、无依赖，纯静态 HTML 页面。
tool tts text-to-speech reading-companion reader web-speech-api speech-synthesis browser localstorage

JiuwenSwarm 架构设计、工作原理与核心模块深度剖析

JiuwenSwarm 是什么？

JiuwenSwarm 是一个华为云开源的分布式 AI 多智能体协同与能力自进化系统。简单说，它是一个让 AI 智能体像团队一样协作、并且越用越聪明的系统。

核心特色

1. 三种执行模式，适配不同场景

模式 怎么工作 适合
Plan 模式 单 Agent 深度推理，自带任务规划 Rail，边思考边执行 复杂任务、多步骤分析
Performance 模式 卸掉规划护栏，直问直答，延迟最低 快速问答、简单查询
Swarm 模式 Leader 拆解任务，组建多 Agent 团队并行协作，可跨机器 大型复杂工作、多角色分工 
flowchart LR
    M["用户输入"] --> P{模式选择}
    P -->|agent.plan| A1["单 agent 深度规划<br/>+ task planning rail"]
    P -->|agent.fast| A2["单 agent 快速响应<br/>- heavy rail"]
    P -->|team| A3["leader 拆解任务<br/>+ teammate 分布式执行"]
    A1 --> R["输出结果"]
    A2 --> R
    A3 --> R

2. 可部署可扩展

Gateway + AgentServer 双进程架构，支持：

  • 多用户隔离：SessionMap 按 (channel_id, user_id, mode, project_dir) 四元组独立缓存 Agent 实例
  • 多端接入：Web / TUI / 桌面端 / 飞书 / 钉钉 / 企微 / Telegram / Discord
  • 分布式：Swarm 模式下可用 pyzmq + PostgreSQL 跨机协作，Leader 在主节点，Teammate 跑在工作机

3. 技能自进化——越用越聪明

这是最创新的部分。系统不训练模型权重，而是通过一个确定性状态机流水线自动迭代 Skill 定义：

jiuwenswarmagent智能体多智能体swarm架构设计源码分析skill-evolutionpythonlarge-language-model
发布

高中英语3500词：浏览器本地背单词工具

高中英语3500词是什么

高中英语3500词是一款纯前端、无需安装的浏览器背单词工具。它内置高考核心词汇，采用卡片式记忆设计，支持释义隐藏、朗读、收藏标记和进度统计，所有学习状态都保存在浏览器本地。

核心功能

  • 内置高考词汇库：覆盖高中英语 3500 核心词，打开即用，无需上传词表。
  • 卡片式记忆：大字显示单词，点击卡片或按空格即可显示/隐藏中文释义。
  • 顺序与随机模式：支持顺序背诵和随机抽词，一键切换复习方式。
  • 朗读发音：基于 Web Speech API，支持单词朗读、语速调节和语音选择。
  • 自动朗读设置：可开启切换单词时自动朗读、显示释义时自动朗读。
  • 收藏/标为不熟：遇到重点或不会的单词，按 S 或点击星标收藏，便于集中复习。
  • 仅看收藏过滤：开启过滤后只显示已收藏单词，针对性巩固薄弱词汇。
  • 显示释义后自动下一个：可设置延迟时间，自动推进到下一张卡片。
  • 单词列表与搜索：侧滑单词列表支持按英文或中文释义快速搜索跳转。
  • 进度统计：顶部显示当前进度条和第几个 / 总词数。
  • 学习状态本地保存：收藏、设置、释义显示状态均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格/点击显示释义、← → 翻页、R 随机、P 朗读、A 自动朗读、S 收藏、L 列表、G 设置。

使用方式

  1. 打开 高中英语3500词。
  2. 点击卡片或按空格查看释义。
  3. 熟悉的词按 → 或点击"下一个 →"继续；不熟悉的词按 S 收藏。
  4. 需要听发音时，按 P 或点击 "🔊 朗读"。
  5. 想针对性复习时，打开设置开启"仅显示收藏"。
tool english-words vocabulary flashcards 背单词 web-speech-api localstorage education browser
发布

Read Aloud：浏览器本地长文朗读器

Read Aloud 是什么

Read Aloud 是一款纯前端、无需上传文本的浏览器朗读工具。它基于 Web Speech API 实现，全部文本处理与语音合成都在本地完成，适合朗读英文范文、中文小说、演讲稿、技术文档等长文本。

核心功能

  • 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
  • 自动分句：按段落和标点自动切分长文，避免单次文本过长被浏览器截断。
  • 当前句高亮：朗读时文本区切换为阅读视图，当前句子高亮并自动滚动到视野中央。
  • 点击跳转播放：在阅读视图中单击任意句子，即可从该句开始播放。
  • 语速与音调调节：支持 0.5x ~ 2.0x 语速调节，以及 0.5 ~ 2.0 的音调调节。
  • 多语音选择：自动根据语言选择系统语音，也支持手动切换。
  • 中英文支持：自动检测中英文比例，或手动指定中文 / 英文。
  • 进度与时间显示：实时显示当前句数、总句数和已用时间。

使用方式

  1. 打开 Read Aloud。
  2. 将需要朗读的文本粘贴到编辑区。
  3. 点击 ▶ 朗读 开始播放。
  4. 需要暂停时点击 ⏸ 暂停，或点击 ⏹ 停止 结束朗读并恢复编辑。

快捷键

  • 在编辑区内按 Ctrl / ⌘ + Space：播放 / 暂停。
  • 焦点在编辑区外时，按 Space：快速播放 / 暂停。
  • 按 Esc：关闭帮助窗口。

浏览器兼容性

Read Aloud 依赖 Web Speech API，建议使用 Safari、Chrome、Edge 等

tool tts text-to-speech read-aloud web-speech-api speech-synthesis browser local-tts
发布

极简长文朗读器：左右分屏实时朗读工具

极简长文朗读器是什么

极简长文朗读器是一款基于浏览器 Web Speech API 的本地文本朗读工具。它采用左右分屏的极简设计：左侧输入文本，右侧实时生成可朗读的阅读视图，全部处理都在浏览器内完成，无需上传、无需后端。

核心功能

  • 左右分屏实时同步：左侧编辑文本，右侧阅读视图即时解析渲染，边写边读。
  • 中英文智能识别：自动判断文本为中文还是英文，也可手动选择语种。
  • 按句高亮：朗读时当前句子以黄色高亮显示，并自动滚动到视野中央。
  • 点击跳转播放：点击阅读视图中的任意句子，即可从该句开始朗读。
  • 语速调节：支持 0.5x ~ 2.0x 语速调节，拖动滑块即可实时生效。
  • 发音人选择：自动加载系统语音，支持手动切换中英文发音人。
  • 防中断保活：针对部分浏览器长段朗读容易中断的问题，内置保活机制。
  • 内置范例：一键加载中英文示例文本，快速体验朗读效果。

与 Read Aloud 的区别

特性 极简长文朗读器 Read Aloud
界面 左右分屏，实时同步 编辑/阅读视图切换
分句 按中英文标点实时切分 段落 + 句子双层切分
音调调节 无 支持
进度显示 无 句数 / 时间
设计 极简 Tailwind 风格 卡片式工具风格

可以根据个人喜好选择更适合自己的一款，两者都是纯浏览器本地运行。

tool tts text-to-speech reader web-speech-api speech-synthesis browser minimalist 在线工具

发布

剪贴板备份：浏览器本地剪贴板历史管理工具

剪贴板备份是什么

剪贴板备份是一款纯前端、无需后端的浏览器剪贴板历史管理工具。它支持保存文本、HTML、RTF、图片等多种剪贴板格式，利用浏览器 IndexedDB 本地持久化存储，随时恢复或下载历史内容。

核心功能

  • 多格式剪贴板捕获：支持保存文本、HTML、RTF、URL 列表、PNG / JPEG / GIF / WebP 图片等多种剪贴板格式。
  • 本地持久化存储：所有备份数据通过 IndexedDB 存储在浏览器本地，刷新页面或关闭浏览器后数据不丢失。
  • 多格式预览：支持按格式切换预览，文本、HTML、图片分别渲染，HTML 内容经 DOMPurify 安全过滤。
  • 一键恢复复制：点击复制按钮即可将备份内容还原到系统剪贴板，图片自动转换为 PNG 格式以兼容 Clipboard API。
  • 逐格式下载：每个备份的每种格式均可单独下载为对应文件（txt、html、rtf、png 等）。
  • 相对时间显示：备份时间以"刚刚""5 分钟前""2 小时前"等相对时间展示，直观易读。
  • 全页粘贴支持：不仅可以在粘贴区域粘贴，在页面任意位置按 Ctrl+V 均可触发备份。
  • 批量清空：支持一键删除所有备份，操作前需确认，防止误删。

使用方式

  1. 打开 剪贴板备份。
  2. 点击页面粘贴区域并按 Ctrl + V 粘贴内容，或在页面任意位置直接粘贴。
  3. 备份自动保存并显示在列表中，可预览、复制或下载。
  4. 点击 清空全部 可删除所有历史备份。
tool clipboard backup browser indexeddb localstorage clipboard-api dompurify javascript
发布

SVG 渲染器：在线 SVG 实时预览工具

SVG 渲染器是什么

SVG 渲染器是一款纯前端的在线 SVG 预览工具。它支持粘贴 SVG 代码或从 URL 加载 SVG 文件，右侧实时渲染预览，全部处理都在浏览器内完成，无需上传、无需后端。

核心功能

  • 双模式输入：支持直接粘贴 SVG 代码，或输入 URL 从网络加载 SVG 文件。
  • 实时预览：左侧编辑或粘贴代码，右侧即时渲染 SVG 图形，所见即所得。
  • 安全沙箱渲染：使用 DOMPurify 对 SVG 进行安全过滤，并在沙箱 iframe 中渲染，防范 XSS 和恶意脚本。
  • 智能宽高比：自动解析 SVG 的 viewBox 或 width/height 属性，保持正确的图形比例。
  • URL 分享：通过 URL hash 加载的 SVG 地址可直接分享，他人打开即可查看同一图形。
  • 响应式布局：桌面端左右分屏，移动端自动切换为上下堆叠，适配各种设备。
  • 内置示例：首次打开自动加载示例 SVG，快速体验渲染效果。

使用方式

  1. 打开 SVG 渲染器。
  2. 点击 粘贴 标签，将 SVG 代码粘贴到左侧编辑区。
  3. 或点击 URL 标签，输入 SVG 文件地址后点击 加载。
  4. 右侧预览区即时显示渲染结果。

浏览器兼容性

SVG 渲染器为纯静态 HTML 页面，兼容所有现代浏览器。建议使用 Chrome、Edge、Safari 或 Firefox 最新版本。

技术栈

  • HTML + CSS + JavaScript
  • DOMPurify（SVG 安全过滤）
  • 无后端、无依赖、纯静态页面
tool svg 在线工具 dompurify preview iframe browser graphics
发布

DOT 文件渲染器：在线 Graphviz 图形预览工具

DOT 文件渲染器是什么

DOT 文件渲染器是一款纯前端的在线 Graphviz 图形预览工具。只需在浏览器中粘贴 DOT 语言描述的图结构代码，即可实时渲染为有向图或无向图 SVG，支持通过 URL 片段直接分享图形代码，无需安装任何本地软件。

核心功能

  • 实时渲染：输入 DOT 代码后自动防抖渲染，500ms 内即时出图。
  • URL 分享：图形代码自动编码到 URL 片段中，复制链接即可分享完整图形。
  • 加载示例：内置完整流程图示例，一键体验渲染效果。
  • 错误提示：DOT 语法错误时，在输出区显示详细错误信息。
  • 纯浏览器运行：基于 Viz.js 在浏览器端完成全部渲染，无后端、无上传。

使用方式

  1. 打开 DOT 文件渲染器。
  2. 在输入区粘贴您的 .dot 文件内容。
  3. 图形会自动渲染到下方的输出区。
  4. 复制当前浏览器地址栏中的 URL 即可分享图形。

支持的图类型

  • 有向图（digraph）
  • 无向图（graph）
  • 节点样式、边标签、布局方向（rankdir）等 Graphviz 标准属性

技术栈

  • HTML + CSS + JavaScript
  • Viz.js（WebAssembly 版 Graphviz）
  • 无后端、无依赖、纯静态页面

提示词

我要设计一个WEB应用（HTML），在线渲染DOT文件。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。
tool dot graphviz graph diagram visualization viz-js svg
发布

Markdown 渲染器：在线 Markdown 转 HTML 工具

Markdown 渲染器是什么

Markdown 渲染器是一款纯前端的在线 Markdown 转 HTML 工具。它调用 GitHub Markdown API 进行渲染，支持 GitHub Flavored Markdown (GFM) 标准，输出干净的 HTML 代码和实时预览，无需安装任何软件，打开浏览器即可使用。

核心功能

  • GitHub API 渲染：调用 GitHub 官方 Markdown API，渲染结果与 GitHub 页面保持一致。
  • GFM 模式切换：支持标准 Markdown 和 GitHub Flavored Markdown 两种模式，一键切换。
  • 实时预览：渲染后的结果即时显示在预览区，包括代码高亮、表格、引用块等样式。
  • 自动清理 HTML：可选清理隐藏元素（aria-hidden、nofollow 等），整理 heading 结构，输出更干净的 HTML。
  • 自动生成目录：根据文章中的 h2-h6 标题自动提取并生成可点击的目录导航。
  • 复制 HTML：一键复制清理后的 HTML 源码，方便粘贴到博客或编辑器中。
  • 复制富文本：一键复制带格式的富文本，可直接粘贴到 Word、Notion、邮件等支持富文本的地方。
  • 自动保存：输入内容自动保存到浏览器 localStorage，刷新页面不丢失。

使用方式

  1. 打开 Markdown 渲染器。
  2. 在编辑区粘贴需要渲染的 Markdown 文本。
  3. 根据需要勾选"使用 GitHub Flavored Markdown (GFM)"。
  4. 点击渲染按钮，预览区和 HTML 输出区会同步更新。
  5. 点击复制 HTML或复制富文本获取渲染结果。
tool markdown 在线工具 github-flavored-markdown github-api html converter localstorage
发布

二维码识别器：支持图片上传、剪贴板粘贴与摄像头扫码

二维码识别器是什么

二维码识别器是一款纯前端在线 QR 码识别工具，基于 jsQR 库实现。它支持图片上传、拖拽、剪贴板粘贴以及摄像头实时扫码四种方式，所有图片处理均在浏览器本地完成，不会上传到任何服务器，保护隐私安全。

核心功能

  • 图片上传识别：点击或拖拽图片文件到识别区域，即可自动解析二维码内容。
  • 剪贴板粘贴识别：直接按 Ctrl / ⌘ + V 粘贴剪贴板中的图片，无需先保存文件。
  • 摄像头实时扫码：调用设备摄像头，持续扫描画面中的二维码，适合快速识别实物上的 QR 码。
  • 前后摄像头切换：支持在设备的前置与后置摄像头之间切换，适应不同扫码场景。
  • 双指缩放对焦：摄像头模式下支持双指捏合缩放画面，双击重置缩放，方便对准远距离或微小二维码。
  • UTF-8 中文支持：底层使用 TextDecoder('utf-8') 解码二进制数据，确保中文、日文等非 ASCII 字符正确显示。
  • 链接自动识别：识别结果若为 URL，自动渲染为可点击的超链接，一键跳转。
  • 一键复制结果：识别后点击"复制识别结果"按钮，快速将内容复制到剪贴板。
  • 纯前端隐私安全：所有图像处理在本地完成，图片不离开浏览器，无需担心隐私泄露。

使用方式

图片识别模式 打开 二维码识别器。 点击"图片识别"标签（默认）。 拖拽图片到识别区域，或点击选择文件，也可以直接粘贴剪贴板图片。

tool qr-code scanner decoder browser jsqr camera javascript file-reader-api clipboard-api media-devices-api