# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 39 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=39 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [nano-banana](https://affpapa.org/en/nevibecode/skills/nano-banana.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 603 installs — This skill helps shape Nano Banana prompts for social images, edits, brand styling, readable text, and platform-specific aspect ratios. - [infographic-and-data-viz](https://affpapa.org/en/nevibecode/skills/infographic-and-data-viz.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 610 installs — A skill that turns real data into a chart or infographic where the main point lands in three seconds. - [muapi-instagram-post](https://affpapa.org/en/nevibecode/skills/muapi-instagram-post.md) — skill · SamurAIGPT · Claude Code, Codex, Cursor +3 · 2500 installs — Generates Instagram visuals along with matching captions and hashtags via the muapi CLI. - [layer-reference-sets](https://affpapa.org/en/nevibecode/skills/layer-reference-sets.md) — skill · layerai · Claude Code, Codex, Cursor +3 · 3300 installs — Guides LoRA training, reference set curation, and weight tuning in Layer. - [layer-game-assets](https://affpapa.org/en/nevibecode/skills/layer-game-assets.md) — skill · layerai · Claude Code, Codex, Cursor +3 · 3300 installs — Production rules for generating game art with Layer: rig-ready Spine characters, parallax environment stacks, and matching 64px icon sets. - [layer-image](https://affpapa.org/en/nevibecode/skills/layer-image.md) — skill · layerai · Claude Code, Codex, Cursor +3 · 3300 installs — A skill for text-to-image runs through Layer: what to put in the prompt, how to set aspect ratio, and when to upload a reference instead of describing it. - [layer-image-editing](https://affpapa.org/en/nevibecode/skills/layer-image-editing.md) — skill · layerai · Claude Code, Codex, Cursor +3 · 3400 installs — A skill for editing images that already exist on Layer: inpainting, outpainting, reframing, angle changes and upscaling. - [layer](https://affpapa.org/en/nevibecode/skills/layer.md) — skill · layerai · Claude Code, Codex, Cursor +3 · 3300 installs — Generates and edits game assets via the Layer MCP server, including 3D meshes, sprites, audio, and video. - [inspira-ui](https://affpapa.org/en/nevibecode/skills/inspira-ui.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 553 installs — This skill guides Vue and Nuxt work with 120+ animated components. - [ai-image-editing](https://affpapa.org/en/nevibecode/skills/ai-image-editing.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 603 installs — A skill that names the editing job, picks the right engine and writes the spec: object removal, background cutout, upscaling, outpainting, restoration. - [canva](https://affpapa.org/en/nevibecode/skills/canva.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 602 installs — A skill for Canva social graphics: builds from the Brand Kit, batches through Bulk Create and Magic Resize, and pushes past the template look. - [linear-ui-skills](https://affpapa.org/en/nevibecode/skills/linear-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 393 installs — Hands the agent a fixed set of rules for dark Linear-style interfaces: palette, Inter, 4px grid. - [dribbble-ui-skills](https://affpapa.org/en/nevibecode/skills/dribbble-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 392 installs — Supplies AI agents with Dribbble UI system guidelines: a 4px grid, Inter typography, semantic tokens, and strict CSS rules. - [testimonial-video](https://affpapa.org/en/nevibecode/skills/testimonial-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 932 installs — Turns text testimonials and reviews into vertical video cards via Remotion, complete with line-by-line reveals and animated star ratings. - [tailwindcss-advanced-design-systems](https://affpapa.org/en/nevibecode/skills/tailwindcss-advanced-design-systems.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 655 installs — A skill for building a Tailwind v4 design system: @theme tokens, color scales, typography, shadows and dark mode. - [airbnb-ui-skills](https://affpapa.org/en/nevibecode/skills/airbnb-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 389 installs — Design system constraints for Airbnb-inspired light interfaces. - [hackathon-brief-design](https://affpapa.org/en/nevibecode/skills/hackathon-brief-design.md) — skill · Samuel Berthe · Claude Code, Codex, Cursor +3 · 5100 installs — Drafts the document hackathon teams need before building: challenge prompts, entry rules, track descriptions, and submission requirements. - [flux](https://affpapa.org/en/nevibecode/skills/flux.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 586 installs — A skill for FLUX and FLUX.2 work: pick the right variant and license, write scene prompts, and edit an image instead of re-rolling it. - [ideogram](https://affpapa.org/en/nevibecode/skills/ideogram.md) — skill · social-media-skills · Claude Code, Codex, Cursor +3 · 576 installs — Builds structured prompts for Ideogram 4.0 to generate social media graphics, posters, and covers where text spelling and exact layout matter. - [notion-ui-skills](https://affpapa.org/en/nevibecode/skills/notion-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 383 installs — Enforces Notion design system guidelines with a 4px grid and light-mode tokens. - [social-graphics](https://affpapa.org/en/nevibecode/skills/social-graphics.md) — skill · sanky369 · Claude Code, Codex, Cursor +3 · 599 installs — Creates platform-accurate social media graphic specifications, drafts copy, and renders images via the FAL.ai pipeline. - [node-link-and-diagram-layout](https://affpapa.org/en/nevibecode/skills/node-link-and-diagram-layout.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 16 installs — This skill selects layouts for graphs, diagrams, and connected nodes. - [event-landing-page](https://affpapa.org/en/nevibecode/skills/event-landing-page.md) — skill · Samuel Berthe · Claude Code, Codex, Cursor +3 · 5300 installs — Builds the public page for a conference, meetup or hackathon: sections, date-gated buttons, accessibility and event structured data. - [ui-ux-expert](https://affpapa.org/en/nevibecode/skills/ui-ux-expert.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 828 installs — Configures the agent to design accessible web components and design systems. - [create-remotion-geist](https://affpapa.org/en/nevibecode/skills/create-remotion-geist.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 484 installs — A skill that steers your agent to build Remotion videos in Vercel's Geist look: dark theme, Geist type, spring motion. - [anycap-human-interaction](https://affpapa.org/en/nevibecode/skills/anycap-human-interaction.md) — skill · anycap-ai · Claude Code, Codex, Cursor +3 · 653 installs — Skill for collecting visual feedback from humans and collaborating on Excalidraw diagrams. - [ios-design](https://affpapa.org/en/nevibecode/skills/ios-design.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 418 installs — A skill with 62 rules for building SwiftUI interfaces: semantic colors, typography, state, navigation and accessibility. - [shadcn-component-review](https://affpapa.org/en/nevibecode/skills/shadcn-component-review.md) — skill · mattbx · Claude Code, Codex, Cursor +3 · 635 installs — Reviews finished components and layouts against shadcn patterns: spacing, semantic tokens, primitive composition, and the project's chosen visual style. - [kpi-dashboard-design](https://affpapa.org/en/nevibecode/skills/secondsky-kpi-dashboard-design.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 507 installs — A skill that guides the agent through KPI dashboard design: metric choice, layout, chart types and status colors. - [after-effects](https://affpapa.org/en/nevibecode/skills/dylantarre-after-effects.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 891 installs — Walks your agent through Disney's 12 animation principles inside Adobe After Effects, from squash and stretch to appeal. - [screenci](https://affpapa.org/en/nevibecode/skills/screenci.md) — skill · screenci · Claude Code, Codex, Cursor +3 · 1700 installs — This skill edits .screenci.ts files and runs ScreenCI workflows for recording videos and stills in an initialized project. - [frontend-design](https://affpapa.org/en/nevibecode/skills/mager-frontend-design.md) — skill · mager · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that gives the agent a specific design stance: type, palette, tactile states. - [design-system-generator](https://affpapa.org/en/nevibecode/skills/design-system-generator.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 300 installs — Builds a design system from tokens, base components and docs. - [designing-beautiful-websites](https://affpapa.org/en/nevibecode/skills/designing-beautiful-websites.md) — skill · tristanmanchester · Claude Code, Codex, Cursor +3 · 2800 installs — A skill for planning, building and reviewing web interfaces: page structure, responsive behaviour, visual language and interaction states. - [manim](https://affpapa.org/en/nevibecode/skills/manim.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 636 installs — Guides the agent to write Manim Community Edition scripts, animating math equations, functions, and 3D scenes in 3Blue1Brown style. - [filmmaker](https://affpapa.org/en/nevibecode/skills/filmmaker.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 869 installs — Directs narrative animations and cinematic sequences by applying Disney's twelve animation principles to visual storytelling. - [3d-model-generation](https://affpapa.org/en/nevibecode/skills/3d-model-generation.md) — skill · eachlabs · Claude Code, Codex, Cursor +3 · 1200 installs — Builds 3D models and PBR textures from text prompts or images using each::sense AI. - [ui-design-aesthetics](https://affpapa.org/en/nevibecode/skills/ui-design-aesthetics.md) — skill · NickCrew · Claude Code, Codex, Cursor +3 · 357 installs — This skill feeds the agent rules for typography, color and motion so generated interfaces stop looking like default AI output. - [efecto-web-design](https://affpapa.org/en/nevibecode/skills/efecto-web-design.md) — skill · pablostanley · Claude Code, Codex, Cursor +3 · 691 installs — Build web pages and app interfaces in Efecto with JSX, Tailwind CSS, and MCP tools. - [ios-ux-design](https://affpapa.org/en/nevibecode/skills/ios-ux-design.md) — skill · mosif16 · Claude Code, Codex, Cursor +3 · 543 installs — A skill that gives your coding agent iOS design expertise: HIG compliance checks, SwiftUI pattern review, and implementation specs for interface fixes. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=40 ## 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