Jurni can use Figma frames as source material when generating or replicating an experience. A clean Figma structure makes it easier for the AI to understand the intended sections, responsive layout, assets, and hierarchy.
Use page-sized frames
Give Jurni the frame that represents the actual page you want to build—not the full design file or a board containing unrelated concepts.
For a typical landing page, provide:
- One desktop page frame
- One mobile page frame when a separate mobile design exists
Desktop + mobile designs
If you have separate desktop and mobile frames, you can paste both Figma frame links into the Jurni chat when asking Jurni to build the page.
Jurni should treat them as responsive versions of the same page, not as two page sections placed one after another.
Label the links in your prompt, for example: Desktop: followed by the desktop frame link and Mobile: followed by the mobile frame link.
Organize the frame by visual sections
Keep the design structure aligned with the page structure where possible:
- Announcement bar
- Navigation
- Hero
- Product / Buy Box
- Benefits
- Reviews
- Ingredients or details
- FAQ
- Footer
You do not need to flatten the design into one giant image. Keeping meaningful groups makes the intended page structure easier to interpret.
Name important layers clearly
Useful names include:
Hero headlineProduct imageAdd to cartTestimonialsFAQ itemMobile nav
Avoid naming every layer Frame 123, Group 47, or Rectangle when the layer has an obvious product meaning.
Images and assets
Use the actual campaign assets in Figma whenever possible. If a section uses a specific product image, creator asset, icon, or logo, make that asset available in the source frame rather than relying on Jurni to guess what should be there.
For brand assets that should be reused across many pages, also configure Brand Settings and AI Knowledge.
Products and commerce behavior
Figma describes the visual target, but it does not contain the Shopify commerce configuration Jurni needs for a real Buy Box.
After generation, verify:
- Product mapping
- Variant selection
- One-time vs. subscription behavior
- Selling plan
- Quantity
- Add-to-cart / checkout behavior
- Dynamic pricing
A visually accurate Figma replication is not complete until the commerce behavior has been QA’d against the connected Shopify product.
Responsive design
If only a desktop frame exists, Jurni can still build a responsive page, but a dedicated mobile frame is useful when mobile intentionally differs—for example:
- Different image crop
- Reordered content
- Hidden elements
- Mobile-specific navigation
- Different Buy Box arrangement
Do not place the desktop and mobile page frames inside one long frame and expect them to become one page. Share them as separate source frames.
Prompt example
When starting the build, describe the job rather than only pasting the link:
Build this landing page in Jurni using the attached desktop and mobile Figma frames. Match the design closely, treat the two frames as responsive versions of the same page, and keep the existing product purchase flow from the connected shop.
After generation
Review the generated page section by section. The highest-priority QA areas are:
- Mobile layout
- Typography
- Image crops
- Spacing and section order
- Buy Box and product behavior
- Links and CTAs
- Sticky/mobile elements
