# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 47 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=47 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [figma-swiftui](https://affpapa.org/en/nevibecode/skills/figma-swiftui.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 6 installs — Translates Figma designs into SwiftUI and sends SwiftUI back to Figma. - [figma-implement-motion](https://affpapa.org/en/nevibecode/skills/figma-implement-motion.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 6 installs — Translates Figma animations and transitions into production code using motion.dev or CSS keyframes. - [brochure-design-generation](https://affpapa.org/en/nevibecode/skills/brochure-design-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 538 installs — This skill uses each::sense AI to create brochure layouts, from tri-fold and bi-fold pieces to catalogs and event programs. - [muapi-photo-pack-generator](https://affpapa.org/en/nevibecode/skills/muapi-photo-pack-generator.md) — skill · SamurAIGPT · Claude Code, Codex, Cursor +3 · 966 installs — Turns a single reference photo into a set of themed portraits while keeping the person's face intact. - [tailwind-css](https://affpapa.org/en/nevibecode/skills/manutej-tailwind-css.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 461 installs — A Tailwind CSS skill covering utility classes, responsive variants, dark mode and production optimization. - [ux-research-discovery-testing](https://affpapa.org/en/nevibecode/skills/ux-research-discovery-testing.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 468 installs — Gives your agent a working method for discovery interviews, usability tests and synthesis, so product calls rest on observed behavior instead of opinions. - [image-to-video](https://affpapa.org/en/nevibecode/skills/eachlabs-image-to-video.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 521 installs — Turns still photos into short videos with each::sense: subtle motion, cinemagraphs, camera pushes. - [mold](https://affpapa.org/en/nevibecode/skills/mold.md) — skill · paulnsorensen · Claude Code, Codex, Cursor +3 · 643 installs — mold turns a high-stakes design choice into a checked specification through guided dialogue. - [frontend-crafting](https://affpapa.org/en/nevibecode/skills/frontend-crafting.md) — skill · sentimony · Claude Code, Codex, Cursor +3 · 1400 installs — A design and UI skill for building, reviewing, and refining interfaces in React, Vue, or HTML. - [tailwind-patterns](https://affpapa.org/en/nevibecode/skills/tailwind-patterns.md) — skill · davila7 · Claude Code · 2720 installs — A Claude skill that hands the agent a rulebook for Tailwind CSS v4: CSS-first config, container queries, token architecture. - [dark-mode-implementer](https://affpapa.org/en/nevibecode/skills/dark-mode-implementer.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 373 installs — Configures dark and light themes using CSS variables, Tailwind classes, or React context. - [designing-user-experience](https://affpapa.org/en/nevibecode/skills/designing-user-experience.md) — skill · osmontero · Claude Code, Codex, Cursor +3 · 458 installs — A skill for designing how an interface behaves: flows, forms, empty, loading and error states. - [glassmorphism](https://affpapa.org/en/nevibecode/skills/ainergiz-glassmorphism.md) — skill · ainergiz · Claude Code, Codex, Cursor +3 · 526 installs — Generates frosted glass interface elements using blur, opacity, and delicate borders. - [flyer-design-generation](https://affpapa.org/en/nevibecode/skills/flyer-design-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 490 installs — Builds flyer layouts and promo leaflets through the each::sense API. - [progressive-blur-header-swiftui](https://affpapa.org/en/nevibecode/skills/progressive-blur-header-swiftui.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 493 installs — This skill adds a SwiftUI sticky header with a gradual blur effect. - [pinterest-search](https://affpapa.org/en/nevibecode/skills/pinterest-search.md) — skill · PostPlusAI · Claude Code, Codex, Cursor +3 · 524 installs — Locates public Pinterest imagery and videos from a search term. - [design-system](https://affpapa.org/en/nevibecode/skills/akillness-design-system.md) — skill · akillness · Claude Code, Codex, Cursor +3 · 488 installs — Defines or refactors shared frontend UI tokens, primitive naming, and visual rules before individual screen styling. - [responsive-design](https://affpapa.org/en/nevibecode/skills/akillness-responsive-design.md) — skill · akillness · Claude Code, Codex, Cursor +3 · 478 installs — The skill turns a vague “breaks on mobile” report into one named responsive surface, a strategy packet and a verification plan. - [portrait-enhancement](https://affpapa.org/en/nevibecode/skills/portrait-enhancement.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 466 installs — Automates AI-driven portrait retouching with each::sense. - [responsive-design-system](https://affpapa.org/en/nevibecode/skills/responsive-design-system.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 343 installs — A skill that walks your coding agent through mobile-first layouts: breakpoints, container queries, fluid typography and adaptive grids built on Tailwind CSS. - [background-removal](https://affpapa.org/en/nevibecode/skills/background-removal.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 465 installs — This skill strips backgrounds from pictures using the each::sense AI API. - [html-ppt-skill](https://affpapa.org/en/nevibecode/skills/html-ppt-skill.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 476 installs — Builds static HTML slide decks using standalone CSS and JavaScript without build pipelines. - [index](https://affpapa.org/en/nevibecode/skills/openai-index.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 5 installs — This skill routes product design requests to the right workflow. - [ideate](https://affpapa.org/en/nevibecode/skills/ideate.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 5 installs — This skill turns a Product Design brief into three visual directions. - [figma-use-motion](https://affpapa.org/en/nevibecode/skills/figma-use-motion.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 5 installs — Adds use_figma context for Figma node animation, covering keyframes, easing, animation styles, and timeline duration. - [figma-use-figjam](https://affpapa.org/en/nevibecode/skills/figma-use-figjam.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 5 installs — This skill gives Codex FigJam-specific context for Figma’s MCP tools. - [figma-generate-diagram](https://affpapa.org/en/nevibecode/skills/figma-generate-diagram.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 5 installs — Prepares Mermaid.js syntax for the generate_diagram tool and renders editable FigJam boards. - [youtube-intro-outro](https://affpapa.org/en/nevibecode/skills/youtube-intro-outro.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 686 installs — Builds a 3–5s logo sting intro and an outro plate with room for YouTube's clickable elements. - [frontend-design](https://affpapa.org/en/nevibecode/skills/customware-ai-frontend-design.md) — skill · customware-ai · Claude Code, Codex, Cursor +3 · 1600 installs — Strict visual guidelines that stop AI agents from spitting out generic purple SaaS cards, cramped tables, and unneeded sidebars in Tailwind and shadcn/ui. - [wordpress-theme-to-emdash](https://affpapa.org/en/nevibecode/skills/wordpress-theme-to-emdash.md) — skill · emdash-cms · Claude Code, Codex, Cursor +3 · 691 installs — Ports a WordPress theme's design and template behavior to an Astro site backed by EmDash. - [packaging-design-generation](https://affpapa.org/en/nevibecode/skills/packaging-design-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 444 installs — This skill turns a product description into packaging artwork with each::sense AI — boxes, labels, jars, coffee bags. - [ugc-ad](https://affpapa.org/en/nevibecode/skills/ugc-ad.md) — skill · PostPlusAI · Claude Code, Codex, Cursor +3 · 475 installs — Builds creator-style ad concepts, shot tables, and audits existing product videos. - [milvus-meme-sticker](https://affpapa.org/en/nevibecode/skills/milvus-meme-sticker.md) — skill · zc277584121 · Claude Code, Codex, Cursor +3 · 2300 installs — Crafts text-free sticker memes featuring the abstract Milvus mascot for developer chats and technical marketing posts. - [designing-email-templates](https://affpapa.org/en/nevibecode/skills/designing-email-templates.md) — skill · PostHog · Claude Code, Codex, Cursor +3 · 301 installs — Creates and edits PostHog email templates for workflows and campaigns through MCP. - [anime-avatar-generation](https://affpapa.org/en/nevibecode/skills/anime-avatar-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 427 installs — Creates anime avatars and character art with each::sense AI. - [eachlabs-fashion-ai](https://affpapa.org/en/nevibecode/skills/eachlabs-fashion-ai.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 426 installs — Generates fashion model photography, virtual garment try-ons, catwalk clips, and custom style training via EachLabs API. - [educational-ad](https://affpapa.org/en/nevibecode/skills/educational-ad.md) — skill · PostPlusAI · Claude Code, Codex, Cursor +3 · 464 installs — Builds and audits short educational advertising scripts backed by visual evidence and verified product reasoning. - [cartoon-ad](https://affpapa.org/en/nevibecode/skills/cartoon-ad.md) — skill · PostPlusAI · Claude Code, Codex, Cursor +3 · 462 installs — This skill designs and audits animated ads through visual arguments, metaphors, and supported proof. - [diagram-design-editorial](https://affpapa.org/en/nevibecode/skills/diagram-design-editorial.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 433 installs — A skill that turns a short description into an HTML+SVG diagram for posts and docs. - [tailwind-gradient-builder](https://affpapa.org/en/nevibecode/skills/tailwind-gradient-builder.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 307 installs — Generates modern Tailwind CSS gradients, from simple linear stops to mesh layouts and animated text. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=48 ## 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