Getting Started
Your First Design

Creating Your First Design

Learn how to create your first component, page, or complex design using MagicPath's AI-powered interface.

Example prompts to try:

"Create a modern hero section with a heading, subheading, and CTA button"
"Design a SaaS landing page with hero, features, pricing, and footer sections"
"Build an analytics dashboard with charts, metrics cards, and a data table"
"A pricing card with three tiers"
"Build a contact form with name, email, and message fields"

How to Prompt Like a Pro

Getting great results from MagicPath starts with effective prompting. Here are our top tips:

General Tips

  • •Be SPECIFIC: The more details you provide, the better. The AI cannot read your mind!
  • •Use screenshots: Attach reference images when creating or editing designs for more accurate results
  • •Break it down: If you're requesting many changes at once, break them into smaller, focused steps and iterate
  • •Ask for explanations: If you don't see changes, ask "What did you change?" - the AI might have created something but didn't connect it

Prompting Do's and Don'ts

✅ Do: Use screenshots to recreate existing designs

Upload an image of what you want, and MagicPath will recreate it accurately.

✅ Do: Be clear and specific about component names

Better: "Three checkboxes in a list within a modal"

Not: "a box for checks in a list in screen thing"

✅ Do: Break large changes into smaller steps

If you request many updates at once, the AI may miss some. Focus on one improvement at a time.

❌ Don't: Give vague instructions like "make it cleaner"

Instead, be specific: "increase spacing between sections" or "use a lighter background color"

❌ Don't: Continue when results become inconsistent

Instead:

  • • Use version history to roll back to a working state
  • • Start a fresh conversation
  • • Ask the AI to reflect on what went wrong

Using Version History

MagicPath automatically saves every version of your design. If something goes wrong, you can easily revert to a previous working state.

Using version history to revert changes
Click any version to instantly revert to that design state
  • •Revert to previous version: Click on the top right dropdown to access the version history and revert to any previous version

Working with Existing Themes

Want to maintain consistent styling across your designs? are your best friend. Create custom themes with your brand colors, typography, and design rules, then apply them to any design you create.

  • •Upload a screenshot of your existing design and MagicPath will match the style
  • •Create a to automatically apply consistent styling to all your designs
  • •Build a for reusable elements across projects

Learning Through Replication

The best way to master MagicPath is to attempt to replicate designs you admire. In art school, you learn technical skill by studying technically impressive work and putting your own spin on it—why not learn through doing?

The goal isn't perfect replication, but finding something you are happy with. The process takes you through learning that you wouldn't have gotten otherwise.

Breaking Down Interactions

When replicating complex interactions, breaking them down into words is the easiest method. Think about the Midjourney /describe command.

Ask yourself: What context is needed for the model to replicate the interaction you want? Describe the states, transitions, and user actions in detail.

Editing & Exploring

  • •Being succinct can help drive down credit cost, but also gives the AI more room to cook
  • •If you want to be exploratory, be intentionally vague (at your own peril)

Images Always Help

Uploading images dramatically improves results. If you have a pen and paper or a sticky note, you now have the ultimate prototyping tool.

  • •Shoot a photo with your phone, get it into your computer and upload to MagicPath with your prompt
  • •Screenshots of interactions, sites, and dashboards work exceptionally well
  • •Sketch wireframes on paper and upload them for quick prototyping

Example Prompts & Replication Projects

Learn from real examples of how to break down complex interactions and replicate impressive designs.

Example 1: Dynamic Signature Button

Sample to replicate: View on X

PROMPT:

Create a signature button on a canvas, when closed, it appears as a pencil icon in a round button. When clicked, it opens up into a small drawable area with a note in the top left saying draw signature, and a hold to confirm button in the bottom right. The user can draw their signature with a mouse, and once they finish, the signature animates on a loop filling up from the direction they started in, similar to a stroke animation with SVG and animated stroke-dasharray. The ghost of the signature appears, with a darker stroke animating to fill it as if drawing on a loop. The user can press the hold to confirm button to confirm the signature. I have provided images of how the interaction might look.

Tip: Compare results with and without screenshot uploads for this complex interaction

Example 2: Facedock

Sample to replicate: sprout.place

PROMPT:

Let's make a demo of something called a facedock. The concept is that you can draw a frame inside of an infinite canvas app that acts as a 'dock' for a user's webcam feed. It's a resizable object that gets filled with the user's webcam feed when they hover over it. At all other times, their webcam feed is locked into a circle that follows their cursor in the app to show other people their presence. When the feed is inside of the dock object, the user can click to lock it in place so that when their cursor leaves the dock it stays inside of the dock and no longer follows their cursor. When they click on the locked dock again, the feed follows the user's cursor again once they leave the dock object. The user can draw multiple facedock objects using a tool in the toolbar at the bottom. The toolbar also contains a way to turn off their webcam feed. I have provided some images of how it looks. The animation transition from the circle to the facedock should be smooth and a little bouncy.

Example 3: 3D Perspective Card

PROMPT:

Build a modern product card with a 3D tilt effect on hover, including image, title, description, price, and two action buttons. The 3D tilt should be handled using perspective and CSS transforms by tracking mouse position and updating the card's rotation, which should give a true interactive 3D hover effect. Please use a direct CSS transform approach for the 3D tilt, updating the card's rotation on mouse move without animation libraries. For calculating the rotation, divide the mouse offset from the center by a fixed number (e.g., / 25), which means the tilt is proportional to the distance from the center, but the divisor is a constant.

Example 4: Clock Countdown Interface

PROMPT:

Create a minimal, modern, dark-mode, clock countdown interface that counts down to two days in the future. The clock should have large sans-serif type that shows hours : minutes : seconds counting in realtime synced to the current time using moment.js. The numbers should animate in from the bottom of the previous numbers with a faded blur effect.

Example 5: Realtime Sensor Data Visualization

PROMPT:

Create an interface for a visualization of a computer vision model that simulates analysis of a watched package that someone is holding. The interface should show waveforms animating tracking x, y, and z axis analog readings from sensors in the package. They should get more wavy when the package is mishandled. The right side of the screen should show a feed of updates in text with timestamps of either 'package shaken', 'package held gently' given the status of the package. Simulate a few events on a timer.

Example 6: Slide Deck Editor

PROMPT:

Create a slide deck presentation tool that contains a sidebar on the left for showing live previews of the slides, a center area for editing the slides (adding text, images, etc.), and then a right sidebar for editing properties of things on the slide, a secondary mode for the right sidebar could be showing layouts that could be applied to the slide.

Tone & Prompt Structure Advice

Being direct is usually best—focus on action words and clear instructions.

Effective Prompt Patterns

  • •Start with action words like "Create" or "Build"
  • •Get feedback by adding "Can you create...?" for iterative work

EXAMPLES:

"Create a subscribe modal state with an 80% background shade"
"Create a desktop app for quick raw audio capture with real-time transcription"
"Create a typewriter-style typing app with realistic animations and sounds"
"Create a timezone visualization app showing team members' locations with a day/night cycle"

Hacks to Get Things Right on the First Try

Specific technical patterns that help MagicPath understand exactly what you need.

  • If you need a video feed:Get the user's webcam feed using getMediaObject
  • If you need time:Sync to the current time using moment.js
  • If you need a map:Add the map using mapbox.js, with a spot for you to input your API key in a hidden settings page
Next Latest Updates