Frontend Design skill is guides the agent to build distinctive, production-grade UIs instead of generic "AI-looking" designs, priced at free. If it is too expensive, missing a feature or simply not for you, these are the strongest alternatives we have reviewed.
Each option below covers the same job from a different angle.
What it does This is Vercel's collection of Agent Skills. It packs guidance from Vercel's engineering and design teams into skills that a coding agent loads when a task needs them. Most of the skills are rule sets the agent applies when it writes or reviews React, Next.js and UI code. Others cover writing docs, auditing a Vercel project, and… Read more →
Teaches the agent to test local web apps with Playwright scripts
What it does Web App Testing is a skill from Anthropic's official repository that teaches the agent to check a local web application with Playwright. The agent does not simply claim a UI change works. It writes a short Python Playwright script, runs it against the app in a headless Chromium browser, and then reads the results: screenshots, the rendered… Read more →
39 editorial diagram types as self-contained HTML and SVG, matched to your brand
What it does Diagram Design, by Cathryn Lavery, is an Agent Skill for producing clean, editorial-style diagrams as self-contained HTML and SVG files. You ask your agent for, say, an architecture diagram of your app or a sequence diagram of a token refresh. The skill picks a suitable diagram type and builds the file from its templates. It deliberately avoids… Read more →
Local-first design workspace that uses your coding agent to build prototypes, decks and UI
What it does OpenDesign (OD) is an open-source, local-first design workspace that uses the coding agent you already have as its design engine. You give it a brief, pick a design system and an artifact type, and your agent (Claude Code, Codex, Cursor's agent, Copilot and others) generates real HTML, CSS and component files, which OD previews in a sandboxed… Read more →
Lets your coding agent write and run Playwright browser automation on the fly
What it does Playwright Skill is a community Agent Skill that lets a coding agent write and run its own Playwright programs for browser automation and testing. You describe a check in plain words, such as testing a signup flow, screenshotting a dashboard at mobile and desktop sizes, or looking for broken links. The agent writes a custom script, runs… Read more →
Agent skill for building premium, immersive, scroll-driven websites to a real design standard
What it does scroll-craft is an agent skill for building premium, scroll-driven websites to a defined design standard. It aims to avoid the two ways AI-generated sites usually fail: bland and forgettable, or a flashy scroll animation with unreadable body text and the same handful of sections every AI page produces. The skill carries the whole workflow, from brief and… Read more →
Agent skill that builds self-contained HTML slide decks and converts PowerPoint files
What it does Frontend Slides is an agent skill that has a coding agent build presentations as single, self-contained HTML files instead of slide software. It can create a deck from scratch or convert an existing PowerPoint file into a web slideshow. Rather than asking you to describe a visual style in words, it generates a few title-slide previews in… Read more →
Agent Skill that art-directs websites and gates them with anti-slop and motion checks
What it does Auteur, from agiwhitelist, is an Agent Skill for building visually ambitious websites with a coding agent. It treats a site like a film production: art direction is fixed in writing before any markup, assets are generated or sourced, the page is built from tested recipes, and nothing ships until it passes automated quality gates. The goal is… Read more →
73+ ready-to-drop DESIGN.md files that teach a coding agent a real brand's design system
What it does Awesome Design.md is a curated collection of DESIGN.md files, one per brand, that capture how a real product's UI is actually built: colour palette with semantic roles, typography hierarchy, component styling and states, layout principles, shadow/depth system, and responsive breakpoints. Drop the file for a brand you want to emulate into your project and tell your coding… Read more →
Vercel's Agent Skills for React, Next.js, deployment and writing
Teaches the agent to test local web apps with Playwright scripts
39 editorial diagram types as self-contained HTML and SVG, matched to your brand
Lets your coding agent write and run Playwright browser automation on the fly
Agent skill for building premium, immersive, scroll-driven websites to a real design standard
Agent skill that builds self-contained HTML slide decks and converts PowerPoint files
Agent Skill that art-directs websites and gates them with anti-slop and motion checks
73+ ready-to-drop DESIGN.md files that teach a coding agent a real brand's design system