With Vibe Coding, new pages are often created in a matter of seconds. To maintain the exact look of the main page for new subpages, you can save the visual system of your page in a design.md.
With this workflow, you extract the style of an existing page in order to generate new subpages or follow-up projects with the exact same look.
The Concept: What is a design.md?
A design.md is not code and not a specific layout. It is an abstract design specification. Instead of telling the AI: "Copy the layout of the homepage", you provide it with the fundamental design tokens via the design.md.
It describes:
The overarching design philosophy
Exact color palettes, contrasts, and light/dark modes
Typography scales, spacing, and grid rules
Shapes, corner radii, shadows, and animations
As a result, when creating a subpage, the AI knows exactly what buttons, cards, or spacing should look like, even if the content is completely different.
Why should you use this workflow?
Guaranteed design consistency: Fonts, buttons, spacing, and colors remain 100% identical to the main page across all subpages.
Flexibility for new content: The AI can freely adapt the layout to new content (e.g., a pricing table or a contact form), while strictly utilizing the existing design tokens.
Time savings: You don't have to laboriously explain what your brand looks like to the AI every time you create a new page; a reference to the
design.mdis enough.
The Workflow: 3 steps to a consistent subpage
Here you will learn exactly how to "copy" the design of your existing page and "paste" it onto a new subpage.
Step 1: Extract design from the main page (Copy)
First, open the chat of your already existing main page. Copy the following prompt, paste it there, and let the AI create your design.md.
Copy this prompt:
Analyze this page and create a design.md that captures its visual system, not its content.
The goal is a reusable specification that I can pass to another page or project to transfer this exact style to other content.
Rules:
Section-independent: Extract tokens, rules, and principles; never copy headings or section-specific layouts.
Be concrete: Provide exact values (hex codes, rem/px, font names, font weights, millisecond durations, easing curves) wherever they exist, no adjectives.
Capture the "Why": Note the underlying rules (e.g., spacing scale, typography scale, when shadows/borders are used) so the style can be generalized.
Cover the following, in this exact order:
Design Philosophy — 2-3 sentences on the overall feel and the principles driving it.
Color — Palette with roles (background, surface, text, accent, states), exact values, handling of light/dark mode.
Typography — Font families, font weights, typography scale, line height, letter spacing, hierarchy rules.
Spacing & Layout — Base unit, spacing scale, maximum width/grid, breakpoints, density, a few notes on layout choices.
Shape & Depth — Radii, borders, shadow/layering rules.
Motion — Transitions, duration, easing, hover/scroll behavior.
Components — Recurring patterns (buttons, cards, input fields) as reusable rules, not concrete instances.
Imagery/Iconography — Style, handling, sizing.
Output a single, self-contained markdown snippet. If a value is inferred rather than explicitly stated, mark it with (inferred).
Step 2: Save the design code
The AI will now output a Markdown text field (code snippet). Copy this entire text and briefly save it to your clipboard (or temporarily in a blank text document) so that you have it ready to use.
Step 3: Feed the new subpage with the design (Paste)
Now create your new subpage (e.g., a pricing, feature, or offer page). Before the AI gets started, give it your content prompt in the chat along with the copied text from your design.md.
Practical Example 1: New offer page in the style of the main page:
In the video, you see:
Left: The homepage (original page): https://nordic-escape.onepage.me/
Right: The new subpage, created with the
design.mdof the homepage: https://nordic-escape.onepage.me/unterseite1
Practical Example 2: New content, identical brand world
In the following video, you can see another use case for the workflow:
In the video, you see:
Left side: The new subpage, which was generated purely on the basis of the extracted
design.md.Right side: The original page.
Even though the content is completely different, colors, typography, spacing, buttons, and the entire look & feel remain consistent. The AI can flexibly adapt the layout to the new content without losing the brand's visual identity.
This is a highly efficient, fast way to reuse your current style across platforms or to build consistent brand worlds.
Frequently Asked Questions (FAQ)
Can I manually adjust the design.md?
Can I manually adjust the design.md?
Yes, absolutely! The file is simple Markdown. If the AI has extracted your design and you notice afterwards that you would prefer to change the default corner radius from 12px to 8px, for example, you can simply manually overwrite the value in the text of the design.md before using it for the next subpage.
Does the design.md also work for completely different websites?
Does the design.md also work for completely different websites?
Yes. That is the great advantage of "section-independent" extraction. Since no specific content is saved, but only purely visual rules (colors, spacing, fonts), you can use this file as a design foundation for any new project to guarantee an identical brand look.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