| name | indesign-conversion |
| description | Convert an exported Adobe InDesign IDML package or PDF into typed React components, design tokens, and Storybook stories via the @aurelius/pipeline InDesign pipeline. Use when a designer hands you an .idml or .pdf and you need a starting React component set. Keywords: InDesign to React, IDML, PDF to React, indesign pipeline, design tokens from InDesign, brochure to React, print to web, aurelius pipeline indesign |
InDesign Conversion
Overview
This skill drives the InDesign pipeline end to end: it parses an exported IDML package or PDF into a normalized intermediate representation (IR), maps the styles and swatches to design tokens (a Tailwind preset, tokens.css, tokens.ts, and a Style Dictionary JSON), and generates typed React components with Storybook stories. It pairs with the indesign-to-react agent, which reviews the generation report and proposes follow-ups.
When to use
- A designer delivered an exported
.idml or .pdf (the normal handoff) and you want a styled React starting point rather than rebuilding by hand.
- You need design tokens (colors, type scale, spacing) derived directly from the InDesign document.
Do not use it for live Figma/Canva designs (use those pipelines) or when you need pixel-perfect reconstruction — this produces a usable, token-driven scaffold for manual refinement.
Prerequisites
- An exported
.idml (File → Export → InDesign Markup) or a PDF exported from InDesign. Source .indd files are not supported — export first.
- The
@aurelius/pipeline package built (pnpm --filter @aurelius/pipeline build).
- For best fidelity, prefer IDML when available — it carries named paragraph/character styles and swatches that PDF lacks.
Expected outputs
Into <output> (default ./src/indesign):
*.tsx — one typed component per spread, plus *.stories.tsx and an index.ts barrel.tokens/ — tokens.ts, tokens.css, tailwind.preset.ts, design-tokens.json.public/indesign/ — extracted images, referenced by the components.indesign-pipeline-report.md and indesign-pipeline-report.json — produced files, staged assets, unmapped frames, and accessibility TODOs.
Worked example
Using the committed fixture (tests/fixtures/indesign/sample.idml):
pnpm --filter @aurelius/pipeline build
node packages/pipeline/dist/pipeline-cli.js pipeline indesign \
tests/fixtures/indesign/sample.idml \
--target react --styling tailwind --output ./out/indesign
This writes out/indesign/Spread1.tsx (a <section> with an <h1> heading and an <img>), Spread1.stories.tsx, index.ts, the token files under out/indesign/tokens/, and the two reports. The report's Accessibility TODOs section will list the hero image's missing alt text — add it before shipping.
Then review and refine:
- Open
indesign-pipeline-report.md; address each TODO (alt text, unmapped frames, font fallbacks).
- Confirm the Tailwind preset is wired into the host project's
tailwind.config.ts (or, for CSS Modules, that tokens.css is imported).
- Render a story in Storybook to confirm the component mounts.
Common gotchas
- CMYK → sRGB shifts. Print colors are converted to sRGB without ICC profiles; CMYK/Lab swatches may shift and out-of-gamut colors are clamped. Confirm brand colors against the design.
- Missing / non-embedded fonts. Print fonts are rarely web fonts; the mapper resolves families by name to a web stack (
config/font-map.json). Confirm substitutions or supply a --font-map.
- Oversized print images. Exported images are often print-resolution. Optimize/resize the files in
public/indesign/ for the web.
- Accessibility gaps. Every generated
<img> has an empty alt; headings are inferred heuristically. Always do an accessibility pass.
- PDF reconstruction. PDFs have no named styles — text frames, columns, and style buckets are inferred from positions and font sizes. Expect to merge/split a few blocks by hand.
Related
- Agent:
indesign-to-react.
- Docs:
docs/pipelines/indesign.md, docs/pipeline/indesign-pdf-fidelity.md.
