AI Agent Skills

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

Convert any website to editable Figma designs

🔌 Sample Figma plugins.

Claude skill: Prototype → Figma. Analyzes a Claude Code prototype, maps components to your Figma design system via search + Code Connect, explodes each interaction flow…

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without cla…

A field guide to the visual & copy tics of AI-generated products — and an Agent Skill that scans your project and strips them out. https://killaislop.com

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

Anti-AI-slop design skill for Claude Code, Cursor, and Codex.

🪧 Claude Code / Codex skill — generate Xiaohongshu carousels & WeChat 21:9+1:1 cover pairs. Editorial × Swiss visual systems, 28 layouts, 10 themes, single-file HTML →…

Use when building CLI tools, implementing argument parsing, or adding interactive prompts. Invoke for parsing flags and subcommands, displaying progress bars and spinner…

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.

Turn one topic into a narrated Vox-style paper-collage explainer or ad video, from script through captions.

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

Automate a real browser from the terminal for navigation, form filling, snapshots, screenshots, extraction, and UI-flow debugging.