# Skills for Design Skills for Design: what each one does, an install command and example prompts. 2133 cards · page 18 of 54 - HTML: https://affpapa.org/en/nevibecode/skills/topic/design?page=18 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [scroll-scrubbed-word-reveal](https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-word-reveal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that reveals words in marked-up text as scroll progress advances. - [technical-wireframe-info-layout](https://affpapa.org/en/nevibecode/skills/technical-wireframe-info-layout.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Defines a monochrome design system with exploded wireframe 3D objects, connector lines, and dark diagnostic info layouts. - [corner-diagonals](https://affpapa.org/en/nevibecode/skills/corner-diagonals.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A skill for diagonal-cut corners and chamfered edges on buttons, cards and panels. - [number-details](https://affpapa.org/en/nevibecode/skills/number-details.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that adds decorative 01, 02, 03 numbers to process steps, cards and headings. - [gooey-blob-system](https://affpapa.org/en/nevibecode/skills/gooey-blob-system.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Creates gooey blob animations with SVG filters that merge shapes on proximity. - [dark-glass-clean-layout](https://affpapa.org/en/nevibecode/skills/dark-glass-clean-layout.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — This skill defines a dark glass UI system with clean columns, floating data cards, and restrained depth. - [clean-minimal-beige-light-mode](https://affpapa.org/en/nevibecode/skills/clean-minimal-beige-light-mode.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Sets a design-system direction: warm beige surfaces, quiet modular grids, a restrained accent. - [mesh-gradient-dark-blue-clean](https://affpapa.org/en/nevibecode/skills/mesh-gradient-dark-blue-clean.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A design system skill for dark-blue interfaces with procedural canvas mesh gradients, hero containers, and pill navigation. - [framed-grid-layout](https://affpapa.org/en/nevibecode/skills/framed-grid-layout.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that spells out how to build pages with thin visible section borders, L-shaped corner brackets and strict grid alignment. - [webgl-laser](https://affpapa.org/en/nevibecode/skills/webgl-laser.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — This skill builds a fixed full-screen background with a thin vertical beam, a colored halo and smoky fog around it. - [image-first-grid-layout](https://affpapa.org/en/nevibecode/skills/image-first-grid-layout.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Directs coding agents to build layout grids around full-bleed photography with subtle guide rails and low-contrast overlays. - [dither-background](https://affpapa.org/en/nevibecode/skills/dither-background.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that builds a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. - [html-to-interaction-prompts](https://affpapa.org/en/nevibecode/skills/html-to-interaction-prompts.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Turns a supplied HTML page into an article of AI-builder prompts, with screenshots of every interaction it finds. - [globe-particles](https://affpapa.org/en/nevibecode/skills/globe-particles.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Renders a 3D particle globe with a luminous spherical core and an orbital disc using WebGL and Three.js. - [agency-grid-layout-minimal](https://affpapa.org/en/nevibecode/skills/agency-grid-layout-minimal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Sets a minimal agency-site direction with an editorial grid, oversized type and restrained image framing. - [unicorn-studio](https://affpapa.org/en/nevibecode/skills/unicorn-studio.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Guides you through embedding Unicorn Studio interactive WebGL scenes on a page: container setup, responsive sizing, performance tuning, layering with UI. - [skeuomorphic-ui](https://affpapa.org/en/nevibecode/skills/skeuomorphic-ui.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Generates tactile skeuomorphic web CSS with layered gradients, inset shadows, and reflective edges. - [background-grid-webgl](https://affpapa.org/en/nevibecode/skills/background-grid-webgl.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — A skill that tells your coding agent how to build a perspective WebGL grid background with fading lines, particle haze and slow forward drift. - [finesse-ui](https://affpapa.org/en/nevibecode/skills/finesse-ui.md) — skill · mouse-lin · Claude Code, Codex, Cursor +3 · 1000 installs — A skill for building and refining web interfaces: landing pages, dashboards, mobile screens, single components. - [epic-design](https://affpapa.org/en/nevibecode/skills/epic-design.md) — skill · Abbas Mir · Claude Code · 701 installs — A Claude Code skill that builds cinematic pages: scroll storytelling, parallax depth, animated text. - [create-website](https://affpapa.org/en/nevibecode/skills/create-website.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 2300 installs — Walks you from a blank page to a live site in ten phases: message first, then design, then conversion. - [design-code-architecture](https://affpapa.org/en/nevibecode/skills/design-code-architecture.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 2300 installs — Walks you from an app idea to a deliberate architecture: eight phases, a question at every decision point, results written into docs/. - [improve-website](https://affpapa.org/en/nevibecode/skills/improve-website.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 2300 installs — Walks a live but underperforming site through eight phases and turns the findings into a ranked backlog of fixes. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/alireza-rezvani-brand-guidelines.md) — skill · Alireza Rezvani · Claude Code · 696 installs — Applies and documents brand rules for colours, typography, logos and tone of voice. - [data-visualization](https://affpapa.org/en/nevibecode/skills/owl-listener-data-visualization.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. - [layout-grid](https://affpapa.org/en/nevibecode/skills/layout-grid.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. - [icon-system](https://affpapa.org/en/nevibecode/skills/icon-system.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. - [user-flow-diagram](https://affpapa.org/en/nevibecode/skills/user-flow-diagram.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — Draws screen-level flow diagrams with entry points, decision branches and error paths. - [dark-mode-design](https://affpapa.org/en/nevibecode/skills/dark-mode-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. - [replica-brand](https://affpapa.org/en/nevibecode/skills/replica-brand.md) — skill · Jakeschincariol · Claude Code, Codex, Cursor +3 · 617 installs — Names app clones, sets up contrast-checked palettes, writes logo briefs, and sweeps original brand remnants from code. - [cinetic](https://affpapa.org/en/nevibecode/skills/cinetic.md) — skill · Leonxlnx · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that directs short promo films end to end: storyboard, beat-locked timing, code-made sound and render in Remotion or HyperFrames. - [scandinavian-design](https://affpapa.org/en/nevibecode/skills/scandinavian-design.md) — skill · ericzakariasson · Claude Code, Codex, Cursor +3 · 1800 installs — This skill guides interface work toward calm layouts, restrained monochrome styling, and clearer hierarchy. - [spline-interactive](https://affpapa.org/en/nevibecode/skills/spline-interactive.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — Guides agents on integrating interactive Spline 3D scenes into web apps. - [gsap-scrolltrigger](https://affpapa.org/en/nevibecode/skills/freshtechbro-gsap-scrolltrigger.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — A skill that teaches the agent to write GSAP animations and ScrollTrigger scroll effects: tweens, timelines, pinning, parallax. - [awwwards](https://affpapa.org/en/nevibecode/skills/awwwards.md) — skill · juliobsz · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a one-line prompt into a finished portfolio or landing page, using Awwwards Site of the Day as the quality bar. - [ux-writing](https://affpapa.org/en/nevibecode/skills/ux-writing.md) — skill · content-designer · Claude Code, Codex, Cursor +3 · 2700 installs — Writes and edits button labels, error messages, notifications and empty states against four standards: purposeful, concise, conversational, clear. - [documd-visuals](https://affpapa.org/en/nevibecode/skills/documd-visuals.md) — skill · markdown-viewer · Claude Code, Codex, Cursor +3 · 313 installs — Creates text-driven charts, diagrams, and architecture layouts directly in Markdown. - [grow-app](https://affpapa.org/en/nevibecode/skills/grow-app.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 2200 installs — Guides retention and habit-loop design across eight phases while logging decisions in the docs folder. - [improve-app](https://affpapa.org/en/nevibecode/skills/improve-app.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 2200 installs — Walks a shipped app from “works but feels rough” to a product that fits the job: nine phases, questions at every step, notes in docs/. - [responsive-design](https://affpapa.org/en/nevibecode/skills/owl-listener-responsive-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. Next: https://affpapa.org/en/nevibecode/skills/topic/design.md?page=19 ## 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