Documentation.

After registering, login to app.yooforged.com using the same email address that you used to register. Your username is your email address.

Free users have access to 10 uses of the copywriter, translator, and AI assistant per month. Paid users get access to all of the above in addition to the layout and style generator, all with higher tier limits.

After logging in, you’ll end up on the generator homepage. This is where you’ll see the AI prompt.

Begin by selecting your mode:

• Layout: generate original YOOtheme Pro layouts, which you can import to your layout library
• Style: generate global styles which you can import to your Style customizer
• Convert: Paste HTML from any source, such as Figma, static templates, or AI tools, and convert it into a native YOOtheme Pro layout. All structure, content, and images are mapped to YOOtheme elements.
• Translate: Upload the JSON of an existing page and select a target language to translate it to. All structure will stay inact.
• Copywriter: Upload the JSON of an existing page and give it context and a prompt to rewrite the copy. All copy on the page will be updated.
• Assistant: An AI assistant trained on YOOtheme and UIKit3 documentation. Ask it anything related, and it will give back answers super quickly.

The layout generator creates original YOOtheme Pro page layouts from a text description. Describe the page you want — its purpose, structure, tone, and content — and YOOforged will generate a complete, importable JSON layout ready to drop into your builder.

This is a starting point, not a finished page. Use the generated layout as a foundation, then refine it in YOOtheme Pro’s visual builder to match your exact needs.

How It Works

1. Select Layout mode from the generator
2. Describe the page you want in the prompt field
3. Click Generate
4. Copy or download the generated JSON
5. Import into YOOtheme Pro (see “Importing Your Layout” below)

Generation typically takes 15–30 seconds depending on complexity.

Writing Effective Prompts

The quality of your layout depends heavily on your prompt. Here’s how to write one that gets good results.

Be Specific About Purpose

Weak: “Make me a homepage”

Strong: “A homepage for a boutique architecture firm. Hero section with a bold headline and CTA button, followed by a 3-column grid showcasing recent projects with images, then a testimonial section, and a contact form at the bottom.”

Include Design Direction

Tell the AI what kind of feel you’re going for:

• “Modern and minimal with lots of whitespace”
• “Bold and energetic with large headlines”
• “Professional and corporate — clean grid layout”
• “Creative portfolio style with overlapping sections”

Mention Specific Content

The more specific you are about actual content, the better:

• Industry and business type
• Target audience
• Key messages or taglines
• Number of sections
• Specific elements you want (image grids, testimonials, pricing tables, FAQ accordions)

Prompt Examples

Service business landing page: “A landing page for a residential cleaning company. Start with a hero section that has a headline, short description, and a ‘Book Now’ button. Then a 3-column grid showing the three service tiers (Basic, Deep Clean, Move-In/Out) with icons and descriptions. Add a section with customer testimonials. End with a contact section that has the phone number, email, and service area.”

Portfolio page: “A photographer’s portfolio page. Large full-width image at the top as a hero. Below that, a masonry-style gallery grid showing 6 portfolio images. Then an about section with a portrait image on the left and bio text on the right. Finish with a simple contact CTA.”

About page: “An about page for a tech startup. Mission statement section with a bold headline. Team section with a 4-column grid of team member cards (photo, name, title). Timeline or milestones section. End with company values as a 3-column layout with icons.”

Supported Elements

YOOforged can generate layouts using these YOOtheme Pro elements:

Content

• Headline — H1–H6 headings with style options
• Text — Paragraphs, formatted body copy
• Image — With alt text and link options
• Button — Primary, secondary, text, and link styles
• Icon — UIKit icon library
• Divider — Horizontal rules and spacing
• List — Bullet and styled lists

Layout

• Grid — Multi-column grids with panel items
• Section — Full-width sections with background styles
• Row/Column — Standard layout structure
• Panel — Card-style content containers

Interactive

• Accordion — Collapsible FAQ-style content
• Switcher — Tabbed content panels
• Slideshow — Image/content carousels
• Overlay — Image overlays with text

Data

• Table — Structured data display
• Description List — Term/definition pairs
• Gallery — Image grid galleries

Media

• Video — Video embeds
• Countdown — Timer elements
• Map — Location embeds

Other

• Quotation — Styled blockquotes
• Social — Social media icon links
• Code — Code display blocks

The style generator creates custom YOOtheme Pro styles from a text description. Describe the look and feel you want — colors, typography, mood — and YOOforged will generate a set of LESS variable overrides that transform your site’s appearance.

