编写 HTML 代码有时并不轻松，尤其是在需要构建清晰结构、修复错误，并让页面在不同设备上流畅运行时。HTML 技能通过指导 AI 智能体创建更好的布局、提升标记质量、加快开发速度，来简化这些工作。借助合适的技能，你可以在遵循良好编码规范的同时更高效地构建网页。在本文中，我们将介绍一系列 HTML 技能，帮助你优化工作流程、打造更好的项目。
什么是 HTML 技能？
HTML 技能是一套预先定义的流程和针对具体任务的指引，用于改进 AI 智能体处理 HTML 相关工作的方式。它们支持诸如网页结构搭建、内容排版、HTML 邮件创建、标记审查和代码优化等操作。这些技能让 AI 辅助的 HTML 工作流程更高效、更一致，也更易于管理。
探索 Kimi 内置的 HTML 任务技能
Kimi 提供多种内置技能，帮助你更轻松地完成 HTML 相关任务，包括创建清晰的页面结构、优化设计以及自动化重复的编码工作。这些技能针对不同的使用场景设计，从搭建落地页和邮件模板，到创建交互式可视化图形和编辑排版页面。以下是 Kimi 中一些实用的技能，可以支持你的 HTML 项目。
| 技能名称 | 技能描述 |
|---|---|
| lp-proto-gen | 一键生成结构完整的落地页HTML原型，包含Hero主标题、Social Proof合作品牌、Features产品特性、Pricing定价方案和CTA行动召唤五大核心板块，输出为自包含HTML文件（CSS内联）可直接在浏览器中预览。当用户请求生成落地页、营销页、产品主页的HTML原型、线框图或快速demo，或提及“Landing Page”、“营销页”、“产品主页”等关键词时触发。 |
| html-mail-builder | 生成兼容 Outlook/Apple Mail 的 HTML 邮件模板，采用 table 布局和 inline CSS 确保一致渲染，支持响应式设计。适用于欢迎邮件、促销邮件、密码重置、通知邮件和订单确认邮件等场景。当用户需要创建或设计营销邮件（EDM）、事务性邮件、Newsletter，或提及邮件模板、HTML 邮件、兼容性设计等关键词时触发。 |
| html-email-builder | 生成兼容 Outlook 等主流邮件客户端 HTML Newsletter，使用 table 布局和 inline CSS 确保渲染一致，支持单栏、双栏、Hero Banner、内容摘要等多种版式。当用户需要制作公司周报、产品公告、营销邮件、活动邀请函或内容摘要邮件，或提及 Newsletter、HTML 邮件、邮件模板、兼容 Outlook 等关键词时触发。 |
| data-viz-gen | 从 JSON 数据生成自包含的 HTML/SVG 信息图，支持 KPI 统计卡片、分组柱状图对比、流程图和混合仪表盘四种类型，提供 8 套配色方案和 24 个内置图标，输出完全自包含的 HTML 文件，无需外部依赖。当用户需要数据可视化、信息图、图表、仪表盘，或提及生成图表、制作 dashboard、展示统计数据等请求时触发。 |
| chrono-flow | 根据JSON数据生成精美的交互式时间线HTML页面，支持垂直、水平、双侧三种布局，可自定义主题色、展开详情，并适配移动端。适合展示项目里程碑、产品版本记录、公司发展历程或个人简历。当用户提及制作时间线、历程图、历史记录可视化，或需要将一系列事件、日期与描述数据转换为网页时触发。 |
| journalistic-portrait-cn | 创建复刻《南方人物周刊》视觉设计的中文杂志风格 HTML 网页。适用于特稿版面、带红色边框的封面页、配肖像照片的目录页，以及带编辑章节标题的双栏内页，复刻中文周刊的排版与配色。 |
如何使用 Kimi 中的 HTML 技能？
Kimi 让使用 HTML 技能创建网页、邮件模板、视觉排版及其他网页项目变得简单。你可以启用某项技能，提供你的需求，让 Kimi 根据需要生成清晰的 HTML 输出。按照以下步骤即可开始使用。
第 1 步：输入技能命令
在 Kimi 聊天框中输入 HTML 技能命令，激活你想使用的特定技能。
第 2 步：开始任务
选择一个技能，例如 /journalistic-portrait-cn，然后描述你想创建的编辑风格网页类型。提供关于文章布局、板块、排版和视觉风格的细节，Kimi 会根据你的需求生成一个 HTML 页面。
提示词示例：
Kimi 分析你的指令，应用 journalistic-portrait 技能，自动创建带有编辑格式、排版和页面板块的清晰 HTML 布局。
第 3 步：查看输出结果
Kimi 生成新闻风格的 HTML 页面后，查看其设计、内容结构和格式。你可以调整布局、进行修改，或将完成的文件用于发布和展示需求。
接入外部 HTML 技能，获得更多灵活性
Kimi 内置的 HTML 技能可以覆盖许多常见任务，而外部技能能帮助你扩展工作流程，获得更多专业功能和创作可能性。这些由社区开发的技能为网页设计、演示文稿、图表、动画、视觉内容和前端开发提供了额外支持。可以探索这些外部 HTML 技能，找到适合你具体项目的一种。
| 技能名称 | 说明 | 链接 |
|---|---|---|
| effective-html | 用于制作简洁优雅的 HTML 计划、架构图或其他任意内容的 Agent 技能。包含三种技能：html（创建符合 effective HTML 参考规范的 HTML 文件）、html-diagram（构建以 SVG 为主的全屏 HTML 架构/技术栈图）和 html-plan（effective HTML 风格的 HTML 计划页面）。 | https://github.com/plannotator/effective-html |
| frontend-slides | 用于从零创建或通过转换 PowerPoint 文件来制作精美 HTML 演示文稿的编程 agent 技能。无依赖、单一 HTML 文件（内联 CSS/JS）、视觉风格探索、PPT 转换、经过筛选的反 AI 套路样式，以及大胆的模板包。 | https://github.com/zarazhangrui/frontend-slides |
| skill-canvas-video | 使用 HTML5 Canvas 和 JavaScript 制作动画视频的 Agent 技能，可导出为 MP4，支持主流视频平台的视频格式。包含时间轴规划、Canvas 图元、浏览器内校验，以及基于 Puppeteer 和 FFmpeg 的导出功能。 | https://github.com/siegerts/skill-canvas-video |
| generate-design | 用于创建可复用、可供 AI 读取的设计系统文档以及配套 HTML 预览页面的 Agent 技能。可根据项目代码、截图、参考链接或产品创意生成带 YAML 令牌的 DESIGN.md、preview.html 和 preview-dark.html。 | https://github.com/lingkejia/agent-skills |
| visualise | 用于在 agent 对话中渲染内嵌交互式视觉内容——SVG 图表、HTML 组件、图表和说明图——的 Agent 技能。采用渐进式披露方式，配有设计系统、组件、图表和图表参考文档。输出为原始 HTML/SVG 片段。 | https://github.com/bentossell/visualise |
| starry-slides | 以 HTML 为源文件的 AI 幻灯片和演示文稿编辑器。内置访谈式流程以收集需求，支持模板参考和对现有演示文稿的修改。可通过 npx skills add StarryKit/starry-slides 安装。 | https://github.com/StarryKit/starry-slides |
| agent-html-skills | HTML 技能合集，提供美学指导、结构规则和基础规范。内容与平台无关，输出基础为 HTML。包含用于创建 HTML 文件、图表和计划的技能，支持基于剪贴板的交互。 | https://github.com/f-labs-io/agent-html-skills |
| semantic-html | 关于精心设计的语义化 HTML 的指导。强调使用原生 HTML 元素而非 ARIA、正确的文档结构以及无障碍基础。属于 webdev-agent-skills 的一部分，专注于 Web 标准和现代 CSS 实践。 | https://github.com/schalkneethling/webdev-agent-skills/ |
| frontend-design | 适用于主流 AI 的跨客户端可移植前端设计技能。涵盖布局、响应式设计、组件架构和视觉设计系统，并支持 MCP 回退。 | https://github.com/practicalswan/agent-skills/blob/main/frontend-design/SKILL.md |
如何在 Kimi 中导入并使用外部 HTML 技能？
外部 HTML 技能可以让你为网页设计、编码、视觉布局以及其他基于 HTML 的任务添加专门工具，从而扩展 Kimi 的能力。你可以从外部来源导入这些技能，让 Kimi 自动完成配置，并在工作流程中开始使用它们。按照以下步骤开始操作。
第 1 步：输入提示词
打开 Kimi，输入包含你想添加的外部 HTML 技能链接的提示词。Kimi 会识别技能来源并为安装做好准备。
提示词示例：
第二步：让 AI 自动安装技能
Kimi 会分析提供的来源，导入 semantic-html 技能，并在你的工作空间中完成配置。安装完成后，该技能即可帮助你创建结构清晰、无障碍友好的 HTML 代码。
第三步：使用该技能
添加技能后，在 Kimi 中启用它并提供你的 HTML 需求。你可以用它来改进页面结构、应用语义化元素，并遵循更好的 Web 开发规范。
让 HTML 开发更智能：定制专属技能
除了使用现成的技能，Kimi 还支持你构建适合自身编码需求的技能。利用已有的资源，你可以创建符合你偏好结构和开发规范的个性化工具。以下是在 Kimi 中创建专属 HTML 技能的方法。
第一步：进入文档转技能工具
打开 Kimi 的技能模块，选择「文档转技能」选项，从已有资料创建自定义 HTML 技能。
第二步：上传文件
上传与 HTML 相关的资源，例如编码规范、UI 指南、设计系统、示例网页或项目说明。Kimi 会分析这些文件，并将其转换为可在未来 HTML 任务中复用的技能。
第三步：创建并使用你的技能
处理完成后，你的专属 HTML 技能即可用于生成布局、遵循设计规则以及创建一致的代码结构等任务。每当你需要类似的 HTML 开发支持时，都可以使用它。
你还可以编辑该技能以完善其指令，或将其下载以便日后使用和分享。
如何有效使用 HTML 技能？
要有效使用 HTML 技能，需要明确目标、恰当定制，并持续改进。通过提供正确的上下文并优化工作流程，可以帮助 AI 智能体更准确、更一致地处理与 HTML 相关的任务。
根据具体任务选择 HTML 技能
选择与你的开发需求相匹配的 HTML 技能，例如创建电子邮件模板、组织网页内容结构、审查标记代码或改进 HTML 代码。针对特定任务的技能可以帮助 AI 智能体专注于正确的工作流程，产出更相关的结果。
提供清晰的项目需求和上下文
向 AI 智能体提供必要的信息，例如设计目标、目标用户、格式要求、编码规范和平台限制。上下文越充分，HTML 技能生成的结果就越贴合你的项目需求。
针对重复性工作流定制 HTML 技能
将 HTML 技能调整为适应你常见的任务，例如生成邮件通讯模板、格式化落地页或检查 HTML 一致性。定制后的技能有助于保持你偏好的标准，提高重复任务的效率。
检查并完善 AI 生成的 HTML 输出
始终检查生成的 HTML 在结构、兼容性、无障碍性和性能方面是否合格。利用以往任务中的反馈来改进技能，让未来的 AI 辅助工作流程更加准确。
将 HTML 技能与其他开发技能结合使用
HTML 任务通常与 CSS、JavaScript、测试和文档编写等工作流相关联。将 HTML 技能与相关技能结合使用，可以让 AI 智能体处理更广泛的开发流程，创建更完整的解决方案。
结语
借助合适的 HTML 技能，HTML 开发能够变得更快、更高效。它们有助于自动化重复性任务、提高代码一致性，并支持更好的 Web 体验。无论你是在创建简单页面还是复杂布局，Kimi 的 AI 技能都能简化你的工作流程，用更少的精力将想法变成可用的网站。