Skill

adobe-xd

Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD for artboards, repeat grids, component states, and developer handoff.

Figma

design

Install

npx claudepluginhub partme-ai/full-stack-skills --plugin t2ui-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill whenever the user wants to:

Supporting Assets

LICENSE.txt

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

168.3k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

superpowers

168.3k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

superpowers

168.3k

Stats

Stars328

Forks62

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

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

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

2. Prototyping

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

3. Developer Handoff

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

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