Skip to main content
skillsmp

Menu

Design

Parcourez les skills pour le design UI/UX, prototypage et systèmes de design

Les catégories, les étoiles GitHub et la date de dernière mise à jour à la source servent à structurer et ordonner le catalogue. Ces signaux ne constituent ni une recommandation, ni une certification de qualité, ni un contrôle de sécurité, ni une garantie d’adéquation. Consultez la page du skill et sa source avant utilisation.

Trier par

28 704 résultats

design-system

Sourceaffaan-m/ECC/pi/core/skills/design-system/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

figma-generate-library

Sourceanomalyco/opencode/packages/plugins/figma/skills/figma-generate-library/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

design-philosophy

Sourcemicrosoft/vscode/.github/skills/design-philosophy/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

banner-design

Sourcenextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/banner-design/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

imagegen

Sourceopenai/codex/codex-rs/skills/src/assets/samples/imagegen/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

open-design-landing

Sourcenexu-io/open-design/design-templates/open-design-landing/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

wireframe-greybox

Sourcenexu-io/open-design/design-templates/wireframe-greybox/SKILL.md
Mis à jour

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 "灰盒原型".

Langue du contenu du Skill : anglais

hatch-pet

Sourcenexu-io/open-design/plugins/_official/examples/hatch-pet/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

webgl-particle-galaxy

Sourcenexu-io/open-design/plugins/_official/examples/webgl-particle-galaxy/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais

wireframe-greybox

Sourcenexu-io/open-design/plugins/_official/examples/wireframe-greybox/SKILL.md
Mis à jour

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 "灰盒原型".

Langue du contenu du Skill : anglais

hatch-pet

Sourcenexu-io/open-design/skills/hatch-pet/SKILL.md
Mis à jour

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.

Langue du contenu du Skill : anglais