Skip to main content
skillsmp

القائمة

التصميم

تصفح مهارات الوكيل لتصميم UI/UX والنماذج الأولية وأنظمة التصميم

تساعد الفئات ونجوم GitHub وتاريخ آخر تحديث في المصدر على تنظيم الفهرس وترتيب نتائجه. ولا تمثل هذه الإشارات توصية من SkillsMP أو اعتمادًا للجودة أو مراجعةً للسلامة أو ضمانًا للملاءمة. افتح صفحة المهارة وافحص مصدرها قبل الاستخدام.

ترتيب حسب

٢٨٬٧٠٤ نتيجة

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية

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

لغة محتوى المهارة: الإنجليزية

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.

لغة محتوى المهارة: الإنجليزية