skills.rest
mayzhangmin
mayzhangminCOMMUNITY
Explore all skills by this author →
GitHub

apply-bee-ds-toolkit

Migrate Figma screens to the Bee-DS Toolkit with Bee components.

Updated Apr 19, 2026
Search Tags:#workflow#migration#figma#design-system#toolkit#component-replacement#bee-ds
One-click install
npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill apply-bee-ds-toolkit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-bee-ds-toolkit
Source: https://github.com/mayzhangmin/ucd-figma-skills-playground/tree/main/skills/apply-bee-ds-toolkit
Command: npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill apply-bee-ds-toolkit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrating or rebuilding an existing Figma screen, frame, or section onto the Bee-DS Toolkit after Bee families are identified, to ensure a consistent, Bee-backed migration path.

Core Features & Use Cases

  • Bee-DS-focused rules and guardrails layered on top of the base apply-design-system workflow to guide migration, swapping, and composition with Bee components.
  • Precondition checks and references to live-bee lookups and design guidance to reduce blockers and incorrect mappings.
  • Use Case: migrate a screen to Bee-DS Toolkit, replace local sections with Bee-DS components, or rebuild a section using Bee primitives while maintaining library-backed fidelity.

Quick Start

Begin a Bee-DS Toolkit migration by loading necessary Bee skills and performing an exact-frame replacement in Figma for the target screen.

Frequently Asked Questions about apply-bee-ds-toolkit

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

FAQPage Schema
How do I migrate a Figma screen to the Bee-DS Toolkit?▼

To migrate a Figma screen to the Bee-DS Toolkit, load the necessary Bee skills and perform an exact-frame replacement. This process swaps local elements with Bee components to ensure a consistent, library-backed migration path.

What is the best way to replace local Figma sections with Bee-DS components?▼

Replacing local Figma sections with Bee-DS components involves applying Bee-DS-focused rules and guardrails layered on the base design-system workflow. This guides swapping and composition with Bee components while validating against Bee-DS rules.

Can I rebuild a Figma section using Bee primitives?▼

You can rebuild a Figma section using Bee primitives by composing them during the migration process. This approach maintains library-backed fidelity by enforcing preconditions and validating results against Bee-DS rules.

Do I need to identify Bee families before starting a Bee-DS Toolkit migration?▼

Identifying Bee families is a required precondition before starting a Bee-DS Toolkit migration. This ensures the migration, swapping, and composition processes have a consistent, Bee-backed migration path for your Figma screens.

What happens when imports fail during a Figma design-system migration?▼

When imports fail or requirements are not met during a Figma design-system migration, the workflow reports blockers. Precondition checks and live-bee lookups are integrated to reduce these blockers and incorrect mappings.

Related Skills

Explore More Design & Creative Skills→
mayzhangminmayzhangmin

review-and-fix-bee-design-system

Audit a Figma screen for Bee-DS drift and fix one validated finding.

Community
Advanced
mayzhangminmayzhangmin

bee-ds-live-lookup

Retrieve live Bee-DS components, tokens, and icons via Figma MCP.

Community
Advanced
mayzhangminmayzhangmin

bee-ds-design-guide

Guide Bee-DS design decisions for screen, section, and component structure.

Community
Advanced
vinocrzyvinocrzy

honey-bee-storefront-design

Integrate the Stitch design system with Next.js and Tailwind to build Honey Bee storefront UI components.

Community
Advanced