skills.rest
modu-ai
modu-aiOFFICIAL
Explore all skills by this author →
Website𝕏@MODU_AIGitHub

moai-workflow-design-import

Extract design tokens, components, and assets from Claude handoff bundles.

4|4|Updated Apr 21, 2026
Search Tags:#design#components#claude#handoff#assets#tokens#import
One-click install
npx skills add https://github.com/modu-ai/moai-studio --skill moai-workflow-design-import
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-workflow-design-import
Source: https://github.com/modu-ai/moai-studio/tree/main/.claude/skills/moai-workflow-design-import
Command: npx skills add https://github.com/modu-ai/moai-studio --skill moai-workflow-design-import

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill processes Claude Design handoff bundles (ZIP or HTML), extracting design tokens, component manifests, and static assets for expert-frontend delegation while validating bundle versions and returning structured error information for fallback workflows.

Core Features & Use Cases

  • Ingest Claude handoff bundles (ZIP or HTML) and extract tokens, components, and assets for frontend handoffs.
  • Validate the bundle version against the supported_bundle_versions whitelist and emit standardized error codes with guidance for path B.
  • Output normalized design artifacts to .moai/design (tokens.json, components.json, assets) and support partial recoveries with warnings.
  • Enable fallback workflows via path B to continue branding/import tasks when bundle import fails.

Quick Start

Place a Claude handoff bundle (ZIP or HTML) and run the moai design workflow to import tokens, components, and assets while validating the bundle version.

Frequently Asked Questions about moai-workflow-design-import

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

FAQPage Schema
How do I import Claude design handoff bundles into frontend tokens?▼

Claude design handoff bundles can be ingested as ZIP or HTML files to extract design tokens, component manifests, and static assets, outputting normalized artifacts to the .moai/design directory.

What is a Claude design handoff bundle used for?▼

A Claude design handoff bundle packages design tokens, components, and static assets for frontend delegation, enabling structured transfer of design artifacts to frontend development workflows.

Does the import process validate bundle versions?▼

The import process validates bundle versions against a supported_bundle_versions whitelist. If validation fails, it emits standardized error codes with specific guidance for path B fallback workflows.

Can I recover partial data if a handoff bundle import fails?▼

Partial recoveries with warnings are supported during bundle import. When bundle import fails completely, you can enable fallback workflows via path B to continue branding and import tasks.

What files are output when extracting design artifacts?▼

Extracting design artifacts outputs normalized files to .moai/design, specifically generating tokens.json, components.json, and extracted static assets for frontend delegation.

What should I do when design handoff import is not working?▼

When design handoff import is not working, check the standardized error codes emitted by the validator. Use the provided guidance to trigger path B fallback and continue your branding tasks.

Related Skills

Explore More Design & Creative Skills→
gkswls5006-webgkswls5006-web

moai-workflow-design-import

Convert Claude Design bundles into MoAI tokens, manifests, and assets.

Community
Advanced
RoleModelRoleModel
6

optics-context

Apply Optics design framework classes and tokens to standardize CSS styling.

Official
Intermediate
firefly-eventsfirefly-events

design-system

Converts brand-system YAML to W3C token JSON and HTML previews for frontend design workflows.

Official
Advanced
jgardner04jgardner04

skill-creator

Create, validate, and package Claude skills as ZIP or directory structures.

Community
Intermediate