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.
-
prone-dc302 Skill Alterlab Vcd TypographerThis skill should be used when the user asks about "typography", "type design", "font selection", "font pairing", "typographic hierarchy", "typographic grid", "type scale", "readability", "legibility", "kerning", "leading", "tracking", "typeface classification", "serif vs sans-serif", "modular scale", "act as a typographer", "typographer mode", "type system", "web typography", "variable fonts", "responsive typography", "paragraph spacing", "baseline grid", or needs expertise in type selection, typographic hierarchy design, font pairing strategies, and readability optimization. Part of the AlterLab FC Skills collection (VCD department).
-
prone-dc302 Skill Alterlab Vcd UI DesignerThis skill should be used when the user asks about "UI design", "user interface design", "wireframing", "wireframe", "design system", "component library", "app design", "web interface design", "mobile UI", "atomic design", "8pt grid", "Material Design", "Human Interface Guidelines", "HIG", "design tokens", "responsive design", "act as a UI designer", "UI designer mode", "interface patterns", "UI kit", "navigation design", "form design", "dashboard layout", "button styles", "input fields", "card components", "modal design", "design handoff", or needs expertise in app and web interface design, wireframing, design systems, and component libraries. Part of the AlterLab FC Skills collection (VCD department).
-
prone-dc302 Skill Alterlab Vcd Design CriticThis skill should be used when the user asks about "design critique", "design review", "portfolio review", "visual analysis", "design writing", "design criticism", "formal analysis", "semiotic analysis", "design history", "design essay", "act as a design critic", "design critic mode", "critique my design", "review my portfolio", "design feedback", "visual rhetoric", "design theory", "composition analysis", "typography critique", "layout analysis", "design principles evaluation", "Gestalt analysis", "design case study", "design presentation", "design rationale", "defend design decisions", or needs expertise in design critique, portfolio review, visual analysis, and design writing. Part of the AlterLab FC Skills collection (VCD department).
-
prone-dc302 Skill Alterlab Vcd Brand IdentityThis skill should be used when the user asks about "brand identity", "logo design", "visual identity", "brand guidelines", "brand book", "brand system", "logo system", "brand architecture", "identity design", "brand standards", "style guide", "brand manual", "act as a brand identity designer", "brand identity mode", "visual identity system", "logo variations", "brand audit", "rebrand", "brand refresh", "wordmark", "brandmark", "monogram", "color palette for brand", "brand assets", or needs expertise in designing comprehensive visual identity systems, logo families, and brand guideline documents. Part of the AlterLab FC Skills collection (VCD department).
-
prone-dc302 Skill Alterlab Vcd Color TheoristThis skill should be used when the user asks about "color theory", "color palette", "color scheme", "color psychology", "WCAG contrast", "contrast ratio", "color accessibility", "color systems", "Munsell", "Itten color wheel", "HSL", "HSB", "color harmony", "complementary colors", "analogous colors", "triadic colors", "color grading", "brand colors", "act as a color theorist", "color theorist mode", "palette generation", "color meaning", "cultural color associations", "color in design", "color tokens", "dark mode colors", "color blindness", "colorblind safe", "vibrant palette", or needs expertise in color palettes, color psychology, accessibility contrast, and color systems. Part of the AlterLab FC Skills collection (VCD department).
-
prone-dc302 Skill Alterlab Rma Abstract WriterThis skill should be used when the user asks about "writing an abstract", "abstract format", "structured abstract", "IMRAD abstract", "conference abstract", "thesis abstract", "dissertation abstract", "abstract submission", "keyword selection", "research summary", "act as an abstract writer", "abstract writer mode", "executive summary", "abstract optimization", "abstract for publication", "paper abstract", "how to write an abstract", "abstract word limit", "abstract discoverability", "journal abstract", "poster abstract", "abstract revision", or needs expertise in crafting compelling academic abstracts, structured summaries, and keyword strategies. Part of the AlterLab FC Skills collection (Research Methods & Academic Writing department).
-
prone-dc302 Skill Alterlab Vcd Motion GraphicsThis skill should be used when the user asks about "motion graphics", "motion design", "title sequence", "kinetic typography", "explainer animation", "motion branding", "animated logo", "lower thirds", "broadcast design", "After Effects", "act as a motion graphics designer", "motion graphics mode", "animation principles", "ease curves", "timing and spacing", "transition design", "animated infographic", "intro animation", "outro animation", "bumper", "ident", "stinger", "lyric video", "animated social media", "loop animation", "GIF design", or needs expertise in title sequences, explainer animations, kinetic typography, and motion branding design. Part of the AlterLab FC Skills collection (VCD department).
-
dragoon0x Skill Trust SignalsBuild credibility through evidence, not claims. Patterns for social proof, testimonials, logo walls, case studies, and security badges. Use when conversion is low despite good traffic or when the product is new and unknown.
-
sandeco Bundle Reversa RestructureRefatoração de estrutura interna (método/classe) via catálogo Fowler, em passos pequenos e reversíveis, preservando o comportamento. Não move módulos nem muda dependências.
-
sandeco Bundle Reversa Extract SoulExtrai a alma do projeto legado em uma única Spec síntese (soul.md), reunindo propósito, entidades centrais e decisões fundadoras. Roda logo após o Scout, é leve e não substitui Archaeologist/Detective.
-
sandeco Bundle Reversa Debugger GraphGerador de views do time Bugs: varre os bug.md, valida invariantes e regenera índice, catálogo, matriz de relações BUG↔BUG, grafo mermaid e matriz de rastreabilidade BUG↔SPEC.
-
njs14 Bundle ImpeccableDesign, redesign, critique, audit, or refine a frontend interface, including its typography, layout, color, motion, responsive behavior, accessibility, and UX copy.
-
axt-team Bundle Uapi Get Daily News Image使用 UAPI 的“每日新闻图”单接口 skill,处理 每日新闻图、新闻海报、每日内容 等请求。 Use when the user wants get daily news image, daily news-image, news-image, daily news image, daily digest, news poster, or when you need to call GET /daily/news-image directly.
-
clawic Skill Style ApplyApply a Style to any artifact in the workspace (presentation, card, poster, social post, web page). Use when the user says "apply style X", "render this with style X", or wants to reuse a saved style on a new piece.
Audited -
clawic Skill Canvas DesignApply the 90/10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.
Audited -
clawic Skill Template RenderRender a Template + data + Style into a final artifact in one of HTML, PDF, PNG, SVG or PPTX. Use whenever the user asks for a concrete deliverable like "make me a poster", "render a card", "give me a one-pager".
Audited -
clawic Skill Brand GuidelinesGiven an existing Style, generate a human-readable brand guidelines document covering colors, typography, voice, do/don't, imagery rules, and usage examples. Use when the user asks for a brand book, brand guide, or design system document.
Audited -
jaechang-hits Bundle Latex Research PostersResearch posters in LaTeX using beamerposter, tikzposter, or baposter. Layout, typography, color schemes, figure integration, accessibility, and QA for conferences. Includes templates. For figure generation use matplotlib-scientific-plotting or plotly-interactive-plots.
-
systempromptio Skill Visual Design SystemWorld-class visual design system standards — OKLCH color science, fluid typography, elevation hierarchy, branded asymmetric corners, and dark mode implementation
-
edmundmiller Bundle Markdown GraphsDesign and implement text-forward technical diagrams embedded in MDX using semantic HTML, CSS grids, ASCII-inspired typography, and SVG paths or motion. Use for article diagrams, process loops, comparison tables, formula illustrations, or terminal-style explanatory graphics; not for ordinary data charts, Obsidian knowledge graphs, or Mermaid-first architecture documentation.
-
redpanda-data Bundle Setup Registry WorkflowRegistry hooks + component taxonomy + consumer drift analysis. Use when maintain shadcn component registry, design system, or analyze drift between consumer repos + registry.
6 -
davidtoby Bundle Chinese PDF ReportCreate professional Chinese PDF reports with reliable font rendering on macOS, especially when previous HTML-to-PDF output produced garbled Chinese text, missing glyphs, or ugly default typography. Use when asked to generate or re-export Chinese-heavy PDFs, fix Chinese font issues, improve typography for formal reports, or turn one-off Chinese PDF formatting lessons into a repeatable delivery workflow.
-
davidtoby Bundle Beautiful Feishu CardGenerate modern, elegant, and highly readable Feishu Interactive Cards (Schema 2.0 JSON) wrapped for CardKit (.card). Uses strict design system rules: 12 header color themes, color palette harmony (≤3 main colors), structured layouts (column_set, dividers, callout markdown), interactive preview messaging via lark-cli, and clickable GitHub footer links.
-
davidtoby Bundle Beautiful Feishu WhiteboardA library of 37 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards from SVG. Use this whenever the user wants to create or draw a Feishu whiteboard, infographic, diagram, poster, or visual explainer and wants it to look polished, on brand, or in a particular aesthetic, or when they name a style. The agent figures out what board the user wants, asks about the visual vibe, picks a fitting style from the catalogue, generates an editable Feishu whiteboard, returns the doc link and the rendered image, and offers to switch styles. Requires lark-cli (npm @larksuite/cli) installed and authenticated, and a Feishu/Lark account.
-
userlg Bundle UI UX Pro MaxUI/UX design intelligence v2.0 with AI-powered Design System Generator. 67 styles, 96 color palettes, 57 font pairings, 25 chart types, 100 industry-specific reasoning rules, 13 tech stacks. Auto-generates complete design systems with pattern recommendations, color moods, typography, effects, and anti-patterns. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
-
krmorehead Skill Webui Design SystemNiceGUI web UI design system, color semantics, CSS patterns, and testing conventions. Use when modifying scripts/webui/ pages, theme.py, or writing test_webui_* tests.
-
itallstartedwithaidea Skill Web Design GuidelinesWeb Design Guidelines encodes 100+ rules covering accessibility, focus states, forms, animation, typography, images, performance, navigation, dark mode, touch targets, and internationalization.
-
goharabbas321 Skill Typeui CLIGuide for agentic tools to use the typeui.sh CLI for generating, updating, listing, and pulling design system skill files.
Audited -
goharabbas321 Skill Figma To CodeFigma design-to-code pipeline patterns. Covers Dev Mode, CSS extraction, component mapping, design token export, and maintaining design-code parity.
-
systempromptio Skill Factsheet DesignPrint design system for systemprompt.io PDF factsheets and one-pagers. Light branded containers (never dark glassmorphism), print token table, sp-card asymmetric corners in points, full-width SVG diagram rules, WeasyPrint constraints, and the two-page budget discipline. Load before creating or editing any factsheet, one-pager, or PDF sales asset.
-
madappgang Skill Frontend ImplementRewrites generic-looking UI by five anti-generic rules — asymmetry, texture, typography, motion, colour. Use when applying design-review fixes, or UI looks AI-generated.
-
edwinhu Bundle Law Econ DOCXUse this skill to BUILD a Word manuscript from LAW AND ECONOMICS markdown — author-date citations plus a reference list, double spaced throughout, Latin Modern typography — for the Journal of Law and Economics, Journal of Legal Studies, JLEO, ALER, or an econ-flavored job market paper. Triggers: 'build the L&E paper', 'law and economics Word template', 'JLE submission docx', 'Journal of Legal Studies format', 'JLEO manuscript', 'author-date Word document', 'econ job market paper in Word', 'Chicago author-date docx', 'make the submission docx for JLE'. NEGATIVE ROUTING: NOT 'law-review-docx' (Bluebook footnotes, TOC and small caps — different citation model), NOT 'docx-typst' (source is Typst, not markdown), NOT the generic 'docx' skill (edits docx content), NOT 'docx-render' (renders an existing docx to PDF/PNG only).
-
timurgaleev Skill Design ConsultationDesign consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead.
-
userlg Skill Dise Ador Sistemas VisualesOrquestador de generación de sistemas de diseño completos usando el reasoning engine de ui-ux-pro-max. Genera sistemas de diseño con Pattern, Style, Colors, Typography, Effects y Anti-patterns. Crea archivos MASTER.md y page-specific overrides. Valida contra anti-patterns y exporta en múltiples formatos. Use cuando: generar design system, crear sistema de diseño, diseño completo, design system generator, paleta de colores + tipografía + estilo.
-
ci Bundle Agent BrowserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
-
practice019 Skill Canvas Design基于设计哲学创作精美视觉艺术(PNG/PDF) Create 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.
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 setup-registry-workflow, alterlab-vcd-typographer, alterlab-vcd-ui-designer. 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.