# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 51 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=51 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [canva-resize-for-social-media](https://affpapa.org/en/nevibecode/skills/canva-resize-for-social-media.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — Create separate Canva design versions for Facebook, Instagram and LinkedIn formats. - [canva-implement-feedback](https://affpapa.org/en/nevibecode/skills/canva-implement-feedback.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — This skill reads every comment thread on a Canva design, makes the clear-cut edits through the API, and lists what still needs a human. - [canva-edit-design](https://affpapa.org/en/nevibecode/skills/canva-edit-design.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — Modifies existing Canva files through staged editing sessions with mandatory approval. - [canva-design-feedback](https://affpapa.org/en/nevibecode/skills/canva-design-feedback.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — This skill reviews Canva designs and returns ordered feedback on hierarchy, copy, spacing, readability, and accessibility. - [canva-bulk-create](https://affpapa.org/en/nevibecode/skills/canva-bulk-create.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — Turns a table of data into one Canva design per row by autofilling a brand template. - [canva-brand-check](https://affpapa.org/en/nevibecode/skills/canva-brand-check.md) — skill (official OpenAI) · Canva Pty Ltd. · Codex, ChatGPT · ★ 7604 — Checks a Canva design against a brand kit and flags visual or copy differences. - [adobe-design-from-template](https://affpapa.org/en/nevibecode/skills/adobe-design-from-template.md) — skill (official OpenAI) · Adobe Inc · Codex, ChatGPT · ★ 7604 — Find an Adobe Express template, edit its text, images, or background, then download the design as a PDF. - [adobe-create-mockups](https://affpapa.org/en/nevibecode/skills/adobe-create-mockups.md) — skill (official OpenAI) · Adobe Inc · Codex, ChatGPT · ★ 7604 — Places logos, sketches, and design assets onto realistic product mockups via Adobe Firefly. - [adobe-batch-edit-photos](https://affpapa.org/en/nevibecode/skills/adobe-batch-edit-photos.md) — skill (official OpenAI) · Adobe Inc · Codex, ChatGPT · ★ 7604 — Keeps a set of photos visually consistent with shared adjustments. - [ui-mockup](https://affpapa.org/en/nevibecode/skills/ui-mockup.md) — skill · mvschwarz · Claude Code, Codex, Cursor +3 · ★ 8227 — Create ASCII wireframes, standalone HTML screens, or live prototypes from product requirements. - [excalidraw](https://affpapa.org/en/nevibecode/skills/excalidraw.md) — skill · davila7 · Claude Code · 342 installs — This skill routes Excalidraw file work to subagents so large JSON diagrams stay out of the main context. - [auteur](https://affpapa.org/en/nevibecode/skills/auteur.md) — skill · agiwhitelist · Claude Code, Codex, Cursor +3 · ★ 1042 — A skill that designs and builds web experiences from scratch: landing pages, cinematic scroll-directed sites, and multi-screen products in one style. - [feature-design-assistant](https://affpapa.org/en/nevibecode/skills/feature-design-assistant.md) — skill · davila7 · Claude Code · 247 installs — Turns a rough feature idea into a design and spec by asking you structured questions. - [data-viz-renderer](https://affpapa.org/en/nevibecode/skills/data-viz-renderer.md) — skill · zebbern · Claude Code, Codex, Cursor +3 · ★ 4679 — Turn JSON data into standalone HTML/SVG infographics, from metric cards to process diagrams. - [marp-slide](https://affpapa.org/en/nevibecode/skills/marp-slide.md) — skill · davila7 · Claude Code · 217 installs — Turns a rough outline into a Marp slide file and picks a fitting look along the way. - [design-system-starter](https://affpapa.org/en/nevibecode/skills/design-system-starter.md) — skill · davila7 · Claude Code · 186 installs — Generates design tokens, React component hierarchy, and accessibility rules to structure an application design system. - [better-design](https://affpapa.org/en/nevibecode/skills/better-design.md) — skill · marvkr · Claude Code, Codex, Cursor +3 · ★ 527 — Guides coding agents through UI building and review workflows using Better Design MCP. - [mockuplm](https://affpapa.org/en/nevibecode/skills/mockuplm.md) — skill · nimbalyst · Claude Code, Codex, Cursor +3 · ★ 1979 — Generates standalone HTML and CSS mockups to plan UI screens visually. - [excalidraw](https://affpapa.org/en/nevibecode/skills/nimbalyst-excalidraw.md) — skill · nimbalyst · Claude Code, Codex, Cursor +3 · ★ 1979 — Generates flowcharts, architecture diagrams, and system sketches as .excalidraw files directly through agent MCP tools. - [canvas](https://affpapa.org/en/nevibecode/skills/canvas.md) — skill · nimbalyst · Claude Code, Codex, Cursor +3 · ★ 1979 — Generates Nimbalyst .canvas boards with live workspace file editors, sticky notes, and connecting edges. - [animation](https://affpapa.org/en/nevibecode/skills/animation.md) — skill · nimbalyst · Claude Code, Codex, Cursor +3 · ★ 1979 — Create step-based technical explainers as .anim.json files for Nimbalyst’s Animation editor. - [meme-factory](https://affpapa.org/en/nevibecode/skills/meme-factory.md) — skill · davila7 · Claude Code · 139 installs — Builds meme image links via the memegen.link service inside Claude Code. - [diagrammer](https://affpapa.org/en/nevibecode/skills/diagrammer.md) — skill · davila7 · Claude Code · 119 installs — Turns plain-text prompts into blueprint-styled SVG charts via JSON specs. - [ui-ux-governance](https://affpapa.org/en/nevibecode/skills/ui-ux-governance.md) — skill · GanyuanRan · Claude Code, Codex, Cursor +3 · ★ 1388 — A skill that gives the agent rules for interface work: how to pick flows, handle states and keep accessibility intact. - [mui](https://affpapa.org/en/nevibecode/skills/mui.md) — skill · davila7 · Claude Code · 110 installs — This skill guides Claude Code through Material UI v7 components, theme-based styling, responsive layouts, and form patterns in React projects. - [screenshot-feature-extractor](https://affpapa.org/en/nevibecode/skills/screenshot-feature-extractor.md) — skill · davila7 · Claude Code · 97 installs — Turns interface screenshots into a feature and task checklist. - [creative-portfolio-resume](https://affpapa.org/en/nevibecode/skills/creative-portfolio-resume.md) — skill · davila7 · Claude Code · 86 installs — Build a resume for a creative role with both visual character and ATS-friendly structure. - [nano-banana-pro](https://affpapa.org/en/nevibecode/skills/swarmclawai-nano-banana-pro.md) — skill · swarmclawai · Claude Code, Codex, Cursor +3 · ★ 700 — Generate images with Gemini 3 Pro Image, edit a single file, or combine several into one composition. - [makepad-2.0-vector](https://affpapa.org/en/nevibecode/skills/makepad-20-vector.md) — skill · ZhangHanDong · Claude Code, Codex, Cursor +3 · ★ 751 — Teaches your coding assistant how to write vector shapes and animations for Makepad 2.0. - [makepad-2.0-theme](https://affpapa.org/en/nevibecode/skills/makepad-20-theme.md) — skill · ZhangHanDong · Claude Code, Codex, Cursor +3 · ★ 751 — A skill covering the Makepad 2.0 theme system: theme.* variables, dark and light modes, colors, fonts and spacing in Splash. - [makepad-2.0-layout](https://affpapa.org/en/nevibecode/skills/makepad-20-layout.md) — skill · ZhangHanDong · Claude Code, Codex, Cursor +3 · ★ 751 — This skill guides an agent through sizing widgets and arranging children in Makepad 2.0. - [makepad-2.0-design-judgment](https://affpapa.org/en/nevibecode/skills/makepad-20-design-judgment.md) — skill · ZhangHanDong · Claude Code, Codex, Cursor +3 · ★ 751 — Entry skill for Makepad 2.0 architecture: routes syntax questions to specialized skills and anchors design decisions on data flow, component split, and GPU rendering. - [dashmotion](https://affpapa.org/en/nevibecode/skills/dashmotion.md) — skill · csthink · Claude Code, Codex, Cursor +3 · ★ 181 — Generates dark-themed animated SVG diagrams as standalone HTML files. - [core-components](https://affpapa.org/en/nevibecode/skills/core-components.md) — skill · davila7 · Claude Code · 66 installs — A Claude skill that keeps the agent on your own component library and design tokens instead of raw platform primitives. - [strategy-consulting-visualization](https://affpapa.org/en/nevibecode/skills/strategy-consulting-visualization.md) — skill · kgraph57 · Claude Code, Codex, Cursor +3 · ★ 154 — Turns prose, data, and notes into structured strategy visuals for slides, reports, and interactive presentations. - [video](https://affpapa.org/en/nevibecode/skills/ohad6k-video.md) — skill · ohad6k · Claude Code, Codex, Cursor +3 · ★ 299 — This skill turns a brief into a Claude Design folder with a prompt, composition files, and review frames. - [design](https://affpapa.org/en/nevibecode/skills/ohad6k-design.md) — skill · ohad6k · Claude Code, Codex, Cursor +3 · ★ 299 — Applies Emulo taste profiles to guide UI, UX, and visual hierarchy tasks. - [higgsfield](https://affpapa.org/en/nevibecode/skills/higgsfield.md) — skill · aeonfun · Claude Code, Codex, Cursor +3 · ★ 783 — Generates images and video through the Higgsfield MCP server across 100+ models. - [nerv-ui](https://affpapa.org/en/nevibecode/skills/nerv-ui.md) — skill · mdrbx · Claude Code, Codex, Cursor +3 · ★ 95 — A skill that steers the agent toward building React command-center screens with the published @mdrbx/nerv-ui library — dashboards, monitoring terminals, auth pages. - [brainstorm-prototypes](https://affpapa.org/en/nevibecode/skills/brainstorm-prototypes.md) — skill · Neeeophytee · Claude Code, Codex, Cursor +3 · ★ 355 — A skill that produces 3–5 deliberately different throwaway variations — layouts, approaches, names — so you can react to them instead of describing what you want. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=52 ## Refine [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ux](https://affpapa.org/en/nevibecode/tag/ux.md) · [image-generation](https://affpapa.org/en/nevibecode/tag/image-generation.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [typography](https://affpapa.org/en/nevibecode/tag/typography.md) · [html](https://affpapa.org/en/nevibecode/tag/html.md) · [design-tokens](https://affpapa.org/en/nevibecode/tag/design-tokens.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md