# 前端
60 个相关产品 · 中文解读 · 按热度排序
截至 2026-09-10,KanonAgent 库内有 60 个带「前端」标签的 AI agent 与工具,本页按真实热度排序。标签由中文拆解自动归纳,不是人工打的;数据可经公开 API 复核。
KaibanJS
KaibanJS 是一个基于 JavaScript 的多智能体系统框架，采用看板（Kanban）思维管理智能体任务流，适合可视化协作与任务调度的 AI 代理系统开发。
Goku – WASM (wllama)-powered LLM inference and model manager
基于 WASM（wllama）的 LLM 推理引擎与模型管理工具，可在浏览器中运行轻量级大模型，适合本地化、低延迟推理场景
Gridzzly - Visual CSS Grid Builder
通过拖拽方式可视化构建CSS Grid布局，无需记忆网格线或手动计算，一键生成可直接使用的干净HTML/CSS代码
Vibe PWA Starter-kit
Vibe PWA Starter-kit 是一个为独立开发者准备的生产级 SaaS 开发模板，集成认证、支付、部署、SEO 等完整功能，可快速搭建可交付的 SaaS 产品。
Front end skill pack for AI agents, with machine-enforced quality gates
专为 AI agent 设计的前端技能包，内置机器强制的质量门控，确保 agent 调用前端功能时的稳定与安全
Which devtools win when LLMs plan real web apps
一个由AI规划并生成真实网页应用的开发工具，帮助开发者从构思到落地快速构建完整Web应用，解决开发流程长、构思到实现断层的痛点，适合全栈开发者和初创团队使用
Pixy, visual editor for coding agents, like Figma on your live site
一个可视化编辑器，让开发者像用Figma一样在真实网站上实时编辑和调试AI编程代理的代码与行为
Source Design
一个开发者工具，可从任意网站URL实时提取样式并转换为Design.md、W3C令牌、Tailwind v4和CSS变量，提升设计与开发协作效率，适合前端开发者和设计团队
I turned Apple-style scroll-video websites into a reusable AI skill
将苹果风格的滚动视频网页转化为可复用的 AI 技能，让 AI 能理解并操作这类交互式网页内容。
Rememori – agent memory in pure TypeScript, zero dependencies
纯TypeScript实现的AI代理记忆系统，零依赖，轻量级可嵌入，解决LLM代理缺乏持久化记忆能力的问题，适合前端/全栈开发者快速集成
Rememori zero-dependency agent memory that runs anywhere JS runs
Rememori 提供零依赖的Agent记忆系统，可在任何运行JavaScript的环境（如浏览器、Node.js）中运行，解决AI Agent缺乏持久记忆的痛点，适合构建轻量级、
U2C
将提示词和截图转化为可编辑的React+Tailwind代码，支持保存设计规范与生成规则，实现高保真、可维护的界面开发
PinFix – Click any UI element and edit its source with Claude Code
点击任意 UI 元素即可用 Claude Code 编辑其源码，实现“所见即所改”的网页实时重构，极大提升前端调试效率
Peek-CLI: Let your front end agent see the browser
让前端AI代理能直接查看浏览器界面的CLI工具，提升AI在前端调试与自动化中的感知能力。
Rtifact
让AI代理用React和JSX生成前端代码，自动集成Ant Design、Tailwind等库并构建完成项目，减少Token消耗，提升开发效率
AgentStart
专为AI编程助手（如Cursor）优化的Next.js 15模板，内置Drizzle、Better-Auth和AI规则配置，提升AI协作效率。
Agent on your landing page, in one script tag, with generative UI
在网页中通过一个脚本标签即可嵌入AI助手，实现生成式UI，让网站具备智能交互能力。
Skelly
Skelly 能自动分析已渲染的UI界面，生成像素级精确的加载状态（如闪烁、脉冲、乐观加载），支持组件、页面、表格等全场景，且可在服务端运行。
WebMotion
在浏览器中直接用DOM编写视频，通过WebCodecs编码生成MP4，无需FFmpeg或渲染农场，每一帧都是基于帧索引的纯函数，适合前端开发者实现高性能动画视频生成。
FrameHatch
FrameHatch 能将自然语言描述的产品需求快速转化为完整的 Vite + React + TypeScript 网站，支持实时预览与对话式迭代，降低前端开发门槛。
Nexus AI
浏览器内嵌的前端代码生成助手，输入布局需求即可一键生成可直接使用的Tailwind代码，提升开发效率。
facebook/astryx
一个完全可定制且支持智能代理的开源设计系统，专为构建可扩展、智能化的现代 UI 体验而设计。
Selector Forge – browser extension for AI-generated resilient selectors
Selector Forge 是一个浏览器扩展，利用 AI 生成更稳定、抗 DOM 变化的选择器，帮助前端测试与自动化脚本开发者减少因页面变动导致的失败。
Make any website agent-ready in one script tag
只需添加一个脚本标签，即可让任意网站具备智能代理（Agent）能力，适合快速为网页注入自动化交互功能的开发者。
zarazhangrui/frontend-slides
利用 AI 前端能力自动生成精美网页幻灯片的工具，开发者可通过代码快速构建演示文稿，适合技术分享与产品展示。
Pagora AI, WordPress AI page builder that outputs plain HTML/CSS/JS
一个基于 AI 的 WordPress 页面构建器，可生成纯净的 HTML/CSS/JS 代码，无需依赖框架，适合追求性能与控制力的开发者。
firecrawl/open-lovable
通过一键克隆和重构，将任意网站转为现代化 React 应用，适合前端开发者快速搭建原型或抓取网页内容，亮点是自动化程度高且保留交互逻辑。
Peek-CLI: Let Claude Code iterate on front end designs
Let Claude Code 是一个利用 Claude 模型自动迭代前端设计的工具，开发者可通过自然语言描述快速生成、优化和调试 UI 界面，显著提升前端开发效率，适合设计师与开
ditto.site
开源网站克隆工具，可将任意网页一键转换为干净可维护的代码，适合开发者和设计师快速获取前端模板。
Generative MUI
Generative MUI 允许开发者用自然语言让大模型自动生成符合自定义 Material UI 风格的前端界面代码，极大提升 UI 开发效率。
Loora
AI驱动的设计协作工具，通过智能代理协助完成设计任务（如生成原型、优化布局），适合设计师与产品团队
tastemaker
tastemaker 是为 AI 编码助手注入「设计审美」的工具，帮助开发者生成更符合现代 UI/UX 标准的代码，提升产品视觉质量。
Stylewright
Chrome 浏览器插件，可将任意网页快速转化为可复用的设计系统，支持组件提取与样式标准化，适合 UI/UX 设计师与前端团队。
ag-ui-protocol/ag-ui
Agent-User Interaction协议实现，将智能体（Agent）无缝集成到前端应用中，赋能交互式AI应用开发
PinFix – Click any UI element and edit its source with Claude Code
PinFix 可让你点击网页任意元素，直接用 Claude Code 编辑其源码，实现“所见即所得”的前端调试与修改，适合前端开发者快速迭代。
Dosmos
Dosmos 是一款 AI 驱动的设计转代码工具，用户通过点击和拖拽界面，AI 自动输出可运行的前端代码，适合设计师快速验证原型或前端开发者加速开发。
ReFrame - Figma to X
ReFrame 可将 Figma 设计稿自动转换为可运行的前端代码（X），减少手动开发工作量，适合设计师与前端工程师协作。
ai2 Design System
ai2 Design System 是一个由 AI 代理驱动的 UI 设计系统，AI 可根据需求自动生成界面规范，开发者只需阅读系统文档即可快速构建 UI。
CopilotKit/CopilotKit
面向AI代理与生成式UI的前端开发栈，支持React、Angular、移动端、Slack等多端，推动AG-UI协议标准化。
Nexus AI
开发者工具，通过自然语言提示快速生成、调试并部署前端组件，适合前端工程师与全栈开发者。
WindStrap – Bootstrap 5.3.8 to Tailwind CSS Using DeepSeek V4 Flash
一款将Bootstrap 5.3.8样式自动转换为Tailwind CSS的工具，基于DeepSeek V4 Flash模型，帮助开发者高效迁移前端框架，提升开发效率
Balsa UI
AI驱动的设计系统构建工具，通过智能代理辅助创建与维护设计规范，提升UI/UX开发效率。
Front end skill pack for AI agents, with machine-enforced quality gates
一套专为AI代理设计的前端技能包，通过机器强制的质量门禁确保代码与交互的可靠性，适合构建高可信度AI驱动的前端应用
OKLCH Pixel Palette
设计工具，生成基于人眼感知的色彩调色板，并直接导出为生产级 CSS 代码，适合前端设计师与 UI 团队，亮点是色彩科学与开发落地的无缝衔接
Gruum
Gruum 是一款设计一致性检测工具，能自动识别 UI 设计中的视觉偏差，帮助团队保持品牌风格统一，适合设计师与前端开发协作
I turned Apple-style scroll-video websites into a reusable AI skill
将苹果风格的滚动视频网页转化为可复用的 AI 技能，支持一键生成类似视觉效果的网页，适合前端开发者和设计师，亮点是用 AI 快速复刻高端视觉体验。
LayoutLens: AI-Powered Visual UI Testing
LayoutLens 是一款基于 AI 的视觉 UI 测试工具，帮助开发者自动检测网页或应用界面的布局异常，适用于前端开发与设计团队，能智能识别视觉差异并生成可读性报告。
Retro Portal - Web Template
Retro Portal 是一个基于 90 年代风格的复古网页模板，适用于开发者或设计师快速搭建怀旧风 Web 应用或个人网站。
Practice Pad
面向软件工程师的JavaScript面试题练习平台，提供24道高频实战题目，帮助快速准备技术面试。
oussama.smahi
一个开发者工具，用于快速生成 HTML、JavaScript 等前端代码片段，帮助开发者高效构建页面原型或调试代码。
Backprompter – create, test, and deploy agents without a back end
无需后端即可创建、测试和部署智能代理（Agents），通过前端直接运行，适合快速构建AI驱动的自动化应用。
Vinstock
专为交互式网页设计的精美HTML组件库，支持快速构建视觉吸引人的动态网页效果
Nodlume
基于React的系统设计协作工具，支持跨平台构建组件化应用架构，专为前端团队设计
Print Flex
用于构建现代、响应式且可扩展的Web应用的前端框架或模板库，主打简洁与高性能
Building AI agents client-side JavaScript
在浏览器端构建AI代理（AI agents）的JavaScript实现，让AI在客户端运行，提升隐私与响应速度。
Jakubantalik/Libraries.dev
Libraries.dev 提供一系列为 AI 代理设计的精美 UI 组件库（如 Border Beam、Orbs 等），专为构建视觉吸引力强的 AI 应用界面而打造，适合前端开发
Animaxxing – get agents to animate the shit out of your website
Animaxxing 是一个让开发者无需编写动画代码即可为网站添加动态效果的 AI 驱动工具，适合前端开发者和设计师快速实现视觉吸引力，亮点是通过自然语言指令生成复杂动画；
SVG to React Component Converter
一键将原始 SVG 图标转换为干净可复用的 React 组件，提升前端开发效率
pixelpact
pixelpact 是一个针对 AI 编码代理的视觉验证工具，让 AI 在生成代码前“看见”页面布局，避免生成与设计脱节的代码。
Pieoro
Pieoro 是一款 AI 驱动的设计工具，用户输入想法后，AI 自动绘制、动画化并生成可运行的代码，适合快速原型开发。
其他标签
常见问题
「前端」这个标签是怎么归的?
标签来自每个产品的中文拆解(解决什么场景、面向谁),由模型从产品自述里归纳,不是人工逐条打的,也不接受付费打标。
这里的排序依据是什么?
按库内真实热度:投票数 / MRR / 增速,取产品实际有的那个。不是编辑推荐,也不卖位置。
数据多久更新?
追踪持续进行(分钟级),本页于 2026-09-10 生成。全部数字可经公开只读 API 复核:https://kanonagent.com/data