Using AI Tools for IARF Website Content

Welcome! This guide provides instructions for using Artificial Intelligence (AI) tools to help create content (text, code, and images) for the IARF website and other Institute materials. Using AI effectively can save time and help produce well-structured, visually appealing content. However, it requires careful prompting, review, and adherence to our recommended workflow.

Quick AI Glossary

Section 1: Generating Website Content (Text & Code)

Goal

The primary goal here is to use AI Large Language Models (LLMs) to generate HTML, CSS, and potentially JavaScript code, which, when pasted into a special widget on our site, will be converted into content – an article, announcement, photo gallery etc.

HTML builds the structure of the content – the headings, paragraphs, tables and other elements. CSS defines rules how these elements appear – based on a hierarchy of parent and child elements (which elements are placed inside other elements) allowing for very granular and flexible styling. JavaScript is used for dynamic elements by manipulating HTML and CSS based on user interactions with the website (clicks, selections etc.) – for example, it can make an originally hidden element visible (such as a “Read more” button that expands a text section when clicked). This is a very simplified explanation and you don’t need to understand exactly how this works in order to make good content!

The code you obtain from an LLM should be ready to paste into a WordPress “Custom HTML” widget to create well-formatted and visually engaging posts or pages based on your text descriptions, bullet points, or raw content. This process is facilitated by the IARF Prompt Generator and the Notes2LLM tool.

Recommended LLM Tools

While many LLMs exist, these are currently recommended for this task (experiment to see which works best for you):

Using the Prompt Generator

To help you create effective prompts for the LLMs, we’ve developed the prompt generator. This tool, embedded directly below, guides you through specifying your content requirements, styling preferences, and desired elements. Using the generator ensures your prompt is comprehensive, leading to better code from the AI.

Examples of Elements You Can Ask For

Beyond basic text formatting, you can ask the AI to incorporate more complex elements (or specify them in the Prompt Generator above).

Remember to provide the necessary content (text, links, data) for these elements in the prompt or through the generator!

Our Recommended Workflow: Generator, LLM, Notes2LLM, WordPress

Follow these steps to efficiently create and publish your content. This workflow integrates the prompt generator, your chosen LLM, and the Notes2LLM refinement tool.

1. Step 1: Write or generate your prompt.

   Use the generator tool provided in the section above. Fill in the fields to detail your content, desired structure, styling, and any specific elements. This will produce a comprehensive prompt tailored for the LLM.

2. Step 2: Use the Generated Prompt with an LLM.

   Copy the complete prompt from the generator. Paste it into one of the recommended LLMs (like Claude, Gemini, or ChatGPT). The LLM will then generate the initial HTML, CSS, and (if requested) JavaScript code based on your detailed prompt.

3. Step 3: Review and Refine in Notes2LLM (Highly Recommended).

   Copy the entire code block (HTML, CSS, JS) provided by the LLM. Go to Notes2LLM (notes2llm.liniewicz.info). This is a visual workspace designed to help you review and refine AI-generated code more easily.

   In Notes2LLM, you can:

   • Paste your code and see an instant visual preview.
   • Directly edit text content (like paragraphs, headings) without needing to find it in the HTML code.
   • Change image URLs, links, and other attributes through a simpler interface.
   • Add, remove, or reorder elements more intuitively.
   • Crucially: Add comments and annotations directly onto the visual preview of your content. For example: “Change this section’s background to light blue,” or “Make this image 50% smaller and align it to the right.”
4. Step 4: Iterate with the LLM (If Needed).

   If your review in Notes2LLM (or initial review of LLM output) shows that significant changes are needed:

   • If you made edits in Notes2LLM that you want the LLM to build upon, copy the *modified code* from Notes2LLM.
   • Export or copy any *comments/instructions* you added in Notes2LLM.
   • Return to your LLM chat. Paste the current code (original or Notes2LLM-modified) and your new instructions/comments. Ask the LLM to make the specified changes. Repeat this step and Step 3 until you are satisfied.

