Skip to main content
skillsmp

菜单

设计

浏览 UI/UX 设计、原型制作和设计系统的 agent skills

分类、GitHub Stars 和来源更新时间只用于组织与排序目录，不代表 SkillsMP 背书、质量认证、安全审核或适用性保证。使用前请进入详情页检查来源。

22,573 个结果

diagram-maker
389.0k
openclawopenclaw/openclaw
Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

Skill 内容语言： 英语

meme-maker
389.0k
openclawopenclaw/openclaw
Search meme templates, suggest formats, and generate local or hosted image memes.

Skill 内容语言： 英语

frontend-slides
253.2k
affaan-maffaan-m/ECC
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.

Skill 内容语言： 英语

frontend-slides
253.2k
affaan-maffaan-m/ECC
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.

Skill 内容语言： 英语

frontend-slides
253.2k
affaan-maffaan-m/ECC
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.

Skill 内容语言： 英语

ios-icon-gen
253.2k
affaan-maffaan-m/ECC
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.

Skill 内容语言： 英语

baoyu-article-illustrator
243.2k
NousResearchNousResearch/hermes-agent
Article illustrations: type × style × palette consistency.

Skill 内容语言： 英语

concept-diagrams
243.2k
NousResearchNousResearch/hermes-agent
Generate flat, minimal educational SVG visuals as HTML.

Skill 内容语言： 英语

sketch
243.2k
NousResearchNousResearch/hermes-agent
Throwaway HTML mockups: 2-3 design variants to compare.

Skill 内容语言： 英语

stable-diffusion
243.2k
NousResearchNousResearch/hermes-agent
Text-to-image generation, inpainting, and img2img.

Skill 内容语言： 英语

architecture-diagram
243.2k
NousResearchNousResearch/hermes-agent
Dark-themed SVG architecture/cloud/infra diagrams as HTML.

Skill 内容语言： 英语

manim-video
243.2k
NousResearchNousResearch/hermes-agent
Manim CE animations: 3Blue1Brown math/algo videos.

Skill 内容语言： 英语

popular-web-designs
243.2k
NousResearchNousResearch/hermes-agent
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

Skill 内容语言： 英语

design-philosophy
192.0k
microsoftmicrosoft/vscode
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.

Skill 内容语言： 英语

canvas-design
175.1k
anthropicsanthropics/skills
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.

Skill 内容语言： 英语

banner-design
125.9k
nextlevelbuildernextlevelbuilder/ui-ux-pro-max-skill
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.

Skill 内容语言： 英语

imagegen
122.3k
openaiopenai/codex
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.

Skill 内容语言： 英语

image-poster
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

open-design-landing
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

web-prototype-taste-editorial
94.7k
nexu-ionexu-io/open-design
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`.

Skill 内容语言： 英语

wireframe-greybox
94.7k
nexu-ionexu-io/open-design
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 "灰盒原型".

Skill 内容语言： 英语

design-extract
94.7k
nexu-ionexu-io/open-design
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.

Skill 内容语言： 英语

frame-flowchart-sticky
94.7k
nexu-ionexu-io/open-design
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
hatch-pet
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

image-poster
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

web-prototype-taste-editorial
94.7k
nexu-ionexu-io/open-design
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`.

Skill 内容语言： 英语

webgl-particle-galaxy
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

wireframe-greybox
94.7k
nexu-ionexu-io/open-design
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 "灰盒原型".

Skill 内容语言： 英语

od-web-effect-extractor
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

algorithmic-art
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

canvas-design
94.7k
nexu-ionexu-io/open-design
Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.

Skill 内容语言： 英语

deck-guizang-editorial
94.7k
nexu-ionexu-io/open-design
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
editorial-burgundy-principles-template
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

fal-generate
94.7k
nexu-ionexu-io/open-design
Generate images and videos using fal.ai AI models. Production-grade catalogue covering Flux, SDXL, ideogram, and other community-hosted endpoints.

Skill 内容语言： 英语

figma-create-new-file
94.7k
nexu-ionexu-io/open-design
Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.

Skill 内容语言： 英语

figma-generate-design
94.7k
nexu-ionexu-io/open-design
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

Skill 内容语言： 英语

frame-flowchart-sticky
94.7k
nexu-ionexu-io/open-design
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
frontend-slides
94.7k
nexu-ionexu-io/open-design
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.

Skill 内容语言： 英语

hatch-pet
94.7k
nexu-ionexu-io/open-design
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.

Skill 内容语言： 英语

imagegen
94.7k
nexu-ionexu-io/open-design
Generate and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references.

Skill 内容语言： 英语

imagen
94.7k
nexu-ionexu-io/open-design
Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.

Skill 内容语言： 英语

pixelbin-media
94.7k
nexu-ionexu-io/open-design
Generate and edit images and videos with an 85+ API portfolio and build visually appealing website pages via Pixelbin.

Skill 内容语言： 英语

slides
94.7k
nexu-ionexu-io/open-design
Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.

Skill 内容语言： 英语

venice-image-generate
94.7k
nexu-ionexu-io/open-design
Image generation endpoints and available styles via the Venice.ai API.

Skill 内容语言： 英语

ppt-generation
82.3k
bytedancebytedance/deer-flow
Use this skill when the user requests to generate, create, or make presentations (PPT/PPTX). Creates visually rich slides by generating images for each slide and composing them into a PowerPoint file.

Skill 内容语言： 英语

wireframe
80.1k
paperclipaipaperclipai/paperclip
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.

Skill 内容语言： 英语

color-oklch
74.0k
thedaviddiasthedaviddias/Front-End-Checklist
Use when building a design token system, creating accessible colour palettes, generating colour ramps programmatically, or migrating a design system to support wide-gamut displays.

Skill 内容语言： 英语

dimensions
74.0k
thedaviddiasthedaviddias/Front-End-Checklist
Use when reviewing image assets, markup, and CDN or build transforms related to Set explicit width and height on images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Separate real CLS risks from tiny decorative SVGs or ornament-only assets that are unlikely to move surrounding content.

Skill 内容语言： 英语