Speaker Card Landing Page Builder - Refine SubAgent & Output

Describe

Describe your task

Refine

Refine the plan

SubAgents

Review all agents

Deploy

Deploy your agent

OVERVIEW OF SUBAGENTS
• Subagent 1 "Content Architect" — writes copy and outputs it as a JSON array.  
• Subagent 2 "Page Builder" — assembles the finished HTML document using the JSON from Subagent 1.

SUBAGENT 1: Content Architect  
– Name: Content Architect  
SUBAGENT REQUIRED INPUT: {topics-spec}  
SUBAGENT FINAL OUTPUT: [topics-json]  
– Final output: Plain-text JSON array (5 objects total).  
– How it works:  
  1. Read the list of provided titles and banner text from {topics-spec}.  
  2. For each of the four titles, craft a 2–3-sentence summary (≈30–45 words).  
  3. Build JSON objects:  
     { title, summary, ctaLabel: "Book Tank", ctaHref: "/contact" } ×4  
     plus one banner object  
     { bannerText: "Inspire Your Organization – Book Tank Today.", ctaLabel: "Book Tank", ctaHref: "/contact" }.  
  4. Return the JSON array as plain text.

SUBAGENT 2: Page Builder  
– Name: Page Builder  
SUBAGENT REQUIRED INPUT: [topics-json]  
SUBAGENT FINAL OUTPUT: [speaking-topics-html]  
– Final output: speaking-topics.html (single HTML5 file).  
– How it works:  
  1. Accept [topics-json] from Subagent 1.  
  2. Generate a full HTML5 document:  
     • <!DOCTYPE html>, <html lang="en">, <head> with charset and <title>.  
     • <style> block that:  
       – Creates a responsive grid (1 col ≤600 px, 2 col ≤1024 px, 4 col >1024 px).  
       – Adds padding, border-radius, and shadow to .topic-card.  
       – Styles CTA buttons/links.  
       – Centers and enlarges the closing banner.  
     • <body> containing:  
       – <section id="speaking-topics"> with four <article class="topic-card"> elements generated from the first four JSON objects.  
       – <section class="closing-banner"> with the banner text and CTA.  
       – (Optional) <script id="topicData" type="application/json"> embedding the raw JSON.  
  3. Output the complete HTML document as plain text ready to be saved as speaking-topics.html.

Final Exact Output You Want ⚠️IMPORTANT⚠️

Expand

Other Possible SubAgents (Consider Adding These Above) ☝️🤔

Expand

#223 - Powerful LLM Prompt-to-Text Response  
DESCRIPTION: This skill uses a very powerful LLM to answer any query. It will return a text response. The LLM can only input text and is not multimodal.  
INPUT NEEDED: Prompt and any other information required to answer the query.  
OUTPUT:  Text response from LLM

#186 - Create 2-10 Short MicroCopy Text  
DESCRIPTION: This skill uses an LLM to write several pieces of "micro-copy" (ie small copywriting or creative texts, to be used within a banner or some other asset). The skill will output a list of the requested copy.  
INPUT NEEDED: Info about product/topic to write about  
OUTPUT: Textual response - a list of micro-copy elements

#222 - Make Image (Especially With Text)  
DESCRIPTION: This skill uses an Image AI which is very good at both prompt adherence and generating text. You should use this for any image task which requires text. It can generate images in a range of aspect ratios.  
INPUT NEEDED: Information about the information required (the AI will generate its own particular prompt, so the more information inputted the better).  
OUTPUT: PNG image URL

#182 - Create Dalle Image (Transparent Square)  
DESCRIPTION: This skill creates a 1024x1024, square, transparent PNG file, based on a given text prompt. The image created should be of a singular object/scene with a clearly defined edge (so the background remover works particularly well). This skill is especially great at creating icons, vectors, cartoons, physical objects, etc. Once the image is created it is saved to the server as a .png file.  
INPUT NEEDED: A prompt to generate the image (if no prompt is provided, this task will generate one based on whatever text information is inputted)  
OUTPUT: URL of transparent PNG file

#187 - Find Relevant Images with Brave Search  
DESCRIPTION: This skill inputs a keyword (and optional use case, aspect ratio of other requirements for the images) and finds searchable images for any keyword. This is a very powerful tool which will search the entire Internet, and so will always return images. This is useful for adding images to an article or video.  
INPUT NEEDED: Type of images I want to get (such as keywords, description of images and aspect ratio)  
OUTPUT: List of 5 most relevant images as URLs

