Build an E-Bike Demo Store with Wixel

Introduction

30 Second Summary

A polished logo can still clash with the images around it. When colours, lettering, or mood drift between assets, the storefront feels improvised.

In this project, you will direct the Wixel Agent through a feedback loop to create the fictional VoltPath brand. You will publish that brand as a mobile-friendly demo store in Wix with three fictional e-bikes.

What You'll Build

You can open your public VoltPath link on an iPhone, browse three e-bikes, and see the same navy, teal, and orange brand direction across the entire store.

By the end of this project, you'll have:

• A public VoltPath storefront that visitors can open on a phone and recognise as one consistent brand.
• A three-product catalog where visitors can browse Metro One, Trail One, and Fold One with matching visuals, demo prices, and fictional descriptions.
• A visible before-and-after comparison that shows how stronger context transformed a mismatched draft into a coordinated brand system.
• A Secret Mission where you turn the VoltPath brief into a reusable Wixel custom skill and use it to create a matching launch graphic.

Are there any prerequisites?

You need an iPhone with internet access, access to the App Store, and an email address.

Step 1 covers installing both mobile apps and creating the free account you need.

Before We Start

Before any hands-on work, commit to building VoltPath as a fictional e-bike demo store instead of a real e-bike business. You are practicing how to direct and refine an AI design agent through critique, revision, mobile branding, and no-code storefront publishing.

Set Up Your Mobile Design Workspace

VoltPath starts in Wixel on your iPhone. Wix later turns those assets into the public demo store.

Both apps need the same free Wix account. This shared sign-in removes account switching before the agent feedback loop begins.

In this step, get ready to:

• Prepare Wixel with a free Wix account.
• Connect the Wix app to the same account.
• Confirm that your Wixel Agent workspace is ready.

Install Wixel and create your free Wix account

Wixel requires a Wix account. Creating that account inside the mobile setup gives both apps one identity to use.

Keep This Setup Free

This setup can stay entirely free. The Wixel Free plan costs $0.

• Remain on the Wixel Free plan.
• Decline a paid trial if one is offered.
• Skip custom-domain setup if it appears.
• Avoid payment setup during this project.

• Open the App Store on your iPhone.
• Search for Wixel.
• Install the Wixel mobile app from Wix.
• Open Wixel from your iPhone Home Screen.
• Choose the account-creation option shown on the sign-in screen.
• Create a free Wix account by following the email sign-up flow.
• Complete any email verification prompt shown by Wix.
• Sign in to Wixel with your new free Wix account.

You will finish inside Wixel under your new free Wix account.

Wixel Not Installing or Signing In?

• Confirm that your iPhone has an active internet connection.
• Finish any Wix email verification before retrying the sign-in.

Help me resolve my Wixel installation or Wix account sign-in problem.

Install Wix with the same account

The Wix app manages the storefront side of VoltPath. Using the account from Wixel keeps your design workspace tied to the site you create later.

• Return to the App Store from earlier.
• Search for Wix.
• Install the Wix app.
• Open Wix from your iPhone Home Screen.
• Choose the sign-in option shown in the app.
• Sign in with the same free Wix account used in Wixel.
• Complete any account verification prompt shown by Wix.

You will see Create Now or your site list after the sign-in finishes.

Seeing the Wrong Wix Account?

• Confirm that the Wix app uses the same email address as Wixel.
• Sign out of the incorrect Wix account before retrying.

Help me connect Wixel and Wix to the same account.

Open a Wixel project and check your credits

The Wixel Agent works from the bottom of an open project. Its chat becomes the workspace for the brand feedback loop.

AI actions consume credits based on their complexity. Checking the balance first gives you a clear starting point before any generation begins.

• Switch back to Wixel from earlier.
• Use the project-creation control shown in Wixel to open a new project.
• Locate the Wixel Agent at the bottom of the open project.
• Tap the Wixel Agent to reveal its chat.
• Use the visible credit indicator to check your current AI-credit balance.
• Leave the message field empty to preserve the balance for the design work.

How Do Wixel Credits Work?

The Wixel Free plan provides 120 AI credits per month. It allows a maximum of 30 credits per day.

Each AI action consumes credits according to the request's complexity. Manual editing later helps you conserve those credits.

