# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 8 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=8 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [ip-as-logo](https://affpapa.org/en/nevibecode/skills/ip-as-logo.md) — skill · s1dashu · Claude Code, Codex, Cursor +3 · 3400 installs — This skill creates simple square character images for logos and product visuals. - [diagram-generator](https://affpapa.org/en/nevibecode/skills/diagram-generator.md) — skill · zhaoxuya520 · Claude Code, Codex, Cursor +3 · 1300 installs — Generates, checks, and renders diagrams from text, code, schemas, and tables. - [antislop-ui](https://affpapa.org/en/nevibecode/skills/antislop-ui.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 6400 installs — A UI and visual skill for reviewing color, layout, components, and motion. - [weread-year-in-review-video-template](https://affpapa.org/en/nevibecode/skills/weread-year-in-review-video-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2400 installs — Creates a vertical 9:16 HTML video for WeRead-style annual reading reports: stats, notes, keywords, and a reading persona card. - [pexo-agent](https://affpapa.org/en/nevibecode/skills/pexo-agent.md) — skill · pexoai · Claude Code, Codex, Cursor +3 · 40400 installs — This skill creates finished multi-shot videos from text, images, URLs, scripts, or audio. - [emilkowalski-motion](https://affpapa.org/en/nevibecode/skills/emilkowalski-motion.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2300 installs — Adds micro-interactions, state transitions and motion to an existing interface. - [canva-creator](https://affpapa.org/en/nevibecode/skills/canva-creator.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 1900 installs — Executes marketing campaigns from an approved content brief: builds the schedule, generates Canva graphics for social posts, writes copy, and stages sends in HubSpot. - [diagram-maker](https://affpapa.org/en/nevibecode/skills/diagram-maker.md) — skill · openclaw · Claude Code, Codex, Cursor +3 · 503 installs — This skill turns descriptions of concepts, architecture, and processes into SVG/HTML or Excalidraw diagrams. - [antislop-human](https://affpapa.org/en/nevibecode/skills/antislop-human.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5900 installs — An accessibility skill for AI agents that checks UI contrast, keyboard focus, and control states. - [antislop-layoutmobile](https://affpapa.org/en/nevibecode/skills/antislop-layoutmobile.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5700 installs — A skill for responsive layouts across phone and desktop widths. - [research-decision-room](https://affpapa.org/en/nevibecode/skills/research-decision-room.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2100 installs — Turns messy interview notes, support tickets, and surveys into a single interactive HTML decision room without fabricating certainty. - [mobile-design](https://affpapa.org/en/nevibecode/skills/mobile-design.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 3700 installs — Reviews and guides iOS, Android, React Native, and Flutter interfaces for touch targets, offline handling, and rendering performance. - [claude-design](https://affpapa.org/en/nevibecode/skills/badtechbandit-claude-design.md) — skill · BadTechBandit · Claude Code, Codex, Cursor +3 · 645 installs — Skill for building HTML artifacts — landing pages, prototypes, decks — in Claude Code, Codex and Cursor. - [ecommerce-image-workflow](https://affpapa.org/en/nevibecode/skills/ecommerce-image-workflow.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2000 installs — Turns a product reference photo into a compact ecommerce image set: main packshot on white, feature detail close-up, and lifestyle scene while preserving exact color, shape, and logo. - [uncodixfy](https://affpapa.org/en/nevibecode/skills/uncodixfy.md) — skill · cyxzdev · Claude Code, Codex, Cursor +3 · 5600 installs — Teaches the agent to skip the default Codex aesthetic: soft gradients, floating panels, decorative copy. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/athevon-ui-ux-pro-max.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 948 installs — Generates design systems, palettes, and typography pairs across 22 stacks using a local rule dataset. - [building-components](https://affpapa.org/en/nevibecode/skills/building-components.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 14700 installs — Guidance for accessible UI components, composable APIs, design tokens, documentation, and package distribution. - [draw-io-diagram-generator](https://affpapa.org/en/nevibecode/skills/draw-io-diagram-generator.md) — skill (official GitHub) · github · GitHub Copilot · 2800 installs — Creates and edits draw.io diagrams in .drawio, .drawio.svg, and .drawio.png files. - [create-design-md](https://affpapa.org/en/nevibecode/skills/create-design-md.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 4400 installs — Creates or updates a DESIGN.md file from a code repository or website. - [high-end-visual-design](https://affpapa.org/en/nevibecode/skills/high-end-visual-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1900 installs — This skill sets visual rules for website work, from typography and layouts to cards and motion. - [brandkit](https://affpapa.org/en/nevibecode/skills/brandkit.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1900 installs — Generates presentation boards with logo, palette, typography and mockups — studio-grade identity decks. - [design-dna](https://affpapa.org/en/nevibecode/skills/design-dna.md) — skill · zanwei · Claude Code, Codex, Cursor +3 · 6500 installs — Extracts design tokens, style and visual effects from references, then applies the profile to a design. - [image-to-code](https://affpapa.org/en/nevibecode/skills/nexu-io-image-to-code.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for visually important web tasks. - [gpt-taste](https://affpapa.org/en/nevibecode/skills/gpt-taste.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — Enforces strict frontend design rules: prevents multi-line hero titles, fixes empty bento grid cells, and adds advanced GSAP scroll physics. - [redesign-existing-projects](https://affpapa.org/en/nevibecode/skills/redesign-existing-projects.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1900 installs — Audits an existing interface and updates a website or app without changing its working product structure. - [od-contribute](https://affpapa.org/en/nevibecode/skills/od-contribute.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — This skill guides contributions to OpenDesign, from submitting a skill or design system to translating docs, fixing text, or reporting a bug. - [architecture-diagram](https://affpapa.org/en/nevibecode/skills/architecture-diagram.md) — skill · Cocoon-AI · Claude Code, Codex, Cursor +3 · 2100 installs — Generates architecture diagrams for systems, cloud infrastructure, microservices, and network topology as self-contained HTML files with a dark theme. - [ui-ux-designer](https://affpapa.org/en/nevibecode/skills/ui-ux-designer.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 3100 installs — This skill supports interface design, user flows, and design systems with research and accessibility checks. - [expo-design-system](https://affpapa.org/en/nevibecode/skills/expo-design-system.md) — skill · expo · Claude Code, Codex, Cursor +3 · 16700 installs — Builds and audits a design system in Expo apps by centralizing design tokens, structuring reusable components, and eliminating hardcoded styles. - [video-edit](https://affpapa.org/en/nevibecode/skills/video-edit.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 439800 installs — This skill routes video edits to the right RunComfy model for restyling, background or packaging swaps, and motion transfer. - [image-to-video](https://affpapa.org/en/nevibecode/skills/image-to-video.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 438000 installs — Routes still image animation tasks to the best RunComfy catalog model. - [nano-banana-2](https://affpapa.org/en/nevibecode/skills/nano-banana-2.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 437700 installs — Skill to quickly generate images via Google Nano Banana 2 on RunComfy. - [image-edit](https://affpapa.org/en/nevibecode/skills/image-edit.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 437300 installs — This skill routes image edits to a suitable RunComfy model. - [nano-banana-edit](https://affpapa.org/en/nevibecode/skills/nano-banana-edit.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 437100 installs — Edits images with Google Nano Banana 2 on RunComfy, preserving subject identity, swapping backgrounds, and handling batches up to 20 inputs. - [flux-kontext](https://affpapa.org/en/nevibecode/skills/flux-kontext.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 436900 installs — The skill edits a single image from one text instruction via Flux 1 Kontext Pro on RunComfy, useful for a targeted change that must keep face, pose or brand assets intact. - [flux-2-klein](https://affpapa.org/en/nevibecode/skills/flux-2-klein.md) — skill · prime-skills · Claude Code, Codex, Cursor +3 · 436000 installs — Generates images using Black Forest Labs' Flux 2 Klein via RunComfy with tailored prompting patterns for fast iteration and polish. - [p5js](https://affpapa.org/en/nevibecode/skills/p5js.md) — skill · SHL0MS, Hermes Agent · Claude Code, Codex, Cursor +3 · 535 installs — Produces p5.js sketches in the browser: generative art, interactive data viz, 3D WebGL scenes, audio-reactive visuals. - [minimalist-ui](https://affpapa.org/en/nevibecode/skills/leonxlnx-minimalist-ui.md) — skill · Leonxlnx · Claude Code, Codex, Cursor +3 · 395 installs — Enforces editorial UI design rules with a warm monochrome palette and bento grids. - [industrial-brutalist-ui](https://affpapa.org/en/nevibecode/skills/industrial-brutalist-ui.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that locks in a raw mechanical visual style for dashboards, portfolios and editorial sites. - [design-taste-frontend-v1](https://affpapa.org/en/nevibecode/skills/design-taste-frontend-v1.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — The original v1 frontend taste skill for clean React and Tailwind CSS output. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=9 ## 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