关于 link-text-design
link-text-design 是一项编写清晰、易访问链接文本的设计技能，面向设计师和内容作者，强调链接脱离上下文时也能说明目标。
主要功能
- 01按目标编写链接文本
- 02避免使用泛化链接文本
- 03相同目标使用一致文本
- 04文件与新标签页链接提示
- 05为图片链接编写描述文本
适用场景
- 01检查适合屏幕阅读器导航的链接文本
- 02编写下载和外部链接标签
- 03核对跨页面链接与目标的一致性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/link-text-design确认已加载。
详细介绍
链接文本设计
编写能够提前告知用户链接去向的文本。屏幕阅读器用户通常会调出页面上的所有链接列表进行浏览——如果每个链接都写着“点击此处”或“阅读更多”，这个列表就毫无用处。
核心原则
每个链接脱离周围句子或上下文、单独阅读时，都应该能表达清楚含义。
规则
链接文本描述链接目标
- 好：“查看你的订单历史记录”
- 不好：“点击此处”
- 好：“下载无障碍指南（PDF，2.4MB）”
- 不好：“下载”
- 好：“阅读完整的 Q3 业绩报告”
- 不好：“阅读更多”
切勿使用泛泛的链接文本
以下短语脱离上下文后毫无意义：
- “点击此处”
- “阅读更多”
- “了解更多”
- “此处”
- “这个”
- “更多”
- “链接”
如果你发现自己写了这些内容，不妨问问自己：关于什么的更多内容？哪里的此处？答案就是你的链接文本。
相同文本，相同目标
如果两个链接的文本相同，它们必须指向同一位置。两个不同的“了解更多”链接指向不同页面，会让所有人感到困惑，也会让屏幕阅读器用户无所适从。
不同目标，不同文本
如果两个链接指向不同位置，它们的文本必须不同。
- 不好：“查看详情” / “查看详情”（分别指向不同产品）
- 好：“查看 Standard Plan 的详情” / “查看 Pro Plan 的详情”
特殊情况
在新窗口或新标签页中打开的链接
- 提醒用户：“查看政策（在新标签页中打开）”
- 或者使用带有替代文本的可见外部链接图标
文件链接
- 标明文件类型和大小：“年度报告（PDF，3.1MB）”
- 这样用户就能在决定下载前了解相关信息
正文中的链接
- 链接文本应是有意义的短语，而不是整句话
- 好：“查看支持语言的完整列表”
- 不好：“要查看支持语言的完整列表，请点击此处”
- 除非 URL 本身就是所需信息，否则不要将 URL 作为链接文本
图片链接
- 图片的替代文本即为链接文本
- 链接到首页的徽标：alt="Company name — home page"
- 链接图标：alt 描述操作，而不是图标本身
检查清单
- 每个链接单独阅读时都能表达清楚含义
- 没有泛泛的“点击此处”或“阅读更多”链接
- 相同的链接文本始终指向相同目标
- 文件链接标明类型和大小
- 在新窗口中打开的链接会提醒用户
- 图片链接具有描述性替代文本
评论
支持 Markdown