Before the final check, do you expect both apps to show the same account while Wixel also shows a ready design chat?

• Confirm that the Wixel Agent chat is visible at the bottom of the open project.
• Confirm that the AI-credit balance is visible in Wixel.
• Switch back to the Wix app from earlier.
• Confirm that Create Now or your site list appears.

In Wixel you will see the Agent chat inside your open project. You will also see your available AI-credit balance.

In Wix you will see Create Now or your site list under the same free account.

Cannot See the Wixel Agent?

• Confirm that a Wixel project is open.
• Return to the bottom of the open project to find the Wixel Agent.
• Restart Wixel if the project controls have not loaded.

Help me find the Wixel Agent in my open mobile project.

That setup hurdle is cleared. Both apps now share the account that carries VoltPath from design into publishing.

Your mobile design workspace is ready. Next up, you will create two VoltPath designs whose visible mismatch reveals why an AI agent needs stronger context.

Create a Deliberate Mismatch

Your mobile design workspace is ready. The open VoltPath project gives you the Wixel Agent for your first design request.

A quick asset can look acceptable by itself. It can still clash with another asset when neither one follows a shared visual direction.

In this step, get ready to:

• Generate a readable rough VoltPath logo from a thin prompt.
• Customize a free storefront template that deliberately conflicts with the logo.
• Record the visible mismatch across color, typography, or mood.

Generate a rough VoltPath logo

A thin prompt gives the agent very little context to interpret. The resulting logo becomes your baseline for seeing what that missing direction costs.

• Return to the Wixel Agent chat from earlier.
• Send the thin logo request by pasting this prompt into the chat:

Create a logo for a fictional e-bike store called VoltPath.

What does this prompt test?

The prompt supplies only the brand name plus the type of store. The agent chooses the colors, typography, or mood without a shared brand direction.

That limited context makes the output useful as a rough first draft.

• Review the generated logo options.
• Keep one option with a readable logo shape.
• Use Wixel's manual text tools to replace any inaccurate brand wording with VoltPath.
• Confirm that your chosen logo clearly displays VoltPath.

Your first asset is complete. You now have a readable logo that reflects the agent's choices under minimal direction.

Logo text still look wrong?

• Select the part of the design containing the inaccurate wording.
• Replace the wording with VoltPath using Wixel's manual text tools.
• Keep the corrected version as your rough logo.

Help me correct inaccurate text in my Wixel logo.

Create a conflicting storefront graphic

A storefront graphic gives you a second asset to compare against the logo. Its visual direction needs to conflict clearly enough for the brand problem to be visible.

• Return to the open VoltPath project.
• Choose a free Wixel template whose colors or mood conflict with the rough logo.
• Replace the template's main headline with VoltPath E-Bikes.
• Keep the template's conflicting visual direction.
• Confirm that the finished graphic displays VoltPath E-Bikes as its headline.

The project now contains two readable VoltPath assets with different visual directions. That contrast gives you something concrete to critique.

Struggling to create a clear clash?

• Compare the template's dominant color with the logo's dominant color.
• Choose another free template if those colors feel too similar.
• Keep the new template's original typography or mood.

Help me choose a template that visibly clashes with my logo.

Compare the two designs

Before you compare them, which difference do you expect to stand out first: color, typography, or mood?

• View the rough VoltPath logo in the open project.
• View the storefront graphic headed VoltPath E-Bikes.
• Compare the dominant colors across both designs.
• Compare the typography style across both designs.
• Compare the overall mood across both designs.

You'll see that both designs display the VoltPath name while their colors, typography, or mood visibly clash. This shortfall is the intended result of creating disconnected assets with limited shared context.

You now have a visible example of brand inconsistency. Next, you'll use this critique to create one coordinated VoltPath direction.

Refine the VoltPath Brand System

Your rough logo and conflicting storefront graphic make the consistency problem visible. Now you can turn that contrast into a coordinated VoltPath system.

The first prompt gave the Wixel Agent too little context. A structured brand brief now gives it a reusable direction.

In this step, get ready to:

• Give the Wixel Agent a complete VoltPath brand brief.
• Tag both existing designs for a shared revision.
• Approve a consistent logo, palette, typography style, and tone.