#216 - Research Topic (Or Keyword) Deeply  
DESCRIPTION: This skill will research a given topic or keyword deeply. This skill will run a number of searches on various search engines, visit several websites, and collate a large amount of research information, then use a LLM to summarize the research provided, based on the information that has been requested.  
INPUT NEEDED: Keywords and/or topic to research  
OUTPUT: 1000-3000 character summary of researched text

#174 - Take screenshot of website  
DESCRIPTION: This skill will take a 1400x2400 screenshot of a given website.  
INPUT NEEDED: URL of website to screenshot  
OUTPUT: URL of PNG image (1400x2800)

#226 - Extract Structured Data From 1x URL  
DESCRIPTION: Crawls any URL and extracts structured data  
INPUT NEEDED: Requires URL and information to extract from the page  
OUTPUT: Summary of structured data about URL, summarized in text

#227 - Return Graph Image Visualising Data  
DESCRIPTION: Inputs a collection of text, or data, and returns a graph that best visualises the chart - either a chart.js chart, infographic, comparison table, or other simple-to-create HTML visualisation  
INPUT NEEDED: Text and/or data  
OUTPUT: JPEG Image of graph showing data (1300x700)

#224 - Oracle Ask A Question  
DESCRIPTION: This skill asks an "AI Oracle" (with live access to the web and search) any question. The oracle will then query live websites, search and data and return an up-to-date response. It will actually run up to 5 separate searches to gather as much data as possible.  
INPUT NEEDED: 1-5 questions to ask the oracle, or simply content and information relating to the query (the oracle can generate its own questions to enrich and update the content).  
OUTPUT: Detailed answer to question

#215 - Summarise and Return All Final Output Files
DESCRIPTION: This skill returns a summary of various previous skills that have completed, and is particularly useful when appearing at the end of an entire Agent task, silo or sequence of skills.
INPUT NEEDED: at least one output (perhaps other supplementary ones that may be helpful)
OUTPUT: nice text summary containing 1 or more outputs

Task Summary (You Wrote)

Expand

Diagram Of Entire Task (All SubAgents)

Expand Diagram

Ready To Proceed?

When you are ready to proceed, click the Save button to load the next step...
The next step is SubAgents. It will take around 10 minutes to load this page...
If you are entirely unhappy with this page, click Back to rerun Step 1 again.
Before saving, check the SubAgents and Output fields above (very important!)
The Agent heavily relies on the SubAgents and Output fields to build your task.

-- The LLM has raised some questions to help you clarify the desired final `output` (important - this must be specific) 
-- These ideas are worth scanning briefly (then either amend output/subagents -- or go back to step 1)
-- The first few points regarding how to clarify the `output` are particular important!
-- If you need to make your output more specific, change it (on the previous tab)...

## QUESTIONS RAISED BY THE LLM:

Let me analyze this task:

a) Clarifying Questions:
1. Is this for a webpage or some other format (e.g., PDF, presentation)?
2. What's the desired visual style/branding requirements?
3. Should the cards be arranged in a specific layout (grid, vertical stack, etc.)?
4. What's a "Book Tank" - is this a specific brand name that needs consistent styling?
5. For the CTA (Call to Action), should it be a button, text link, or another format?
6. Are images required for the cards?
7. Should there be any animations or hover effects?
8. Is there a specific color scheme to follow?
9. What's the desired responsive behavior on mobile devices?

b) Required Inputs:
1. Brand guidelines (colors, fonts, logos)
2. Detailed summaries for each speaking topic (2-3 sentences each)
3. Preferred styling for the "Book Tank" CTA
4. The exact URL for the /contact page
5. Any specific images or graphics to be included
6. Mobile/responsive design requirements

c) Task Segmentation:
I suggest segmenting this into three main components:

1. Content Structure:
- Writing and editing the card summaries
- Formatting the CTAs
- Writing the banner copy

2. Visual Design:
- Card layout and styling
- Typography system
- CTA button design
- Banner design

3. Technical Implementation:
- HTML/CSS structure
- Responsive design
- Link functionality
- Performance optimization

These segments would help ensure consistent quality across both the content and technical aspects of the implementation.

Expand

a) Here are some questions I might ask to clarify what the final output of the task would be:

1. How should the final webpage look like? Are there any specific design or formatting requirements for the speaking topic cards and the closing banner?
2. What should be the length of the 2-3 sentence summary for each card?
3. What details should be included in the "Book Tank" mini-CTA? Is there any specific text or layout it should have?
4. Can the user provide a bit more context or any specific elements to include for each of the topics: "The Cost of Choices","Resilience in the Face of Failure", "Leadership Under Pressure", "Faith, Redemption & Second Chances"
5. What elements should be available on the /contact page? Is there specific information to put there?

