I turned myself into a website that answers my whole audience.

BUILD BRIEF — "AI Artem" Carousel Coach Website

PRODUCT
Build a polished, responsive marketing + learning website centered on ONE creator's
knowledge: Artem Novitckii — a designer/creator who teaches people how to build AI
content systems and, above all, how to create SCROLL-STOPPING INSTAGRAM CAROUSELS
that grow a personal brand and attract clients.

The site has two jobs:
1. Package his knowledge into a clean, browsable set of lessons ("knowledge points").
2. Host an "AI Artem" chatbot users can talk to, to learn how to make amazing
   Instagram carousels with AI.

Think of it as a personal-brand + product site (in the spirit of a clean creator
landing page) with a live AI coach embedded in it.

────────────────────────────────────────
THE AI ARTEM CHATBOT (the hero feature)
────────────────────────────────────────
Create a conversational "AI Artem" chatbot. Users chat with it to learn Artem's
approach to Instagram carousels and AI content systems. It should feel like DMing
Artem himself.

Persona & voice:
- Confident, warm, direct, a little playful. Talks like a creator, not a corporate
  brand. Short punchy sentences. Uses concrete examples and numbers.
- Opinionated: gives ONE clear recommendation, not a menu of options.
- Always practical — every answer ends with a small action the user can take now.

What it teaches (its knowledge base — build all of this in):
1. THE HOOK SLIDE — how to write slide 1 so people stop scrolling (curiosity gaps,
   bold claims, "you're doing X wrong", numbers, contrarian takes). Give templates.
2. CAROUSEL STRUCTURE — the ideal 6–10 slide arc: Hook → Problem → Payoff promise →
   Value slides (one idea per slide) → Proof/example → CTA/save-me slide.
3. DESIGN RULES — one idea per slide, huge readable type, generous whitespace,
   consistent grid, 2–3 colors max, strong contrast, mobile-first, thumb-stopping
   slide 1, visual "swipe" cues to drive completion rate.
4. WRITING/COPY — how to write value slides that are skimmable; rewriting boring
   lines into punchy ones; the "so what?" test.
5. USING AI TO MAKE CAROUSELS FAST — prompting an LLM to draft carousel copy,
   reverse-engineering viral carousels into reusable templates, AI for outlines,
   batching a week of content, editing AI output so it sounds human.
6. GROWTH & DISTRIBUTION — posting cadence, saves/shares over likes, caption + CTA
   strategy, turning carousels into a personal-brand engine that attracts career &
   business opportunities (clients, collabs, inbound DMs).
7. PERSONAL BRAND / OFFERS — how carousels compound into an audience, and how to
   convert that audience (lead magnets, community, DMs).

Chatbot behaviors:
- Suggested starter prompts as clickable chips, e.g.:
  • "Give me 5 hook ideas for a carousel about [topic]"
  • "Turn my rough notes into a 7-slide carousel"
  • "Critique my carousel structure"
  • "What makes slide 1 stop the scroll?"
  • "Write an AI prompt that drafts my next carousel"
- Can output slide-by-slide carousel drafts (Slide 1: … Slide 2: …).
- Stays in scope: if asked something off-topic, it steers back to carousels/AI
  content in Artem's voice.
- Streamed responses, clean chat bubbles, "AI Artem is typing…" indicator, avatar.

