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.
-
basisti Bundle Basis Sgo JiraIntegrar uma aplicação da Basis com o SGO — o Jira customizado da empresa (Jira Server 6.3.13, REST v2, Basic Auth): criar e editar ocorrência, ler o catálogo de campos pelo `createmeta`, escrever linha de TableGrid do plugin iGrid, subir anexo, consultar por JQL e classificar o que volta. Use quando alguém disser "criar ocorrência no SGO", "integrar com o Jira", "customfield", "createmeta", "TableGrid", "iGrid", "JQL", "anexo no Jira", "webhook do Jira", "o Jira devolveu 400", "Field cannot be set", "a data do grid veio um dia antes", "o campo gravou vazio e ninguém viu", "a opção não existe no catálogo"; ao configurar credencial do SGO numa aplicação; e **antes de qualquer escrita a partir de dev ou de staging**, porque existe um SGO só e ele é o de produção. Vale para Java (Spring `@HttpExchange`) e para Python (`ks-jira` + biblioteca `jira`).
-
basisti Bundle Basis Skill De SessaoConverte o registro de uma sessão de agente em atualização de skill — seja skill nova, seja acréscimo a uma skill que já existe. Serve para sessão de incidente, de revisão de código, de planejamento e de debug. Use quando o usuário disser "vamos virar skill", "aproveitar aquela sessão", "documentar como a gente resolveu", "isso aqui devia estar na skill"; depois de uma revisão de MR que apontou padrão repetível; ou logo após fechar nota de incidente, quando o diagnóstico ainda está fresco. Também para revisar skill já escrita, conferindo se ela guarda os becos sem saída e não só o caminho feliz. E, quando não se sabe qual sessão rendeu — "o que eu vivo tendo que repetir para o agente", "onde estou perdendo tempo", "o que falta nas skills" —, traz um modo de triagem que procura a mesma correção reaparecendo em sessões diferentes. Lê transcript de Claude Code e de Codex.
-
chieaid24 Bundle Bootstrap IssuesBootstrap a repo for parallel autonomous agents coordinated via a dependency-aware GitHub Issues queue - creates work-queue labels (lifecycle plus afk/hitl autonomy), a CI test gate, branch protection with self-merge, an agent issue template, a committed DESIGN.md design system for frontend repos, and the AGENTS.md/CLAUDE.md workflow docs. Use when the user wants to set up the parallel-agent / GitHub Issues flow in a repo, "bootstrap issues", port the agent workflow to a new repo, or invokes /bootstrap-issues.
-
cuellarfr Bundle Journey MappingCreate customer journey maps, service blueprints, experience maps, empathy maps, and other alignment diagrams. Guides diagram type selection, content structure, illustration syntax, and alignment workshops.
-
digitizers Bundle Figma StudioRoute design work through the Figma MCP — client-site mockups, UI screens, design-to-code, code-to-design, FigJam diagrams. Use when the user wants to mock up a page or screen, implement a Figma design as code, push a page into Figma, diagram a flow, or shares a figma.com URL ("Figma", "FigJam", "mockup", "מוקאפ", "design-to-code"). Not for branded social posts or presentations (canva-studio) and not for AI image generation or upscaling (magnific-studio).
-
amlei Skill Amlei Symbolist软件 Logo 提示词设计。从产品核心行为推演图形概念,产出居中平铺、白底、主体带色、自成一体、纯平面矢量风格的软件图标提示词。方法论涵盖行为推演、文化母语符号、数量精确对应、一形多读、设计四律、迭代优化。触发:Logo 提示词 / 软件图标 / App 图标 / 应用图标设计 / logo prompt / 图标生成提示词 / 给我的产品设计个 Logo。
Audited -
ariessolutionsio Bundle Commercetools Merchant CenterProduction-tested patterns for commercetools Merchant Center custom applications, custom views, UI Kit, and deployment from a Platinum partner with 50+ live implementations.
-
asmyshlyaev177 Bundle ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-
harebeats Bundle Kit CorDefine a paleta do site como decisão, não como consequência de ter escolhido um design system. Faz as perguntas que determinam cor (o que a marca promete, o que o setor já usa, para onde o olho tem que ir, o que ela NÃO pode parecer), monta a paleta por papel — fundo, tinta, superfície, acento — mede o contraste de cada par que vai existir na tela, e confere o quanto a escolha é comum dentro do próprio acervo. Use quando o usuário disser "define a paleta", "qual cor usar nesse site", "escolhe as cores", "monta o esquema de cor", "que acento usar", "esse site está sem personalidade de cor", "está tudo muito no automático", ou invocar /kit-cor. Use também, sem esperar o pedido, antes de aplicar um design system a um cliente novo — é ali que a cor costuma passar batida.
-
harebeats Bundle Kit TipoDefine a tipografia do site como decisão — e, principalmente, resolve se dá para ENTREGAR. Confere licença (site de marca paga por tipo, e acervo montado a partir de site de marca vem cheio de fonte comercial que não se pode servir), propõe substituto livre com critério de desenho, monta o par display + corpo, gera a escala modular em px e rem, e cuida do peso que cada fonte custa no carregamento. Use quando o usuário disser "define a tipografia", "que fonte usar", "monta a escala tipográfica", "qual fonte substitui a X", "posso usar essa fonte?", "essa fonte é paga?", "o texto está sem hierarquia", ou invocar /kit-tipo. Use também, sem esperar o pedido, antes de aplicar um design system a um cliente — design system extraído de site real nomeia a fonte e quase nunca diz onde carregá-la legalmente.
-
harebeats Bundle Kit BuscarConsulta o acervo pessoal de sites do usuário — o que ele já guardou: templates rodáveis, design systems com paleta e tipografia, componentes de UI e de IA, animações de scroll, texto e menu, efeitos WebGL, prompts de página inteira e receitas de composição que já deram certo. Responde "o que eu já tenho pronto pra isso?" antes de qualquer coisa ser gerada do zero. O acervo começa vazio e cresce a cada ingestão — esta skill sempre lê o que existe agora, não uma lista fixa. Use quando o usuário perguntar o que tem no acervo, pedir uma peça específica ("que hero eu tenho pra clínica?", "tem algum menu overlay?", "qual design system escuro usar?", "tem carrossel?", "tem agendamento?"), quiser listar por setor, técnica, função ou tipo, ou invocar /kit-buscar. Use TAMBÉM, sem esperar o pedido, antes de construir qualquer hero, seção, menu, componente ou landing page: se existe peça pronta no acervo, ela vem antes de gerar código novo.
-
idimsh Skill UI AuditAudit visual UI quality — layout hierarchy, spacing, typography, color, consistency, and Gestalt grouping
-
kingselyjoe Bundle Wewrite VisualWeWrite 视觉模块:为公众号文章生成封面和必要的内文配图,或只交付提示词。触发词: 封面图、公众号配图、给文章配图、换封面。通用绘图和 logo 设计不触发。
-
lavidrori0702 Bundle Tableau BrandExtracts design tokens (palette, type, spacing) into DESIGN-TOKENS.md for the tableau-dashboard-plugin workflow, so the mock and the Tableau workbook match the brand. Reads the analyst's branding/ (a branding.md spec and/or an org template .twb, plus logo/icons), or runs a short brand interview when none exists. Every value guessed from a Tableau default is flagged. Skippable only once branding/branding.md exists. Use when the user wants to set up branding/design tokens, or when tableau-route reports brand is next. Step 4 of 8 in the workflow.
-
alexbrndl Bundle Brand IllustrationsUse when generating a series of illustrations or brand visuals that must stay visually consistent across images, or when defining a reusable illustration style (style DNA) for a product, blog, or doc. Not for one-off images or editable vector art (work directly in SVG/Figma).
-
alexbrndl Skill Orchestrating Parallel Design AgentsUse when exploring several design directions at once in one shared design file (Paper, Figma canvas) by dispatching one agent per direction, when their outputs risk colliding on the canvas or drifting apart, or when tempted to run them sequentially because they share a file. Not for a single direction, and not for choosing what the directions should be (use design-direction).
Audited -
digitizers Bundle Magnific StudioMagnific Studio — generate AI images and upscale via the Freepik / Magnific REST API. Use when the user wants to generate an AI image, hero visual, banner background, illustration, or texture from a text prompt, or to upscale/enhance an existing image. Triggers on "Magnific", "Freepik", "generate an image", "AI background", "AI hero visual", "text-to-image", "upscale this image". Not for branded social posts or presentations (canva-studio) and not for UI mockups (figma-studio). Reads the API key from ~/.claude/freepik.env (FREEPIK_API_KEY) so it works across all sessions.
-
endearqb Bundle 1nfinix Editorial Card ScreenshotGenerate editorial-style HTML information cards and capture them as ratio-specific PNG screenshots. Use when the user wants a research card, info card, briefing card, cover card, or editorial social asset in ratios such as 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, or 5:2. Includes stable Chinese typography fallback and direct Chromium screenshot capture.
-
epam Skill Uui ThemesHelps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes. Use when generating theme tokens, working with loveship/electric/promo themes, or connecting external themes.
-
cblanquera Bundle Chrisai IconographyUse for creating, extending, auditing, or packaging cohesive UI icon systems and original SVG interface icons. Excludes logos, favicons, emoji, and decorative illustration.
-
microsoft Bundle Paper2blogUse when transforming an academic paper, arXiv/OpenReview PDF, conference paper, technical report, poster, slide deck, repository README, or related research materials into a bilingual editorial package for an editing team. Produces two articles by default — a Chinese WeChat public-account version (`blog_zh.docx`) and an English research-blog version (`blog_en.docx`). Use for drafting, revising, or packaging article copy, figure placement, captions, image prompts, and the final `.docx` deliverables.
2.7k -
microsoft Bundle Paper2reelBuild an interactive HTML viewer that aligns paper2poster output with slide/video deck frames through a sidecar content_alignment.json, without modifying the original poster, PPTX, or blog deliverables.
2.7k -
microsoft Bundle Paper2posterRender a pre-extracted paper's structured 9-section spec (`paper_spec.md`) into a single-page HTML academic poster, fit the layout to the page via an iterative measured-fill loop, and export it to print-ready PDF + PNG thumbnail. Requires the upstream `paper2assets` skill to have produced an output bundle with `manifest.json` at the root and an `assets/` folder holding the paper metadata and media. Use when the user wants an HTML poster, PDF/PNG export, or PPTX from extracted paper assets, for example "render the poster", "make the poster from this spec", "export poster to PDF", or "paper2poster". The three skills paper2assets → paper2poster → html2pptx run in sequence, each invokable on its own.
2.7k -
mshadmanrahman Skill Design TokensEstablish color, typography, spacing, radius and motion as named role-based tokens. Use before building any interface.
-
eliasstravik Skill HTMLThe html skill owns creating and revising durable, standalone HTML artifacts: a complete self-contained index.html saved in a requested or generated artifact directory, with inline dependencies, accessible structure, loopback serving, and exact-file verification. It triggers when a user asks to create, build, turn content or data into, save, revise, or update a “durable HTML artifact,” “one-file dashboard,” “single-page local artifact,” or named HTML artifact, or explicitly says “use /html” or “activate the HTML skill.” It does not trigger for integrating HTML into React or Next.js routing, reviewing or explaining HTML or accessibility, browser-based QA of an existing page, converting Figma designs into reusable components, or merely serving an existing dist directory.
-
endorphin-ai Bundle UX ExpertUse for UX RESEARCH, DEFINITION and EVALUATION work — the reasoning that comes BEFORE a wireframe and the critique that comes AFTER a build. Six modes: `research` (pick the right research method for the question + product stage), `personas` (research-grounded personas, 2-4, relevance-tested), `storyboard` (one persona · one scenario · one path, panels with emotion per step), `heuristics` (Nielsen H1-H10 critique or design guidance), `review` (compact combined UX / conversion / craft / a11y / AI-product review with a verdict + max-3 priority actions), `analysis` (design FORENSICS — measure a screenshot or live URL: exact hexes, type scale, grid, composition metrics, tokens — measured, never guessed). Trigger on: 'is this good UX?', 'review this design/flow', 'critique this UI', 'what research should I do', 'define our users', 'create a persona', 'sketch a user flow', 'storyboard this scenario', 'analyze this design', 'what colors/fonts is this using', 'extract the design system', 'why isn't this converting'. W
-
lindoelio Bundle Bootstrap 5Build modern, responsive, accessible web interfaces using pure Bootstrap 5. Use when creating layouts, components, forms, or styling with Bootstrap's utility classes and components. Covers grid system, flexbox utilities, spacing, colors, typography, forms, buttons, cards, modals, navbars, dropdowns, alerts, and best practices for responsive design.
-
manalkaff Skill Frontend DesignUse when designing without an existing brand system. Pushes for a committed, distinctive aesthetic rather than generic defaults — extreme directions, bold typography, decisive color commitment.
-
manalkaff Skill Create Design SystemUse when the user asks to produce a reusable design system or UI kit from an existing brand, codebase, or product. Writes to ./opendesign/design-systems/<name>/ so opendesign can auto-discover it in future sessions.
-
mukiwu Skill Pixel DiffPixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.
-
mukiwu Skill Figma ExportExport Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.
-
nainishshafi Bundle Architectural PlanningUse when the user asks to "plan my architecture", "design system architecture", "create an architecture document", "help me choose a tech stack", "what technologies should I use", "generate an architecture diagram", "plan my project structure", "recommend a database for my project", "design my API layer", "create a system design", "architecture planning", "tech stack recommendation", or wants interactive guidance to design and document a software system's architecture with technology recommendations.
-
nutstore Bundle Cw Impeccable DesignFrontend design skill from pbakaus/impeccable, ported for EO2Weave. Trigger when user asks to design, redesign, refine, polish, audit, critique, distill, harden, animate, colorize, typeset, layout, clarify, adapt, optimize, extract, document, init, shape, bolder, quieter, delight, overdrive, onboard, live-iterate, or ux-review any frontend UI work. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, empty states. Handles visual hierarchy, information architecture, cognitive load, a11y, performance, responsive, theming, anti-patterns, typography, spacing, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, design systems, tokens. Also use for bland designs that need to become bolder, loud designs that need to become quieter, or ambitious visual effects that should feel technically extraordinary.
-
olo-dot-io Bundle UnicliComprehensive guide to Uni-CLI — the open Agent-Computer Interface runtime for real software. Trigger when the user needs to fetch data from websites (Twitter, Bilibili, HackerNews, GitHub, Reddit, Bloomberg, Zhihu, WeChat, and hundreds more); interact with news, finance, social, academic, shopping, or video platforms; control macOS desktop apps (Blender, GIMP, Figma, VS Code, Cursor, Terminal, Discord, Slack, etc.) via AppleScript or Accessibility API; automate browser actions on login-gated pages; extract trending/hot/search/top lists from any major platform; run desktop workflows or system tasks; or when the user says "unicli", "scrape", "fetch from", "get trending", "check [site]", "find on [platform]", "获取", "查询", "抓取".
-
gnurio Skill Apply Typography ScaleCreate clear typographic hierarchy using hand-crafted font sizes, weights, and colors
-
slogsdon Skill Workflow DesignRun the full design pipeline for a brand or one-off artifact — design-plan (strategy) → design-system (tokens + showcase) → an artifact skill (linkedin / blog-hero / etc.) → screenshot-html (PNG export). Use when the user says "design a brand", "I need the full design system + assets", "set up a new brand from scratch", "design pipeline for X", or when starting visual work on a brand that has no DESIGN.md yet. Do NOT use when the brand already exists and you just need one artifact — call the artifact skill directly.
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 basis-sgo-jira, basis-skill-de-sessao, bootstrap-issues. 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.