# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 16 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=16 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [progressive-blur](https://affpapa.org/en/nevibecode/skills/progressive-blur.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — This skill creates a top or bottom CSS progressive blur with layered backdrop-filter masks. - [cobejs](https://affpapa.org/en/nevibecode/skills/cobejs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that walks the agent through building a small spinning globe with cobe, markers included. - [native-feel-cross-platform-desktop](https://affpapa.org/en/nevibecode/skills/native-feel-cross-platform-desktop.md) — skill · yetone · Claude Code, Codex, Cursor +3 · 608 installs — A skill for designing cross-platform desktop apps that feel native: windowing, hotkeys, materials, fast launch. - [anti-ui-slop](https://affpapa.org/en/nevibecode/skills/davepoon-anti-ui-slop.md) — skill · davepoon · Claude Code, Codex, Cursor +3 · 475 installs — Keeps a coding agent from shipping a generic screen: it reads the product context, covers the required states, and checks the rendered result for visible breakage. - [sega](https://affpapa.org/en/nevibecode/skills/sega.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Defines rules for an arcade-inspired design system with VT323 typography, 0px corners, and chunky push buttons. - [matrix](https://affpapa.org/en/nevibecode/skills/matrix.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — This skill guides a dark Matrix-style interface with tokens, component states, and accessibility checks. - [riso](https://affpapa.org/en/nevibecode/skills/riso.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Turns your coding agent into a design-system author for a two-color risograph look: warm paper, pink accent, blue headings. - [fiction](https://affpapa.org/en/nevibecode/skills/fiction.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Generates design system guidelines in a cartoonesque children's book style with cream backgrounds, thick outlines, Cossette Texte typography, and WCAG 2.2 AA checks. - [terracotta](https://affpapa.org/en/nevibecode/skills/terracotta.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that hands your coding agent the Terracotta design system: cream surfaces, ink-brown serif headlines and one terracotta accent. - [impeccable](https://affpapa.org/en/nevibecode/skills/typeuish-impeccable.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — The skill turns your agent into a design-system author: tokens, type scale, component states, accessibility criteria. - [codex](https://affpapa.org/en/nevibecode/skills/typeuish-codex.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Enforces a radically minimal monochrome design system and generates component specifications compliant with WCAG 2.2 AA. - [sketch](https://affpapa.org/en/nevibecode/skills/sketch.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — This skill defines a hand-drawn design system for AI-assisted UI work. - [ppt-visual](https://affpapa.org/en/nevibecode/skills/ppt-visual.md) — skill · claude-office-skills · Claude Code, Codex, Cursor +3 · 12100 installs — Designs slide layouts, typography, and color schemes. - [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · awdr74100 · Claude Code, Codex, Cursor +3 · 1300 installs — Builds or updates a design in a connected Figma file from code or a description, reusing its components, variables, and styles. - [banana](https://affpapa.org/en/nevibecode/skills/banana.md) — skill · AgriciDaniel · Claude Code, Codex, Cursor +3 · 912 installs — Plans, generates, and edits images with Google Gemini models. - [webgl-3d-object](https://affpapa.org/en/nevibecode/skills/webgl-3d-object.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Guides coding agents to generate standalone Three.js 3D objects with physical materials, directional lighting, and proper memory cleanup. - [video-to-superprompt](https://affpapa.org/en/nevibecode/skills/video-to-superprompt.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Turns a reference video into a detailed build prompt for UI, motion and scrolling behavior. - [pricing-page](https://affpapa.org/en/nevibecode/skills/pricing-page.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Walks an agent through designing or rewriting a SaaS pricing page: structure, plan design, copy, FAQ, and SEO/AEO markup. - [webgl-landing-steering](https://affpapa.org/en/nevibecode/skills/webgl-landing-steering.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Guides visual direction, Three.js architecture, and performance budgets for WebGL landing pages before writing front-end code. - [masked-reveal](https://affpapa.org/en/nevibecode/skills/masked-reveal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — This skill reveals words through an overflow mask as text enters the viewport with GSAP ScrollTrigger. - [pixel-art](https://affpapa.org/en/nevibecode/skills/pixel-art.md) — skill · wanshuiyin · Claude Code, Codex, Cursor +3 · 548 installs — This skill turns a text description into a pixel art SVG for READMEs, docs or slides. - [create-canvas](https://affpapa.org/en/nevibecode/skills/create-canvas.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 381 installs — This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload. - [roku](https://affpapa.org/en/nevibecode/skills/roku.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Gives the agent a written design system for an app dashboard: purple palette, top-bar navigation, card layouts. - [power](https://affpapa.org/en/nevibecode/skills/power.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Turns the agent into a design-system author for a dark, monochrome look with bold headings. - [geometric](https://affpapa.org/en/nevibecode/skills/geometric.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Defines structured design system guidelines using Inter typography and neutral colors. - [stitch](https://affpapa.org/en/nevibecode/skills/stitch.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — stitch gives an AI coding agent concrete design-system rules for data-heavy interfaces, including tokens, component states, accessibility, and QA. - [web3d-integration-patterns](https://affpapa.org/en/nevibecode/skills/web3d-integration-patterns.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 3200 installs — This skill helps plan 3D web experiences that combine Three.js, React Three Fiber, and animation libraries. - [vantajs](https://affpapa.org/en/nevibecode/skills/vantajs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Adds animated Vanta.js backgrounds and explains setup for static sites, React, and Next.js. - [atmosphere-background](https://affpapa.org/en/nevibecode/skills/atmosphere-background.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge. - [editorial-tech](https://affpapa.org/en/nevibecode/skills/editorial-tech.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Guides code agents to blend magazine typography with technical product UI using asymmetrical grids, mono labels, and restrained accent color. - [css-alpha-masking](https://affpapa.org/en/nevibecode/skills/css-alpha-masking.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — This skill adds CSS alpha masks with gradient edge fades. - [glass-dark-ui](https://affpapa.org/en/nevibecode/skills/glass-dark-ui.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds dark glassmorphism layouts with frosted surfaces and gradient masked borders. - [build-threejs-scroll-worlds](https://affpapa.org/en/nevibecode/skills/build-threejs-scroll-worlds.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds scroll-controlled Three.js worlds that stay spatially continuous across authored chapters. - [container-lines](https://affpapa.org/en/nevibecode/skills/container-lines.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — This skill adds thin vertical guide lines at the edges of the content container, plus mini corner squares on sections. - [company-logos](https://affpapa.org/en/nevibecode/skills/company-logos.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Guides agents to use Iconify Simple Icons in a 64x64 box instead of plain text names or random raster images. - [marquee-loop](https://affpapa.org/en/nevibecode/skills/marquee-loop.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — This skill guides an agent through building a looping marquee from repeated items. - [css-border-gradient](https://affpapa.org/en/nevibecode/skills/css-border-gradient.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. - [scroll-scrubbed-visual-sequence](https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-visual-sequence.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. - [unsplash-asset-images](https://affpapa.org/en/nevibecode/skills/unsplash-asset-images.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need. - [scroll-world-storytelling](https://affpapa.org/en/nevibecode/skills/scroll-world-storytelling.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Turns articles, case studies, and product journeys into visual scroll-driven landing pages. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=17 ## 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