When you create a landing page, you almost always need the followings:
<ul>
<li>headline</li>
<li>headline supporting copy</li>
<li>call-to-action</li>
<li>list of product features and images</li>
</ul>
So, let's create a tool that generates all the text and images we need in a click of a button. We will ask users to enter some information about their product, and we will chain a couple of AI Prompt actions one after another to generate everything needed. Here is how it will look like
Demo: <a href="https://app.toolmark.ai/templates/landing">https://app.toolmark.ai/templates/landing</a> 
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/landing-page-builder.png" priority="1">
This example can easily be extended to a full-fledged landing page builder by adding the following options
<ul>
<li>creating FAQ section with a list of questions and answer</li>
<li>creating copy for privacy policy and terms&#x26;conditions pages</li>
<li>you can even create the actual HTML for the landing page with some tweaking.</li>
</ul>
<h2 id="defining-the-text-prompts"><a aria-hidden="true" tabindex="-1" href="#defining-the-text-prompts"></a>Defining the Text Prompts</h2>
Before building the tool, let's create the AI prompts we need to generate the text and images. Go to the Actions Menu on the left and create the following prompts by clicking + sign
<h3 id="prompt-to-generate-headline"><a aria-hidden="true" tabindex="-1" href="#prompt-to-generate-headline"></a>Prompt to Generate Headline</h3>
<ul>
<li>set Name to <code>Write Headline</code></li>
<li>set Prompt to <code>You are an expert landing page creator. Do not self reference. Do not explain what you are doing. Create a landing page headline and a short headline supporting copy for the given product details: {{productInput}}</code></li>
<li>set Model to <code>GPT4</code></li>
<li>set Output Type to <code>Text</code></li>
</ul>
<code>{{productInput}}</code> in the prompt will come from the input component we are going to add while building the tool
<h3 id="prompt-to-generate-feature-list"><a aria-hidden="true" tabindex="-1" href="#prompt-to-generate-feature-list"></a>Prompt to Generate Feature List</h3>
<ul>
<li>set Name to <code>Write Features</code></li>
<li>set Prompt to <code>You are an expert landing page creator. Do not self reference. Do not explain what you are doing. You are writing the copy for the product features section of the landing page. Write a list of 3 features for the given product. Each item should be like "Feature Name: Some description about the feature". Product description: {{productInput}}</code></li>
<li>set Model to <code>GPT4</code></li>
<li>set Output Type to <code>List</code></li>
</ul>
Notice the output type. It's set to <code>List</code>. That means instead of getting a single text from AI Assistant, we will get a list of texts with 3 items in it.
again, <code>{{productInput}}</code> in the prompt will come from the input component we are going to add. It will be replaced with whatever user types into the input
<h2 id="designing-the-first-draft"><a aria-hidden="true" tabindex="-1" href="#designing-the-first-draft"></a>Designing the First Draft</h2>
Add a Text component and change its content to <code>Landing Page Builder</code>. Select the text and make it a Heading 1 
Add a Multiline Text Input component and in Settings Menu
<ul>
<li>set Data Key to <code>productInput</code></li>
<li>set Label to <code>Describe your product and mention some of the core features</code></li>
<li>set Placeholder to <code>CollabSphere is a breakthrough SaaS platform redefining team collaboration. With a unified hub integrating messaging, video conferencing, and file sharing, it eliminates the need for multiple tools.</code> to give an idea to the user</li>
</ul>
Add a Button component and change its text to <code>Build My Landing Page</code>. In the Settings Menu
<ul>
<li>Add an AI Prompt action, select <code>Write Headline</code> prompt, and set Result Data Key to <code>headlineOutput</code></li>
<li>Add another AI Prompt action, select <code>Write Features</code> prompt, and set Result Data Key to <code>featuresOutput</code></li>
</ul>
When user clicks the button,
<ul>
<li>it will replace the <code>{{productInput}}</code> in the <code>Write Headline</code> prompt with what user typed into the input component</li>
<li>run the prompt <code>Write Headline</code></li>
<li>as the text is generated, it will be written into <code>headlineOutput</code> key in Data Store</li>
<li>it will replace the <code>{{productInput}}</code> in the <code>Write Features</code> prompt with what user typed into the input component</li>
<li>run the prompt <code>Write Features</code></li>
<li>as the text is generated, it will be written into <code>featuresOutput</code> key in Data Store</li>
</ul>
Now, let's add some components to show the generated texts to the user.
<ol>
<li>Add a Text component
<ul>
<li>change its text to the following</li>
<li>select "Headline" and make it a Heading 2 from the Bubble Menu</li>
</ul>
</li>
</ol>
<pre><code>Headline
{{headlineOutput}}
</code></pre>
<ol start="2">
<li>Add a Text component and change its text to "Features". Select the text and make it a Heading 2 from the Bubble Menu</li>
<li>If you remember, <code>featuresOutput</code> was a list, not a single text. So, we need to use Repeated Container component to design a layout once and repeat it N times where N is the number of items in <code>featuresOutput</code> list. So, go ahead and add a Repeated Container component and in its Settings Menu, set Repeated Data Key to <code>featuresOutput</code>. That means "check how many items <code>featuresOutput</code> has, and repeat the content that many times".</li>
<li>Add a Text component to the Repeated Container and set its content to <code>{{featuresOutput[i]}}</code>. While Repeated Container repeats the content in preview mode, it will replace <code>[i]</code> with the current iteration. If <code>featuresOutput</code> has 3 items, Repeated container will render <code>{{featuresOutput[1]}}</code>, <code>{{featuresOutput[2]}}</code> and <code>{{featuresOutput[3]}}</code>, which will show the first, second and third item of the <code>featuresOutput</code> list.</li>
</ol>
Before adding the images, let's check what we did so far. Open preview mode and try it out.
Here is an example of the final result once AI Assistant finishes generating content: 
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/landing-page-builder-1.png">
<h2 id="adding-the-image-generation"><a aria-hidden="true" tabindex="-1" href="#adding-the-image-generation"></a>Adding the Image Generation</h2>
Now, it's time to generate an image for each feature we generated and saved in <code>featuresOutput</code> in the previous section. We are going to create a prompt for generating the image, but the problem is AI Image models require a prompt that describes an image. So, we cannot just give the feature text we generated and expect it to generate an image.
For example, if we give this feature text to the AI Image model, probably it wouldn't create a proper image: "Unified Communication Hub: Streamlines team interaction by bringing messaging, video calls, and live meetings into a single, easy-to-use platform."
So, we need a step to generate an image prompt from the feature text above. We can very well use an AI Text Model, like GPT4, to generate us an image prompt for the given feature text. Let's create an AI Prompt Action for that.
Go to the Action Menu on the left, and create a new prompt
<ul>
<li>set Name to <code>Feature to Image Prompt</code></li>
<li>set Prompt to <code>Describe an image in one sentence which is related to the given product feature: {{featuresOutput[i]}}</code></li>
<li>set Model to <code>GPT4</code></li>
<li>set Output Type to <code>Text</code></li>
</ul>
Now let's create a new prompt with an image model
<ul>
<li>set Name to <code>Feature Image</code></li>
<li>set Prompt to <code>{{imagePromptsOutput[i]}}, use simple vector line drawing style</code></li>
<li>set Model to DALLE2 or 3</li>
<li>set any output type</li>
</ul>
We will explain what those <code>[i]</code>s in the prompts, but let's update our Button component first. Select the Button component and add 2 new AI Prompt actions in its Settings Menu
<ol>
<li>Select <code>Feature to Image Prompt</code> and set Result Data Key to <code>imagePromptsOutput</code>. This should be the 3rd action of the button</li>
<li>Select <code>Feature Image</code> and set Result Data Key to <code>imagesOutput</code>. This should be the 4th action of the button</li>
</ol>
Now, some clarifications
<ol>
<li>We used <code>{{featuresOutput[i]}}</code> in <code>Feature to Image Prompt</code> prompt. And Button action using it has <code>imagePromptsOutput</code> as result data key.</li>
<li><code>featuresOutput</code> is what we generated earlier. It has 3 feature texts generated by AI</li>
<li>by using <code>featuresOutput[i]</code> in the prompt, we are telling AI Assistant that <code>featuresOutput</code> is a list and run this prompt N times where N is the number of items in <code>featuresOutput</code>. So, if <code>featuresOutput</code> has 3 items, it will run the prompt 3 times, one for each item in it, and <code>featuresOutput[i]</code> will turn into <code>featuresOutput[1]</code>, <code>featuresOutput[2]</code> and <code>featuresOutput[3]</code> respectively. This concept is similar to the one in Repeated Containers.</li>
<li><code>imagePromptsOutput</code> is where the result is stored as that's what we specified in the Button config. But, since prompt uses a list, result will be a list too.
<ol>
<li>AI Assistant will run the prompt for <code>featuresOutput[1]</code> and generated content will be stored in <code>imagePromptsOutput[1]</code></li>
<li>Same for <code>featuresOutput[2]</code> and <code>featuresOutput[3]</code></li>
</ol>
</li>
<li>Now the above action populated 3 image prompts into the <code>imagePromptsOutput</code>, we can use it in <code>Feature Image</code> prompt (the 4th action of the button).</li>
<li><code>{{imagePromptsOutput[i]}}, use simple vector line drawing style</code> will be run 3 times, one for each value in <code>imagePromptsOutput</code>. AI Assistant will generate 3 images</li>
<li>Since we set Result Data Key for this action to <code>imagesOutput</code>, the generated images will be stored in <code>imagesOutput[1]</code>, <code>imagesOutput[2]</code> and <code>imagesOutput[3]</code></li>
</ol>
Now all the data is ready, let's add an Image component to our Repeated Container. In its Settings Menu, set Image's source to <code>{{imagesOutput[i]}}</code>. Since it's in Repeated Container, content will be repeated 3 times (due to <code>Repeated Data Key: featuresOutput</code> of Repeated Container) and each image will show up nicely below the feature text.
You can play with component settings to change the layout. You can also hide components while their data is still not generated by using the Conditional part in the Settings Menu.
<h2 id="result"><a aria-hidden="true" tabindex="-1" href="#result"></a>Result</h2>
Open preview mode, add a product description, click the button and wait AI Assistant to generate everything in seconds
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/landing-page-builder.png">