System prompt (use verbatim as the model's system message):
"You are AI Artem, a friendly expert creator based on Artem Novitckii. You teach
people how to create scroll-stopping Instagram carousels and build AI content systems
that grow a personal brand. Voice: confident, warm, direct, lightly playful — like a
creator DMing a friend. Rules: give ONE clear recommendation, never a wishy-washy
list of options; keep it concrete with examples and numbers; end every answer with
one small action to take right now. When asked, produce slide-by-slide carousel
drafts. Stay focused on carousels, content design, copywriting hooks, and using AI to
make content faster. If a question is off-topic, briefly steer it back to growing a
brand with carousels. You are not affiliated with Instagram."

────────────────────────────────────────
KNOWLEDGE-POINTS SITE CONTENT
────────────────────────────────────────
Beyond the chatbot, build browsable lesson content covering the 7 areas above. Present
as a "Playbook" — a grid of lesson cards, each opening to a short lesson page with:
a one-line big idea, 3–5 bullet takeaways, a do/don't example, and a "Ask AI Artem
about this" button that deep-links into the chatbot pre-loaded with a relevant prompt.

Include at least these lesson cards:
- "The 3-Second Hook" • "Anatomy of a Viral Carousel" • "One Idea Per Slide"
- "Design That Reads on a Phone" • "Write Like a Human, Draft With AI"
- "Reverse-Engineer Any Viral Post" • "Batch a Week in One Sitting"
- "Saves > Likes" • "Turn Followers Into Clients"

────────────────────────────────────────
DESIGN & BRAND DIRECTION
────────────────────────────────────────
Match the clean, confident, modern-creator feel of a premium personal-brand site.
Bright, crisp, lots of whitespace, big bold headlines, generous rounded cards, subtle
shadows and soft gradients. NOT corporate — modern, energetic, design-forward.

COLOR SYSTEM (use exactly):
- #1f5bff  → main accent (primary buttons, links, active states, key highlights)
- #1644cc  → hover / pressed / darker accent
- #e6efff  → soft fill / badge backgrounds / chip backgrounds / card tints
- #eef1ff  → faintest tint (section backgrounds, subtle panels)
- Base: white background, near-black text (#0b1020-ish), medium grey for secondary text.

Typography: clean geometric/grotesk sans (e.g. Inter, Satoshi, or General Sans).
Big, tight headlines; comfortable body. Rounded buttons with the #1f5bff fill and
#1644cc hover. Pill-shaped badges/chips using #e6efff. Cards with generous radius
(16–24px) and soft shadows.

Tone of voice throughout the copy: creator-to-creator, motivating, no fluff, action-
oriented. Headlines should sound like Artem: bold claims + a clear benefit.

────────────────────────────────────────
PAGE STRUCTURE (top to bottom)
────────────────────────────────────────
1. NAV: logo/wordmark ("AI Artem" or "Artem Novitckii"), links: Playbook, Chat with
   AI Artem, About, plus a bright #1f5bff "Chat with AI Artem" button.
2. HERO: big headline (e.g. "Create Instagram carousels that stop the scroll —
   with AI."), subhead about growing a personal brand & attracting opportunities,
   primary CTA "Chat with AI Artem", secondary "Explore the Playbook". Show a
   stylized carousel/phone mock or chat preview.
3. SOCIAL PROOF / POSITIONING strip: short line on who this is for (creators,
   founders, freelancers who want inbound opportunities from Instagram).
4. THE AI ARTEM CHAT: embedded chat panel (or prominent CTA to a /chat page) with
   the starter-prompt chips.
5. THE PLAYBOOK: grid of lesson cards (the knowledge points above).
6. "HOW IT WORKS" 3 steps: Ask AI Artem → Get a slide-by-slide draft → Post & grow.
7. WHY CAROUSELS section: brief on why carousels beat other formats for saves,
   reach, and turning attention into career/business opportunities.
8. FINAL CTA band (full-width #1f5bff or gradient): "Start your next carousel now"
   → opens chat.
9. FOOTER: simple links, small disclaimer ("Independent educational project inspired
   by Artem Novitckii's content style; not affiliated with Instagram").

────────────────────────────────────────
TECH / DELIVERY
────────────────────────────────────────
- Responsive, fast, accessible. Mobile-first.
- Wire the chatbot to an LLM via an API/backend; stream responses; keep the system
  prompt above server-side.
- Persist a single chat session in the browser so refresh doesn't wipe it.
- Deep-link support: /chat?prompt=... pre-fills and sends a starter prompt from
  lesson cards.
- Clean component structure, no placeholder lorem ipsum — write real, on-brand copy
  in Artem's voice everywhere.