5. Step 5: Add to WordPress.

   Once you have the final code (either directly from the LLM or after refinement in Notes2LLM):

   1. Copy the entire code block.
   2. Create a new Post or Page in WordPress: Go to your WordPress Admin Dashboard, hover over “+ New” in the top admin bar, and select “Post” or “Page”.
   
   How to add a new Post/Page Click screenshot to enlarge
   3. Give your Post/Page a Title. This is the main H1 title for your content.
   4. Add the Custom HTML Widget: In the main content editor block, type /html and select the “Custom HTML” widget.
   
   How to add the Custom HTML widget Click screenshot to enlarge
   5. Paste the copied code into the Custom HTML widget block.
6. Step 6: Preview in WordPress.

   Click the “Preview” button (in the top-right corner of the WordPress editor) and select “Preview in new tab” to see how your content looks on the actual website.

   

   How to preview the page Click screenshot to enlarge
7. Step 7: Final Tweaks & Publishing Preparations.

   If you notice minor issues in the WordPress preview, you can go back to Notes2LLM for quick edits, or to the LLM for more complex changes, then re-paste the code.

   Before you hit “Publish”:

   • Set a Featured Image:

     The Featured Image is the primary image for your post/page. It’s often displayed in archive listings (like news feeds or category pages), and when your content is shared on social media. To set it, look for the “Featured Image” section in the WordPress editor’s right-hand sidebar (usually under the “Post” or “Page” tab). Click “Set featured image,” then upload a new image or choose one from your Media Library. Select a high-quality image that is relevant to your content.

   • Select Categories:

     Categories help organize your website’s content, making it easier for visitors to find related articles or pages. In the editor’s sidebar, find the “Categories” section. Check the boxes for all relevant categories. For example:

     • If your post is about a Free Religion Institute (FRI) activity, select the “Free Religion Institute” category.
     • If that FRI activity is also an event, you should select *both* “Free Religion Institute” and the general “Events” category.

     You can select multiple categories. If a suitable category doesn’t exist, please ask the IARF Secretary for assistance in creating one.

8. Step 8: Publish or Save Draft.

   Once you’re satisfied with the content, featured image, and categories, you can “Publish” your page or “Save draft” to publish it later.

Section 2: Generating Images with AI

Goal

To create unique images for the website when suitable stock photos or original photography with the proper license are unavailable. The key challenge is generating images that look professional and align with the IARF brand, avoiding the common pitfalls of AI-generated imagery (clichés, artificiality).

Recommended Image Generation Tools

Prompting Guidelines for Images

Creating good AI images requires specific and thoughtful prompting. Generic prompts often lead to generic, artificial-looking results.

Here’s a structured approach to prompting for better results:

1. Specify Image Type: Clearly state what kind of image you want (e.g., “A photograph of…”, “A watercolor painting of…”).
2. Specify Style/Medium/Artist: Crucial for avoiding the default AI look (e.g., “realism”, “impressionism”, “watercolor and ink”, “35mm film photograph”, “vintage sepia”, “minimalist line art”).
3. Describe the Content: Be descriptive but avoid excessive complexity. Focus on the main subject and key elements (e.g., “modern research laboratory with two scientists collaborating”, “stylized brain neurons connecting”).
4. Specify Color Palette or Mood: Guide the visual tone (e.g., “subdued color palette”, “sepia tones”, “monochrome”, “calm and serene mood”, “hues of pastel blue and purple”).
5. Add Negative Prompts (What to Avoid): Explicitly tell the model what *not* to do (e.g., “Avoid clichés, kitsch, digital look. No cartoons. No airbrushed perfection. No text.”).
6. Include Additional Hints: (e.g., Minimalistic, abstract, photorealistic, detailed, simple background, centered composition, rule of thirds).
7. Keep it Concise but Specific: Combine elements coherently. Focus on the most important aspects.

Example Image Prompts:

Remember to generate multiple variations and select the best one. You might need to refine your prompt several times.

Privacy Considerations