Think of it as creating a custom theme style without manually tweaking dozens of customizer settings.

How It Works

1. Select Style mode from the generator
2. Describe the visual style you want
3. Click Generate
4. Copy or download the generated JSON
5. Import into YOOtheme Pro’s Style Customizer

Writing a Good Prompt

The style generator responds well to mood, color, and brand-oriented descriptions.

Weak: “Make it look nice”

Strong: “A dark, modern style with deep navy backgrounds, bright cyan accents, and clean sans-serif typography. Minimal and professional — think fintech or SaaS dashboard.”

What to include in your prompt:

• Color preferences (specific hex values work too)
• Light or dark mode
• Typography direction (modern, elegant, playful, corporate)
• Industry or brand reference (“like a luxury fashion brand” or “clean medical/healthcare feel”)
• Element-specific notes (“rounded buttons,” “flat card styles,” “bold headings”)

Prompt Examples

“A warm, earthy style for a wellness brand. Soft cream backgrounds, terracotta accents, and a serif heading font with a clean sans-serif body font. Rounded corners on all elements.”

“High contrast dark mode. Pure black background with electric blue and white. Monospace headings, tight spacing, sharp corners. Developer/hacker aesthetic.”

“Light and airy — white background with soft pastel purple accents. Friendly and approachable, like a children’s education platform. Rounded buttons, generous spacing.”

Importing Your Style

1. Copy the generated JSON
2. In WordPress admin, go to YOOtheme Pro → Style Customizer
3. Click the import icon in the style panel
4. Paste or upload the JSON
5. Your style will be applied immediately — preview it and save

The style applies globally across your site. It works with any existing page layouts, including layouts created with the Layout Generator.

Tips