Write the reusable brand brief

A brand brief gives the agent a goal plus boundaries. These details help every later asset follow the same visual direction.

• Supply the full VoltPath context by pasting this brief into the open Wixel Agent chat:

Create a clean, adventurous brand system for VoltPath, a fictional e-bike store for urban commuters and weekend riders. Use deep navy, electric teal, and warm orange; use modern geometric lettering; keep the tone energetic but trustworthy; avoid claims about speed, range, or safety; and keep every future asset visually consistent.

What does this brief control?

• The audience gives the agent a clear picture of who the fictional store serves.
• The palette creates a shared visual thread across every VoltPath asset.
• The typography rule keeps the brand modern across future designs.
• The claim boundary prevents unsupported product details from entering the design.

• Send the brand brief to the Wixel Agent.

You should see the agent respond to the fuller direction. That response confirms the approved brief is part of the existing conversation.

Brief not influencing the response?

• Confirm the complete brief appears as one message in the existing VoltPath conversation.
• Resend the brief if part of the text was omitted during pasting.

Help me check whether my VoltPath brand brief gives the Wixel Agent enough context.

Revise both designs in one conversation

The Mention control connects specific designs to your request. This lets the agent compare both before examples against one brief.

• Tap Mention in the open Wixel Agent chat.
• Select the rough VoltPath logo.

You should see the rough logo connected to the conversation as a referenced design.

• Tap Mention again.
• Select the mismatched storefront graphic.

You should now see both before examples connected to the revision request.

• Request revised copies while preserving the original before examples by pasting this message:

Create revised versions of the logo and storefront graphic using the VoltPath brand brief. Leave the original rough logo and mismatched graphic unchanged as the before example. Explain what you changed in the colors, typography, and overall mood.

What does this request protect?

• Revised copies preserve the original mismatch as evidence of where you started.
• One shared brief aligns both designs around the same brand rules.
• The explanation makes the agent's design choices visible for your review.

• Send the revision request to the Wixel Agent.

You should see revised versions of both designs. You should also receive an explanation covering the visual changes.

Missing one of the revised designs?

• Confirm both before assets are connected to the revision request.
• Repeat the Mention process for any missing asset.

Help me troubleshoot a Wixel revision that did not update both referenced designs.

Review and approve the system

AI-generated changes can contain inaccurate text or unexpected visual details. Your review decides which version becomes the approved VoltPath system.

Protect your remaining credits

Each AI action uses a variable number of credits. Manual editing keeps this review focused when the visible balance is low.

• Skip another agent revision if the visible credit balance is low.
• Use Wixel's manual editing tools for remaining color corrections.
• Use Wixel's manual editing tools for remaining text corrections.

• Inspect every visible word in the revised logo and storefront graphic.
• Correct the brand name to VoltPath wherever needed.
• Remove any visible speed, range, or safety claim.
• Correct any off-palette elements with Wixel's manual color tools.
• Select the strongest revised VoltPath logo.
• Approve the modern geometric lettering shown in that logo.
• Approve deep navy, electric teal, and warm orange as the shared palette.
• Approve an energetic but trustworthy tone for future VoltPath assets.

Your selected version is ready for a final comparison with the revised storefront graphic.

• Predict which colors, lettering, and mood you expect both revised assets to share.
• Reopen the revised VoltPath logo.
• Inspect the logo for the correct brand name and approved visual direction.
• Return to the revised storefront graphic.
• Inspect the graphic for the same approved visual direction.
• Compare both revised assets with the original mismatch review note.

You should see VoltPath spelled correctly in both revised designs. You should also see the navy, teal, and orange palette carried through modern geometric lettering.

The two designs should feel energetic but trustworthy. Unsupported performance or safety claims should be absent.

You've closed the feedback loop. The rough mismatch now has a coordinated brand system beside it.

Your VoltPath brand now has rules the agent can reuse. Next, you'll apply those rules to a coordinated hero image and three product visuals.

Create and Download the Asset Kit

Your approved VoltPath brand direction now gives the Wixel Agent a shared visual target. The storefront needs four images that feel like one family.

Separate one-off generations can drift in color or mood. You will use the established conversation to create the full set from the approved context.

