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.
-
devkindhq Bundle Upscale Image WorkflowRaises the resolution of one specific Ideogram image — from this session's generations, `get_recent_generations`, a collection, or a local upload — via the connected `upscale_image` tool. Use whenever the user asks to "upscale this," "make this higher-res," "upscale that logo render 4x," or "increase the resolution on the image I just uploaded." Wraps exactly one tool (`upscale_image`) and does NOT wrap `remix_image`, `reframe_image`, `edit_image`, or `remove_background` — those are separate tools, out of scope here. It does not auto-trigger from `brand-identity-sheet`, `character-model-sheet`, `moodboard-generator`, or `collections-management`; those four are unmodified and unaware of this one, and this only runs on explicit request.
-
endorphin-ai Bundle System DesignSystem design and code review skill for fullstack Go+React apps. Use when designing architecture or reviewing code against design specifications.
-
gotempsh Skill Temps Design SystemBuild or review console UI so it reads as Temps: the paper-and-ink operator design system (`@temps-sdk/ds` primitives, the `operator ink v1` skin, the Ledger / Detail / Settings page templates, the status vocabulary and the record recipe). Invoke when a task adds or redesigns a console screen, a landing section or a status page on the new design system, when the user says "follow the design system", "make it look like temps", "brand guidelines", "taste", "op components", or when reviewing a UI PR against the guidelines. Not for the legacy `web/src` console: that stays on its current shadcn look until it is migrated screen by screen.
-
ledgerhq Skill Code ConnectCreates and maintains Figma Code Connect files (`*.figma.tsx`) that map Figma components to code via the parser-based `figma.connect()` API. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.tsx files.
-
ledgerhq Skill Figma To CodeUse when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (`t.*`) paths for libs/ui-rnative. For the full token catalogues and styling mechanics, see component-styling.
-
ledgerhq Bundle Figma Token SyncSync processed CSS design tokens with JavaScript theme objects for React Native. Use when aligning tokens after Figma sync, checking token consistency, or updating JS theme files manually.
-
lencamo Bundle Brand Asset GeneratorUse when generating or wiring project-ready brand image assets from a user-provided logo, mark, or icon source image, including transparent source marks, favicon, PWA icons, apple touch icons, desktop app icons, tray icons, ICO, and ICNS outputs.
-
lencamo Bundle Signature Svg GeneratorUse when generating reusable signature-style SVG assets, Vue components, or React components from font files, including personal signatures, handwritten wordmarks, font-derived SVG paths, or mask-based handwriting animations. Use only when the user wants font-based output, not general logo design.
-
ilya-valasiuk Bundle Prepare SvgPrepare and normalize SVG files for reusable UI icon usage. Use this whenever the user wants to import an SVG from Figma or another design source, clean up an SVG icon, make an SVG reusable across different sizes or colors, replace hardcoded SVG dimensions or colors, or standardize SVG assets before developers decide how to render them in code.
-
ilya-valasiuk Bundle Design Tokens TailwindGenerate or update Tailwind CSS v4 CSS-first theme variables from design token JSON files. Use this skill whenever the user asks to sync, convert, regenerate, import, or update styles, Tailwind config, @theme CSS, colors, typography, spacing, breakpoints, shadows, radii, or other design tokens from design-tokens.json or another token JSON file, especially in Tailwind 4 projects that use CSS-first configuration instead of tailwind.config.js. This skill is reusable across projects and should be used even when the user only says "update styles from tokens" or provides a token export path.
-
jeonnoin-alt Bundle Figure DesignUse when creating, updating, or reviewing a research figure (plot, chart, brain map, heatmap, schematic) — guides chart-type selection, typography, colorblind-safe palette, layout, and journal-specific export specs. Dispatches a figure-reviewer subagent after rendering. Complements claims-audit (which checks figure integrity) by checking figure design.
-
tyrealq Bundle Q PresentationsGenerate professional slide deck images from content with smart logo branding. Use for creating slides, presentations, decks, or PPT output.
-
wanshuiyin Skill Comic Asset Review LoopPhase-1 (S5) UPSTREAM ref-asset gate — the bounded cross-model adversarial loop that LOCKS one reusable identity-locked asset (character sheet / location plate / prop cutout / text-panel / logo-free symbol) BEFORE it can be composited into any panel. This is NOT the panel_gate (composed-output) or the assembly_gate (cross-panel) — it gates the refs that FEED both, so identity drift is caught at the source, not downstream. Two layers: (1) a MANDATORY static single-source collision check (check_asset_collisions.py — 'one visual dialect, never two', enforced by tool) + zero-text/literal build-asserts; (2) a per-round 3-reviewer panel (Claude narrative ‖ Gemini visual ‖ Codex synth) that blind-scores 5 dims and LOCKS only at 准×3 unanimity (prior_lock_count>=3 approvals in the SAME round) — else regenerate (route to comic-asset-ref-generator) or, at MAX_REVIEW_ROUNDS, escalate the asset REQUIREMENT back to outline/storyboard. Hard IP veto. Use when you say 'lock this character ref', 'asset gate', 'ref review', 'is
-
mereyabdenbekuly-ctrl Bundle FigmaComplete guide for the Figma plugin — REST API access, real-time selection monitoring via CDP, and the figma-app interactive UI. Read this IMMEDIATELY when the user asks to work with Figma.
-
js-mark Bundle Novel WriterThis skill should be used when the user asks to "写小说", "创作小说", "写长篇", "继续写", "更新文章", "写大纲", "设计人物", "写角色", "下一章", "展开写", "帮我写故事", "搜索素材", "生成插图", or discusses novel creation, story outlines, character design, chapter writing, serial fiction workflows, or novel illustration.
-
senior-sigan Skill DesignDesign system architecture, APIs, and component interfaces with comprehensive specifications
-
antjanus Bundle TypographyUse this skill whenever the user wants typography work — sizing text, building a type scale, setting line-height or vertical rhythm, fixing unreadable type, or picking and pairing fonts. Triggers include "what font size should I use", "set up a type scale", "this text is too small to read", "what line-height for paragraphs", or "pair a heading font with a body font" — even if the user never says "typography" and only describes text that looks cramped, thin, or washed out. Do NOT use this skill for choosing a color palette or checking a color's contrast ratio — see color-system; or for page layout and component structure — see frontend-design.
-
antjanus Bundle UI UX DesignUI/UX design — interaction states, accessibility contracts, information architecture, visual hierarchy, and design tokens. Use this skill whenever the user wants to design or critique an interface, asks to "design this screen", "what states does this button need", "what ARIA does this menu need", "make this accessible", "how should I structure the navigation", "is this UI any good", "set up design tokens", "review my UX", or "make this convert better" — even if they never say design and only describe a cluttered screen, a flow users abandon, or a component that breaks on real data. Covers type and color as applied to a UI; send pure type-scale or palette-contrast questions to typography and color-system. Route signups, conversion, retention, and pricing-presentation asks here. Do NOT use for aesthetic direction and visual polish (see frontend-design), chart and encoding design (see dataviz), React file structure and hooks (see ideal-react-component), or copywriting and A/B testing.
-
roberdan Bundle Apple DesignerRequired for any Apple application UI design, implementation, modification or review, including cross-platform apps targeting macOS, iOS, iPadOS, watchOS, tvOS or visionOS. Also use for visual systems, reference analysis, typography, layout, components, interaction, motion, Siri-like voice, Liquid Glass and icons. Match product, brand and platform; separate visual approval from functional evidence.
-
wix Skill Wds DocsWix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on "what component", "how do I make", "WDS", "show me props", component names like Button, Card, Modal, Box, Text, or when importing from @wix/design-system or @wix/wix-ui-icons-common. Also use when looking up spacing tokens (SP1-SP6) or icon names.
-
stacksjs Skill Stacks BrandkitUse when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
Audited -
andreab67 Bundle Confluence To NextjsConvert Atlassian Confluence pages to native Next.js App Router pages — fetch content via Confluence REST API v2, parse storage-format HTML into semantic JSX, build a knowledge base with table of contents, anchor navigation, and matching design system. Use this skill whenever the user mentions Confluence migration, converting Confluence docs to Next.js, building a KB site from Confluence content, or replacing Atlassian-hosted pages with a self-hosted knowledge base — even if they just say "move our docs off Confluence" or "build a KB app".
-
tranz007 Bundle Setup UXSet up or refresh UX Skills for a new or existing project by capturing product intent, learning users and evidence, the design system, engineering environment, accessibility expectations, terminology, and consequential decisions. Use only when the user explicitly asks to set up, initialize, connect, learn, or refresh UX Skills/project context; do not activate during ordinary UX work.
-
verygoodopensource Bundle Material ThemingBest practices for Flutter theming with Material 3, treating ThemeData as the single source of truth for colors, typography, component styles, and spacing. Use when creating, modifying, or reviewing ThemeData, ColorScheme, TextTheme, component themes, spacing systems, or light/dark mode support, and whenever widget code carries its own styling: a hardcoded Color, an inline TextStyle, raw padding or gap numbers, the same decoration repeated across widget instances, or a brightness/dark-mode conditional inside build, even when the request only says "review this widget", "cut the duplication", "stop repeating this", or "tidy this up".
-
aictrl-dev Bundle Recording Product DemoEnd-to-end pipeline for producing a narrated product demo video from any repo with a web UI — the agent discovers and boots the app locally, preps demo data and auth, writes the narration and a scripted browser journey, records a time-locked Playwright take synced to an ElevenLabs voiceover, assembles a 1080p MP4 with branded title/agenda/end cards, and builds a publish kit (faststart MP4, 720p, poster, SRT captions, embed snippet, optional GCS/S3/YouTube upload). Use when the user says 'record a demo video', 'make a product demo', 'demo video for this app/repo', or wants to re-record an existing demo after UI changes.
-
aj-geddes Bundle OrchestratorCoordinates the 10X Unicorn agent team with cost-aware model tiering, MCP-aware routing, and workflow fan-out. ALWAYS trigger on "implement", "build", "create", "design system", "deploy", "learn new language", "refactor", "fix bug", "set up CI", "code review", "how long will this take", "estimate", "architecture", "add feature", "write code", "debug", "review PR", "set up pipeline", "migrate", "optimize". Use for any multi-step task, implementation request, architecture decision, or quality enforcement. Different from individual agent skills which handle execution -- this skill handles coordination, routing, model selection, and quality gates.
-
ry-run Bundle Figma SkillUse Figma MCP for design-to-code, code-to-Figma, design system search, Code Connect, and direct canvas edits. Use it when a task needs real Figma file context or writes to a Figma document, rather than generic browser automation.
-
ricardo-vae Bundle Nature FigureSubmission-grade Nature/high-impact journal figure workflow for Python or R. Use whenever the user asks to create, revise, audit, or polish manuscript figures, multi-panel scientific plots, or journal-ready SVG/PDF/TIFF outputs, especially for Nature-family or other high-impact journals. Before plotting, define the figure's conclusion, evidence logic, export needs, and review risks. If the user has not chosen Python or R, ask "Python or R?" and stop. Use only the selected backend for figure generation, previewing, exporting, and QA. Supports matplotlib/seaborn and ggplot2/patchwork/ComplexHeatmap. Not for dashboards or Illustrator/Figma-first infographics.
-
pipixia-labs Skill Poster Page Designer用于带文字的 poster、长图页面、视觉文章、社交媒体图文、小红书/公众号文章、营销单页等内容优先的 HTML 页面。这个 skill 要求 PageProductManager 先写文案草稿和图像期望,再通过搜索或图像生成补齐素材,最后生成一个独立 HTML 页面。用这个 skill 做 poster 是为了解决直接基于图像生成 poster 时文字模糊、不准的问题;它更侧重内容准确可控、排版精美,以及图文相对位置清晰。
-
ashe-li Skill Figma VerifyFigma 對齊 / 視覺比對 / UI ship gate — 任何提到 figma、Figma 對齊、Figma vs local、Figma vs code、設計稿比對、視覺差異、screenshot diff、UI 對齊、UX 對齊、文案對齊、design token 對齊,或 UI / 文案 PR 即將 ship、code 出現 placeholder / follow-up / 待 designer 確認字串時觸發。流程:Figma MCP 抓真規格 → Playwright MCP headed 抓 local → token + 文案逐項對齊表 → /goal 內建 Haiku 評估者做純視覺 gate(不另起 Agent(model=haiku) subagent)。
-
bluebagai 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.
-
bogdanbaciu21 Bundle Bogdan Baciu DesignApply Bogdan Baciu's personal editorial design system to websites, static HTML, prototypes, documents, slide decks, and financial-model artifacts. Use when the user asks for "Bogdan brand", "my brand", "personal branding", "brand this", "apply the design system", "rebrand this", "make this look like bogdanbaciu.com", or when building/reviewing bogdanbaciu.com-facing interfaces. Includes the Puddles sky-blue on warm-cream palette, Instrument Serif + Geist + JetBrains Mono typography, flat editorial layout rules, and the scoped .db-scope financial-artifact styling.
-
zhongjingyun Bundle TemplateCanonical rules and HTML/CSS contract for page chrome (head boilerplate, cover, table of contents, section block, sources-section wrapper, footer, outlook-badge, and design tokens) used across Moody's Agentic Solutions HTML report skills (earnings-call-summary, peer-analysis, public-information-book, sector-analysis). Sibling of `skills/shared/citations/` using the same inlining pattern. Parent skills must read BOTH this `SKILL.md` (owned classes/snippets, per-skill overrides, outlook-badge usage) AND `assets/template.html` (canonical CSS + HTML markup snippets) before emitting any HTML report. Asset file is the single source of truth for visual/markup; this `SKILL.md` is the single source of truth for authoring rules. Triggers when the user asks about the template, page chrome, cover, table of contents, footer, layout, design tokens, color palette, fonts, outlook badges, or anything affecting the visual scaffolding of an HTML report skill.
Audited -
codespringapp Bundle Cs Build UI MockupTurn a CodeSpring plan into a clickable local mockup the client can actually look at — one screen per core feature, real copy, plausible data, a proper token-driven design system with light and dark mode, and a style guide page showing the branding. Then run the review that surfaces what the written plan could not: screen order, hierarchy, position, and choices that turn out to be incomplete. Feeds every correction back into the CodeSpring notes and tasks. Runs AFTER the map and notes exist and BEFORE the PRDs are generated. Triggers, "make a mockup", "mock up the UI", "show me what it looks like", "build a prototype", "design the screens", "what would this app look like", "create a UI mockup for this plan", "I want to show the client something".
-
cofoundy Skill Brand IdentityCreate a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says "visual identity", "brand identity", "logo brief", "logo direction", "design brief", "brand design", "color palette for my brand", "typography for my brand", "visual language", "design system", "brand look and feel", "what should my brand look like", or is briefing a designer or design agency. Also use when the user has a brand strategy and wants to translate it into visual design direction.
Audited -
cofoundy Skill Brand GuidelinesCreate a comprehensive brand standards document — covering logo usage, color, typography, voice, messaging, and application rules. Use when the user says "brand guidelines", "brand standards", "brand book", "style guide", "brand guide", "brand manual", "brand rules", "brand documentation", "brand toolkit", "onboarding designers or copywriters", "need a document for the team", "brand consistency across teams", or wants to codify all brand decisions into a reusable reference document.
Audited
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 upscale-image-workflow, system-design, temps-design-system. 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.