# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 6 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=6 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [seo-image-gen](https://affpapa.org/en/nevibecode/skills/seo-image-gen.md) — skill · AgriciDaniel · Claude Code, Codex, Cursor +3 · 6100 installs — Generates OG images, blog heroes, product photos, and infographics through Gemini. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/nexu-io-shadcn-ui.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — This skill helps an agent build structured, accessible UI components with shadcn/ui. - [swiftui-design](https://affpapa.org/en/nevibecode/skills/swiftui-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill that guides SwiftUI interface design by clear rules, avoiding typical AI-code mistakes. - [pptx-generator](https://affpapa.org/en/nevibecode/skills/nexu-io-pptx-generator.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Creates and edits PowerPoint presentations from scratch with PptxGenJS and MiniMax's pipeline. - [plan-design-review](https://affpapa.org/en/nevibecode/skills/plan-design-review.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — The skill rates each design dimension from 0-10, explains what a 10 looks like, and flags AI Slop signals. - [flutter-animating-apps](https://affpapa.org/en/nevibecode/skills/flutter-animating-apps.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Implements animations and transitions in Flutter apps. - [canvas-design](https://affpapa.org/en/nevibecode/skills/nexu-io-canvas-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Create posters, illustrations, and other static artwork as PNG or PDF. - [pptx](https://affpapa.org/en/nevibecode/skills/nexu-io-pptx.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill for working with PowerPoint slides in your code editor. - [ui-skills](https://affpapa.org/en/nevibecode/skills/ui-skills.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Opinionated UI constraints to guide agents building user interfaces. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/nexu-io-brand-guidelines.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — This skill applies Anthropic’s brand colors and typography to artifacts. - [color-expert](https://affpapa.org/en/nevibecode/skills/color-expert.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill with 286K words of reference material on OKLCH, palette generation, contrast and pigment mixing. - [pdf](https://affpapa.org/en/nevibecode/skills/nexu-io-pdf.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 3000 installs — Extracts text, creates PDF documents, and fills out forms. - [event-store-design](https://affpapa.org/en/nevibecode/skills/event-store-design.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 10800 installs — This skill guides event store design for event-sourced systems and helps compare storage technologies. - [algorithmic-art](https://affpapa.org/en/nevibecode/skills/nexu-io-algorithmic-art.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Creates generative graphics using p5.js with seeded randomness for reproducible renders. - [screenshots-marketing](https://affpapa.org/en/nevibecode/skills/screenshots-marketing.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates marketing screenshots with Playwright for landing-page hero shots, App Store pages, and changelog visuals. - [html-ppt-retro-quarterly-review](https://affpapa.org/en/nevibecode/skills/html-ppt-retro-quarterly-review.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A quarterly review template in bold blue-and-orange editorial style: three cinematic slides with slab headlines and a cream paper feel. - [field-notes-editorial-template](https://affpapa.org/en/nevibecode/skills/field-notes-editorial-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates a magazine-style editorial business report in a single HTML file. - [imagen](https://affpapa.org/en/nevibecode/skills/imagen.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — This skill uses Google Gemini's image generation API to create UI mockups, icons, illustrations, and other visual assets. - [fal-3d](https://affpapa.org/en/nevibecode/skills/fal-3d.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Skill for creating 3D models from text or images via fal.ai. - [login-flow](https://affpapa.org/en/nevibecode/skills/login-flow.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds a standalone HTML prototype for a mobile app sign-in flow. - [enhance-prompt](https://affpapa.org/en/nevibecode/skills/nexu-io-enhance-prompt.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Rewrites your agent requests using design specs and UI/UX vocabulary. - [shader-dev](https://affpapa.org/en/nevibecode/skills/shader-dev.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Provides GLSL shader techniques for ray marching, fluid simulation, and procedural graphics. - [figma-implement-design](https://affpapa.org/en/nevibecode/skills/nexu-io-figma-implement-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — This skill guides an agent in turning a Figma design into code that matches the layout. - [after-hours-editorial-template](https://affpapa.org/en/nevibecode/skills/after-hours-editorial-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates luxury dark editorial presentations with haute-couture typography and cinematic transitions. - [platform-design](https://affpapa.org/en/nevibecode/skills/platform-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Brings 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 into your coding agent for building cross-platform apps on iOS, Android, and web. - [brainstorming](https://affpapa.org/en/nevibecode/skills/nexu-io-brainstorming.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Turns a rough idea into a full design through structured questioning and alternative exploration. - [fal-lip-sync](https://affpapa.org/en/nevibecode/skills/fal-lip-sync.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates talking head videos and syncs audio to lip movements via fal.ai. - [design-consultation](https://affpapa.org/en/nevibecode/skills/design-consultation.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds a design system from scratch with bold visual directions and realistic product mockups. - [theme-factory](https://affpapa.org/en/nevibecode/skills/nexu-io-theme-factory.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A skill with 10 preset themes for styling artifacts: slides, docs, reports, HTML landing pages. - [hand-drawn-diagrams](https://affpapa.org/en/nevibecode/skills/hand-drawn-diagrams.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates hand-drawn Excalidraw diagrams from plain text prompts. - [frontend-dev](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-dev.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Skill for building modern frontends with smooth animations, AI-generated content via MiniMax API, and generative art. - [nanobanana-ppt](https://affpapa.org/en/nevibecode/skills/nanobanana-ppt.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Turns a document into a slide deck, using the NanoBanana stack to generate styled images alongside the structured output. - [8-bit-orbit-video-template](https://affpapa.org/en/nevibecode/skills/8-bit-orbit-video-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — This skill provides a retro 8-bit video template for Hyperframes. - [web-artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-web-artifacts-builder.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces. - [frontend-slides](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-slides.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates animation-rich HTML presentations with visual style previews. - [slides](https://affpapa.org/en/nevibecode/skills/nexu-io-slides.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill for creating and editing .pptx presentations with PptxGenJS. - [antislop](https://affpapa.org/en/nevibecode/skills/antislop.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 7400 installs — A rule-based filter for generic AI output in interfaces and code. - [venice-video](https://affpapa.org/en/nevibecode/skills/venice-video.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Connects video generation and transcription workflows via the Venice.ai API to your coding agent. - [slack-gif-creator](https://affpapa.org/en/nevibecode/skills/nexu-io-slack-gif-creator.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Creates animated GIFs for Slack and checks size constraints. - [pixelbin-media](https://affpapa.org/en/nevibecode/skills/pixelbin-media.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for generating and editing images and videos through Pixelbin and building website pages from them. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=7 ## 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