In this step, get ready to:

• Generate one hero image plus three coordinated product visuals.
• Review the set to approve a consistent final version.
• Download all four finished assets to the iPhone.

Generate the coordinated four-asset set

The existing Wixel conversation contains the approved palette plus the agreed mood. Reusing that context helps the agent carry the same visual rules across every storefront asset.

• Return to the Wixel Agent chat in your open VoltPath project.
• Request the coordinated set by sending this prompt:

Create a coordinated four-asset storefront set for VoltPath using the approved brand context from this conversation.

Create one wide hero image for the fictional VoltPath storefront.
Create one square urban commuter visual for Metro One.
Create one square trail visual for Trail One.
Create one square compact folding visual for Fold One.

Use deep navy, electric teal, and warm orange across the set. Use clean backgrounds. Keep the mood energetic but trustworthy. Do not embed any text. Do not include speed claims. Do not include range claims. Do not include safety claims. Keep all four visuals consistent with the approved VoltPath logo. Match the approved brand system.

How does this prompt control drift?

• The established conversation gives the agent the approved VoltPath context.
• The wide and square formats prepare each image for a specific storefront role.
• The shared palette connects four different e-bike scenes to one brand.
• The exclusions prevent accidental wording or unsupported claims from entering the visuals.

• Wait for the Wixel Agent to finish creating the set.
• Confirm that the VoltPath project contains four distinct designs.

You should see one wide hero design plus three square catalog visuals for Metro One, Trail One, and Fold One. You now have the complete visual foundation for the storefront catalog.

Missing one of the four designs?

If you receive one combined scene, ask the agent to separate it into one wide design plus three square designs without changing the established style.

If an asset is missing, request only that asset in the same conversation.

Help me get four separate coordinated assets from the Wixel Agent.

Review and correct the four designs

AI-generated visuals can introduce accidental words or inconsistent details. Reviewing the four outputs as one set reveals drift that may be hard to notice in a single image.

• Review the four outputs as one set in the VoltPath project.
• Check that every design uses deep navy, electric teal, and warm orange.
• Confirm that the hero design is a wide storefront visual.
• Confirm that Metro One is a square urban commuter visual.
• Confirm that Trail One is a square trail visual.
• Confirm that Fold One is a square compact folding visual.

What makes the set coherent?

• The repeated palette makes each scene recognizable as part of VoltPath.
• The clean backgrounds keep attention on the fictional products.
• The energetic but trustworthy mood connects the hero image to the catalog visuals.

• Check all four backgrounds for a clean presentation.
• Check all four designs for accidental wording.
• Check all four designs for performance or safety claims.

Match each correction to the issue

• Manual crop tools improve awkward framing.
• Manual recolor tools restore the approved palette.
• Manual background tools remove distracting background details.
• Manual text tools remove accidental wording.

• Use the matching Wixel manual tool to correct one issue at a time.
• Recheck each corrected design against the approved brand system.
• Repeat the review cycle for each remaining design.

You should now see four clean visuals with no embedded text or unsupported claims. That review is the quality-control win that keeps every image inside the approved VoltPath direction.

Did a manual edit affect the wrong design?

Undo the last change if it affected the wrong design.

Select the intended design before applying the correction again.

Help me correct a VoltPath asset without changing the rest of the set.

Download the finished asset kit

The approved designs still live inside Wixel. Downloading separate image files makes them ready for the product catalog in the next step.

• Select the finished wide hero design in the VoltPath project.
• Select Share & Download.
• Select Download.
• Choose an available image format.
• Choose a suitable size.
• Select Download again.
• Save the hero image to the download location presented on your iPhone.

The chosen location should now contain one wide VoltPath hero image.

• Return to the four finished designs in the VoltPath project.
• Repeat the same download flow for Metro One.
• Repeat the same download flow for Trail One.
• Repeat the same download flow for Fold One.

Before you check the full set, how many separate image files do you expect to find?

• Open the location where your iPhone saved the four downloads.

You should see one wide VoltPath hero image plus separate square visuals for Metro One, Trail One, and Fold One. Your coordinated storefront asset kit is now saved on the iPhone.

Can't find all four downloads?

