# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 27 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=27 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [horizontal-scroll-scenes](https://affpapa.org/en/nevibecode/skills/horizontal-scroll-scenes.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 367 installs — A skill for chapters that travel left to right while the reader scrolls down. - [amazon-listing-images](https://affpapa.org/en/nevibecode/skills/amazon-listing-images.md) — skill · nexscope-ai · Claude Code, Codex, Cursor +3 · 1400 installs — Plans the visuals for an Amazon product listing: shot list, infographics, lifestyle scenes and mobile-first layout. - [transpose](https://affpapa.org/en/nevibecode/skills/transpose.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Rethinks an experience for a new platform instead of shrinking it: interaction model, information priority and user context all change. - [philosopher](https://affpapa.org/en/nevibecode/skills/philosopher.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Puts the agent into a wide-association mode so it sits with a design problem before rushing to solve it. - [measure](https://affpapa.org/en/nevibecode/skills/measure.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Defines and tracks UX metrics, experimentation frameworks, and counter-metrics. - [vox-explainer](https://affpapa.org/en/nevibecode/skills/vox-explainer.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Turn a sourced explainer script into a short documentary-style video, built in HTML and exported as MP4. - [motion-effects](https://affpapa.org/en/nevibecode/skills/motion-effects.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds one of 16 motion effects in your own brand as a single 8-second looping HTML file that exports frame-exact to MP4 or GIF. - [meshy-3d-generation](https://affpapa.org/en/nevibecode/skills/meshy-3d-generation.md) — skill · meshy-dev · Claude Code, Codex, Cursor +3 · 2300 installs — Generates 3D models, textures meshes, and handles rigging via Meshy CLI 0.4.3. - [macos-settings-ui](https://affpapa.org/en/nevibecode/skills/macos-settings-ui.md) — skill · fayazara · Claude Code, Codex, Cursor +3 · 650 installs — Builds a native macOS settings window in SwiftUI: sidebar, grouped Form panes and liquid glass window chrome for macOS 26. - [behavioural-analytics](https://affpapa.org/en/nevibecode/skills/behavioural-analytics.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 625 installs — A skill that reads funnels, retention curves and event data the way a designer must: to locate a problem, not to prove one. - [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2600 installs — A skill for building MP4, GIF and WebM videos in React, where every frame is a pure function of useCurrentFrame, so renders stay deterministic. - [design-audit](https://affpapa.org/en/nevibecode/skills/design-audit.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1000 installs — Scans frontend codebases for accessibility flaws, motion bugs, and AI design tells. - [css-native](https://affpapa.org/en/nevibecode/skills/css-native.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that tells your coding agent when plain CSS is enough for animations and visual effects, and when to reach for a library. - [gsap](https://affpapa.org/en/nevibecode/skills/athevon-gsap.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 997 installs — This skill helps an agent write GSAP animations with timelines, staggered effects, and ScrollTrigger. - [canvas-generative](https://affpapa.org/en/nevibecode/skills/canvas-generative.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 995 installs — A skill for algorithmic graphics on Canvas 2D: particles, flow fields, noise, fractals and L-systems. - [llm-icon-finder](https://affpapa.org/en/nevibecode/skills/llm-icon-finder.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 952 installs — This skill finds icon URLs for AI models and providers in the lobe-icons library and can download them as SVG, PNG or WEBP. - [qual-quant-triangulation](https://affpapa.org/en/nevibecode/skills/qual-quant-triangulation.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 617 installs — Reconciles contradictions between telemetry dashboards and qualitative user interviews. - [framer-motion](https://affpapa.org/en/nevibecode/skills/athevon-framer-motion.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 990 installs — Guides coding agents on Framer Motion and Motion patterns in React: layout transitions, gestures, and DOM-direct motion values. - [desktop-principles](https://affpapa.org/en/nevibecode/skills/desktop-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 982 installs — A skill with desktop UX rules: hover states, pointer precision, keyboard shortcuts, multi-window patterns. - [ios-development](https://affpapa.org/en/nevibecode/skills/ios-development.md) — skill · rshankras · Claude Code, Codex, Cursor +3 · 821 installs — An iOS development skill: Swift code review, UI checks against Apple HIG, accessibility audits and app planning. - [mobile-principles](https://affpapa.org/en/nevibecode/skills/mobile-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 974 installs — A rule set for mobile interfaces: tap target sizes, no-hover doctrine, thumb zones, safe areas and gestures. - [ios-accessibility](https://affpapa.org/en/nevibecode/skills/dadederk-ios-accessibility.md) — skill · dadederk · Claude Code, Codex, Cursor +3 · 911 installs — A skill that gives your coding agent solid iOS accessibility guidance: VoiceOver, Dynamic Type, Switch Control and how to test them. - [qt-ui-design](https://affpapa.org/en/nevibecode/skills/qt-ui-design.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that walks an AI agent through designing or auditing interfaces for Qt/QML apps, the web and embedded panels: layout, navigation, contrast, hit targets. - [interface-kit](https://affpapa.org/en/nevibecode/skills/interface-kit.md) — skill · JuliusBrussee · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that gives the agent a working order for interface code: accessibility first, then type, grid, color, motion. - [onboarding-ux](https://affpapa.org/en/nevibecode/skills/onboarding-ux.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1100 installs — This skill walks your app as a first-time user, finds where they get stuck, and writes the copy plus code for empty states, hints and welcome screens. - [ui-craft](https://affpapa.org/en/nevibecode/skills/ui-craft.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 1400 installs — A design and implementation skill for interfaces: it inspects the project first, then writes code. - [ui-mobile](https://affpapa.org/en/nevibecode/skills/ui-mobile.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 1200 installs — Gives the agent hard rules for mobile interfaces: 44×44 touch targets, WCAG 2.1 AA contrast, visible button boundaries. - [model-showdown](https://affpapa.org/en/nevibecode/skills/model-showdown.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1400 installs — Runs a fair motion graphics comparison across three AI models on one brief. - [newsletter-promo](https://affpapa.org/en/nevibecode/skills/newsletter-promo.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1400 installs — Turns one newsletter edition into a 12–20 second promo clip for LinkedIn, Instagram or X: a hook, three proof frames and an end card. - [milestone-reveal](https://affpapa.org/en/nevibecode/skills/milestone-reveal.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1400 installs — Builds a 12-second looping clip where thousands of points drift, then pull together into your actual follower, revenue or customer count. - [loop-cover](https://affpapa.org/en/nevibecode/skills/loop-cover.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1400 installs — Converts newsletter and blog covers into looping 896x640 GIFs across 180 frames. - [apple-launch-film](https://affpapa.org/en/nevibecode/skills/apple-launch-film.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds an Apple-style Mac launch film entirely in code: menu bar, notch, widgets and gradient wallpapers. - [animated-chart](https://affpapa.org/en/nevibecode/skills/animated-chart.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1400 installs — Turns a set of numbers into one looping animated chart, coded as a single HTML file, then exports it as MP4 and GIF. - [title-sequence-3d](https://affpapa.org/en/nevibecode/skills/title-sequence-3d.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Creates cinematic 3D title sequences in code using Three.js and Claude Code. - [brand-intake](https://affpapa.org/en/nevibecode/skills/brand-intake.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — A setup skill that interviews you and reads 3 to 5 reference frames, then writes brand.md and MOTION.md — the files every other skill in the pack pulls colours, type and timing from. - [motion-brief-writer](https://affpapa.org/en/nevibecode/skills/motion-brief-writer.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Turns a rough idea for an animated graphic into a precise build prompt for Claude. - [launch-video](https://affpapa.org/en/nevibecode/skills/launch-video.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds 30-45 second product launch promo videos as self-contained HTML files with deterministic frame seeking for MP4 export. - [ux-designer](https://affpapa.org/en/nevibecode/skills/ux-designer.md) — skill · szilu · Claude Code, Codex, Cursor +3 · 1600 installs — A skill for reviewing and building interfaces: it checks accessibility, screen states and microcopy, and supplies the numbers for spacing and contrast. - [swiftui-graphics](https://affpapa.org/en/nevibecode/skills/swiftui-graphics.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 939 installs — A skill for advanced SwiftUI visuals: Metal shaders, .visualEffect, iOS 26 Liquid Glass and Canvas. - [compose-graphics](https://affpapa.org/en/nevibecode/skills/compose-graphics.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 937 installs — A skill for advanced Jetpack Compose visuals: Material 3 Expressive spring physics, AGSL shaders, Canvas drawing and graphicsLayer effects. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=28 ## 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