Design & Media
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
-
qhjqhj00 Skill FigmaIntegrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code workflows. Triggers on Figma API, design tokens, Figma plugin, design-to-code, Figma export, Figma component, Dev Mode.
3 -
qhjqhj00 Skill UX Design SystemsBuild consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design tokens, component library, theming, dark mode.
3 -
qhjqhj00 Skill Paper PosterGenerate a conference poster (article + tcbposter LaTeX → A0/A1 PDF + editable PPTX + SVG) from a compiled paper. Use when user says "做海报", "制作海报", "conference poster", "make poster", "生成poster", "poster session", or wants to create a poster for a conference presentation.
3 -
qhjqhj00 Skill Paper IllustrationGenerate publication-quality AI illustrations for academic papers using Gemini image generation. Creates architecture diagrams, method illustrations with Claude-supervised iterative refinement loop. Use when user says "生成图表", "画架构图", "AI绘图", "paper illustration", "generate diagram", or needs visual figures for papers.
3 -
timlai666 Bundle PPTX PostersCreate research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.
1 -
timlai666 Bundle Latex PostersCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
1 -
akillness Bundle Video To SuperpromptTurn a reference video into a super detailed recreation or inspiration prompt. Use when the user provides, mentions, uploads, links, or points to a video and asks to analyze the design, UI, animations, transitions, scroll interactions, typography, colors, assets, WebGL/Three.js, storytelling, section-by-section behavior, or to create a prompt/article that recreates the page, app, interaction, or motion system.
42 -
akillness Bundle Design Taste FrontendApply anti-generic frontend design rules bundled from Leonxlnx/taste-skill, the MIT-licensed anti-slop ruleset for landing pages, portfolios, editorial pages, and redesigns. Use when output looks templated, AI-default, or "sloppy" and the user wants a deliberate design read, explicit DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY dials, a real design system choice, an AI-tells sweep including the em-dash ban, a redesign audit that preserves brand equity, or the pre-flight check before shipping. Even if the user does not say taste-skill, also triggers on: looks like AI made it, generic landing page, purple gradient hero, make it less templated, Awwwards feel, Linear-style, redesign without losing the brand. Not for dashboards, data tables, wizards, or admin UI. Route shared token governance to `design-system`, layout adaptation to `responsive-design`, accessibility remediation to `web-accessibility`, and visual-recipe lookup to `web-design`.
42 -
akillness Bundle Design First UI PromptingUse when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.
42 -
levalencia Bundle Brand AgencyApplies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces. This skill should be used when brand colors, visual formatting, neobrutalism style, or Agency design standards apply. Keywords - branding, corporate identity, visual identity, styling, brand colors, typography, visual formatting, visual design, neobrutalism.
3 -
levalencia Bundle Latex PostersCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
3 -
levalencia Skill Figma Design SyncUse this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\n\n<example>\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\nuser: \"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678\"\nassistant: \"I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences.\"\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\n</example>\n\n<example>\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\nuser: \"The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34\"\nassistant: \"Let me use the figma-design-sy...
3 -
levalencia Bundle Tailwind CSS PatternsProvides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
3 -
levalencia Bundle Presentation GeneratorGenerate interactive HTML presentations with neobrutalism styling, ASCII art decorations, and Agency brand colors. Outputs HTML (interactive with navigation), PNG (individual slides via Playwright), and PDF. References brand-agency skill for colors and typography. Use when creating presentations, slide decks, pitch materials, or visual summaries.
3 -
levalencia Bundle Tailwind Design SystemSkill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives.
3 -
levalencia Bundle Visual Brand ExtractorExtract visual branding (colors, typography, layout patterns) from a client's website and generate a style preset compatible with the HTML slides skill and a brand config JSON for the content asset creator. Uses WebFetch to read pages and analyzes CSS/HTML to identify the color palette, font pairings, and aesthetic patterns.
3 -
levalencia Skill Design Implementation ReviewerUse this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\n\nExamples:\n- <example>\n Context: The user has just implemented a new component based on a Figma design.\n user: "I've finished implementing the hero section based on the Figma design"\n assistant: "I'll review how well your implementation matches the Figma design."\n <commentary>\n Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\n </commentary>\n </example>\n- <example>\n Context: After the general code agent has implemented design changes.\n user: "Update the button styles to match the new design system"\n assistant: "I've updated the butto...
3 -
jantoniofc Skill Design MdAnalyze Stitch projects and synthesize a semantic design system into DESIGN.md files
6 -
jantoniofc Bundle Figma Use**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 r...
6 -
jantoniofc Skill Baseline UIValidates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
6 -
jantoniofc Bundle Design SpecHow to author a DESIGN.md file — the machine-readable design-token + human-rationale format that must exist before any UI is built. YAML front-matter token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order.
6 -
jantoniofc Skill Makepad FontCRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形
6 -
jantoniofc Bundle Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
6 -
jantoniofc Skill Design System- Starting a new project that needs a design system - Auditing an existing codebase for visual consistency - Before a redesign — understand what you have - When the UI looks "off" but you can't pinpoint why - Reviewing PRs that touch styling
6 -
jantoniofc Skill Enhance PromptTransforms 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.
6 -
jantoniofc Skill Product DesignDesign de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
6 -
jantoniofc Skill Core ComponentsCore component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
6 -
jantoniofc Bundle Brand GuidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
6 -
jantoniofc Skill Figma AutomationAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
6 -
jantoniofc Bundle UI Design SystemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
6 -
jantoniofc Skill Book Cover DesignBook cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for: self-publishing, ebook covers, print covers, audiobook covers, cover mockups. Triggers: book cov...
6 -
jantoniofc Skill Logo Design GuideLogo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo,...
6 -
jantoniofc Skill UI Visual ValidatorRigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehen...
6 -
jantoniofc Bundle Figma Create New FileCreate 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 Whi...
6 -
jantoniofc Bundle Figma Generate DesignUse 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 ...
6 -
jantoniofc Skill Character Design SheetCharacter consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character des...
6
Frequently asked questions
What are Design & Media agent skills?
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
Which Design & Media skills are most installed?
Popular Design & Media skills on SkillMD right now include figma-use, enhance-prompt, canvas-design. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Design & Media skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.