Return to each finished design to confirm that you completed both Download selections.

Repeat the download flow for any missing image.

Help me locate or redownload my four VoltPath image files.

Your coordinated assets are ready for visitors to see. Next, you will turn them into a public demo store with Wix.

Publish the VoltPath Demo Store

Your coordinated VoltPath assets are ready on your iPhone. Now you will turn that brand kit into a public storefront with Wix.

Wixel provides the visual system. The demo still needs a browseable storefront where visitors can open each fictional product.

The Wix AI assistant creates the initial site structure. You will complete the demonstration by adding the branded product catalog.

In this step, get ready to:

• Create a free VoltPath Online Store site with the approved logo.
• Add the three fictional products with their matching Wixel visuals.
• Publish a public storefront that passes every product check.

Create the free VoltPath store

The AI assistant asks for the brand profile before generating the site. This is where your approved logo becomes part of the storefront from the start.

• Switch back to the Wix app from earlier.
• Tap Create Now.
• Select Chat to the AI assistant.
• Tell the assistant to create an Online Store for the fictional VoltPath e-bike brand.
• Describe the audience as urban commuters plus weekend riders.
• Request Home content for the generated site.
• Request Shop content for the generated site.
• Supply the approved VoltPath logo when prompted.

Why supply the logo now?

Supplying the approved logo gives the generated site a direct link to the brand system you already refined. The logo anchors the store even when the static layout comes from the AI assistant.

• Confirm the site profile names the brand VoltPath.
• Confirm the site profile uses the Online Store category.
• Confirm the proposed site includes Home content.
• Confirm the proposed site includes Shop content.
• Select End Chat & Continue.

That puts your storefront foundation in place. The generated site now carries VoltPath into its Home content plus its Shop content.

Missing a page or the logo?

• Return to the AI assistant conversation if the site profile omits the approved logo.
• Restate the missing page requirement before selecting End Chat & Continue.

Ask for help with the generated profile.

Add the three fictional products

Each catalog record connects one downloaded Wixel visual to its matching fictional product. Wix can show the product image alongside its name, demo price, plus brief description.

The route to the product list can appear in one of two places. Choose the tab that matches your Wix app.

Store Products under Manage

• Select Manage from the site dashboard.
• Select Store Products.

Store Products under Catalog

• Select Manage from the site dashboard.
• Select Catalog.
• Select Store Products.

• Select + Add a Product.
• Choose the downloaded Metro One catalog image for the product media.
• Enter Metro One in the Product name field.
• Enter 1499 in the Product price field.
• Write a short fictional commuter description in the Brief description field that avoids performance claims.
• Select Save.

Your first catalog record is saved. Metro One now pairs the commuter visual with its fictional store details.

Is the first product incomplete?

• Edit Metro One if the product list shows the wrong visual.
• Check that the demo price contains only 1499.
• Remove any description claims about speed, range, battery performance, or safety.

Help me check the Metro One product record.

• Select + Add a Product.
• Choose the downloaded Trail One catalog image for the product media.
• Enter Trail One in the Product name field.
• Enter 2299 in the Product price field.
• Write a short fictional trail model description in the Brief description field that avoids performance claims.
• Select Save.

The catalog now shows Trail One with its matching trail visual. Its demo price is stored as 2299 in the store's displayed currency.

• Select + Add a Product.
• Choose the downloaded Fold One catalog image for the product media.
• Enter Fold One in the Product name field.
• Enter 999 in the Product price field.
• Write a short fictional folding model description in the Brief description field that avoids performance claims.
• Select Save.

Your three-product catalog is complete. Each fictional model now has its own branded visual plus store record.

Publish and verify the public site

Mobile static-page editing is not available to every Wix user. Your publishing path depends on whether the editing controls appear for this site.

Keep this demo free

Publishing the catalog through the generated Wix link stays on the free site path. Accepting payments requires a Premium plan.

• Leave payment setup disconnected.
• Keep the generated Wix link instead of connecting a custom domain.

• Choose the path below that matches the static-page editing controls available for your site.

✔️ Static editing is available

• Return to the generated site in the Wix app.
• Select Manage.
• Select Website.
• Select Edit.
• Select the standalone hero image.
• Replace the standalone hero image with the downloaded VoltPath hero image.

