Redirecting to PayPal

design.md for agent workflows

Turn your vision into a design.md handoff

DESIGN.md gives agents a design-focused spec they can read before writing code. Build the interface in Shuffle, export the file, and use it to recreate the same direction inside a fresh app or an existing codebase.

Create Design →
01
Create visually

Start in Shuffle, iterate on design, and build the project you want agents to follow.

02
Export design.md

Generate a portable design spec directly from the project instead of writing one by hand.

03
Build with agents

Drop the file into your repo and ask coding agents to match the exported design direction.

Export Preview

A clearer handoff for coding agents

design.md
# Overview
This design is a polished developer-focused SaaS landing page for an AI-powered CLI and code automation product.
## Colors
- **Primary**: `zinc-900` for main text, dark surfaces, primary buttons, icons, and high-emphasis sections.
## Typography
Typography combines expressive serif display headlines with clean sans-serif interface text and monospaced code treatments.
- **Headline Font**: `Instrument Serif`
Shuffle Project
From visual editor to agent-ready spec

Use Shuffle to define the UI once, then export the design language into a file agents can act on.

Export from Shuffle, then build with agents

Shuffle handles the visual exploration first. DESIGN.md becomes the handoff file you keep with the rest of the project context.

1

How to export design.md in Shuffle

Create a project in AI Design or AI Website Redesign and iterate until the layout, hierarchy, and overall style match what you want to ship.

When the design direction is ready, use the design.md export action to generate the specification file.

2

How to use it with coding agents

Add design.md next to the rest of your implementation context and tell the agent to follow it while building the UI.

Use the file to preserve section structure, component intent, visual priorities, and the overall look you approved in Shuffle.

That gives the agent a design anchor before it starts generating React, Next.js, HTML, Tailwind, or another frontend stack.

Example Agent Prompt

Use the attached design.md as the design source of truth. Rebuild this landing page in our frontend stack and match the section hierarchy, spacing, and visual tone.

01

Less prompt drift

Agents start from a concrete design artifact instead of a vague one-paragraph brief.

02

Faster implementation

The visual intent is already captured, so the agent can focus on code and structure.

03

Reusable handoff

Keep the exported file with the project and reuse it across iterations, repos, and agent sessions.

Shuffle + DESIGN.md + Agents

Build the design visually. Export the DESIGN.md. Let agents implement it.

Use Shuffle to create the project direction, then export design.md and move faster inside your coding workflow.

Create a new design →
Shuffle Editor

Build websites faster with an AI Visual Editor

Shuffle Editor on Twitter Shuffle Editor on YouTube Shuffle Editor on Facebook new Join our Discord server

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.