skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

indesign-conversion

Convert InDesign IDML and PDF files into typed React components and design tokens.

7|1|Updated Mar 11, 2026
Search Tags:#design tokens#storybook#react components#design to code#indesign#idml#pdf to react
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill indesign-conversion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: indesign-conversion
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/indesign-conversion
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill indesign-conversion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually rebuilding InDesign designs as React components and extracting design tokens by hand is time-consuming and error-prone, especially when designers hand off exported IDML or PDF files for web implementation.

Core Features & Use Cases

  • Automated Component Generation: Converts exported InDesign IDML or PDF files into typed React components with accompanying Storybook stories for immediate preview and testing.
  • Design Token Extraction: Automatically maps InDesign styles and swatches to production-ready design tokens, including Tailwind presets, CSS files, TypeScript token files, and Style Dictionary JSON.
  • Use Case: Ideal for design-to-code workflows where you receive InDesign assets for brochures, marketing pages, or print-to-web projects and need a consistent, token-driven starting point instead of building components from scratch.

Quick Start

Use the indesign-conversion skill to process your exported InDesign IDML or PDF file and generate a ready-to-use React component set with matching design tokens.

Frequently Asked Questions about indesign-conversion

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

FAQPage Schema
How do I convert InDesign IDML files to React components?▼

Converting InDesign to React involves parsing exported IDML or PDF files to automatically extract design tokens like Tailwind presets, CSS, TypeScript files, and Style Dictionary JSON, while generating typed React component scaffolds with accessibility TODO reports for manual refinement.

Can I extract design tokens from an InDesign PDF for Tailwind?▼

Yes, extracting design tokens from InDesign assets automatically maps styles and swatches to production-ready tokens, generating Tailwind-compatible presets, CSS files, TypeScript token files, and Style Dictionary JSON for web development.

What is the best way to turn InDesign layouts into web code?▼

The best way to turn InDesign layouts into web code is using an automated conversion tool that generates typed React components, Storybook stories, and design tokens, providing a consistent starting point instead of manually rebuilding print assets from scratch.

Does InDesign to React conversion work with Storybook?▼

Yes, converting InDesign files to React components generates accompanying Storybook stories for immediate preview and testing, streamlining the design-to-code workflow for teams handing off print or layout assets.

What are the limitations of converting InDesign to React components?▼

A limitation of converting InDesign to React is that the output consists of component scaffolds with accessibility TODO reports, meaning developers must still perform manual refinement to ensure full accessibility compliance and responsive web behavior.

Related Skills

Explore More Software Engineering Skills→
zhanglongxiao111zhanglongxiao111
35

indesign-cli

Operate Adobe InDesign via CLI tool discovery and JSX execution.

Community
Intermediate
yutaoshaoyutaoshao

frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Community
Advanced
ForgePlanForgePlan
3

canvas-port

Port Pencil design systems to web frameworks with token contracts and visual regression tests.

Official
Advanced
SayBGMSayBGM

moai-design-tools

Convert .pen designs into React and Tailwind CSS components.

Community
Advanced