ツール

Has the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill.

Develops a design philosophy first, then draws posters, illustrations and other static visuals in code, exporting PNG or PDF. Emphasizes original work rather than copying existing artists. Official Anthropic skill.

Makes GIFs that follow Slack's recommended size, frame rate, color and length for emoji (128x128) and message GIFs (480x480), with animation tips and tools to assemble and validate them. Built on Python and Pillow. Official Anthropic skill.

Creates generative art such as flow fields and particle systems with p5.js and seeded randomness: first writes an algorithmic design philosophy, then outputs an interactive HTML viewer with tunable parameters. Official Anthropic skill.

Ten built-in color and font themes to apply to slides, documents, reports and HTML landing pages, or generate a new theme on demand. Official Anthropic skill.

UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally.

Generates or edits images: photos, illustrations, textures, game sprites, product mockups and transparent assets. A built-in Codex system skill using the image_gen tool, no install needed; with approval it can use a bundled CLI script that needs OPENAI_API_KEY. By OpenAI.

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation.

Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others.

HeyGen's official HyperFrames skill set: lets agents write deterministic MP4 videos in HTML, CSS and animation, with workflows for promo videos, explainers, captions and beat-synced music. Needs Node.js 22+ and FFmpeg.

Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.

Conversion rate optimization skill from the marketingskills collection: give it a homepage, landing page, pricing page or form and it diagnoses value proposition, headlines, CTAs, trust signals and friction, returning quick wins, high-impact changes, A/B test ideas and alternative copy.

Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions.

Color rules for daisyUI 5: explains semantic names such as primary, base-100 and error with their -content foregrounds, says to prefer them over fixed Tailwind colors and never add dark: to them, and shows how to enable, create and override themes. Part of the official daisyUI skill.

Reviews UI code against Vercel's Web Interface Guidelines, covering accessibility, focus, forms, animation, typography, dark mode and more, listing issues as file:line. Fetches the latest rules before each review. Maintained by Vercel.

Synthesizes user feedback from interview notes, surveys and support tickets into themes ranked by frequency and impact, and outputs structured insights and roadmap recommendations. Can pull data from knowledge bases or meeting transcripts. From Anthropic's official product-management plugin.

Have an agent produce high-fidelity clickable prototypes, editable slides, timeline animations (exportable to MP4/GIF) and infographics in HTML from one sentence. Proposes three design directions first and includes a five-dimension design review. By Huashu, MIT licensed.

Official Lark (Feishu) skill to view, export and edit whiteboards in Lark docs: write Mermaid, PlantUML or SVG into a board for flowcharts or org charts, or export boards as images or SVG. New boards are created with lark-doc. Needs lark-cli, Node.js and auth; install with lark-shared.

GSAP's official animation skills: teach agents to use the core API, timelines, ScrollTrigger and plugins correctly, including React, Vue and Svelte integration and animation performance. Maintained by GreenSock; all plugins are free.

ConardLi's skill collection: turn articles or scripts into web presentations you can screen-record as videos (23 themes, optional voiceover), lay out material as shareable long-form web pages, search local knowledge base folders, web design, and GPT-Image-2 image generation with 79 templates.

Document layout skill by tw93 with eight templates (resume, one-pager, long doc, formal letter, portfolio, slides, research report and more) that render polished PDF, PNG or editable PPT and check layout and content gaps. Supports English, Chinese, Japanese and Korean. Needs Python (WeasyPrint).

Builds a scroll-scrubbed fly-through 3D world landing page for any brand: generates scene stills with Higgsfield and seamless camera clips via Monid (Seedance 2.0, paid per clip) or Higgsfield credits, then wires a vanilla JS scrub engine. Needs Higgsfield CLI and ffmpeg.

MiniMax's official prompt skill for the Hailuo H3 video model: rewrites video ideas into H3's structured prompt format for text-to-video, first/last frame and full-reference modes, covering visuals, sound effects and music. Docs only; generate videos on Hailuo web, the MiniMax API or a local model.