Skip to main content

TellFlow Website Design Prompt

You can copy and paste the following text into a design tool (Figma, AI design assistant, frontend developer, etc.). It describes how to design the TellFlow promotional website.

Prompt (Copy-Paste)​

Task: Design a promotion/landing website for the mobile application named TellFlow. The site consists of static HTML pages (or Next.js/React components); it is deployed on Firebase Hosting and features a "Sign in with Google" section on the home page for push notifications.

Product Information​

  • Product Name: TellFlow
  • Short Description: Mobile access to n8n chatbots. Webhook and workflow-based chat client.
  • One Sentence: Securely connect to your n8n chatbots from your phone; chat via text, voice, and files.
  • Platform: Android and iOS (Flutter). Multiple n8n connections and chatbots; chat history, images/files/audio, share integration, optional voice assistant, dark theme.

Target Audience: Teams using n8n, webhook/chatbot developers, users wanting to interact with multiple bots on mobile.

CTA Copy:

  • "Bring your n8n chatbots to your pocket."
  • "Secure mobile access to your webhook-based bots."

Page Structure (To be maintained)​

The site consists of separate pages; each mapped to its own route or HTML file:

  1. Home (index.html)

    • Main introduction + "How to get an n8n API key?" (Steps for n8n Cloud and Self-hosted).
    • Sign in section at the bottom: "Sign in with Google for push notifications" + "Sign in with Google" button. This section must retain its existing Firebase Auth functionality.

  2. Features (features.html)

    • Feature list: multi-bot/connection, chat history, rich messaging, sharing, voice assistant, tool/model selection, n8n workflow listing, dark theme.

  3. n8n AI Agent Templates (templates.html)

    • Compatibility with n8n AI agents and chatbot templates; mobile use via webhooks; adding from the Workflows screen.

  4. Contact (contact.html)

    • Contact / Feedback (project repository, issue tracker, etc.).

  5. Docs (docs.html)

    • Technical documentation summary: interactive messages, project introduction (reference to the /docs subpath).

Common across all pages: Header (logo, tagline, navigation), Main Content, Footer.

Design Requirements​

  • Style: Modern, clean, mobile-first. Should appeal to n8n / automation / developer audiences; an "AI/chatbot" feel without being over-the-top.
  • Color: The site uses a dark theme (Background ~#0a0f14, Primary ~#137fec). Maintain a premium dark aesthetic.
  • Typography: Legible, clear hierarchy for headers/emphasis. Use modern sans-serif fonts (e.g., Space Grotesk).
  • Navigation: Consistent header across all pages; indicate the active page. Clicking the logo should return to the home page.
  • Content Blocks: Home should have a hero section + brief description + API key steps + Sign in card. Features should present each feature with a short title + sentence or icon.
  • CTA: Emphasize "Bring your n8n chatbots to your pocket" and app store links (if available) or "How to start?". The Sign in section should be a distinct card/section.
  • Responsive: Optimized for mobile and tablet; centered content with a reasonable max-width on desktop.
  • Accessibility: Proper contrast, meaningful heading order, clear labels for buttons/links.

Technical Constraints​

  • Static Export preferred. (e.g., Next.js output: 'export').
  • Maintain existing behavior:
    • Do not change identifiers used for Firebase scripts: id="config-error", id="auth-state", id="google-sign-in", id="sign-out", id="user-email".
    • The Sign in section is only required on the home page.
  • File Structure:
    • Routes: /, /features, /templates, /contact, /docs/
  • Language: All UI and content should be in English.

Expected Output​

  • Page-by-page design suggestions OR
  • Direct HTML/CSS/React code (preserving existing content and following the page structure above).

The design should reference the product info, page list, and technical constraints in this prompt to ensure the TellFlow site is consistent for both promotion and the Sign-in functionality for push notifications.