• Pair with the Layout Generator. Generate a layout first, then create a matching style. The combination gives you a complete page in minutes.
• Be specific about colors. “Blue” is vague — “deep navy (#1a1a2e) with electric cyan (#06BEE1) accents” gives dramatically better results.
• Reference real brands. Saying “Apple-style minimalism” or “Stripe’s clean aesthetic” communicates more than a paragraph of adjectives.
• Iterate quickly. If the first result is close but not right, adjust your prompt and regenerate. Styles are fast (~10 seconds) and inexpensive compared to layout generation.
• You can always tweak afterward. The generated style imports as customizer values — adjust any individual setting in the YOOtheme Style Customizer after import.

FAQ

What gets styled? Everything controlled by YOOtheme’s LESS variables: colors, fonts, buttons, forms, cards, navbar, footer, section backgrounds, links, headings, and more.

Does it override my existing style? Yes — importing a generated style replaces your current style settings. Export your current style first if you want to keep a backup.

Can I request a specific YOOtheme base theme? Yes — mention it in your prompt (e.g., “based on the Starter theme” or “using Starter as a base”). YOOforged knows all 44 built-in YOOtheme themes.

Can I give it my brand’s exact colors? Absolutely. Include hex values in your prompt and the AI will build the style around them.

The converter transforms any HTML into a native YOOtheme Pro layout. Paste HTML from any source — Figma exports, static templates, AI design tools, or hand-coded pages — and YOOforged will map it to YOOtheme elements, ready to import.

Design anywhere, build in YOOtheme.

How It Works

1. Select Convert mode from the generator
2. Paste your HTML/CSS into the input field
3. Optionally add context (e.g., “This is a law firm homepage”) to help the AI make smarter mapping decisions
4. Optionally upload a reference image of the original design for improved accuracy
5. Click Convert
6. Copy or download the generated JSON
7. Import into YOOtheme Pro (see “Importing Your Layout” in the Layout Generator section)

Conversion typically takes 15–30 seconds depending on the size and complexity of the HTML.

Where to Get the HTML

The converter works with HTML from any source. Here’s how to get it from common tools:

Figma — Use Figma’s Dev Mode or a plugin like “Copy as HTML” to export your design as HTML. Paste the output directly into the converter.

Static HTML templates — Open the template file in a text editor, copy the HTML, and paste it in. CSS can be included — the AI uses it for context.

AI design tools — Tools like Google Stitch, v0, and similar AI generators output HTML. Copy the generated code and paste it in.

Existing websites — Right-click → View Source or Inspect Element on any page. Copy the relevant HTML and paste it in. This is useful for converting a competitor’s layout structure or migrating an old site.

Webflow / other builders — Export or copy the HTML output from your builder and paste it in.

What Gets Converted

• Page structure (sections, rows, columns, grids)
• Headlines and headings (H1–H6)
• Body text and paragraphs
• Images (original URLs are preserved)
• Buttons and links
• Lists and list items
• Cards and panel-style containers
• Icon elements
• Spacing and alignment patterns
• Background styles and section settings

What May Need Adjustment

• Complex custom components (carousels, animated elements) may be simplified into the closest YOOtheme equivalent
• Highly nested CSS layouts may need minor restructuring in the builder
• Custom JavaScript-driven interactions won’t carry over — these need to be rebuilt using YOOtheme’s built-in options or custom code elements

Adding Context

The optional context field helps the AI understand what the page is for, which improves element mapping and content decisions. You don’t need to write much:

• “Law firm homepage”
• “SaaS pricing page”
• “Restaurant menu and reservation page”
• “Portfolio for a freelance photographer”

If you leave it blank, the AI will infer context from the HTML itself.

Adding a Reference Image

If you have a screenshot or mockup of the original design, upload it alongside the HTML. The image gives the AI visual context for:

• Section spacing and proportions
• Layout alignment decisions
• Grid column ratios
• Overall visual hierarchy

Using both HTML and an image together produces the strongest results. You can also use either one alone — HTML only or image only.

Tips

Include the CSS. If your source has inline styles or a <style> block, paste it along with the HTML. The AI uses CSS for spacing, color, and layout context.

Full pages work best. The converter handles complete page HTML better than small fragments. If you’re converting a section, include enough surrounding context for the AI to understand the structure.

Pair with the Style Generator. The converter maps structure and content. For the visual theme (colors, fonts, spacing), generate a matching style separately and apply it in the Style Customizer.

Pair with the Copywriter. If the source HTML has placeholder or irrelevant copy, run the converted layout through the Copywriter afterward to rewrite everything for your specific business.

Iterate if needed. If the first conversion isn’t perfect, try adding more context in the context field or including a reference image.

FAQ

What HTML sources does it work with? Anything — Figma exports, static templates, AI-generated designs, hand-coded HTML, Webflow exports, or source code from existing websites. If you can copy-paste the HTML, it converts.

Does it preserve my images? Yes. Any image URLs in your HTML are carried over directly into the YOOtheme layout. Images are not replaced or modified.

How accurate is the conversion? Expect strong results on well-structured HTML — clean sections, grids, headings, and images map directly to YOOtheme elements. Complex custom components or heavily JavaScript-dependent layouts may need manual refinement in the builder.

Can I upload a screenshot instead of HTML? Yes. The converter accepts an image alone, HTML alone, or both together. Using both produces the best results.

Is this available on the free tier? No — the converter is available to paid users only (Bronze and Gold plans).

How is this different from the Layout Generator? The Layout Generator creates a page from a text description. The converter takes an existing HTML design and maps it to YOOtheme elements. Use the Layout Generator when starting from scratch; use the converter when you already have a design.

The translator converts any YOOtheme Pro layout into a different language. Upload your existing layout JSON, select a target language, and YOOforged will translate all text content while keeping the entire structure and design intact.

Every headline, paragraph, button label, and meta text gets translated — nothing else changes.

How It Works

1. Select Translate mode from the generator
2. Export your page layout from YOOtheme Pro (see below)
3. Upload the JSON file using the file upload button
4. Select your target language from the dropdown
5. Click Generate
6. Import the translated layout into a new page

Exporting Your Layout from YOOtheme Pro

To get the JSON file you need to upload:

1. Open the page you want to translate in YOOtheme Pro’s builder
2. Click the hamburger menu (☰) in the top-left corner
3. Select Export
4. Save the downloaded .json file

This is the file you’ll upload to the translator.

What Gets Translated

• Headlines and headings
• Body text and paragraphs
• Button labels
• Image alt text
• List items
• Accordion and tab labels
• Meta text and descriptions
• Any visible text content within elements

What Stays the Same

• Page structure (sections, rows, columns)
• Element types and settings
• Images and media
• Links and URLs
• CSS classes and custom styling
• Spacing, alignment, and layout options

Tips

• Translate full pages, not fragments. The translator works best with a complete page export rather than individual sections.
• Review after import. AI translation is very good but not perfect — scan the result for awkward phrasing, especially for marketing copy or idiomatic expressions.
• Create multilingual sites fast. Build your page once in your primary language, then translate it for each additional language. Import each version into a separate page and use YOOtheme’s language switcher or a multilingual plugin.
• Works with any layout. The translator doesn’t care how the layout was created — generated by YOOforged, built manually, or from a template. If it’s valid YOOtheme JSON, it can be translated.

FAQ

What languages are supported? Any language — the AI handles all major world languages including right-to-left languages like Arabic and Hebrew. Select your target language from the dropdown or type it in.

Can I translate from any source language? Yes. The AI auto-detects the source language. Your layout can be in any language and it will translate to your selected target.

Does it handle plurals, gendered nouns, and formal/informal tone? Yes. The AI understands linguistic nuance and will use contextually appropriate grammar for the target language.

Will it break my layout? No. The translator only modifies text content. Your layout structure, styling, and element settings remain untouched.

How long does it take? Typically 10–20 seconds depending on the amount of text content in your layout.

Is this available on the free tier? Free users get 5 translations per month. Paid users share their main generation pool.

The copywriter rewrites all text content in an existing YOOtheme Pro layout based on your direction. Upload your layout JSON, describe what you want the copy to do, and YOOforged will rewrite every headline, paragraph, and button label while keeping your structure and design untouched.

How It Works

1. Select Copywrite mode from the generator
2. Export your page layout from YOOtheme Pro
3. Upload the JSON file using the file upload button
4. Write a prompt describing how you want the copy rewritten
5. Click Generate
6. Import the updated layout back into your page

Writing a Good Prompt

Your prompt tells the AI how to rewrite the copy. Be specific about tone, audience, and purpose.

Examples:

“Rewrite all copy for a luxury real estate firm targeting high-net-worth buyers. Sophisticated, confident tone. Emphasize exclusivity and lifestyle.”

“Make the copy friendlier and more casual — this is a pet grooming business targeting millennial pet owners. Keep it fun and approachable.”

“Replace all placeholder text with real copy for a SaaS project management tool. Focus on productivity, team collaboration, and time savings.”

“Tighten up the copy — make everything more concise and direct. Cut fluff. This is a developer tool, the audience doesn’t want marketing speak.”

Use Cases

• Fill placeholder layouts. Generated a layout or imported a template with dummy text? Give the copywriter your business context and it’ll write real copy that fits.
• Change tone. Turn corporate-sounding copy into something casual, or vice versa.
• Adapt for a new client. Have a layout you’ve used before? Rewrite the copy for a different business in a similar industry.
• Improve weak copy. Upload a page with first-draft copy and ask the AI to make it more compelling, more concise, or more conversion-focused.

Tips

• Provide business context. The more the AI knows about the business, audience, and goals, the better the copy will be.
• Combine with the Layout Generator. Generate a layout → use the copywriter to refine the text with real business details. Two steps to a near-finished page.
• Works with templates too. Download a template from the Template Library, then run it through the copywriter to customize the content for your client.
• Structure stays intact. Just like the translator — only text content changes. Your layout, images, and styling are untouched.

FAQ

Does it rewrite ALL the text? Yes — every headline, paragraph, button label, list item, and visible text in the layout gets rewritten based on your prompt.

Can I ask it to only change certain sections? Not currently. The copywriter processes all text in the layout. If you only want specific sections rewritten, make those changes manually in the builder after import.

How is this different from the translator? The translator converts text to a different language. The copywriter rewrites text in the same language with a different tone, audience, or content direction.

Is this available on the free tier? Free users get 5 copywriter rewrites per month. Paid users share their main generation pool.

The template library is a collection of professionally designed YOOtheme Pro layouts that you can download and import into your site. Each template is a complete page layout — fully structured with sections, grids, and elements — ready to customize with your own content.

Browse the library from the Templates tab in the app.

How to Use a Template

1. Browse the template library and find a layout you like
2. Click Download to get the JSON file
3. Open YOOtheme Pro’s builder on the page where you want to use it
4. Click the hamburger menu (☰) → Import
5. Upload the downloaded JSON file
6. Customize the content in the builder

Customizing Templates

Templates are designed as starting points. Here’s how to make them your own:

• Replace images with your own photos, logos, and graphics
• Edit text directly in the builder, or use the Copywriter to rewrite all copy at once with your business details
• Translate the entire template into another language using the Translator
• Apply a custom style using the Style Generator to match your brand colors and typography
• Adjust layout — move, remove, or add sections to fit your needs

Template Bundles

Templates are organized into bundles — a set of pages designed to work together as a cohesive website. A typical bundle includes pages like Homepage, About, Services, Portfolio, FAQ, and Contact.

Using a full bundle gives you a consistent design across your entire site. Import each page into the corresponding page on your WordPress site.

Tips

• Start with a bundle. Importing a full set of matching pages gets you further, faster than building from scratch or mixing unrelated templates.
• Copywriter is your best friend here. Download a template, run it through the Copywriter with your business context, and you’ve got a near-finished page in under a minute.
• Templates + Style Generator. The templates use neutral styling by default. Generate a custom style to make them feel completely unique to your brand.
• New templates are added regularly. Check back for new bundles across different industries and design styles.

FAQ

Are templates free? Yes — all templates are available to all users, including free accounts.

Can I use templates on client sites? Yes. Templates are licensed for use on any site you build, including client projects.

Do templates include images? Templates use placeholder images. Replace them with your own images after import.

Can I combine templates from different bundles? Yes, but bundles are designed with a consistent look and feel. Mixing pages from different bundles may require some style adjustments to keep things cohesive.

Generation Takes Too Long or Times Out

Layout generation typically takes 15–30 seconds. If it seems stuck:

• Wait up to 60 seconds before retrying — complex prompts take longer.
• Check your internet connection.
• Try simplifying your prompt. Very long, detailed prompts can occasionally cause timeouts.
• If the issue persists, try again in a few minutes. The service may be under heavy load.

“No Active Plan” or Can’t Generate

If you see a message saying you don’t have an active plan:

• Free users: Layout and style generation require a paid plan. Free accounts have access to the Copywriter (5/mo), Translator (5/mo), and AI Assistant (10/mo).
• Paid users: Make sure you’re logged in with the same email address associated with your subscription. Check your account page to verify your plan status.
• If you recently subscribed and still see this error, try logging out and back in.

Usage Limit Reached

Your monthly usage resets automatically. Check your account page to see your current usage and reset date.

If you’ve hit your limit and need more generations before the reset:

• Consider upgrading to a higher tier for a larger monthly pool.
• Your reset date is shown on your account page — it’s based on your subscription start date, not the calendar month.

Layout Doesn’t Import into YOOtheme Pro

If the import fails or nothing happens:

• Make sure you’re importing through YOOtheme Pro’s builder (hamburger menu → Import), not through WordPress’s built-in importer.
• Verify the file is a .json file. If you used the Copy button, paste it into a text file and save it as .json.
• Try downloading the layout instead of copying, then import the downloaded file.
• Make sure your YOOtheme Pro is up to date. Older versions may not support all element types.

Layout Looks Different Than Expected

Generated layouts use your site’s active YOOtheme style. If the layout looks different than you expected:

• The layout structure is correct, but colors, fonts, and spacing come from your current theme style.
• Use the Style Generator to create a style that matches the look you’re going for.
• Some elements may need manual adjustment in the builder — generated layouts are starting points.

Style Doesn’t Apply Correctly

If an imported style doesn’t look right:

• Make sure you imported it through YOOtheme Pro’s Style Customizer, not the layout builder.
• Check that no other style overrides or custom CSS are conflicting.
• Clear any caching plugins after importing a new style.

File Upload Not Working (Translate / Copywrite)

If the file upload button doesn’t respond or shows an error:

• Make sure the file is valid YOOtheme Pro JSON — export it directly from the builder.
• The file must be under 4MB.
• Try a different browser if the upload button isn’t responding.
• Make sure you’ve selected Translate or Copywrite mode before uploading — the file upload option only appears in those modes.

Can’t Log In

• Your username is your email address.
• Use the Forgot Password link on the login page to reset your password.
• Make sure you’re logging in at app.yooforged.com, not yooforged.com.
• If you registered but never received a confirmation, check your spam folder.

Copy Button Doesn’t Work

Some browsers block clipboard access. If the Copy button doesn’t work:

• Try the Download button instead — it saves the JSON as a file.
• Make sure you’re not in a private/incognito window, which may restrict clipboard access.
• Try a different browser (Chrome and Edge work best).

Still Need Help?

Use the AI Assistant to ask questions about YOOtheme Pro and UIKit 3. For account or billing issues, contact us at [email protected]