b) Here are some of the inputs necessary before launching the task completion process:

1. Specific details about the speaking topics - particularly if there are any unique angles or unique insights that should be covered in the 2-3 sentence summary.
2. Specific texts or calls to action that the user would like us to use in the "Book Tank" mini-CTA on each card.
3. Design or formatting requirements (if any) for the speaking topic cards and for the closing banner.
4. The URL of the page (/contact) where the mini-CTA and closing banner buttons should lead. 
5. Any content or design/formatting specifications for the /contact page.

Research Links

Tony Robbins Speaking Topics Page

Simon Sinek Keynote Topics Cards Leadership Transformation

Professional Speaker Topics Cards Template Tailwind UI Components

Conference Speaker Topics Bootstrap Cards TED

Keynote Speaker Booking CTA Banner Speaking Topics Gary Vaynerchuk

☝️ Like These? Consider Bringing These Ideas Into Output Or SubAgents (on previous page)

-- The LLM has suggested possible templates that could be useful to build this agent. 
-- Consider preparing these now...(you can upload them as `pre-prompts` in the next stage).
-- These prompts must be text, HTML or a URL (eg of an image or some folder).

## TEMPLATE IDEAS FROM THE LLM:

For this specific task of creating a speaking topics page with cards and a CTA banner, I'd suggest collecting the following templates:

1. **Professional Speaker Websites**
- We should look at the speaking topic pages of well-known speakers like Tony Robbins, Simon Sinek, or Gary Vaynerchuk
- The Agent can analyze their layout patterns, card designs, and how they present speaking topics
- Example: visit simonsinek.com/speaking and capture the HTML/CSS structure of their topic cards

2. **Conference Speaker Directories**
- Large conference websites often have speaker profile pages with similar card-based layouts
- Example: TED.com speaker pages, which are known for clean, card-based layouts of topics
- The Agent can analyze how these platforms structure their topic presentations

3. **Modern Card-Based Design Systems**
- Material Design's card documentation (material.io)
- Tailwind UI's card components gallery
- Bootstrap's card examples
These would give us precise technical specifications for modern card implementations

4. **Call-to-Action Banner Examples**
- HubSpot's gallery of successful CTA designs
- Landing page examples from sites like Dribbble or Behance, filtered for "speaker" or "event" categories
- The Agent can analyze common patterns in placement, styling, and copy

Particularly valuable would be finding:
- A speaker's website that uses a similar four-card layout
- A specific example of how professional speakers format their topic descriptions
- A modern, responsive card implementation that works well on both desktop and mobile
- Examples of successful "book now" CTAs specifically from the speaking industry

The Agent could create a composite template by:
1. Extracting the HTML/CSS structure from successful speaker websites
2. Analyzing common patterns in topic presentation
3. Identifying the most effective CTA placements and styles
4. Documenting responsive behavior patterns

Would you like me to suggest specific websites we should target for this template collection?

Final Points Before Saving!

If you are at all unsure about this step, consider returning to step 1 (having taken new ideas from this Step 2 page)
DO NOT proceed to Step 3 if the information on this page has raised fundamental problems with your initial task
If the original description you wrote on Step 1 is largely correct, and this page has not really changed your mind about anything, then simply tweak the Output and SubAgents fields and Save (you can always hit BACK later)
IMPORTANT: If your initial description (Step 1) and Subagent & Output (Step 2) are flawless then the Agent will take it from here and your task will be easy to build. BUT if you are already seeing problems, consider hitting BACK and starting again.
It is MUCH easier to go back a step than to try to refine and imperfect task down the line. Final chance to start again!
Remember - the initial description on Step 1, along with the SubAgent summary & Output spec on Step 2, are the foundation on which all remaining steps and Agents run. This step is here for a reason, so please consider hitting back. It will save time later!

Need To Start Afresh?

BACK TO DESCRIBE

Speaker Card Landing Page Builder - Refine SubAgent & Output

Describe

Refine

SubAgents

Deploy

Final Exact Output You Want ⚠️IMPORTANT⚠️

Expand

Other Possible SubAgents (Consider Adding These Above) ☝️🤔

Expand

Task Summary (You Wrote)

Expand

Diagram Of Entire Task (All SubAgents)

Expand Diagram

Ready To Proceed?

More Questions & Research Ideas (LLM #2)

Expand

Research Links

☝️ Like These? Consider Bringing These Ideas Into Output Or SubAgents (on previous page)

Final Points Before Saving!

Need To Start Afresh?

Tweaked & Good To Go?