AI Agent Skill HUB
multiAI Summary Pending

adobe-xd

Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD. Use when the user asks about Adobe XD artboards, prototype links, repeat grids, component states, design tokens export, or developer handoff.

223 stars
bypartme-ai
View on GitHubInstallation ↓

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/adobe-xd/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/design-skills/adobe-xd/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/adobe-xd/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How adobe-xd Compares

Feature / Agentadobe-xdStandard Approach
Platform SupportmultiLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD. Use when the user asks about Adobe XD artboards, prototype links, repeat grids, component states, design tokens export, or developer handoff.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

## When to use this skill

Use this skill whenever the user wants to:
- Create or edit UI/UX designs using Adobe XD artboards and components
- Build interactive prototypes with transitions, auto-animate, or voice triggers
- Work with repeat grids, component states, or responsive resize
- Export design specs or assets for developer handoff
- Manage shared libraries, design tokens, or collaborate via shared links

## How to use this skill

### 1. Design Creation

1. **Create artboards**: Select device preset or custom size, name artboards by screen (e.g., "Login", "Dashboard").
2. **Build components**: Select elements -> right-click -> "Make Component". Use slash naming for categories (e.g., `Button/Primary`, `Button/Secondary`).
3. **Add states**: Select component -> "Default State" dropdown -> "New State" to create hover/active states.
4. **Use repeat grid**: Select element -> "Repeat Grid" to create lists or card grids; drag handles to adjust count and spacing.

### 2. Prototyping

1. Switch to **Prototype** mode.
2. Drag a connector from a trigger element to the target artboard.
3. Configure transition: trigger (Tap/Drag/Voice), action (Transition/Auto-Animate/Overlay), and easing.
4. Preview with Play button (Cmd+Enter / Ctrl+Enter).

### 3. Developer Handoff

1. Click **Share** -> "Share for Development".
2. Developers access the published link to inspect spacing, colors, fonts, and export assets.

```text
Example prototype link setup:
  Trigger: Tap on "Login" button
  Action: Transition to "Dashboard" artboard
  Animation: Auto-Animate, 0.3s ease-out
```

## Best Practices

- Keep components consistent with a shared design library.
- Ensure prototypes are fully linked with clear interaction annotations.
- Export assets at 1x, 2x, and 3x for multi-density screens.
- Use version history and shared links for team collaboration.
- Note: Adobe has deprecated XD in favor of Figma; evaluate for new projects.

## Keywords

adobe xd, UI design, prototype, artboard, components, repeat grid, developer handoff, Adobe