# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 25 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=25 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [3d-virtual-tour](https://affpapa.org/en/nevibecode/skills/3d-virtual-tour.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 527 installs — A skill for building virtual tours through a 3D scene: authored camera paths, room navigation, orbit inspection. - [frontend-app-builder](https://affpapa.org/en/nevibecode/skills/frontend-app-builder.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 252 installs — This skill designs and builds frontend apps, websites, and games, then checks the result in a browser. - [rebranding](https://affpapa.org/en/nevibecode/skills/rebranding.md) — skill · arnabbagxd · Claude Code, Codex, Cursor +3 · 1600 installs — Plans a rebrand from diagnosis through a new brand direction and rollout. - [brand-audit](https://affpapa.org/en/nevibecode/skills/brand-audit.md) — skill · arnabbagxd · Claude Code, Codex, Cursor +3 · 1700 installs — Evaluates brand health and consistency across six dimensions before you invest in rebranding or marketing campaigns. - [visual-content](https://affpapa.org/en/nevibecode/skills/visual-content.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 2300 installs — Plans visual assets across blogs, social media, and newsletters, giving platform image dimensions and multi-channel repurposing maps. - [frontend-slides-editable](https://affpapa.org/en/nevibecode/skills/frontend-slides-editable.md) — skill · archlizheng · Claude Code, Codex, Cursor +3 · 537 installs — Creates editable single-file HTML presentations with an in-browser editor. - [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · Giuliano Giacaglia · Claude Code, Codex, Cursor +3 · 726 installs — Extracts compact Figma frame payloads for AI codegen, audits comments, and detects stale components. - [3d-high-resolution-textures](https://affpapa.org/en/nevibecode/skills/3d-high-resolution-textures.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 508 installs — Picks texture resolution and PBR maps so close-up surfaces stay sharp without blowing up GPU memory. - [3d-sky-rays](https://affpapa.org/en/nevibecode/skills/3d-sky-rays.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 506 installs — A skill that adds crepuscular rays to a Three.js scene, shaped by roofs and foliage. - [tvos-design-guidelines](https://affpapa.org/en/nevibecode/skills/tvos-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1100 installs — Provides Apple Human Interface Guidelines for tvOS apps. - [watchos-design-guidelines](https://affpapa.org/en/nevibecode/skills/watchos-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that feeds your agent Apple Human Interface Guidelines for watchOS: glanceable screens, Digital Crown, complications. - [explainer-high-energy](https://affpapa.org/en/nevibecode/skills/explainer-high-energy.md) — skill · Barty-Bart · Claude Code, Codex, Cursor +3 · 831 installs — Turns a product brief into a 12–20 second high-energy motion-graphics promo, rendered from an HTML page to MP4 with synthesised music. - [explainer-default](https://affpapa.org/en/nevibecode/skills/explainer-default.md) — skill · Barty-Bart · Claude Code, Codex, Cursor +3 · 819 installs — Builds a product demo in MP4 from code, with UI scenes, camera moves, music, and a closing card. - [nanobanana-skill](https://affpapa.org/en/nevibecode/skills/nanobanana-skill.md) — skill · feiskyer · Claude Code, Codex, Cursor +3 · 319 installs — Generates and edits images via Google Gemini models directly inside your coding agent. - [layers-product-strategy](https://affpapa.org/en/nevibecode/skills/layers-product-strategy.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 2000 installs — Connects user needs to business goals and solution bets. - [layers-surface](https://affpapa.org/en/nevibecode/skills/layers-surface.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 2000 installs — A skill for auditing the surface of a product: words, objects, feedback, hierarchy, accessibility. - [layers-interaction-flow](https://affpapa.org/en/nevibecode/skills/layers-interaction-flow.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 2000 installs — A skill for mapping interaction structure before visual design: places, affordances, edge cases and failure paths. - [layers-intro](https://affpapa.org/en/nevibecode/skills/layers-intro.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 2000 installs — Introduces the Layers of Product Design framework for AI design sessions. - [layers-conceptual-model](https://affpapa.org/en/nevibecode/skills/layers-conceptual-model.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 2000 installs — This skill maps a product’s objects, relationships, states, and vocabulary before interface work. - [remove-image-watermark](https://affpapa.org/en/nevibecode/skills/remove-image-watermark.md) — skill · pilioai · Claude Code, Codex, Cursor +3 · 7600 installs — Removes visible watermarks from PNG, JPG, JPEG, and WEBP images using the Pilio API. - [design](https://affpapa.org/en/nevibecode/skills/subframeapp-design.md) — skill · SubframeApp · Claude Code, Codex, Cursor +3 · 775 installs — Guides an agent through Subframe work: build a page or component, line up design options on a canvas, adjust a theme. - [develop](https://affpapa.org/en/nevibecode/skills/subframeapp-develop.md) — skill · SubframeApp · Claude Code, Codex, Cursor +3 · 767 installs — This skill guides agents through building Subframe designs into an app or revising an existing page. - [codex-gpt-image-2-5-flare](https://affpapa.org/en/nevibecode/skills/codex-gpt-image-2-5-flare.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 475 installs — A skill that walks the agent through generating and editing artwork with Claude built-in image gen: transparent PNGs, sprites, emblems and UI graphics. - [tailwind-design-system](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-tailwind-design-system.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4500 installs — Creates and orchestrates a design system using Tailwind CSS v4.1+ and shadcn/ui. - [game-ui-design](https://affpapa.org/en/nevibecode/skills/game-ui-design.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 3900 installs — Provides game UI design guidelines for HUDs, inventory screens, and radial menus. - [layers-domain](https://affpapa.org/en/nevibecode/skills/layers-domain.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 1900 installs — A technique library for mapping real-world domain concepts, terminology clashes, and bounded contexts before shaping a product. - [layers-orient](https://affpapa.org/en/nevibecode/skills/layers-orient.md) — skill · jamiemill · Claude Code, Codex, Cursor +3 · 1900 installs — This skill audits decisions across seven product layers, finds the bottleneck, and suggests a next skill. - [cast](https://affpapa.org/en/nevibecode/skills/cast.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1300 installs — A creative coding skill that turns a static interface into something alive: motion, micro-interactions, real feedback. - [paint](https://affpapa.org/en/nevibecode/skills/paint.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1300 installs — Runs a full design pipeline for Web, Compose, and SwiftUI: from art direction brainstorm to tokens, page implementation, and motion audit. - [react-container-presentation-component](https://affpapa.org/en/nevibecode/skills/react-container-presentation-component.md) — skill (official GitHub) · github · GitHub Copilot · 65 installs — This skill scaffolds React components with the Container/Presentation pattern and follows the project’s TypeScript, Storybook, and SCSS conventions. - [motion-art-direction](https://affpapa.org/en/nevibecode/skills/motion-art-direction.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 3300 installs — Sets the motion rules before a single frame is animated: one easing family, one timing unit, one transition set for the whole piece. - [paper-slide-deck](https://affpapa.org/en/nevibecode/skills/paper-slide-deck.md) — skill · luwill · Claude Code, Codex, Cursor +3 · 498 installs — Turns articles, notes, and PDF papers into stylized slide images for social sharing and reading. - [taste](https://affpapa.org/en/nevibecode/skills/taste.md) — skill · Senlin · Claude Code, Codex, Cursor +3 · 579 installs — Reverse-engineers any webpage aesthetic using a real browser to extract concrete design tokens and style rationale. - [obsidian-layout-adjustment](https://affpapa.org/en/nevibecode/skills/obsidian-layout-adjustment.md) — skill · Ar9av · Claude Code, Codex, Cursor +3 · 435 installs — A skill that restyles Obsidian through CSS snippets: it maps a plain description of an element to the right UI layer, patches the active snippets and checks the result on a screenshot. - [tailwindcss-advanced-layouts](https://affpapa.org/en/nevibecode/skills/tailwindcss-advanced-layouts.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 8100 installs — Advanced Tailwind CSS layout recipes. - [lovart-api](https://affpapa.org/en/nevibecode/skills/lovart-api.md) — skill · Lovart (lovartai) · Claude Code, Codex, Cursor +3 · 1400 installs — Lets the agent order images, video and music from Lovart AI, and keeps projects and conversation threads in order. - [editor](https://affpapa.org/en/nevibecode/skills/editor.md) — skill · diffusionstudio · Claude Code, Codex, Cursor +3 · 1800 installs — Analyzes video, audio, and images, generates AI media, and builds video compositions using Diffusion Studio. - [swiftui-design-skill](https://affpapa.org/en/nevibecode/skills/swiftui-design-skill.md) — skill · wholiver · Claude Code, Codex, Cursor +3 · 1000 installs — Designs custom SwiftUI screens for iOS and macOS without generic AI clichés. - [svg-animations](https://affpapa.org/en/nevibecode/skills/svg-animations.md) — skill · supermemoryai · Claude Code, Codex, Cursor +3 · 2600 installs — Instructs the assistant to write clean animated SVGs using CSS and SMIL. - [ai-image-generator](https://affpapa.org/en/nevibecode/skills/ai-image-generator.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that tells your agent which Gemini or Claude model to pick and how to build prompts in five parts. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=26 ## 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