diagram-maker
Sourceopenclaw/openclaw/skills/diagram-maker/SKILL.md
Updated
Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
Design
Browse agent skills for UI/UX design, prototyping, and design systems
Categories, GitHub stars, and source recency help organize and order the catalog. These signals are not an endorsement, quality certification, safety review, or guarantee of fit. Open a skill detail and inspect its source before use.
Export Skill metadata
Sort by
28,704 results
meme-maker
Sourceopenclaw/openclaw/skills/meme-maker/SKILL.md
Updated
Search meme templates, suggest formats, and generate local or hosted image memes.
frontend-slides
Sourceaffaan-m/ECC/.agents/skills/frontend-slides/SKILL.md
Updated
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
frontend-slides
Sourceaffaan-m/ECC/.cursor/skills/frontend-slides/SKILL.md
Updated
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
design-system
Sourceaffaan-m/ECC/pi/core/skills/design-system/SKILL.md
Updated
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.
frontend-slides
Sourceaffaan-m/ECC/skills/frontend-slides/SKILL.md
Updated
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
ios-icon-gen
Sourceaffaan-m/ECC/skills/ios-icon-gen/SKILL.md
Updated
Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects.
baoyu-article-illustrator
SourceNousResearch/hermes-agent/optional-skills/creative/baoyu-article-illustrator/SKILL.md
Updated
Article illustrations: type × style × palette consistency.
concept-diagrams
SourceNousResearch/hermes-agent/optional-skills/creative/concept-diagrams/SKILL.md
Updated
Generate flat, minimal educational SVG visuals as HTML.
mono-color
SourceNousResearch/hermes-agent/optional-skills/creative/mono-color/SKILL.md
Updated
Generate one- or two-ink editorial print poster images.
sketch
SourceNousResearch/hermes-agent/optional-skills/creative/sketch/SKILL.md
Updated
Throwaway HTML mockups: 2-3 design variants to compare.
pr-lens
SourceNousResearch/hermes-agent/optional-skills/software-development/pr-lens/SKILL.md
Updated
Draw code changes as animated architecture/data-flow SVGs.
architecture-diagram
SourceNousResearch/hermes-agent/skills/creative/architecture-diagram/SKILL.md
Updated
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
manim-video
SourceNousResearch/hermes-agent/skills/creative/manim-video/SKILL.md
Updated
Manim CE animations: 3Blue1Brown math/algo videos.
popular-web-designs
SourceNousResearch/hermes-agent/skills/creative/popular-web-designs/SKILL.md
Updated
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
figma-generate-library
Sourceanomalyco/opencode/packages/plugins/figma/skills/figma-generate-library/SKILL.md
Updated
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
design-philosophy
Sourcemicrosoft/vscode/.github/skills/design-philosophy/SKILL.md
Updated
The VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.
generate-chat-background
Sourcemicrosoft/vscode/src/vs/sessions/skills/generate-chat-background/SKILL.md
Updated
Generate or design an image for the chat background in the Agents window. Use when the user asks for a generated chat background, wallpaper, pattern, or illustration to decorate their chat.
canvas-design
Sourceanthropics/skills/skills/canvas-design/SKILL.md
Updated
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
banner-design
Sourcenextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/banner-design/SKILL.md
Updated
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.
design-motion
Sourcegarrytan/gstack/design-motion/SKILL.md
Updated
Design motion: animate an approved design into a seamless MP4 and GIF loop. (gstack)
imagegen
Sourceopenai/codex/codex-rs/skills/src/assets/samples/imagegen/SKILL.md
Updated
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG/vector/code-native assets, extending an established icon or logo system, or building the visual directly in HTML/CSS/canvas.
wireframe
Sourcepaperclipai/paperclip/packages/skills-catalog/catalog/bundled/product/wireframe/SKILL.md
Updated
Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.
image-poster
Sourcenexu-io/open-design/design-templates/image-poster/SKILL.md
Updated
Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.
open-design-landing
Sourcenexu-io/open-design/design-templates/open-design-landing/SKILL.md
Updated
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic OpenDesign uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.
web-prototype-taste-editorial
Sourcenexu-io/open-design/design-templates/web-prototype-taste-editorial/SKILL.md
Updated
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
wireframe-greybox
Sourcenexu-io/open-design/design-templates/wireframe-greybox/SKILL.md
Updated
A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a pale page, image placeholders drawn as a rectangle with a diagonal X, text shown as solid "lorem bars" of varying widths, sharp 1.5–2px borders, and a single monospace redline accent for annotations. Reads like a structural blueprint before any visual design is applied. Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
design-extract
Sourcenexu-io/open-design/plugins/_official/atoms/design-extract/SKILL.md
Updated
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
frame-flowchart-sticky
Sourcenexu-io/open-design/plugins/_official/examples/frame-flowchart-sticky/SKILL.md
Updated
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
Skill content language: Chinese
hatch-pet
Sourcenexu-io/open-design/plugins/_official/examples/hatch-pet/SKILL.md
Updated
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.
image-poster
Sourcenexu-io/open-design/plugins/_official/examples/image-poster/SKILL.md
Updated
Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.
motion-showreel
Sourcenexu-io/open-design/plugins/_official/examples/motion-showreel/SKILL.md
Updated
Motion Designer Showreel — motion design template. A 15-second motion designer showreel at 128 BPM, rebuilt from the viral original: an Open Design mark opener, a stretching wordmark, six easing curves, a morphing shape, a truchet field, a 3D point cloud, kinetic type and an end card.
sky-water-tessellation
Sourcenexu-io/open-design/plugins/_official/examples/motion-sky-water-tessellation/SKILL.md
Updated
鸟群与鱼群交错的黑白版画循环模板。
Skill content language: Mixed languages
motion-visual-lesson
Sourcenexu-io/open-design/plugins/_official/examples/motion-visual-lesson/SKILL.md
Updated
Bring Ideas to Life (让灵感成真) — a 20-second OpenDesign paper story, with interactive prototypes, websites, PPT, posters and motion films collected into a book of possibilities.
web-prototype-taste-editorial
Sourcenexu-io/open-design/plugins/_official/examples/web-prototype-taste-editorial/SKILL.md
Updated
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
webgl-particle-galaxy
Sourcenexu-io/open-design/plugins/_official/examples/webgl-particle-galaxy/SKILL.md
Updated
A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from gl_VertexID), so the whole cloud draws in one call. Rendered as a single self-contained `index.html`. Use when the brief asks for a "particle field", "particle galaxy", "point cloud", "instanced points", "starfield", "GPU particles", or a swirling generative point system. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
wireframe-greybox
Sourcenexu-io/open-design/plugins/_official/examples/wireframe-greybox/SKILL.md
Updated
A crisp greybox / blueprint lo-fi wireframe — neutral grey blocks on a pale page, image placeholders drawn as a rectangle with a diagonal X, text shown as solid "lorem bars" of varying widths, sharp 1.5–2px borders, and a single monospace redline accent for annotations. Reads like a structural blueprint before any visual design is applied. Use when the brief asks for "greybox", "blueprint wireframe", "lo-fi dashboard", "low fidelity", "线框图", or "灰盒原型".
od-web-effect-extractor
Sourcenexu-io/open-design/plugins/_official/scenarios/od-web-effect-extractor/SKILL.md
Updated
Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable OpenDesign web artifact.
algorithmic-art
Sourcenexu-io/open-design/skills/algorithmic-art/SKILL.md
Updated
Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.
canvas-design
Sourcenexu-io/open-design/skills/canvas-design/SKILL.md
Updated
Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.
deck-guizang-editorial
Sourcenexu-io/open-design/skills/deck-guizang-editorial/SKILL.md
Updated
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
Skill content language: Chinese
editorial-burgundy-principles-template
Sourcenexu-io/open-design/skills/editorial-burgundy-principles-template/SKILL.md
Updated
Editorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.
fal-generate
Sourcenexu-io/open-design/skills/fal-generate/SKILL.md
Updated
Generate images and videos using fal.ai AI models. Production-grade catalogue covering Flux, SDXL, ideogram, and other community-hosted endpoints.
figma-create-new-file
Sourcenexu-io/open-design/skills/figma-create-new-file/SKILL.md
Updated
Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.
figma-generate-design
Sourcenexu-io/open-design/skills/figma-generate-design/SKILL.md
Updated
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
frame-flowchart-sticky
Sourcenexu-io/open-design/skills/frame-flowchart-sticky/SKILL.md
Updated
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
Skill content language: Chinese
frontend-slides
Sourcenexu-io/open-design/skills/frontend-slides/SKILL.md
Updated
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
hatch-pet
Sourcenexu-io/open-design/skills/hatch-pet/SKILL.md
Updated
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.