Getting Started

Concepts

Learn the power of Toolmark's Data Binding feature. Effortlessly write and read data using input components, actions, and more for enhanced interactivity and user engagement.

Data Binding

Easily transform any AI tool created on Toolmark.ai into a Chrome Extension with no extra effort. Install the Toolmark.ai Chrome Extension, add your tools, and access them directly from any website for a seamless browsing and productivity boost.

How-to Use the Chrome Extension

Explore a variety of Toolmark examples to enhance your AI App building experience. Discover tips, tricks, and templates to boost productivity and organization. Perfect for users at any level!

Examples

examples

Step-by-step City Guide

Recipe Generator

Cover Letter Writer

Course Slide Summary and Quiz Generator

Landing Page Builder

Language Translator

Discover the Toolmark Editor, your ultimate tool creation workspace featuring an intuitive interface with Canvas, Left, Right, and Top Menus for seamless design. Perfect for professionals and beginners alike, it simplifies building and customizing tools with drag-and-drop components, real-time previews, and easy publishing. Start crafting engaging tools today!

Toolmark Editor

editor

Discover the power of the Canvas with its drag-and-drop interface for an intuitive design experience. Learn how to select, customize, and manage UI components like buttons and input fields for your tool's layout.

Canvas

Learn how to use Toolmark's Component Menu for easy drag-and-drop of Containers, Elements, Inputs, and AI Inputs into the canvas, enhancing your tool-building process with customization and efficiency.

