From preview to working website with a Motionspace template

Choose and inspect the design

Open a design in the library and review its preview before copying anything. Look through the whole page, including the menu and the final section. If you need Arabic and English, inspect both. Note the parts you want to retain: the opening image, the spacing, the section sequence or a particular movement.

Select Copy prompt. If the design asks you to sign in or choose a plan, complete that step and return to it. The prompt is the prepared instruction that describes how the design should be built. Keep it intact when moving it to your chosen assistant; shortening it can remove details needed to reproduce the intended structure.

Introduce your project in the same message

Motionspace’s getting-started guide points to ChatGPT, Claude and v0 as examples of tools you can use. Their available features and account requirements can differ. Start a new project or chat in the tool you choose, paste the design prompt, then add the facts about your project before sending it.

Include your business name, the purpose of the website, the language or languages, the sections you need and the real destination for the main action. Attach your own logo and images if they are ready. Ask the assistant to collect missing information instead of inventing it. On a phone, paste the design prompt before copying any additional example, because the next copy replaces your clipboard.

• Name the project and describe its audience.
• Provide approved wording and contact details.
• Identify the layout and motion you want preserved.
• Ask for Arabic and English explicitly if both are required.
• Request a working preview that opens on your current device.

Make the first review concrete

A useful brief might say: build a website for our Riyadh photography studio using this design, keep its composition and motion, use the attached images, and ask about any missing service details. Add that you need to inspect the result on your phone. This tells the assistant what success looks like without asking you to describe the code.

When the preview is ready, open the exact link and compare it with the chosen design. Check the main image crop, headings, spacing, menu behavior and section order. Then test the practical details: do the buttons go to the right place, can you read all the text, and does the language switch work? A screenshot alone cannot prove an interactive feature works.

Request one clear change at a time

Stay in the same project and describe a bounded change: replace this photo, update this heading, or add this contact action. State what should stay as it is. A screenshot with the relevant area marked is useful for a visual correction. After each change, recheck the affected area at both wide and narrow widths.

For a new component, return to the library, copy that component’s prompt and paste it into your existing project. Explain exactly where it belongs. If replacing a menu or footer, name the links, contact details and language switcher that must be preserved. Keep a recoverable version before large changes so you can return to the last accepted result.

Separate preview, publishing and handoff

A development preview is a place to inspect the work. Publishing gives the website a public address under the hosting arrangements you choose. Before publishing, remove sample content, verify contact destinations, test forms through their full journey and inspect Arabic and English on the actual device. The chosen tool or hosting provider may have its own charges and account requirements.

If an assistant works on another computer, a localhost link is not a usable handoff to your phone. Ask for a device-accessible development link, then open it yourself. At completion, keep the project files, assets, publishing details and a short record of any unfinished work. The Motionspace guide explains the starting workflow; your final review confirms that the website represents your real business.