You'll see the wide VoltPath hero image bring the approved palette into the storefront layout.

• Select More.
• Select Publish.

Wix provides the public link for the published site.

ⓧ Static editing is unavailable

• Return to the generated site in the Wix app.
• Keep the AI-created static layout unchanged.
• Confirm the approved VoltPath logo appears in the site preview.
• Confirm the three branded product images appear in the store preview.
• Select Publish using the publishing control presented for the generated site.

Wix provides the public link for the published site. The logo plus product media carry the VoltPath brand without static-page editing.

Before you open the public link, picture what you expect each product page to contain.

• Open the resulting public site link on your iPhone.
• Refresh the public site.

You'll see the VoltPath brand on the refreshed site. The published store includes its Home content plus Shop content.

• Open the Metro One product page.

You'll see the matching Metro One image beside the Metro One name. The demo price reads 1499 in the store's displayed currency.

You'll also see the short fictional commuter description you saved.

• Return to the Shop page.
• Open the Trail One product page.

You'll see the matching Trail One image beside the Trail One name. The demo price reads 2299 in the store's displayed currency.

You'll also see the short fictional trail model description you saved.

• Return to the Shop page.
• Open the Fold One product page.

You'll see the matching Fold One image beside the Fold One name. The demo price reads 999 in the store's displayed currency.

You'll also see the short fictional folding model description you saved.

You brought the full VoltPath demonstration online. Visitors can now recognize the brand before opening any of the three fictional product pages.

Secret mission

Turn the Brand Brief into a Reusable Wixel Skill

Your approved VoltPath brief already keeps one collection of assets consistent. Package those instructions into a reusable Wixel skill and prove they work by creating a matching launch graphic in a fresh chat.

Clean Up Your Resources

Clean Up Your Resources

Your VoltPath demo uses a free Wix site with no payment setup, Premium plan, or custom domain. There are no ongoing project costs.

Decide whether to keep the site public, unpublish it for later, or move it to Trash.

Resources you used:

• Published VoltPath Wix demo site with Home and Shop content.
• Metro One, Trail One, and Fold One catalog products.
• Downloaded Wixel hero, product, and launch image files on the iPhone.

Keep everything running

No action is needed. Choose this if you want visitors to keep browsing your VoltPath demo store.

• The Wix site remains available through its public link.
• The VoltPath Wixel project remains available for future edits.
• The VoltPath Brand Guardrail remains saved for future designs.
• The five downloaded images remain on your iPhone for reuse.

Pause - I'll come back to this later

Unpublish the site to remove public access while keeping the editor and catalog available for later.

• Return to the VoltPath site in the Wix editor or dashboard.
• Select Site.
• Select Unpublish Site.
• Select Unpublish to confirm.

Your public link stops serving the VoltPath site. The editor remains available so you can publish it again later.

Delete - I don't want to use this again

Remove the teardownable VoltPath resources if you want to start fresh.

Moving the site to Trash can feel final. Wix lets you restore it for 90 days before permanent deletion.

• Return to the site list in the Wix app.
• Select the More Actions icon for the VoltPath site.
• Select Move to Trash.
• Select Move to Trash to confirm.
• Return to the iPhone location where you saved the Wixel downloads.
• Delete the VoltPath hero image, Metro One image, Trail One image, Fold One image, and launch graphic.

The site becomes unavailable to visitors after it moves to Trash. Your Wixel project and VoltPath Brand Guardrail remain saved in your free account.

Nice Work!

Nice Work!

Fantastic work! Your fictional VoltPath demo store is now live at a public link. You shaped its visual identity from a deliberate mismatch into a consistent storefront with three browseable products.

You've learned how to:

• Directed a coherent VoltPath brand system in Wixel by giving an AI agent a structured brief covering audience context alongside reusable visual constraints.
• Turned a deliberate brand mismatch into a coordinated storefront asset kit through critique followed by manual correction.
• Published a mobile-friendly demo store in Wix where visitors can browse Metro One, Trail One, or Fold One from a public link.
• Proved the VoltPath Brand Guardrail custom skill works by generating a matching launch graphic in a fresh Wixel chat.

Ready to quiz yourself?