# Skills for Design

Skills for Design: what each one does, an install command and example prompts.

2133 cards · page 23 of 54

- HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=23
- Instructions for agents: https://affpapa.org/en/nevibecode/agents.md

- [landing](https://affpapa.org/en/nevibecode/skills/landing.md) — skill · Alireza Rezvani · Claude Code · 404 installs — This skill creates a single-page HTML landing page with 3D CSS animation, GSAP scroll effects, and mouse parallax.
- [conversion-optimization](https://affpapa.org/en/nevibecode/skills/wondelai-conversion-optimization.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 1300 installs — A guided funnel audit for leaking landing pages, signups, checkouts, or onboarding flows.
- [tastemaker](https://affpapa.org/en/nevibecode/skills/tastemaker.md) — skill · codeswithroh · Claude Code, Codex, Cursor +3 · 892 installs — A skill that pulls style from real references, locks it per project, and reuses it across every screen.
- [seedance-2.0-prompter](https://affpapa.org/en/nevibecode/skills/seedance-20-prompter.md) — skill · pexoai · Claude Code, Codex, Cursor +3 · 1300 installs — Builds a structured Seedance 2.0 video prompt from images, videos, audio, and a creative brief.
- [android-design-guidelines](https://affpapa.org/en/nevibecode/skills/android-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that keeps an AI agent inside Material Design 3 while building Android UI: dynamic color, color roles, navigation patterns.
- [image-generation](https://affpapa.org/en/nevibecode/skills/image-generation.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 5600 installs — Turns a rough visual idea into a working prompt for DALL-E, Midjourney or Stable Diffusion, shaped for the tool you actually use.
- [chart-designer](https://affpapa.org/en/nevibecode/skills/chart-designer.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 5700 installs — Picks a chart type for your data and hands back ready configs for ECharts and Chart.js.
- [figma-shaders](https://affpapa.org/en/nevibecode/skills/figma-shaders.md) — skill · figma · Claude Code, Codex, Cursor +3 · 520 installs — Create or revise Figma shader effects and fills through MCP.
- [remotion-3d-ticker](https://affpapa.org/en/nevibecode/skills/remotion-3d-ticker.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 852 installs — Builds looping 3D column scroll effects for Remotion videos.
- [landing-page-design](https://affpapa.org/en/nevibecode/skills/landing-page-design.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 56100 installs — Guides landing page work around the hero, CTA and social proof.
- [light-spotlight-render](https://affpapa.org/en/nevibecode/skills/light-spotlight-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 840 installs — Create a standalone HTML animation that reveals text with a swinging spotlight.
- [product-photography](https://affpapa.org/en/nevibecode/skills/product-photography.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 55700 installs — Generates commercial product renders, e-commerce packshots, and lifestyle scenes.
- [storyboard-creation](https://affpapa.org/en/nevibecode/skills/storyboard-creation.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 55500 installs — A skill for planning film and video storyboards: shot vocabulary, camera angles, continuity rules and panel annotation format.
- [character-design-sheet](https://affpapa.org/en/nevibecode/skills/character-design-sheet.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 55500 installs — Maintains consistent character appearances across AI image generations using FLUX LoRA anchors and multi-view reference sheets.
- [app-store-screenshots](https://affpapa.org/en/nevibecode/skills/app-store-screenshots.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 55600 installs — Creates store listing screenshots, device mockups and preview-video scenes for Apple App Store and Google Play.
- [youtube-thumbnail-design](https://affpapa.org/en/nevibecode/skills/youtube-thumbnail-design.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 55400 installs — A skill for YouTube thumbnail design: sizes, contrast, safe zones, and image generation through the belt CLI.
- [image-processing](https://affpapa.org/en/nevibecode/skills/image-processing.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2400 installs — Resize, trim whitespace, convert PNG/WebP/JPG, optimise size, build thumbnails and OG cards.
- [figma-generative-plugins](https://affpapa.org/en/nevibecode/skills/figma-generative-plugins.md) — skill · figma · Claude Code, Codex, Cursor +3 · 504 installs — Guides AI agents through authoring and updating generative Figma Design plugins.
- [wechat-2d-render](https://affpapa.org/en/nevibecode/skills/wechat-2d-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 817 installs — Pulls the wechat-2d project and renders its WeChat-style 2D chat animation with Remotion.
- [object-separation](https://affpapa.org/en/nevibecode/skills/object-separation.md) — skill · Barty-Bart · Claude Code, Codex, Cursor +3 · 1100 installs — Isolates a person or product from video backgrounds using SAM 2 right on your machine.
- [video](https://affpapa.org/en/nevibecode/skills/smixs-video.md) — skill · smixs · Claude Code, Codex, Cursor +3 · 959 installs — Writes and repairs prompts for AI video generators, and builds storyboards and shot lists along the way.
- [storefront-best-practices](https://affpapa.org/en/nevibecode/skills/storefront-best-practices.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4600 installs — This skill guides storefront work, from product pages and carts to checkout flows.
- [design-review](https://affpapa.org/en/nevibecode/skills/plugin87-design-review.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 594 installs — The skill scores a screen or flow across six weighted dimensions, runs Nielsen's heuristics and returns a prioritized findings table.
- [rams](https://affpapa.org/en/nevibecode/skills/rams.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 3000 installs — Reviews UI components for WCAG 2.1 compliance and visual styling bugs.
- [infographic](https://affpapa.org/en/nevibecode/skills/infographic.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 5100 installs — Plans layouts, wireframes, and narrative structure for infographics.
- [building-admin-dashboard-customizations](https://affpapa.org/en/nevibecode/skills/building-admin-dashboard-customizations.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4400 installs — Guides AI agents in building Medusa Admin dashboard extensions, widgets, and custom UI routes.
- [image](https://affpapa.org/en/nevibecode/skills/smixs-image.md) — skill · smixs · Claude Code, Codex, Cursor +3 · 916 installs — Creates image prompts for Nano Banana and GPT Image 2.5, with model, quality, size, and aspect-ratio guidance.
- [Frontend Responsive Design Standards](https://affpapa.org/en/nevibecode/skills/frontend-responsive-design-standards.md) — skill · am-will · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that gives your coding agent rules for mobile-first layouts: breakpoints, relative units, touch targets and content priority.
- [higgsfield](https://affpapa.org/en/nevibecode/skills/o-side-media-higgsfield.md) — skill · O-Side Media · Claude Code, Codex, Cursor +3 · 524 installs — Writes and refines prompts for Higgsfield video and image models, choosing camera setups and motion presets.
- [diagram-creator](https://affpapa.org/en/nevibecode/skills/diagram-creator.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 5000 installs — Generates system diagrams and flowcharts using Mermaid, PlantUML, and D2 syntax.
- [favicon-gen](https://affpapa.org/en/nevibecode/skills/favicon-gen.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2200 installs — Generates complete favicon packages and web manifests from logos, text monograms, or brand colors.
- [axiom-design](https://affpapa.org/en/nevibecode/skills/axiom-design.md) — skill · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1400 installs — Guides Apple UI decisions across Human Interface Guidelines, Liquid Glass effects, SF Symbols rendering, typography, and app entry points.
- [ui-ux](https://affpapa.org/en/nevibecode/skills/ui-ux.md) — skill · evondev · Claude Code, Codex, Cursor +3 · 884 installs — A skill that makes the agent follow a design process: brief, 2–3 wireframes, then code.
- [app-icon](https://affpapa.org/en/nevibecode/skills/app-icon.md) — skill · Code-with-Beto · Claude Code, Codex, Cursor +3 · 2100 installs — Generates and configures app icons for React Native Expo apps.
- [a11y-audit](https://affpapa.org/en/nevibecode/skills/plugin87-a11y-audit.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 550 installs — Audits UI and design against WCAG 2.2 and ARIA patterns.
- [frontend-design-deslop](https://affpapa.org/en/nevibecode/skills/frontend-design-deslop.md) — skill · samber · Claude Code, Codex, Cursor +3 · 4800 installs — A skill that steers generated interfaces away from the default AI look: typography, OKLCH color, design tokens, dark mode, accessibility.
- [generate-image](https://affpapa.org/en/nevibecode/skills/generate-image.md) — skill (official GitHub) · github · GitHub Copilot · 93 installs — Generate images from text prompts with OpenAI or Google Gemini.
- [favicon](https://affpapa.org/en/nevibecode/skills/favicon.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — Creates favicon files from one source image, then updates the web manifest and project HTML.
- [design-tokens](https://affpapa.org/en/nevibecode/skills/plugin87-design-tokens.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 538 installs — Create, extend, and validate DTCG design tokens with a three-tier structure.
- [redesign](https://affpapa.org/en/nevibecode/skills/redesign.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 535 installs — This skill audits an existing interface and revises its design while preserving working features.

Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=24

## 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=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&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
