# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 40 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=40 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [md-slides](https://affpapa.org/en/nevibecode/skills/md-slides.md) — skill · Alireza Rezvani · Claude Code · 15 installs — Turns a Markdown deck into a single-file HTML presentation with keyboard controls, speaker notes, and PDF printing. - [figma-ui-skills](https://affpapa.org/en/nevibecode/skills/figma-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 346 installs — Applies Figma UI constraints: light mode, Inter font, and a 4px grid. - [design-system-creation](https://affpapa.org/en/nevibecode/skills/secondsky-design-system-creation.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 481 installs — A skill that walks the agent through building a design system: tokens, typography, components and their docs. - [cognitive-walkthrough](https://affpapa.org/en/nevibecode/skills/cognitive-walkthrough.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 458 installs — Runs one user task through the cognitive walkthrough method and shows where a novice gets stuck. - [vercel-ui-skills](https://affpapa.org/en/nevibecode/skills/vercel-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 342 installs — Pins your agent to Vercel's look: light surfaces, Inter, a 4px grid. - [codex-theme-installer](https://affpapa.org/en/nevibecode/skills/codex-theme-installer.md) — skill · codexthemes · Claude Code, Codex, Cursor +3 · 1600 installs — Downloads a CodexThemes package, validates it, and places the files in the local theme library. - [codex-theme-switcher](https://affpapa.org/en/nevibecode/skills/codex-theme-switcher.md) — skill · codexthemes · Claude Code, Codex, Cursor +3 · 1700 installs — Applies, switches and restores Claude desktop themes from the local ~/.codexthemes library, and reports which theme is active. - [vtex-io-admin-react](https://affpapa.org/en/nevibecode/skills/vtex-io-admin-react.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states. - [image-to-code](https://affpapa.org/en/nevibecode/skills/image-to-code.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 14 installs — Translates screenshots, mockups, and AI images into responsive frontend code. - [design-qa](https://affpapa.org/en/nevibecode/skills/design-qa.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 14 installs — A skill for side-by-side design and implementation comparison before handoff. - [design-with-taste](https://affpapa.org/en/nevibecode/skills/design-with-taste.md) — skill · cristicretu · Claude Code, Codex, Cursor +3 · 758 installs — A skill that gives the agent a design philosophy: gradual revelation, fluid transitions and selective emphasis. - [motion-designer](https://affpapa.org/en/nevibecode/skills/ncklrs-motion-designer.md) — skill · ncklrs · Claude Code, Codex, Cursor +3 · 570 installs — Drafts frame-accurate video specifications for Remotion, covering timing, transitions, and layered audio. - [landing-page-optimization](https://affpapa.org/en/nevibecode/skills/landing-page-optimization.md) — skill · manojbajaj95 · Claude Code, Codex, Cursor +3 · 324 installs — A Claude skill for landing pages: copy frameworks, the 11-element page structure, CTA writing and conversion work. - [interior-design-visualization](https://affpapa.org/en/nevibecode/skills/interior-design-visualization.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 1100 installs — Visualizes room redesigns directly from photos using each::sense AI. - [presentation-design](https://affpapa.org/en/nevibecode/skills/aaronvanston-presentation-design.md) — skill · aaronvanston · Claude Code, Codex, Cursor +3 · 800 installs — Sets visual rules for bold, minimal decks: dark theme, oversized headlines, per-section accent colors. - [efecto-social-media](https://affpapa.org/en/nevibecode/skills/efecto-social-media.md) — skill · pablostanley · Claude Code, Codex, Cursor +3 · 636 installs — Builds social media layouts via the efecto.app canvas. - [framer-ui-skills](https://affpapa.org/en/nevibecode/skills/framer-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 320 installs — Hands the agent a fixed set of Framer-style UI rules: dark surfaces, Inter, a 4px grid. - [html-visual](https://affpapa.org/en/nevibecode/skills/html-visual.md) — skill · 2ykwang · Claude Code, Codex, Cursor +3 · 475 installs — Generates an interactive single-file HTML visualization: mockup, ERD, flowchart, chart or slides. - [interaction-design](https://affpapa.org/en/nevibecode/skills/secondsky-interaction-design.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 441 installs — A skill for designing interface feedback: loading states, errors, empty screens, animation timing and accessibility. - [scrollytelling-and-parallax-data-visualization](https://affpapa.org/en/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — Guides the design and implementation of scrollytelling and parallax data visualizations. - [geospatial-and-cartographic-visualization](https://affpapa.org/en/nevibecode/skills/geospatial-and-cartographic-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — This skill helps plan maps by choosing projections, basemaps, visualization types, and implementation tools. - [d3-data-visualization](https://affpapa.org/en/nevibecode/skills/d3-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — This skill builds custom D3 visualizations with SVG or DOM, annotations, bespoke scales, and interaction. - [anthropic-ui-skills](https://affpapa.org/en/nevibecode/skills/anthropic-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 313 installs — Hands your agent a fixed set of rules for Anthropic-style interfaces: light surfaces, Inter, a 4px grid. - [3d-spatial](https://affpapa.org/en/nevibecode/skills/3d-spatial.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 771 installs — Applies Disney's 12 animation principles to 3D engines, VR, and AR. - [qr-code-generator](https://affpapa.org/en/nevibecode/skills/qr-code-generator.md) — skill · manojbajaj95 · Claude Code, Codex, Cursor +3 · 312 installs — Creates PNG and SVG QR codes with UTM tracking parameters and custom text labels. - [webflow-mcp:figma-to-webflow](https://affpapa.org/en/nevibecode/skills/webflow-mcpfigma-to-webflow.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 373 installs — Translates Figma layouts into native Webflow elements and styles using Figma MCP and Webflow MCP. - [tdesign-miniprogram](https://affpapa.org/en/nevibecode/skills/tdesign-miniprogram.md) — skill · joneqian · Claude Code, Codex, Cursor +3 · 396 installs — A skill that tells the agent how to build WeChat mini program UIs with Tencent's TDesign library: 60+ components, dark mode, theme customization. - [ios-animations](https://affpapa.org/en/nevibecode/skills/ios-animations.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 340 installs — SwiftUI animation craft guide for Swift 6.2 and Clinic MVVM-C architecture. - [gsap-greensock](https://affpapa.org/en/nevibecode/skills/gsap-greensock.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 730 installs — Guides your coding agent in applying Disney's 12 animation principles with GreenSock tweens and timeline sequences. - [morphing-icons](https://affpapa.org/en/nevibecode/skills/morphing-icons.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 362 installs — Builds icon components that transform through direct SVG line motion instead of crossfades, relying on a shared three-line structure. - [nuxt-ui-v4](https://affpapa.org/en/nevibecode/skills/nuxt-ui-v4.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 410 installs — A skill that gives your agent the Nuxt UI v4 component library: 125+ accessible components, Tailwind v4, dark mode. - [naming](https://affpapa.org/en/nevibecode/skills/jwynia-naming.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 491 installs — Diagnoses weak brand, product, and fictional names across four layers to craft names that sound natural and stick. - [mui-base](https://affpapa.org/en/nevibecode/skills/mui-base.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 328 installs — A skill with 48 rules for building headless React component libraries the MUI Base UI way. - [css-native](https://affpapa.org/en/nevibecode/skills/dylantarre-css-native.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 716 installs — This skill gets your agent writing motion with plain CSS: @keyframes, transition, transform. - [saas-productivity](https://affpapa.org/en/nevibecode/skills/saas-productivity.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 709 installs — Guides motion design for task, form, panel, and notification interfaces. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/existential-birds-shadcn-ui.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 351 installs — Teaches your agent how to build shadcn/ui components: Radix primitives, Tailwind, CVA variants and data-slot. - [ui-design-patterns](https://affpapa.org/en/nevibecode/skills/ui-design-patterns.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 853 installs — A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. - [tailwindcss-responsive-darkmode](https://affpapa.org/en/nevibecode/skills/tailwindcss-responsive-darkmode.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 476 installs — A Tailwind CSS skill covering responsive layout, dark mode, runtime theme switching and FOUC prevention. - [ux-principles](https://affpapa.org/en/nevibecode/skills/ux-principles.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 836 installs — Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork. - [assetseeker](https://affpapa.org/en/nevibecode/skills/assetseeker.md) — skill · Agents365-ai · Claude Code, Codex, Cursor +3 · 404 installs — Searches online sources for photos, icons, video, music, sound effects, and fonts. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=41 ## 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