AI design engineer that generates distinctive UI designs and production code inside your own repo, Figma and design system.
Frontend
Client-side web work: components, styling, routing and everything the user actually sees.
3 apps, 20 skills and 3 MCP servers tagged Frontend.
Apps
Agentic desktop IDE for designers and programmers — edit a running app visually, drive an AI agent inside the repo, and manage Git without leaving the editor.
Browser panel with 70 diagnostics that names a page's stack, extracts its design tokens and scores how much of it reads as AI-generated.
Skills
Official WordPress skill for Gutenberg block work: block.json, attributes and serialization, dynamic rendering, and the deprecation path that keeps existing content valid.
GreenSock's official ScrollTrigger skill — scroll-linked animation, pinning, scrub and trigger positioning, with the exact start/end syntax agents get wrong.
Build Gradio web UIs and ML demos in Python with the current API — components, layouts, events, and chat interfaces.
Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.
Vercel's official skill for auditing UI code against the Web Interface Guidelines — accessibility, performance and UX rules reported as terse file:line findings.
Vercel's official guide to React's <ViewTransition> API — shared elements, list identity, Suspense reveals and directional route animations without an animation library.
Vercel's official skill for React component architecture — replace boolean prop proliferation with compound components, lifted state and explicit variants. Includes React 19 APIs.
The Svelte team's own guidance on writing modern Svelte 5 — when to reach for each rune, why effects are an escape hatch, and the reactivity traps models fall into.
The official Svelte team skill that wires an agent to the @sveltejs/mcp CLI for Svelte 5 docs lookup and an autofixer that validates components before you ship them.
Skill: Web Performance Audit
by Cloudflare
Audits Core Web Vitals through the Chrome DevTools MCP server — LCP, INP, CLS plus FCP, TBT and Speed Index — and traces each one back to the render-blocking resource or layout shift causing it.
Skill: Sanity Best Practices
by Sanity
Sanity's official agent skill — schema design, GROQ, TypeGen, Visual Editing, Portable Text, Studio structure, localization, Functions and Blueprints, plus integration guides for eight frontend frameworks.
Skill: Figma Design to Code
by Figma
Figma's official design-to-code skill — a mandatory pre-step to get_design_context that turns a Figma node into components matching your real stack, not generic markup.
Skill: Web Interface Guidelines
by Vercel
Audit UI code against Vercel's Web Interface Guidelines — accessibility, interaction, performance and layout rules — reported as terse file:line findings.
Skill: Angular Developer
by Angular (Google)
Angular's official skill for generating idiomatic modern Angular — signals, resource and httpResource, forms, DI, routing, SSR, ARIA and CLI scaffolding.
Skill: GSAP Core
by GreenSock
GreenSock's official skill for the GSAP core engine — tweens, eases, staggers, defaults and responsive/reduced-motion animation via matchMedia.
Skill: Theme Factory
by Anthropic
Style any artifact with a cohesive theme — 10 preset color/font themes, or generate a new one on the fly for slides, docs, reports, and pages.
Skill: Algorithmic Art
by Anthropic
Create generative art with p5.js — flow fields, particle systems, and seeded randomness with interactive parameter exploration.
Skill: Frontend Design
by Anthropic
Guidance for distinctive, intentional UI design — aesthetic direction, typography, and choices that avoid looking like templated defaults.
Skill: Web App Testing
by Anthropic
Interact with and test local web applications using Playwright — verify frontend behavior, debug UI, capture screenshots, and read browser logs.
Skill: Web Artifacts Builder
by Anthropic
A suite for building elaborate, multi-component HTML artifacts with modern frontend tooling — React, Tailwind CSS, and shadcn/ui.
MCP servers
Official Figma server that gives AI coding agents direct access to Figma design files for design-to-code work.
MCP: Panda CSS MCP Server
by Panda CSS (Chakra UI)
Official Panda CSS MCP server that exposes your design system - tokens, recipes, patterns, breakpoints and the resolved config - so an agent styles components with real values.
MCP: Storybook
by Storybook
Official addon that connects a running Storybook to AI agents for component-aware UI generation and testing.
Related tags
Tags that appear alongside this one, ranked by how often.