Component Menu

Optimize and manage your tool's components with ease using Toolmark's Layer Menu. This feature allows for streamlined visibility control, effortless reordering, and simple renaming of components, enhancing your design process and organization.

Layer Menu

Discover how to enhance your projects with dynamic interactions using the Actions Menu. Learn to create prompt and integration actions for data fetching, AI content generation, and more.

Action Menu

Effortlessly manage and debug your interactive tools with Toolmark's Data Store Menu. Seamlessly add static data to components, enhancing tool functionality and user experience. Ideal for developers seeking efficient state management and debugging solutions.

Data Store Menu

Learn how to use Toolmark's Style Menu to customize and design your tool. Drag and drop components, access functionalities, and explore styling options to create the perfect AI tool for your needs.

Style Menu

Master Toolmark's Tool Config Menu: Easily set up subdomains, titles, descriptions, categories, and cover images to optimize and personalize your tools for better engagement and visibility.

Tool Config Menu

Dive into the essentials of using the Component Settings Menu in Toolmark with our detailed guide. Learn how to effortlessly customize UI components to align with your brand, enhance user experience, and elevate your tool's design.

Component Settings Menu

Enhance your text components with the Bubble Menu, offering customization options like headings, code blocks, links, and text formatting. Utilize markdown for quick edits.

Bubble Menu

Learn Toolmark's Top Menu and how to efficiently use the Back, Undo/Redo, Preview, Save, Publish, and tool naming features to streamline your design process, ensuring a seamless and productive tool creation experience.

Top Menu

Actions

actions

Explore the comprehensive guide to AI Prompts in Toolmark. Learn how to create, chain, and use AI Prompts with various models for dynamic and interactive note-taking. Understand how to leverage variables, output types, and Replicate models for enhanced productivity.

AI Prompts

Chrome Extension Actions

Explore Toolmark Editor's Components: Dive into using Containers, Elements, Inputs, and AI Inputs for crafting interactive, visually stunning tools with ease. Perfect your tool-building with our drag-and-drop interface.

Components

components

Containers

Master the art of document design with our comprehensive guide to elements. Learn how to use text, links, buttons, images, dividers, and HTML to create visually engaging and interactive content.

Elements

Learn about common settings, types of inputs including Text, Multiline, List, Editor, Select, Multi Select, Radio Group, Checkbox, Toggle, and Range Inputs, and best practices for enhancing user interaction and data collection.