Agent Skills

by openai

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

figma-create-new-file

by openai

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

figma-generate-design

by openai

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

figma-generate-library

by openai

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

figma-implement-design

by openai

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

figma-use

by openai

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

huashu-design

★ 20,935

by alchaincyf

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审，需求模糊时给设计方向。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。

design-md

by google-labs-code

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

enhance-prompt

by google-labs-code

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

stitch-loop

by google-labs-code

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

stitch::code-to-design

by google-labs-code

Convert frontend code (Vite, React, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

stitch::extract-design-md

by google-labs-code

Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

stitch::extract-static-html

by google-labs-code

Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.

stitch::generate-design

by google-labs-code

Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.

stitch::manage-design-system

by google-labs-code

Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.

stitch::react-native

by google-labs-code

Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.

stitch::upload-to-stitch

by google-labs-code

Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.

taste-design

by google-labs-code

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Free

tts-voiceover

✓★ 1,245

by microsoft

Text-to-speech voice-over generation from YAML speaker notes using Azure Speech SDK with SSML pronunciation control

video-to-gif

✓★ 1,245

by microsoft

Video-to-GIF conversion with FFmpeg two-pass optimization

pexo-agent

by pexoai

AI video generation skill with auto model selection across Seedance 2, Kling 3.0, HappyHorse, and 10+ models. Produces finished multi-shot videos (5–120s) from text, images, URLs, scripts, or audio — including AI music, lip sync, and multi-shot sequencing. Calls Pexo's external API, manages project status and billing confirmations, and transfers only user-approved briefs and assets. Runs setup diagnostics, stores generated downloads locally, and requires shell, outbound HTTPS, and local file access. Authenticated requests are locked to https://pexo.ai. No prompts to write, no models to choose. USE FOR: video production, AI video, make a video, product video, brand video, promotional clip, explainer video, short video, TikTok video, Instagram Reel, YouTube Short, product ad, text-to-video, image-to-video, video generation, AI video agent.

FreeSetup details

ai-video-generation

by pexoai

Generate AI video from any input — text, image, or script — with Pexo. Auto-routes each shot to the best of 10+ models (Seedance, Kling, Veo, Sora, and more), writes the prompts, generates every shot, and returns a finished video with music and subtitles. Use for any AI video generation request: "ai video generation", "generate a video with ai", "ai video generator", "make an ai video". NOT for editing an existing video.

explainer-video

by pexoai

Create an explainer video with narration using Pexo. Describe your product, concept, or process and Pexo writes the script, generates visuals shot by shot, adds TTS voiceover and captions, and assembles a clear, finished explainer. Use for explainer/tutorial content: "explainer video", "explain this as a video", "tutorial video", "how it works video". NOT for ads or promos (use the video-ad skill).

founder-video

by pexoai

Make a founder video with Pexo — built for solo founders and small teams. Describe your story, product, or pitch (or paste your site) and Pexo writes the script, generates the shots, picks the models, and returns a finished, publish-ready founder video with music — for fundraising, Product Hunt, or your personal brand. Use for founder content: "founder video", "solo founder video", "founder pitch video", "founder story". NOT for paid ad campaigns (use the video-ad skill).

image-to-video

by pexoai

Animate a still image into a finished, moving video with Pexo. Upload a photo and Pexo adds natural motion, camera moves, and transitions, auto-picks the best image-to-video model (Seedance, Kling, Wan, and more), and returns a publish-ready clip with music. Use when the user has an IMAGE to bring to life: "image to video", "animate this photo", "make a video from this picture", "turn my image into a video". NOT for text-only prompts (use the text-to-video skill) or editing an existing video.

launch-video

by pexoai

Make a launch video for your startup or product with Pexo. Describe your product (or paste your landing-page URL or a screenshot) and Pexo writes the script, generates every shot, picks the models, and returns a finished, publish-ready launch video with music — built for Product Hunt, your landing page, or launch-day socials. Use for product and startup launches: "launch video", "product launch video", "make a launch video", "launch day video". NOT for ongoing ad campaigns (use the video-ad skill).

make-a-video

by pexoai

Make a complete video from a simple idea with Pexo. Describe what you want in plain words and Pexo handles everything — script, shots, model selection, music, subtitles, and final editing — and returns a publish-ready video. Use when the user just wants to make a video: "make a video", "make me a video about X", "create a video", "I need a video for ...". NOT for editing a video they already have.

product-video

by pexoai

Turn product photos or a store URL into a polished product video with Pexo. Upload your product images (or download from a link, then upload) and Pexo composes the shots, adds motion, music, and transitions, and returns a publish-ready clip for your listing, ads, or socials. Use for e-commerce/product clips: "product video", "video for my product", "ecommerce video", "video from product photos". NOT for explainer or non-product content.

saas-video

by pexoai

Make a SaaS demo or explainer video with Pexo. Describe your software (or paste your app URL or a screenshot) and Pexo writes the script, generates the visuals, picks the models, adds narration and captions, and returns a finished, publish-ready video — for your landing page, onboarding, or sales. Use for SaaS and software videos: "saas video", "saas demo video", "software demo", "app explainer video". NOT for live screen recording — Pexo generates the visuals.

seedance-2.0-prompter