面向HTML的 Agent Skills
HTML Skill 涵盖网页的文档层：地标和标题骨架、描述某个区域是什么的语义元素、收集输入的表单、嵌入媒体、无障碍标记，以及浏览器、爬虫和社交展开所读取的 head 元数据。这些是工具类别的 Skill，因此它们往往作用于文件和标记，而不是运行中的应用。使用排序列表时，先浏览子主题，然后打开范围与你实际正在编写的标记相匹配的 Skill。如果你的页面主要是结构和语义，就从那里开始；如果你正在接表单或修复辅助技术行为，就跳到那些条目。在决定采用一个之前，用同一段标记比较两三个候选。
1 个先看18 个推荐选项
从这些开始。
HTML is the document: structure and meaning first, then forms, media, and the metadata that browsers and crawlers need.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
daisyui
Tailwind CSS 的官方 daisyUI 组件库 skill，在 HTML/JSX 中提供常见 UI 组件的类名、语义颜色和主题。
10,751 · 受欢迎程度
展开另外 17 个 Agent Skills
- 排名 09查看 Agent Skill可能匹配
accessibility
精选遵循 WCAG 2.2 指南审计和改进 Web 无障碍性。当被要求“改进无障碍性”、“a11y 审计”、“WCAG 合规”、“屏幕阅读器支持”、“键盘导航”或“使其无障碍”时使用。
53,493 · 受欢迎程度 - 排名 10查看 Agent Skill可能匹配
web-design-guidelines
官方审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。
- 排名 11查看 Agent Skill可能匹配
web-artifacts-builder
官方一套工具，用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂、多组件的 claude.ai HTML artifacts。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts——不适用于简单的单文件 HTML/JSX artifacts。
- 排名 12查看 Agent Skill可能匹配
impeccable
前端界面设计技能，涵盖Web UI的UX、视觉层级、可访问性、响应式行为、主题化和设计系统。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 13查看 Agent Skill可能匹配
baoyu-markdown-to-html
将 Markdown 转换为带样式的 HTML，支持微信兼容主题。支持代码高亮、数学公式、Mermaid（通过无头 Chrome 渲染为 PNG）、PlantUML、脚注、提示块、信息图，以及可选的底部外链引用。适用于用户要求“markdown to html”、“convert md to…”时。
31,784 · 受欢迎程度 - 排名 14查看 Agent Skill可能匹配
archify
创建精美的架构图、工作流图、时序图和数据流图，以独立交互式 HTML 形式呈现，内联 SVG 和主题。
140,157 · 受欢迎程度 - 排名 15查看 Agent Skill可能匹配
answer-me-with-html
精选将答案转化为单页可视化 HTML 讲解：模型撰写简短的 Markdown 草稿，捆绑的 CLI 构建单页。请主动且广泛地使用它，无需被要求，只要页面比纯文本更能帮助读者，即使纯文本也能用：任何关于某事物如何运作或各部分如何关联的讲解（流程、请求路径、架构、代码或文件夹结构、状态机、生命周期、历史）；任何带优缺点的比较、权衡或决策；任何诊断、审查或调查，尤其是需要排序的多个原因或发现；任何带表格、编号或排序列表、步骤、分支或多个部分的答案；或当用户说“I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图”时。拿不准时就用它：页面制作快速且成本低。也用于讲解视频（“make a video”、“做个视频”）以及更改其设置。仅在闲聊、简单的一行回答或用户要求纯文本时跳过。
- 排名 16查看 Agent Skill可能匹配
hyperframes-core
HyperFrames 合成契约：使用 data-* 时间属性、轨道、子合成和验证构建可渲染的 HTML 项目。
713,954 · 受欢迎程度 - 排名 17查看 Agent Skill可能匹配
hyperframes-registry
搜索、安装并将注册表区块和组件接入 HyperFrames 组合，包括将已安装项目接入 index.html。
751,896 · 受欢迎程度 - 排名 18查看 Agent Skill可能匹配
design-system
设计令牌架构、组件规范、CSS 变量和幻灯片生成，用于系统化设计系统。
35,435 · 受欢迎程度 - 排名 19查看 Agent Skill可能匹配
lark-apps
精选妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · 受欢迎程度 - 排名 20查看 Agent Skill可能匹配
agent-browser
面向 AI Agent 的浏览器自动化 CLI：通过 CDP 导航页面、填写表单、点击、截图、提取数据和测试 Web 应用。
985,975 · 受欢迎程度 - 排名 21查看 Agent Skill可能匹配
browser-act
面向 AI Agent 的浏览器自动化 CLI：获取渲染内容、填写表单、点击、截图和捕获网络响应。
声明的前提（自述）: Python
108,177 · 受欢迎程度 - 排名 22查看 Agent Skill可能匹配
penpot-audit-accessibility
官方根据 WCAG 2.1/2.2 AA（可选 AAA）审核 Penpot 设计，并生成结构化严重性报告：颜色对比度、触摸/目标尺寸、文本替代、标题层级和键盘/焦点顺序。提出修复建议——不会自动应用。还充当 brief-to-screen 循环中的 Evaluator。触发词：'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。
- 排名 23查看 Agent Skill可能匹配
penpot-build-from-code
官方将现有应用页面、视图或组件代码转换为绑定到现有设计系统的 Penpot 屏幕——把代码样式映射到语义 token，并复用库组件而非原始形状。适用于用户拥有真实代码/标记并希望逐节、按系统在 Penpot 中重建时。触发词：'build this in Penpot from code'、'turn this React/HTML/CSS into a Penpot screen'、'recreate this view in Penpot'、'port this page to Penpot'、'translate this component to Penpot bound to our tokens'、'code to Penpot'。
- 排名 24查看 Agent Skill可能匹配
penpot-design-to-code-review
官方对照已实现的代码（源组件或 Storybook story）审查 Penpot 设计，并输出结构化的 DRIFT 报告。适用于工程师需要确认构建与设计一致时：从选区提取 HTML/CSS，将其 token/结构/状态映射到代码组件，进行差异比对，并列出双方各自缺失的内容及严重程度和调和方案。未提供代码源时，可优雅降级为设计系统 token 检查。触发词：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
- 排名 25查看 Agent Skill可能匹配
penpot-rename-layers
官方将 Penpot 图层语义化重命名为 HTML 元素名称（nav、header、main、section、article、button、input、label、h1-h6、p、ul、li、img）或 kebab-case 角色名称，替换诸如 'Rectangle 12' 之类的自动生成名称。用于清理图层命名、为交接准备文件，或作为无障碍审计（标题层级）和设计到代码审查（语义映射）的前置条件。触发词：'rename layers'、'semantic layer names'、'rename to HTML elements'、'clean up layer names'、'fix layer naming'、'add semantic names to layers'、'prepare layers for handoff'。
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Document structure
- The skeleton of a page: landmarks, headings, and sections.
- Semantics
- Elements that say what a region is, not just how it looks.
- Forms
- How a page collects data from a person.
- Media
- Images, video, and other embedded content.
- Accessibility
- Markup that assistive technology can actually use.
- Metadata
- What browsers, crawlers, and social unfurls read in the head.
常见问题
- HTML 下会列出哪些类型的 Skill？
- 它们涵盖文档结构，如地标、标题和分区；语义；表单；媒体；无障碍性；以及元数据。每个都是工具类技能，意味着它作用于标记和文件，而非已部署的服务。
- 这个列表是如何排序的？
- 该列表按观察到的搜索需求排名，直接匹配主题的排在前，并对任何单一发布者能占据的技能数量设上限。这使页面顶部不会被单一来源主导。
- 我应该从结构还是无障碍入手？
- HTML 就是文档，因此结构和含义优先，其次是表单、媒体，以及浏览器和爬虫需要的元数据。选择与你面前标记匹配的子主题，然后在同一标记上比较候选技能。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 daisyui 的 SKILL.md 复制到 ~/.claude/skills/daisyui/（个人使用），或 .claude/skills/daisyui/（随项目共享）。
- 从 registry 安装——运行 npx skills add saadeghi/daisyui@daisyui。
- 或者从 daisyui 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。