skills.rest
gkswls5006-web
gkswls5006-webCOMMUNITY
Explore all skills by this author →
GitHub

moai-workflow-design-import

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

Updated Apr 26, 2026
Search Tags:#validation#components#assets#design-tokens#claude-design#handoff-bundle#design-import
One-click install
npx skills add https://github.com/gkswls5006-web/last-todo --skill moai-workflow-design-import-gkswls5006-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-workflow-design-import
Source: https://github.com/gkswls5006-web/last-todo/tree/main/.claude/skills/moai-workflow-design-import
Command: npx skills add https://github.com/gkswls5006-web/last-todo --skill moai-workflow-design-import-gkswls5006-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claude Design handoffs are often locked in bundles that must be validated, parsed, and converted into MoAI tokens, component manifests, and assets for expert-frontend delegation. This skill automates that process by extracting design artifacts, validating bundle version against the whitelist, and surfacing structured error codes for fallback guidance.

Core Features & Use Cases

  • Ingest ZIP or HTML Claude Design exports and produce .moai/design/tokens.json, .moai/design/components.json, and .moai/design/assets/.
  • Validate bundle versions against the supported_bundle_versions whitelist and return DESIGN_IMPORT_UNSUPPORTED_VERSION when needed.
  • Provide deterministic error codes and fallback guidance to path B when import fails, enabling downstream workflows such as moai-domain-brand-design collaboration.

Quick Start

Provide a Claude Design bundle file (ZIP or HTML) to MoAI and run the design import workflow to begin extraction.

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 convert Claude Design handoff bundles into MoAI design tokens?▼

To convert Claude Design handoff bundles into MoAI design tokens, provide a ZIP or HTML export to run the design import workflow, which extracts tokens, components, and assets, then writes normalized outputs to the .moai/design directory.

What are design tokens and component manifests extracted from HTML or ZIP exports?▼

Design tokens and component manifests are structured JSON files generated by parsing design handoff bundles, containing normalized styling attributes and UI component definitions required for frontend integration.

Can I import Claude Design bundles with unsupported version numbers?▼

You cannot import unsupported Claude Design bundle versions because the workflow validates bundle versions against a supported_bundle_versions whitelist and returns a DESIGN_IMPORT_UNSUPPORTED_VERSION error when validation fails.

What happens when a design import fails during bundle parsing?▼

When a design import fails during bundle parsing, the workflow surfaces deterministic structured error codes and provides fallback guidance to path B, enabling downstream recovery workflows such as domain brand design collaboration.

Do I need Claude Design exports to generate static assets and token files?▼

Yes, you need Claude Design exports in ZIP or HTML format to generate static assets and token files, as the deterministic parsing rules require a valid handoff bundle to extract design artifacts.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
4

moai-workflow-design-import

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

Official
Advanced
Goblin1024Goblin1024
6

frontend-ui-ux

Route frontend UI/UX design tasks to the designer agent or Gemini MCP.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
DifanaDAPDifanaDAP

design-md

Create, lint, and export Google DESIGN.md token spec files.

Community
Intermediate