ardot-design-to-code

Open the .ardot design file, confirm the output format through the structured dialog (single HTML file is the default), then the workflow analyzes each frame, exports image and SVG assets, and generates the HTML structure, CSS styles, and JS interactions. The output opens directly in a browser with no build step.

Provide the website URL and the workflow fetches its HTML and CSS with curl or WebFetch, captures screenshots with Playwright, then builds a style guide in an .ardot file covering color palette, typography, components, spacing, radius, and motion. Design tokens are created as reusable variables via apply_variables.

The default and preferred output is a single self-contained HTML file with inline CSS and JS. Alternatives include multi-file web projects, React, Vue, WeChat Mini Program, Flutter, React Native, SwiftUI, and Jetpack Compose, selected through a mandatory multiple-choice dialog before generation.

Yes, the Skill includes Tailwind v4 implementation guidelines covering the @import "tailwindcss" syntax, CSS custom properties in :root, font loading via link tags or next/font, and fill_container/hug_contents mapping to flex-1 and w-fit/h-fit classes. Inline styles are prohibited in favor of Tailwind classes.

Image exports typically fail when the output directory does not exist or the batch is too large. Create directories with mkdir -p first, export no more than 5 image nodes per batch, and retry with a smaller batch if a failure occurs.

No, only image-fill nodes such as backgrounds and scene art should be exported as PNG/JPEG, and vector decorations as SVG. Exporting whole slides loses editability; text, gradients, and solid shapes should be reproduced directly in CSS for a faithful, maintainable result.