skills.rest
yekinya
yekinyaCOMMUNITY
Explore all skills by this author →
GitHub

moai-workflow-design-import

Parses Claude Design handoff bundles to extract design tokens, components, and assets.

2|Updated May 27, 2026
Search Tags:#frontend#design tokens#design import#handoff bundle#claude design#zip parsing#component manifest
One-click install
npx skills add https://github.com/yekinya/moai-novel --skill moai-workflow-design-import-yekinya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-workflow-design-import
Source: https://github.com/yekinya/moai-novel/tree/main/moai-novel/.claude/skills/moai-workflow-design-import
Command: npx skills add https://github.com/yekinya/moai-novel --skill moai-workflow-design-import-yekinya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Importing design work from Claude Design into a code project normally requires manually unpacking export files, copying tokens, and reorganizing assets. This Skill automates that handoff by validating, parsing, and normalizing bundle contents into a structured .moai/design/ directory ready for frontend implementation. ## Core Features & Use Cases - Bundle Validation and Security Scanning: Checks ZIP and HTML bundles for correct format, whitelisted versions, and rejects archives containing executables, symlinks, or path traversal entries before extraction. - Design Token Extraction and Normalization: Extracts tokens.json and normalizes varying field names (e.g., primary_color, brand_color) into a standard MoAI token schema covering colors, typography, spacing, radii, and shadows. - Structured Error Codes with Fallback Guidance: Returns specific error codes like DESIGN_IMPORT_UNSUPPORTED_VERSION with detected version, supported versions, and guidance to switch to the code-based brand design path. - Use Case: A designer exports a Claude Design ZIP bundle containing manifest.json, tokens.json, and component HTML files. You provide the bundle path, and the Skill extracts everything into .moai/design/ for the expert-frontend agent to consume. ## Quick Start Import the Claude Design bundle at ./handoff/design-bundle.zip and extract its tokens and components for frontend implementation.

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 a Claude Design bundle into my project?▼

Provide the local file path to a ZIP or HTML bundle exported from Claude Design. The Skill validates the format, scans for security issues, checks the bundle version against the whitelist, and extracts tokens, components, and assets into the .moai/design/ directory.

What bundle formats does Claude Design import support?▼

Phase 1 supports ZIP bundles containing manifest.json, tokens.json, components, and assets, plus single-file HTML exports. DOCX, PPTX, PDF, and Canva links are unsupported and return DESIGN_IMPORT_UNSUPPORTED_FORMAT with guidance to the code-based design path.

Why does bundle import fail with an unsupported version error?▼

The bundle's manifest.json format_version is not in the supported_bundle_versions whitelist defined in .moai/config/sections/design.yaml, which defaults to version 1.0. The error reports the detected version, supported versions, and suggests switching to path B code-based brand design.

What happens if a design bundle contains suspicious files?▼

The Skill rejects the bundle with DESIGN_IMPORT_SECURITY_REJECT before extracting anything if it finds executable extensions, symbolic links, path traversal sequences, or absolute paths. The error message lists the offending entries and no output directory is created.

Can import succeed if the bundle is missing optional components?▼

Yes, partial bundle recovery extracts whatever is available and records missing sections in .moai/design/import-warnings.json without failing. Only missing manifest.json in a ZIP bundle causes a hard failure since the version cannot be determined.

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
VNFT-GROUPVNFT-GROUP

normalize

Normalize frontend UI elements to match design system tokens and patterns.

Official
Advanced
Pear-CommercePear-Commerce

gsd-ui-review

Evaluate implemented frontend code against six visual quality pillars.

Official
Intermediate
AO-HySAO-HyS

clarify

Rewrites unclear UX copy, error messages, labels, and instructions for readability.

Official
Basic