Skip to main content
skillsmp

メニュー

デザイン

UI/UXデザイン、プロトタイピング、デザインシステム向けエージェントスキルを閲覧

カテゴリ、GitHubスター、配布元の最終更新時刻は、カタログの整理と表示順に使う指標です。SkillsMPによる推奨、品質認定、安全性審査、用途への適合保証ではありません。利用前にskillの詳細ページと配布元を確認してください。

並び順

28,704件の結果

design-system

ソースaffaan-m/ECC/pi/core/skills/design-system/SKILL.md
更新日

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.

Skill コンテンツの言語： 英語

figma-generate-library

ソースanomalyco/opencode/packages/plugins/figma/skills/figma-generate-library/SKILL.md
更新日

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.

Skill コンテンツの言語： 英語

design-philosophy

ソースmicrosoft/vscode/.github/skills/design-philosophy/SKILL.md
更新日

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 コンテンツの言語： 英語

banner-design

ソースnextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/banner-design/SKILL.md
更新日

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

ソースopenai/codex/codex-rs/skills/src/assets/samples/imagegen/SKILL.md
更新日

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 コンテンツの言語： 英語

open-design-landing

ソースnexu-io/open-design/design-templates/open-design-landing/SKILL.md
更新日

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 コンテンツの言語： 英語

wireframe-greybox

ソースnexu-io/open-design/design-templates/wireframe-greybox/SKILL.md
更新日

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 コンテンツの言語： 英語

hatch-pet

ソースnexu-io/open-design/plugins/_official/examples/hatch-pet/SKILL.md
更新日

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 コンテンツの言語： 英語

webgl-particle-galaxy

ソースnexu-io/open-design/plugins/_official/examples/webgl-particle-galaxy/SKILL.md
更新日

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

ソースnexu-io/open-design/plugins/_official/examples/wireframe-greybox/SKILL.md
更新日

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 コンテンツの言語： 英語

hatch-pet

ソースnexu-io/open-design/skills/hatch-pet/SKILL.md
更新日

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 コンテンツの言語： 英語