skills.rest
a2ngerer
a2ngererCOMMUNITY
Explore all skills by this author →
GitHub

design-setup

Configure design-tool selection and Figma MCP handoff for UI/UX workflows.

5|Updated Apr 16, 2026
Search Tags:#design#ui#onboarding#frontend#claude#figma#mcp
One-click install
npx skills add https://github.com/a2ngerer/claude_onboarding_agent --skill design-setup-a2ngerer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-setup
Source: https://github.com/a2ngerer/claude_onboarding_agent/tree/main/skills/design-setup
Command: npx skills add https://github.com/a2ngerer/claude_onboarding_agent --skill design-setup-a2ngerer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configures the design-tool layer and Figma MCP handoff to reduce onboarding time for UI/UX design workflows. It does not configure the frontend stack, testing, or accessibility rules — those live in web-development-setup and would duplicate rules if emitted here.

Core Features & Use Cases

  • Configure the design-tool layer to select your primary design tool and enable direct design-to-Claude handoff via MCP for efficient collaboration.
  • Provide a Figma MCP handoff channel to streamline exchange of design tokens, spacing, and typography between design tools and Claude.
  • Coordinate with web-development-setup when you also need frontend framework rules, testing, and WCAG guidance; this skill delegates to the parent setup to avoid duplication and conflicts.

Quick Start

Set Claude to read your primary design tool and enable Figma MCP handoff for your UI project.

Frequently Asked Questions about design-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Figma MCP handoff for UI design workflows?▼

Figma MCP handoff for UI design workflows is configured by selecting your primary design tool and enabling direct design-to-Claude integration. This streamlines the exchange of design tokens, spacing, and typography between design tools and Claude.

What is a design-tool layer and when do I need it for onboarding?▼

A design-tool layer configures your primary design application and MCP integration to reduce onboarding time for UI/UX projects. You need it when initiating a UI/UX project that requires design-tool selection and direct design-to-Claude handoff.

Can I use this to configure frontend framework rules and accessibility guidelines?▼

No, you cannot use this to configure frontend framework rules or accessibility guidelines. This skill strictly configures the design-tool layer and MCP handoff, delegating frontend rules, testing, and WCAG guidance to web-development-setup to avoid duplication.

How do I coordinate design-tool setup with web-development-setup?▼

You coordinate design-tool setup with web-development-setup by letting this skill delegate frontend framework rules, testing, and WCAG guidance to the parent setup. This prevents rule duplication and conflicts during your UI project onboarding.

Does this setup include installing dependencies and generating artifacts?▼

Yes, the setup includes installing dependencies, prompting design-tool choices, configuring MCP, generating artifacts, and upgrading metadata as part of the complete onboarding flow for your UI/UX design project.

Related Skills

Explore More Design & Creative Skills→
Probably-GroupProbably-Group
3

isolated-development

Create isolated git worktree sandboxes per feature or issue with baseline tests.

Official
Intermediate
KraitsKraits

visual-design-foundations

Codify typography, spacing, color, and iconography into a cohesive design system.

Community
Advanced
FEMADOXFEMADOX
4

accessibility

Audit web content against WCAG 2.2 guidelines and generate remediation lists.

Community
Intermediate
Itinerant18Itinerant18

ui-design-system

Generate design tokens from a brand color into JSON, CSS, or SCSS.

Community
Intermediate