{"id":2399,"date":"2026-10-01T05:19:16","date_gmt":"2026-10-01T05:19:16","guid":{"rendered":"https:\/\/shuffle.dev\/blog\/?p=2399"},"modified":"2026-10-01T05:20:08","modified_gmt":"2026-10-01T05:20:08","slug":"from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/","title":{"rendered":"From design to development: continue your Shuffle project in your favorite coding agent"},"content":{"rendered":"\n<p class=\"mb-6 leading-loose\">You\u2019ve found a design you like. You\u2019ve adjusted the colors, refined the layout, and made it your own. Now it\u2019s time to make it work inside your application.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">With Shuffle\u2019s new AI Agent feature, you can continue that work in Claude Code, Codex, or another coding agent. Bring your project and its assets with you, then ask your agent to help with the next step: integrating it into your stack, connecting real data, or building out more pages.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">The work you\u2019ve already done becomes the starting point.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Explore a few ideas, then build on the best one<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Choosing a design is easier when you have options to compare. Start in Shuffle\u2019s Multi-AI Designer, generate a few designs, and pick the one that fits your project best. You can easily <a href=\"https:\/\/shuffle.dev\/ai-website-redesign\" class=\"text-brand-blue underline hover:no-underline\">redesign your website.<\/a><\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">If it needs a few changes, open it in the visual editor. Adjust the typography, change the spacing, swap images, or rearrange sections until you\u2019re happy with the result.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Then continue in your coding agent. You\u2019ve already made the key design decisions, so you can focus your next prompts on implementation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large text-sm text-center text-secondary\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"245\" src=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-ai-design-1024x245.png\" alt=\"\" class=\"wp-image-2403\" srcset=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-ai-design-1024x245.png 1024w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-ai-design-300x72.png 300w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-ai-design-768x184.png 768w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-ai-design.png 1218w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Click \u201cAI Agent\u201d in Multi-AI Designer to start using it.<\/figcaption><\/figure>\n\n\n\n<p class=\"mb-6 leading-loose\">\u00a0For example, after sharing the project with your agent, you could ask:<\/p>\n\n\n\n<pre class=\"wp-block-code\" class=\"mb-6 leading-loose\"><code>\u00a0> Integrate this design into my existing app. Use the project\u2019s framework and component conventions, preserve the layout and styling, and connect the pricing section to our existing plan data.<\/code><\/pre>\n\n\n\n<p class=\"mb-6 leading-loose\"><\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">That gives your agent a concrete design to work from and a clear next task.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Pick up where you left off<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Moving from a design tool to your development environment often means explaining your decisions all over again. Which layout did you choose? What should the buttons look like? Which assets belong on the page?<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Shuffle\u2019s AI Agent feature helps you carry that work forward. Your agent can download the project and its assets, giving it the actual starting point for the next stage of development.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">You can use this with a new design from Multi-AI Designer or a project you\u2019ve been building in the Shuffle Editor. Whenever you\u2019re ready to move into code, the option is there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large text-sm text-center text-secondary\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"241\" src=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-editor-1-1024x241.png\" alt=\"\" class=\"wp-image-2405\" srcset=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-editor-1-1024x241.png 1024w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-editor-1-300x71.png 300w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-editor-1-768x181.png 768w, https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-editor-1.png 1240w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\" class=\"mt-2 text-sm leading-loose text-center\">Click the AI Agent icon in the editor to get started.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Choose what you want to do next<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Open AI Agent in Multi-AI Designer, or click the AI Agent icon in the Shuffle Editor. From there, you have three options:<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">&nbsp; \u2022 Download: Copy a prompt that lets your agent download your project and its assets, then add instructions for what to build next.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">&nbsp; \u2022 WordPress: Use the dedicated prompt to ask your agent to convert the project into a WordPress theme.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">\u00a0 \u2022 DESIGN.md: Generate a design specification your agent can follow when creating matching pages or applying the same style to an existing project.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Copy the prompt, adjust it if needed, and paste it into your favorite coding agent. Making projects accessible to agents requires an active Shuffle subscription.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Keep the design work moving<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">You might need a landing page integrated into an existing app, a WordPress theme for a client, or several new screens that match a design you\u2019ve already chosen. Shuffle gives you a place to explore and refine the visual direction, then carry it into the development workflow you already use.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Create a few designs. Pick your favorite. Customize it visually. Then open AI Agent and keep building.<\/p>\n\n\n\n<p class=\"text-center mb-8\" class=\"mb-6 leading-loose\"><a href=\"http:\/\/shuffle.dev\/ai-website-redesign\" class=\"mx-auto inline-block py-4 px-6 xs:py-4 xs:px-8 bg-brand-blue hover:bg-blue-700 xs:text-lg text-center font-semibold leading-none rounded-3xl transition duration-100 shuffle-click text-white\" class=\"text-brand-blue underline hover:no-underline\">Redesign Your Website \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve found a design you like. Now it\u2019s time to make it work inside your application.<\/p>\n","protected":false},"author":2,"featured_media":2421,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,20],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>From design to development: continue your Shuffle project in your favorite coding agent | Shuffle<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From design to development: continue your Shuffle project in your favorite coding agent | Shuffle\" \/>\n<meta property=\"og:description\" content=\"You\u2019ve found a design you like. Now it\u2019s time to make it work inside your application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-01T05:19:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-01T05:20:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-coding-agents.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3594\" \/>\n\t<meta property=\"og:image:height\" content=\"1258\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dawid Andrzejewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dawid Andrzejewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"From design to development: continue your Shuffle project in your favorite coding agent\",\"datePublished\":\"2026-10-01T05:19:16+00:00\",\"dateModified\":\"2026-10-01T05:20:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\"},\"wordCount\":552,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"AI\",\"Shuffle\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\",\"name\":\"From design to development: continue your Shuffle project in your favorite coding agent | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2026-10-01T05:19:16+00:00\",\"dateModified\":\"2026-10-01T05:20:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"From design to development: continue your Shuffle project in your favorite coding agent\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\",\"name\":\"Dawid Andrzejewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"caption\":\"Dawid Andrzejewski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From design to development: continue your Shuffle project in your favorite coding agent | Shuffle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/","og_locale":"en_US","og_type":"article","og_title":"From design to development: continue your Shuffle project in your favorite coding agent | Shuffle","og_description":"You\u2019ve found a design you like. Now it\u2019s time to make it work inside your application.","og_url":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2026-10-01T05:19:16+00:00","article_modified_time":"2026-10-01T05:20:08+00:00","og_image":[{"width":3594,"height":1258,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2026\/10\/shuffle-coding-agents.png","type":"image\/png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"From design to development: continue your Shuffle project in your favorite coding agent","datePublished":"2026-10-01T05:19:16+00:00","dateModified":"2026-10-01T05:20:08+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/"},"wordCount":552,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["AI","Shuffle"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/","url":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/","name":"From design to development: continue your Shuffle project in your favorite coding agent | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2026-10-01T05:19:16+00:00","dateModified":"2026-10-01T05:20:08+00:00","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2026\/10\/from-design-to-development-continue-your-shuffle-project-in-your-favorite-coding-agent\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"From design to development: continue your Shuffle project in your favorite coding agent"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d","name":"Dawid Andrzejewski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","caption":"Dawid Andrzejewski"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/2399"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=2399"}],"version-history":[{"count":9,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/2399\/revisions"}],"predecessor-version":[{"id":2425,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/2399\/revisions\/2425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media\/2421"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=2399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=2399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=2399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}