Библиотека промптов

Промпты, которые реально запускают.

Рабочая библиотека продакшен-промптов для Lovable: выжимка из реальных сборок, реальных багов и реальной выручки. Скопируйте, вставьте в Lovable и наблюдайте, как появляется фича.

Библиотека промптов

Landing Pages

Premium SaaS Landing Page

Старт

Generate an Awwwards-grade landing for a B2B SaaS in one shot.

Build a premium, conversion-focused landing page for a B2B SaaS called {{PRODUCT}}.

Sections, in order:
1. Sticky transparent navbar with logo, 4 links (Product, Pricing, Customers, Blog) and a primary CTA.
2. Hero: large editorial headline (Playfair Display italic for the accent word), one-line subhead, primary + secondary CTA, trust strip with 5 fake company wordmarks.
3. Social proof: 3-up metric stat bar (e.g. "32% faster", "1,200+ teams", "4.9/5 G2").
4. Feature grid: 6 cards with lucide icons, short title, 1-line description.
5. Long-form value section: 3 alternating image/text rows ("zig-zag").
6. Testimonial carousel: 3 quotes with avatar + role.
7. Pricing: 3 tiers, middle tier highlighted, "most popular" ribbon.
8. FAQ accordion: 6 questions.
9. Footer with 4 columns.

Design rules:
- Light theme, off-white background (#FAFAF7), near-black text.
- Inter Display for headings, Inter for body, Playfair Display italic for accent words only.
- Subtle motion: fade-up on scroll, no parallax.
- All colors via semantic tokens in index.css, no hex inside components.
- Mobile-first responsive, generous whitespace.

Replace {{PRODUCT}}. Re-prompt afterwards: 'tighten typography and increase contrast in the pricing section.'

#landing#marketing#hero
Auth & Database

Supabase Auth + Role-Based Access

Средний

Bulletproof email auth with admin/user roles and RLS that won't break.

Enable Lovable Cloud and implement authentication.

Requirements:
- Email + password signup and login (no magic links).
- Add Google sign-in as a second option.
- Create a 'profiles' table with columns: user_id (FK to auth.users, cascade), display_name, avatar_url, created_at, updated_at.
- Create a separate 'user_roles' table with an app_role enum ('admin', 'user'), NEVER store roles on profiles.
- Implement a SECURITY DEFINER has_role(_user_id, _role) function and use it in all RLS policies.
- Auto-create a profile row via a trigger on auth.users insert.
- Add a /login page, /signup page, /reset-password page, and an /account page that shows the current user's profile.
- Persist session with onAuthStateChange BEFORE getSession (no race conditions).
- Protect /account with a redirect to /login if not authenticated.

Do not auto-confirm emails. Do not store the service role key on the client.

Pair with the migration tool. If users can't write to profiles, you forgot the INSERT policy.

#auth#supabase#rls#security
SaaS

Stripe Checkout via Edge Function

Продвинутый

Production-ready checkout without leaking secret keys to the client.

Add Stripe Checkout for a single subscription product.

1. Create an edge function 'create-checkout' that:
   - Reads STRIPE_SECRET_KEY from secrets.
   - Accepts a JSON body { price_id: string }.
   - Validates input with zod.
   - Looks up or creates a Stripe customer keyed by the authenticated user's email.
   - Creates a Checkout Session in 'subscription' mode with success_url and cancel_url pointing back to the app origin.
   - Returns { url }.
   - Includes CORS headers on every response, including errors.

2. Create an edge function 'stripe-webhook' (verify_jwt = false in config.toml) that:
   - Verifies the Stripe signature using STRIPE_WEBHOOK_SECRET.
   - On 'checkout.session.completed' upserts a row in a 'subscribers' table (user_id, stripe_customer_id, status, current_period_end).

3. On the client, add a "Subscribe" button on /pricing that calls supabase.functions.invoke('create-checkout') and redirects to data.url in a new tab.

Never expose the Stripe secret key on the client. Never store webhook secrets in code.
#stripe#payments#edge function
Dashboards

Linear-Inspired Dashboard Shell

Средний

A dense, keyboard-driven dashboard layout that doesn't feel like a template.

Build a dashboard shell inspired by Linear.

Layout:
- Left rail (240px) with workspace switcher, primary nav (Inbox, My Issues, Active, Backlog, Projects), and a collapsed "Teams" section.
- Top bar with breadcrumb, global search (Cmd+K), and a circular avatar.
- Main canvas with a list view: dense rows (40px), each row shows priority dot, id badge, title, assignee avatars, status pill, date.

Interactions:
- Cmd+K opens a command palette built on shadcn/ui Command.
- Hover row shows a quick-action toolbar (assign, change status, snooze).
- Pressing 'c' anywhere opens a "Create issue" dialog.

Visual rules:
- Use neutral grays from semantic tokens, single accent color for primary actions.
- 13px base text, tabular numerals for ids and dates.
- No drop shadows except on the command palette.
#dashboard#ui#shadcn
AI Features

Streaming AI Chat with Lovable AI

Средний

Drop a real streaming chat into any app using the Lovable AI gateway.

Add an AI chat using the built-in Lovable AI gateway (no API key required from the user).

Backend (edge function 'chat'):
- Accepts { messages: { role, content }[] }.
- Calls https://ai.gateway.lovable.dev/v1/chat/completions with the LOVABLE_API_KEY secret.
- Uses model 'google/gemini-2.5-flash'.
- Streams the response back to the client using a ReadableStream and 'text/event-stream' headers.
- Include CORS headers on all responses.

Client (/chat page):
- Message list with role-styled bubbles (user right-aligned, assistant left-aligned).
- Input with Cmd+Enter to send.
- While streaming, append tokens to the last assistant message in real time.
- Show a "Stop" button that aborts the fetch.

Design: messages 15px, generous line-height, fade-in each new message.
#ai#chat#streaming
SEO

SEO Meta + JSON-LD for Every Page

Старт

Make Google love a Lovable site without installing a single SEO library.

Create a useSEO hook in src/lib/seo.ts that imperatively sets:
- document.title (under 60 chars)
- meta description (under 160 chars)
- canonical link
- og:title, og:description, og:image, og:url, og:type
- twitter:card=summary_large_image, twitter:title, twitter:description, twitter:image
- a single <script type="application/ld+json"> tag with the provided schema, replaced on each route

Then call useSEO on every page (Home, Blog index, each article, etc.) with route-specific values.

Also:
- Update public/sitemap.xml with all routes.
- Update public/robots.txt to allow all and reference the sitemap.
- Ensure exactly one <h1> per page and use semantic <article>, <section>, <nav> tags.
#seo#meta#schema
Bug Fixes

Fix Broken Mobile Layout in One Prompt

Старт

When a Lovable build looks great on desktop but breaks at 375px.

The site looks fine on desktop but breaks below 768px. Audit and fix every page so it is flawless on a 375x812 viewport.

Specifically:
- No horizontal scroll anywhere.
- Headings drop one size step on mobile (e.g. text-6xl md:text-7xl).
- Convert all multi-column grids to single column under md.
- Stack hero CTAs vertically and make them full width.
- Reduce hero vertical padding by ~30% on mobile.
- Ensure every section has px-6 minimum side padding.
- Open the navbar as a full-screen overlay on mobile, not a dropdown that pushes content.

After the fix, list each file you edited and the breakpoint changes you made.
#mobile#responsive#tailwind
Design System

Convert Hardcoded Colors to Design Tokens

Средний

Refactor a project where every component has bg-white and text-black scattered everywhere.

Refactor the entire project to use semantic design tokens.

1. In src/index.css, define a complete token set in :root and .dark:
   --background, --foreground, --card, --card-foreground, --popover, --popover-foreground,
   --primary, --primary-foreground, --secondary, --secondary-foreground,
   --muted, --muted-foreground, --accent, --accent-foreground,
   --destructive, --destructive-foreground, --border, --input, --ring,
   plus a --gradient-primary and --shadow-elegant.
   All values in HSL.

2. In tailwind.config.ts, map every token to a Tailwind color via hsl(var(--token)).

3. Sweep every component: replace bg-white -> bg-background, text-black -> text-foreground, text-gray-500 -> text-muted-foreground, etc.

4. Verify dark mode works by toggling .dark on <html>.
#design system#tailwind#tokens
Mobile

Make Any Lovable App Installable (PWA)

Средний

Ship an installable home-screen app without ejecting.

Convert this Lovable app into an installable PWA.

1. Add /public/manifest.webmanifest with name, short_name, start_url='/', display='standalone', background_color, theme_color, and 192/512 icons (generate placeholder icons in /public/icons/).
2. Link the manifest from index.html and add <meta name="theme-color">.
3. Add a minimal service worker at /public/sw.js that caches the app shell on install and serves cache-first for static assets, network-first for /api and edge function calls.
4. Register the SW from src/main.tsx after window load, only in production.
5. Add an iOS install hint (apple-touch-icon, apple-mobile-web-app-capable meta).

Test on a real mobile browser. The site must be fully usable offline for the cached shell.
#pwa#mobile#manifest
Landing Pages

Editorial Blog System (No MDX)

Продвинутый

Magazine-quality blog using plain TS data, no MDX required.

Build an editorial blog system.

Data: a TS file src/data/blog.ts exporting an Article[] where each article has slug, title, deck, hero image, date, readTime, tags, author, and a body: Block[] union (paragraph, h2, h3, quote, pullquote, ul, ol, callout, table, cta, faq).

Pages:
- /blog index: featured hero article, category filter chips, search input, responsive 3-col card grid.
- /blog/:slug: ArticleLayout component renders Block[] into typographically perfect long-form. Includes:
  - Sticky table of contents on desktop (right rail).
  - Reading progress bar at the top.
  - Drop cap on the first paragraph.
  - Pull-quote style for { type: 'pullquote' }.
  - FAQ accordion using shadcn/ui Accordion.
  - JSON-LD Article + FAQPage + BreadcrumbList schema.

Typography: Playfair Display for h1/h2 (medium weight, italic accents), Inter for body, 19px base, 1.7 line-height, max-width 68ch. Plenty of whitespace.
#blog#editorial#content
SaaS

Waitlist + Welcome Email

Старт

Capture early signups and send a real welcome email.

Build a waitlist.

1. Migration: create a 'waitlist' table (email unique, referrer text, created_at). Enable RLS, allow public INSERT only.
2. Landing form: single email input, validates with zod, optimistic UI, success state replaces the form with "You're in. Check your inbox."
3. Edge function 'send-welcome' triggered after insert: uses Resend (RESEND_API_KEY secret) to send a plain-text welcome email signed by the founder.
4. Track UTM source in the referrer column.
5. Admin route /admin/waitlist (protected) that lists all signups with a CSV export button.
#waitlist#email#resend
Bug Fixes

Reproducible Bug Report Template

Старт

Stop the 'it's still broken' loop. Give Lovable everything it needs.

When reporting a bug, paste this template:

**What I did:** <exact click path, including which page>
**What I expected:** <one sentence>
**What actually happened:** <one sentence, plus screenshot or recording>
**Console errors:** <paste the red errors from devtools, full stack>
**Network failures:** <which request, status code, response body>
**Last change that worked:** <git/version reference if known>
**Affected files (your guess):** <optional>

Then ask Lovable: "Diagnose first, do not edit code. Tell me which file and line is responsible and what the minimal fix is. Then wait for me to approve before patching."

This pattern alone fixes ~70% of debugging loops.

#debugging#workflow
Content & Writing

Long-Form Article First Draft

Старт

Turn a topic and a few bullet points into a publishable 800-word draft.

Write a {{WORD_COUNT}}-word first draft of an article titled "{{TITLE}}" for {{AUDIENCE}}.

Structure:
- Hook (specific scenario, not a question, not "In today's world").
- Context: why this matters right now.
- Body: cover these points in order: {{POINT_1}}, {{POINT_2}}, {{POINT_3}}.
- Direct closing with one actionable next step.

Rules:
- Subheadings every 150-200 words.
- Paragraphs under 4 sentences.
- No em-dashes, no emoji, no AI filler phrases ("dive into", "in the realm of", "unleash").
- One concrete example or number per main point.
- Tone: {{TONE}} (e.g. confident, plain-spoken, no hedging).

Re-prompt: 'Cut 20% of the words. Keep the strongest example in each section.'

#blog#writing#draft
Content & Writing

Rewrite Any Draft for Clarity

Старт

Take a messy draft and tighten it without losing your voice.

Here is my draft: {{PASTE_DRAFT}}

Rewrite it for clarity and rhythm. Keep my ideas and my voice. Do not change the meaning.

Specifically:
- Cut redundant transitions and filler.
- Vary sentence length: short, medium, short.
- Replace passive voice with active where it helps.
- Remove any em-dashes, semicolons used as drama, and AI cliches.
- Keep paragraphs under 4 sentences.

Return the rewritten version only. No commentary.
#editing#rewriting
Content & Writing

Explain a Technical Concept Simply

Старт

Turn a complex feature or concept into copy a non-technical buyer can grasp.

Explain {{CONCEPT}} to someone who has no background in the subject.

Constraints:
- Use one core analogy and stick to it the whole way through.
- No jargon. If you must use a term, define it in the same sentence.
- 250 words maximum.
- End with one sentence that connects the concept to a real outcome the reader cares about ({{READER_OUTCOME}}).
#explainer#education
Marketing Copy

Landing Page Body Copy That Converts

Средний

Generate hero, sub-hero, features and CTA copy aligned to a single pain point.

Write the body copy for a landing page selling {{PRODUCT}}.

Visitor: {{VISITOR_DESCRIPTION}}.
Main pain point: {{PAIN_POINT}}.
Primary CTA: {{CTA_TEXT}}.

Deliver, in this exact order:
1. Hero headline (under 9 words, names the outcome, not the feature).
2. Sub-headline (one sentence, 15-20 words, names the pain it removes).
3. Three feature blocks. Each: 3-word label, one-sentence benefit, one-sentence proof.
4. One social-proof line (format: "{{N}} {{ROLE}} already use {{PRODUCT}} to {{OUTCOME}}").
5. Final CTA block: 6-word reassurance + button label.

No adjectives like "powerful", "seamless", "revolutionary". No em-dashes.
#landing#copywriting#conversion
Marketing Copy

Outcome-First Product Description

Старт

Replace feature-dump descriptions with copy that sells the result.

Write a 300-word product description for {{PRODUCT_NAME}}.

The product does: {{FUNCTION}}.
The buyer is: {{BUYER}}.
The buyer cares about: {{BUYER_OUTCOMES}}.

Rules:
- Lead with the outcome, not the feature.
- One paragraph of story (how the buyer's day changes), one paragraph of specifics (what's inside), one paragraph of reassurance (warranty / guarantee / who it's not for).
- No marketing cliches. No exclamation marks.
#copy#ecommerce#product
Marketing Copy

Cold Outreach Email That Gets Replies

Средний

Founder-to-founder outreach for partnerships, feedback, or early customers.

Write a cold email from me ({{MY_ROLE}} at {{MY_COMPANY}}) to {{TARGET_PERSON}} at {{TARGET_COMPANY}}.

Goal: {{GOAL}} (e.g. 15-min call, beta signup, link exchange).

Structure (max 90 words total):
- Subject line under 6 words, lowercase, specific.
- One opening sentence that proves I actually looked at their work ({{SPECIFIC_DETAIL}}).
- One sentence about why I'm writing.
- One sentence about what's in it for them.
- One soft ask, with two clear next steps.

No "I hope this finds you well". No "Just circling back". No emoji.
#email#outreach#sales
Marketing Copy

Three Value-Prop One-Liners (A/B/C)

Старт

Quickly test three angles for the same product to pick the strongest.

Write three value-proposition one-liners for {{PRODUCT}}, each under 12 words.

Each version uses a different angle:
A. Outcome-led ("Get X without Y").
B. Speed-led ("Ship X in one weekend").
C. Identity-led ("For {{ROLE}} who {{BELIEF}}").

For each, add one sentence explaining which audience it resonates with most and why.
#positioning#copy
Social Media

Twitter / X Thread From an Article

Старт

Recycle a published article into a 7-tweet thread with a clear hook.

Turn this article into a 7-tweet X thread: {{PASTE_ARTICLE_OR_URL}}

Rules:
- Tweet 1 is a hook with one specific number or claim. No question marks. No "let me tell you".
- Tweets 2-6 each carry one idea. Under 240 characters. One line break between thoughts.
- Tweet 7 is a soft CTA pointing back to the full article.
- No hashtags. No emoji except a single optional arrow in the CTA.
- Voice: direct, builder, first-person.
#twitter#thread#distribution
Social Media

LinkedIn Post Builder (Founder Voice)

Старт

A repeatable template for high-signal LinkedIn posts about shipping with Lovable.

Write a LinkedIn post in my voice as a {{ROLE}} who just {{ACHIEVEMENT}}.

Structure (max 180 words):
- Line 1: a contrarian or counter-intuitive sentence that earns the click.
- Blank line.
- 4-6 short paragraphs (1-2 sentences each). Tell the actual story: what I tried, what broke, what I learned.
- One concrete number.
- Final line: a question that invites a comment, no "thoughts?".

No emoji. No hashtags. No "Excited to share".
#linkedin#personal brand
Social Media

60-Second Short / Reel Script

Старт

Hook-driven short-form script you can record without editing 10 times.

Write a 60-second vertical video script about {{TOPIC}} for an audience of {{AUDIENCE}}.

Format:
- 0-3s HOOK: one sentence that promises a specific payoff. No "in this video".
- 3-15s SETUP: the problem, in plain words, with one number or example.
- 15-45s PAYOFF: the solution as 3 numbered steps. Each step is one short on-screen sentence.
- 45-60s CTA: one sentence telling the viewer the single next action.

Output as: timestamp | on-camera line | on-screen text overlay.
#video#shorts#tiktok
Productivity

Weekly Plan for Solo Builders

Старт

Turn a messy list of goals into a realistic, shippable week.

Here are my goals and open threads for next week: {{PASTE_DUMP}}

Give me a one-page weekly plan.

Output:
- One "north-star outcome" for the week, phrased as something a user can see or feel.
- Three priorities, in order, each tied to that outcome.
- A day-by-day Monday-Friday breakdown. Each day has at most 2 deep-work blocks and 1 admin block.
- A "do not do this week" list of 3-5 items to actively cut.
- One reflection question for Friday evening.

Be ruthless. If something doesn't serve the north star, move it off the week.
#planning#focus
Productivity

Meeting Notes → Action Items

Старт

Convert raw notes into a clean summary and owned next steps.

Here are my raw meeting notes: {{PASTE_NOTES}}

Return:
1. A 5-bullet summary of decisions made.
2. An action-items table with columns: Action | Owner | Due date | Definition of done.
3. A list of open questions that still need answers and who should answer them.
4. A 4-sentence recap I can paste into Slack.

Do not invent owners or dates. If unclear, mark as "TBD" and flag it in the open questions list.
#meetings#notes
Productivity

One-Page Decision Doc

Средний

Stop spinning on a choice, force the decision into one structured page.

Help me make this decision: {{DECISION}}

Context: {{CONTEXT}}
Constraints: {{CONSTRAINTS}}
What "good" looks like in 90 days: {{SUCCESS_CRITERIA}}

Produce a one-page decision doc with:
- The decision restated in one sentence.
- 3 realistic options. For each: what it is, what it costs (time / money / focus), what it gives up.
- A scoring table against the success criteria (1-5 per criterion).
- Your recommendation and the single biggest risk of that recommendation.
- The reversibility check: is this a two-way door or a one-way door?
#decisions#strategy
Research & Strategy

Competitor Teardown in 10 Minutes

Средний

Get a structured read on a competitor before you spend a sprint copying them.

Do a structured teardown of {{COMPETITOR_URL}} for someone building {{MY_PRODUCT}} aimed at {{MY_AUDIENCE}}.

Sections:
1. Positioning: the one sentence they would write about themselves vs. the one sentence their users would write.
2. Pricing model and what it signals about who they really sell to.
3. The 3 things they do better than anyone else.
4. The 3 things they're clearly weak at (be specific, not generic).
5. Where I can credibly out-position them in one sentence.
6. One thing I should NOT copy from them and why.
#competitive#research#positioning
Research & Strategy

Sharp Ideal Customer Profile (ICP)

Средний

Replace vague personas with a precise ICP you can actually market to.

Build a sharp ICP for {{PRODUCT}}.

Inputs:
- What it does: {{WHAT}}
- Best 3 current users (role + company size + use case): {{TOP_USERS}}
- What those users were using before: {{PREVIOUS_TOOL}}

Output:
1. ICP in one sentence: "{{ROLE}} at {{COMPANY_TYPE}} who {{TRIGGER}} and currently {{WORKAROUND}}."
2. The "tell-tale signal" that someone is in the ICP (a job title, a tool in their stack, a specific pain in their week).
3. 3 places this person already hangs out online.
4. 3 phrases they use to describe their pain in their own words (not marketing language).
5. The one objection they will raise first, and the honest answer.
#icp#audience#positioning
Research & Strategy

Pricing Experiment Plan

Продвинутый

Design a defensible pricing test instead of guessing tiers.

I want to test pricing for {{PRODUCT}}. Current pricing: {{CURRENT_PRICING}}. Costs per user: {{COSTS}}. Goal: {{GOAL}} (e.g. raise ARPU 25%, reduce churn, qualify enterprise).

Give me a 30-day pricing experiment plan:
1. The single hypothesis being tested, written as "If we change X, then Y will happen because Z".
2. Two pricing variants (current vs. proposed), with clear value-metric and tier structure.
3. The metrics that decide the test (primary + 2 guardrails).
4. Sample size or time needed to call the result.
5. The rollback plan if the variant loses.
6. How to communicate the change to existing users without breaking trust.
#pricing#monetization#experiments
Landing Pages

Editorial Magazine-Style Landing

Средний

Awwwards-grade editorial homepage with a strong typographic point of view.

Build a homepage for {{BRAND}} that feels like a luxury print magazine, not a SaaS template.

Layout:
- Full-bleed hero with one giant Playfair Display headline (italic on the verb), a 14px Inter uppercase eyebrow above it, and a 16px lede below.
- An off-grid asymmetric feature row: 60/40 split, image on the long side, text in a narrow column.
- "From the editors" 3-card grid with hairline borders and large cap-height numbers.
- Quiet CTA strip: cream background, single sentence, single text link with an arrow.
- Footer in two rows: sitemap on top, fine print on the bottom.

Rules:
- Off-white (#FAFAF7) background, near-black (#111) text, ONE accent color (deep purple hsl 258 60% 50%).
- All colors as semantic tokens in index.css. No hex inside components.
- Inter Display + Playfair Display italic for accents only. No other fonts.
- No gradients, no glassmorphism, no emoji.

Follow-up: 'reduce visual noise, make the hero quieter, increase the headline size by 20%.'

#editorial#magazine#typography
Landing Pages

AI Product Launch Page

Старт

Launch page for an AI-powered tool with a working demo embed slot.

Create a launch landing for {{PRODUCT}}, an AI tool that {{ONE_LINE_VALUE}}.

Sections:
1. Hero: headline, 1-line subhead, primary CTA "Try it free", secondary "Watch 60s demo".
2. Live demo block: a card with a textarea, a "Generate" button, and a sample output area. Wire the button to call lovable-ai with model 'google/gemini-2.5-flash' and stream the result into the output area.
3. "What it replaces" comparison row: 3 columns (Before, With {{PRODUCT}}, Time saved).
4. 6-feature bento grid (asymmetric tile sizes).
5. Use cases tabs: 4 personas, each with a short scenario.
6. FAQ + CTA.

Tech:
- Use Lovable Cloud for any backend.
- Stream AI responses, do not block the UI.
- All semantic color tokens, dark mode aware.

Replace {{PRODUCT}} and {{ONE_LINE_VALUE}}. Then iterate on the demo block UX.

#ai#launch#hero
Landing Pages

Boutique Agency Portfolio

Средний

High-end agency site that signals craft without being precious.

Design a homepage for a 4-person design studio called {{AGENCY}}.

- Single-column, long-scroll layout. No nav links except a logo and a "Start a project" button.
- Hero: 2 lines of large serif text + a tiny "Currently booking Q2 2027" tag.
- Selected work: 3 case studies as large image cards with a project name, role, year. Hovering tilts the image 1deg, no more.
- Capabilities: short list in 2 columns, no icons.
- "How we work" 4-step strip with hairline numbers.
- Quiet contact block with a real email address, not a form.

Constraints:
- Cream background, black text, single muted accent.
- Inter for everything except case-study titles which use Fraunces.
- No stock photography placeholders. Use solid color blocks labeled "case study image".
#agency#portfolio#case-study
Landing Pages

Standalone Pricing Page

Старт

Drop-in pricing page that actually converts.

Build a /pricing page for {{PRODUCT}}.

- 3 tiers (Starter, Pro, Scale). Middle tier highlighted with a hairline border and a "Most popular" badge.
- Each tier: price (annual default, monthly toggle), 1-line audience, primary CTA, 6-bullet feature list with check icons.
- Below tiers: feature comparison table, 5 categories, 12 rows total.
- Money-back guarantee strip + 3-question FAQ specifically about billing.
- Sticky "Talk to sales" link in the corner for enterprise.

Rules:
- Annual/monthly toggle stored in URL search param.
- No fake urgency, no fake discounts.
- Use semantic tokens, no hardcoded colors.
#pricing#conversion
Landing Pages

Changelog-Style Product Page

Средний

Public changelog that doubles as a marketing surface.

Create a /changelog route for {{PRODUCT}}.

- Hero: "What's new" + RSS link + filter by tag (Feature, Fix, Performance).
- Each entry: date on the left rail, version chip, 2-sentence summary, optional image, bullet list of changes.
- Most recent entry expanded by default, older ones collapsed.
- "Subscribe to updates" inline email form using Lovable Cloud.
- Pagination: 10 per page, server-side via Supabase.

Data:
- Create a public 'changelog_entries' table with proper GRANTs and an RLS policy allowing public SELECT on published rows only.
- Seed with 6 example entries.
#changelog#product#updates
Landing Pages

Indie Hacker Personal Site

Старт

One-page personal site for an indie founder.

Build a one-page personal site for {{NAME}}, an indie founder shipping small SaaS.

Sections in order:
1. Tiny header: name + "now" link.
2. 3-sentence intro in large serif.
3. "Currently building": 2 product cards with logo, name, MRR (optional), short description.
4. "Shipped": list of past projects with year and status (sold, sunset, live).
5. "Writing", 5 most recent essays.
6. Footer with email + X + GitHub.

Rules:
- No hero image. No social proof. No CTA except "Email me".
- Off-white, serif headings, no animations beyond fade-up.
#personal#portfolio#indie
Landing Pages

Online Course Sales Page

Средний

Long-form sales page for a paid online course.

Write a sales page for {{COURSE}}, a paid online course teaching {{TOPIC}}.

Required sections:
1. Hero with the promise (specific outcome + timeframe), price, and "Enroll" CTA.
2. "Is this for you?", 4 reader profiles in a 2x2 grid.
3. Curriculum: 6 modules, each as an accordion with 4-6 lessons.
4. Instructor bio with credibility signals (specific numbers, not adjectives).
5. 3 student testimonials with full names, roles, photos.
6. Pricing card with 2 options (one-time vs payment plan).
7. 8-question FAQ focused on objections (refunds, time commitment, prerequisites).
8. Final CTA with money-back guarantee.

Tone: confident but specific. Replace every adjective with a number wherever possible.
#course#education#sales
Landing Pages

Comparison Page (vs Competitor)

Средний

SEO-optimized comparison page that ranks for '{{us}} vs {{them}}'.

Build a /vs/{{competitor}} page comparing {{US}} to {{COMPETITOR}}.

Sections:
1. H1: "{{US}} vs {{COMPETITOR}}: Honest Comparison ({{YEAR}})".
2. 2-sentence summary + a tldr verdict card.
3. Side-by-side feature table, 12 rows. Use checks, dashes, and partial-circles, not just yes/no.
4. "When to pick {{US}}", 4 bullets. "When to pick {{COMPETITOR}}", 4 bullets (be genuinely fair).
5. Pricing comparison.
6. Migration guide section.
7. FAQ with 6 questions including "Is this comparison biased?".
8. Closing CTA.

SEO:
- Meta title under 60 chars, description under 158.
- JSON-LD with @type ComparisonTable schema fallback to FAQPage.
- hreflang for EN/RU.
#comparison#seo#competitor
Landing Pages

Memorable 404 + Empty States

Старт

Replace generic empty screens with something on-brand.

Design and implement:
1. A /404 page with a giant serif "404" set in Playfair italic, a one-line apology, and 3 helpful links.
2. Empty state for an empty list: an SVG illustration slot, a one-line explanation of what should be here, and a primary "Add the first one" CTA.
3. Empty state for a failed search: shows the query, suggests 3 reformulations.
4. Empty state for a loading skeleton: shimmer effect, not a spinner.

Rules:
- All copy in EN and RU via the i18n system.
- Semantic tokens only.
#404#empty-state#polish
Landing Pages

Newsletter Landing Page

Старт

Single-purpose page to grow a newsletter list.

Build a /subscribe page for {{NEWSLETTER}}.

- Hero: name of the newsletter, frequency, what subscribers actually get (be specific: "1 essay per Sunday, no roundups, no sponsor blasts").
- Email input + "Subscribe" button using Lovable Cloud (insert into 'subscribers' table with proper RLS).
- "Recent issues", 5 most recent issue titles + dates + 1-sentence preview.
- 3 short subscriber quotes.
- Privacy line: "One-click unsubscribe. Never sold. Never shared."

Backend:
- Create 'subscribers' table (email, source, created_at, unsubscribed_at).
- RLS: public INSERT allowed, no SELECT for anon.
- GRANT INSERT to anon, ALL to service_role.
#newsletter#email#subscribe
SaaS

Multi-Tenant Workspaces

Продвинутый

Add team workspaces with invite-by-email and per-workspace data isolation.

Add multi-tenant workspaces to the app using Lovable Cloud.

Schema:
- 'workspaces' (id, name, slug unique, owner_id, created_at).
- 'workspace_members' (workspace_id, user_id, role enum 'owner'|'admin'|'member', invited_by, joined_at).
- All tenant-scoped tables get a workspace_id FK.

RLS:
- A SECURITY DEFINER function is_workspace_member(_workspace_id, _user_id) and has_workspace_role(_workspace_id, _user_id, _role).
- All tenant tables: policies use is_workspace_member to gate SELECT, and has_workspace_role('admin') for write.

UI:
- Workspace switcher in the sidebar.
- /settings/workspace/members page with invite by email (send via edge function), pending invites list, role change, remove member.
- Slug-based routing: /w/{slug}/...

Grants:
- GRANT all needed perms on every new table to authenticated and service_role.
#multi-tenant#workspaces#rls
SaaS

Stripe Subscription Billing

Продвинутый

Full Stripe subscription flow with webhooks, customer portal, and plan gating.

Implement Stripe subscriptions end-to-end.

Edge functions:
- POST /create-checkout: takes priceId, returns Stripe Checkout URL. Uses STRIPE_SECRET_KEY. CORS enabled. JWT-verified.
- POST /create-portal-session: returns Stripe Billing Portal URL for the current user.
- POST /stripe-webhook: PUBLIC (verify_jwt = false), validates signature, handles customer.subscription.created/updated/deleted and invoice.payment_failed.

DB:
- 'subscribers' table: user_id, email, stripe_customer_id, subscribed bool, subscription_tier text, subscription_end timestamptz.
- RLS: user can SELECT only their own row; edge functions use service role.

UI:
- /pricing with 3 tiers + working checkout buttons.
- /account/billing with current plan, "Manage billing" button, cancel notice.
- Plan-gated feature example: a component that checks subscription_tier and shows an upsell if locked.

Never store the service role key on the client.
#stripe#billing#subscriptions
SaaS

Usage-Based Metering & Limits

Продвинутый

Track per-user usage of an expensive action and enforce a monthly quota.

Add usage metering for the {{ACTION}} action.

Schema:
- 'usage_events' (id, user_id, action text, quantity int, metadata jsonb, created_at).
- 'usage_quotas' (user_id, action, period text default 'month', limit int, reset_at).

Logic:
- A SECURITY DEFINER function check_and_increment_usage(_user_id, _action, _qty) that:
  - Returns false if the user is over quota for the current period.
  - Otherwise inserts a usage_events row and returns true.
- All calls to the metered action must go through an edge function that calls this RPC first.

UI:
- /account/usage shows a progress bar (used / limit), the next reset date, and an upgrade CTA at 80%.
- Inline limit toast when the action is blocked.

Quotas seed: Starter 50/mo, Pro 1000/mo, Scale unlimited (-1).
#metering#usage#limits
SaaS

Referral Program with Tracking

Средний

Give each user a referral link, track conversions, reward both sides.

Implement a referral program.

Schema:
- Add 'referral_code' (text unique, default a random 8-char string) to profiles.
- Add 'referred_by' (uuid FK to profiles) to profiles.
- 'referral_rewards' (id, referrer_id, referred_user_id, status enum 'pending'|'credited', credited_at).

Flow:
- /r/{code} route: sets referral_code in localStorage, redirects to /signup.
- On signup, read the cookie/localStorage and set referred_by on the new profile.
- When the referred user reaches the qualifying event ({{QUALIFYING_EVENT}}), credit both sides (10 credits each) and mark the reward credited.

UI:
- /account/referrals: shows the user's link, copy button, stats (clicks, signups, credited), list of referred users (anonymized).

RLS: a user can only read their own referral rewards.
#referral#growth#viral
SaaS

In-App Feedback Widget

Старт

Floating button that lets users send feedback with a screenshot.

Add a floating feedback widget.

- Bottom-right floating button (icon: MessageCircle). Opens a popover with: type (Bug / Idea / Praise), message textarea, optional email, "Include screenshot" toggle.
- Screenshot via html2canvas of the current viewport, uploaded to a 'feedback-screenshots' Lovable Cloud storage bucket.
- Submits to a 'feedback' table (user_id nullable, type, message, screenshot_url, page_url, user_agent, created_at).

Rules:
- RLS: anyone can INSERT (including anon). Only admins can SELECT (use has_role).
- After submit: toast "Thanks, we read every one" and reset the form.
- Keyboard shortcut: Cmd/Ctrl + Shift + F to open.
#feedback#widget
SaaS

Team Invites via Email

Средний

Invite teammates by email with secure token-based acceptance.

Build a team invite flow.

Schema:
- 'invites' (id, workspace_id, email, role, token uuid, invited_by, expires_at, accepted_at nullable).

Edge function 'send-invite':
- Inserts the invite row, generates a token, sends an email with link /invite/{token}.
- Uses Resend (or the configured email provider). JWT-verified.

UI:
- /settings/members "Invite teammate" form (email + role).
- /invite/{token} page: validates the token (not expired, not accepted), shows "Accept invite to {{workspace}}" with a confirm button.
- On accept: insert workspace_members row, mark invite accepted, redirect to the workspace.

If the invited email matches an existing account, accepting just adds membership. If not, redirect to signup first and continue after.
#invites#team#email
SaaS

Audit Log

Средний

Immutable activity log for compliance and debugging.

Add an audit log.

Schema:
- 'audit_logs' (id, workspace_id, actor_id, action text, target_type text, target_id text, metadata jsonb, ip text, user_agent text, created_at).
- RLS: SELECT for workspace admins only. No UPDATE, no DELETE policies (immutable).

API:
- A log_event() helper called from edge functions on every state-changing action.
- Capture IP and user-agent server-side.

UI:
- /settings/audit-log: filterable table (actor, action type, date range), CSV export, expandable row showing the full metadata JSON.

Do not store passwords, tokens, or PII in metadata.
#audit#logs#compliance
SaaS

User API Keys

Продвинутый

Let users generate API keys to call your endpoints programmatically.

Implement user-generated API keys.

Schema:
- 'api_keys' (id, user_id, name, key_prefix text, key_hash text, last_used_at, created_at, revoked_at nullable).
- Store only a SHA-256 hash of the key. Show the full key exactly once on creation.

Edge function 'verify-api-key':
- Reads Authorization: Bearer header, hashes it, looks up the row, returns the user_id or 401.

UI:
- /account/api-keys: list (name, prefix, last used, revoke button).
- Create modal: ask for a name, generate a key like 'lv_live_<32 random chars>', show it in a copy-once box with a clear warning.

RLS: user can SELECT and INSERT and UPDATE (revoke) only their own keys.
#api#keys#developer
SaaS

Scheduled Background Jobs

Продвинутый

Recurring jobs (daily reports, cleanup) using pg_cron + edge functions.

Set up a scheduled jobs system.

- Enable pg_cron and pg_net in the database.
- Create a cron job that calls an edge function 'run-daily-jobs' every day at 03:00 UTC via net.http_post.
- The function reads a 'scheduled_jobs' table (id, name, kind, payload jsonb, run_at, status, attempts, last_error) and processes 'pending' rows with run_at <= now.
- Use a row-level lock (SELECT ... FOR UPDATE SKIP LOCKED) so multiple invocations don't double-process.

Add 3 example job kinds:
1. 'cleanup_old_logs', delete audit_logs older than 90 days.
2. 'send_weekly_digest': query subscribers, queue email per user.
3. 'expire_invites', mark unaccepted invites expired.

Admin UI: /admin/jobs shows recent runs with status and errors.
#cron#jobs#background
SaaS

Feature Flags

Средний

Turn features on per-user without redeploying.

Add a feature-flag system.

Schema:
- 'feature_flags' (key text primary key, enabled bool, rollout_percent int default 0, description, updated_at).
- 'feature_flag_overrides' (flag_key, user_id, enabled, primary key (flag_key, user_id)).

Client:
- useFeatureFlag(key) hook: reads flags once on app load, caches in React Query.
- Resolution order: override > rollout_percent (deterministic hash of user_id) > enabled.

UI:
- /admin/flags: list, toggle, edit rollout %, per-user overrides.
- Only users with the 'admin' role can mutate (use has_role in RLS).

Anyone can SELECT flags. Only admins can INSERT/UPDATE/DELETE.
#feature-flags#rollout
Dashboards

KPI Dashboard Shell

Старт

Clean dashboard shell with sidebar, topbar, and 4 KPI tiles.

Build a /dashboard route.

Layout:
- Left sidebar (collapsible on md-): logo, primary nav (Home, Reports, Customers, Settings), user menu at the bottom.
- Topbar: page title, search command (Cmd+K), notifications bell, profile avatar.
- Main area: 4 KPI tiles in a responsive grid (1/2/4 cols), each with label, big number, delta vs previous period (green/red), tiny sparkline.
- Below: 2-column area for a line chart (revenue) and a table (latest signups).

Rules:
- Use recharts for charts, lucide-react for icons.
- All numbers wired to placeholder data, structured so swapping in real queries is one prop change.
- Skeleton states for every async block.
#dashboard#kpi#metrics
Dashboards

Power Data Table

Средний

Sortable, filterable, paginated table with row selection and bulk actions.

Implement a data table for the 'customers' resource using @tanstack/react-table.

Features:
- Columns: avatar+name, email, plan, MRR, signed up, status, actions.
- Sortable headers, multi-sort with shift-click.
- Per-column filters (text, select, date range).
- Global search.
- Server-side pagination, page size 25/50/100.
- Row selection with checkbox column.
- Bulk actions toolbar (appears when rows are selected): Export CSV, Tag, Delete.
- Column visibility toggle in a dropdown.
- Persist sort + filters + page size in URL search params.

Empty state and loading skeleton included.
#table#tanstack#filters
Dashboards

Analytics Charts Page

Средний

A polished /analytics page with a date range picker and 6 charts.

Build /analytics.

- Date range picker (Last 7d, 30d, 90d, custom) at the top, persisted in URL.
- 6 charts using recharts:
  1. Line: MRR over time.
  2. Stacked area: signups by source.
  3. Bar: revenue by plan.
  4. Funnel: visitor -> signup -> activated -> paid.
  5. Heatmap: events by hour of day x day of week.
  6. Pie: feature adoption.
- Each chart in a Card with a title, optional info tooltip, "Export PNG" menu.
- Loading skeleton per chart (do not block the whole page).
- All colors via CSS tokens, dark mode aware.
#charts#analytics#recharts
Dashboards

Admin User Impersonation

Продвинутый

Let admins safely view the app as another user for support.

Add a controlled impersonation feature for admins.

- /admin/users table with an "Impersonate" action (only visible if has_role(current_user, 'admin')).
- Server side: an edge function 'impersonate' that, after checking the caller is an admin, mints a short-lived (15 min) JWT for the target user using the service role key and returns it.
- Client stores the original session, swaps to the impersonation session, shows a sticky red banner: "Impersonating {{email}}, Stop".
- "Stop" restores the original session.

Audit: every impersonation start/stop logged to audit_logs with actor, target, ip, ua.
#admin#impersonation#support
Dashboards

Settings Page Pattern

Старт

Consistent /settings layout with sub-pages and dirty-state save bar.

Implement /settings.

- Left sub-nav: Profile, Account, Notifications, Billing, API Keys, Team, Danger zone.
- Each section is a separate route under /settings/*.
- Forms use react-hook-form + zod.
- Bottom-fixed save bar appears only when the form is dirty: "You have unsaved changes" + Discard + Save.
- Optimistic update with toast on success, revert on error.
- "Danger zone" page has destructive actions (delete account, leave workspace) gated by typed confirmation.

All copy bilingual via i18n.
#settings#forms#pattern
Dashboards

Cmd+K Command Palette

Средний

Linear-style command palette for navigation and quick actions.

Add a Cmd/Ctrl+K command palette using shadcn's Command component.

Sections:
- Recent (last 5 visited pages).
- Navigation (all main routes).
- Actions (Create new project, Invite teammate, Toggle theme, Sign out).
- Help (Docs, Keyboard shortcuts, Contact support).
- Search results from the API as the user types (debounced 200ms).

Behavior:
- Opens with Cmd/Ctrl+K from anywhere.
- Arrow keys navigate, Enter selects, Esc closes.
- Highlight matched substring in results.
- Empty state: "No results. Try a different keyword."
#cmdk#search#ux
Dashboards

Notifications Center

Средний

In-app notifications with unread count and realtime updates.

Build an in-app notification system.

Schema:
- 'notifications' (id, user_id, kind text, title, body, link, read_at nullable, created_at).
- RLS: user reads only their own, marks own read.

UI:
- Bell icon in topbar with unread badge.
- Popover: tabs All / Unread, list items with icon by kind, time-ago, click to navigate to link and mark read.
- "Mark all read" action.
- /notifications full page for the full history.

Realtime:
- Subscribe to inserts on notifications filtered by user_id; new ones animate in and play a quiet sound (if permission).
#notifications#realtime
Dashboards

CSV Import / Export

Средний

Let users bulk-import a resource from a CSV with validation.

Add CSV import and export for the {{RESOURCE}} table.

Export:
- "Export CSV" button on the list view. Generates the CSV client-side from the current filter set. Filename includes ISO date.

Import:
- "Import CSV" opens a wizard:
  1. Upload step (drag + drop, max 5MB).
  2. Column mapping step (auto-detect by header, allow override).
  3. Validation step (zod schema per row; show errors inline; let user fix or skip).
  4. Confirm step (X valid rows, Y skipped).
- Insert in batches of 500 via an edge function using the service role.
- Show a progress bar; final toast with counts.

Template: provide a "Download template CSV" link.
#csv#import#export
Auth & Database

Magic Link Passwordless Login

Старт

Replace passwords with email magic links.

Switch auth to magic-link-only.

- /login page: single email input + "Send magic link" button. Calls signInWithOtp with emailRedirectTo set to window.location.origin + '/auth/callback'.
- /auth/callback handles the session exchange and redirects to '/' (or the stored 'next' param).
- After submit, show a "Check your inbox" state with a "Resend" link (60s cooldown).
- Disable password signup in config.

Make sure onAuthStateChange is wired BEFORE getSession in the auth provider.
#auth#magic-link
Auth & Database

Google OAuth Setup

Старт

Add a working Google sign-in button.

Add Google sign-in.

- Configure the Google provider in Lovable Cloud auth settings.
- Add a "Continue with Google" button to /login and /signup, above the email form, with the Google logo.
- redirectTo must be a full same-origin URL: window.location.origin + '/auth/callback'. Never point it at a protected route.
- On /auth/callback, exchange the code, then read a stored 'next' path from sessionStorage and navigate there (default '/').
- Handle the "Unsupported provider" error with a clear message instructing the admin to enable Google.
#oauth#google
Auth & Database

Soft Delete Pattern

Средний

Add reversible deletion with a 30-day recovery window.

Add soft delete to the {{TABLE}} table.

- Add 'deleted_at' timestamptz column.
- Update all SELECT policies to add 'AND deleted_at IS NULL'.
- A 'soft_delete_{{table}}' RPC sets deleted_at = now() with a permission check via RLS.
- A 'restore_{{table}}' RPC clears deleted_at, only allowed within 30 days.
- A daily cron job hard-deletes rows where deleted_at < now() - interval '30 days'.

UI:
- "Trash" route under /settings/trash shows the user's soft-deleted items with "Restore" and "Delete permanently" actions.
#soft-delete#migrations
Auth & Database

Full-Text Search with RLS

Продвинутый

Postgres full-text search that respects row-level security.

Add full-text search to the {{TABLE}} table.

- Add a generated 'search_vector' tsvector column from {{COLUMNS}}.
- Create a GIN index on search_vector.
- A SECURITY INVOKER function search_{{table}}(_q text) returns rows where search_vector @@ websearch_to_tsquery('simple', _q). SECURITY INVOKER so RLS still applies.
- Client uses .rpc('search_{{table}}', { _q: query }) with debounce(200ms).
- UI: search input with highlighted matches in results.

Do NOT use SECURITY DEFINER here — that would bypass RLS and leak data.
#search#fts#rls
Auth & Database

Two-Factor Authentication (TOTP)

Продвинутый

Enable optional TOTP-based 2FA for accounts.

Add optional TOTP 2FA.

- /account/security shows 2FA status and an "Enable 2FA" button.
- Enable flow: call auth.mfa.enroll({ factorType: 'totp' }), show the QR code + secret, ask for a 6-digit code, call auth.mfa.challenge + verify.
- After enabling, show 8 recovery codes once and force the user to confirm they saved them.
- Disable flow requires a current TOTP code.

Sign-in:
- After successful password sign-in, check assurance level. If aal1 and the user has TOTP, route to /auth/2fa to enter a code before granting full access.

Persist a 'mfa_enabled' boolean on profiles for fast UI checks (kept in sync via trigger).
#2fa#totp#security
Auth & Database

Safe Data Migration

Продвинутый

Migrate a column to a new shape without downtime.

Plan and execute a safe migration: rename column {{OLD}} to {{NEW}} on {{TABLE}} with a type change from {{OLD_TYPE}} to {{NEW_TYPE}}.

Steps:
1. Add the new column nullable with a default if appropriate.
2. Backfill in batches of 1000 using a single SQL statement with a CTE, not a row loop.
3. Update application code to write to BOTH columns.
4. Verify counts match (SELECT count(*) WHERE new IS NULL AND old IS NOT NULL).
5. Switch reads to the new column.
6. Stop writing the old column.
7. Drop the old column in a follow-up migration after one safe window.

Include a rollback note for each step. Wrap each step in its own migration file with a clear comment.
#migration#data#safe
Auth & Database

Generic Audit Trigger

Продвинутый

Automatically record row history for any table.

Create a generic audit trigger.

- Table 'row_history' (id, table_name, row_id, op text, old_data jsonb, new_data jsonb, actor_id, at).
- Trigger function 'log_row_change()' (SECURITY DEFINER, set search_path = public): on INSERT, UPDATE, DELETE inserts a row_history record with auth.uid() as actor.
- Helper: attach_audit('{{table}}') that creates AFTER INSERT/UPDATE/DELETE triggers on the table.

RLS on row_history: SELECT only for admins via has_role. No anon, no public grants.
#trigger#audit#history
Auth & Database

RLS Policy Cheatsheet for a New Table

Средний

Default-safe RLS policies whenever you add a new user-owned table.

For the new table public.{{TABLE}} which is user-owned via user_id:

1. CREATE TABLE with user_id uuid not null references auth.users(id) on delete cascade, created_at timestamptz default now().
2. GRANT SELECT, INSERT, UPDATE, DELETE ON public.{{TABLE}} TO authenticated; GRANT ALL ON public.{{TABLE}} TO service_role. Do NOT grant to anon unless a policy explicitly allows public read.
3. ALTER TABLE public.{{TABLE}} ENABLE ROW LEVEL SECURITY.
4. Policies:
   - "owner_select": FOR SELECT TO authenticated USING (user_id = auth.uid())
   - "owner_insert": FOR INSERT TO authenticated WITH CHECK (user_id = auth.uid())
   - "owner_update": FOR UPDATE TO authenticated USING (user_id = auth.uid()) WITH CHECK (user_id = auth.uid())
   - "owner_delete": FOR DELETE TO authenticated USING (user_id = auth.uid())

Write the full SQL.

Use this every time. Forgetting GRANT is the #1 source of 401s.

#rls#policies#patterns
Design System

Audit & Remove Hardcoded Colors

Средний

Sweep the codebase for hardcoded color utilities and replace them with semantic tokens.

Audit the project for hardcoded Tailwind color utilities (text-white, bg-black, bg-[#...], text-[#...]) and hex literals in JSX.

For each finding:
1. List the file and line.
2. Propose the semantic token replacement (bg-background, text-foreground, text-muted-foreground, border-border, etc.).
3. Apply the change.

Then make sure all needed tokens exist in index.css and tailwind.config.ts. Do not introduce new hex values inside components, only in index.css.
#tokens#refactor#audit
Design System

Dark Mode Pass

Средний

Make the entire app look intentional in dark mode.

Add a polished dark mode.

- Install next-themes (or equivalent) and wrap the app in a ThemeProvider, default 'system'.
- Add a toggle in the navbar (sun/moon/system icons).
- Audit every page in dark mode and fix:
  - Hardcoded white/black backgrounds.
  - Low-contrast text.
  - Borders that disappear.
  - Images with white backgrounds that look harsh.
- Update --background, --foreground, --card, --muted, --border, --accent tokens in :root and .dark in index.css.
- Take screenshots before/after and list any unresolved low-contrast spots.
#dark-mode#theme
Design System

Vertical Rhythm & Spacing System

Старт

Replace ad-hoc margins with a consistent 4px/8px scale.

Establish a strict spacing scale.

- Allowed gaps and margins between sections: 16, 24, 32, 48, 64, 96, 128 px (Tailwind: 4, 6, 8, 12, 16, 24, 32).
- Audit hero, content blocks, cards, and footer. Replace any one-off values like m-[18px] or my-7 with the nearest allowed value.
- Set a default vertical rhythm: prose paragraphs use leading-relaxed, sections use py-16 md:py-24.
- Document the scale in a /docs/spacing.md file (a comment block in code is also fine).
#spacing#rhythm#layout
Design System

Typography Scale

Старт

Lock down a 6-step type scale used everywhere.

Define a 6-step type scale and apply it globally.

Scale (font-size / line-height / weight):
- Display: 60/64/500 (clamp 40-72px).
- H1: 40/48/500.
- H2: 30/38/500.
- H3: 22/30/500.
- Body: 16/26/400.
- Small: 13/20/400.

Fonts:
- Headings: Inter Display.
- Accent words inside headings: Playfair Display, italic.
- Body: Inter.

Apply via Tailwind utilities (text-display, text-h1, etc.) defined in tailwind.config.ts. Replace ad-hoc font sizes across the codebase.
#typography#scale#fonts
Design System

Motion Language

Средний

Pick 3 motion patterns and use them consistently.

Define and apply a restrained motion language with framer-motion.

3 patterns only:
1. fadeUp: opacity 0 -> 1, y 12 -> 0, duration 0.5, viewport once.
2. fadeIn: opacity 0 -> 1, duration 0.4.
3. press: whileTap scale 0.98, transition 0.1.

- Wrap them as reusable components/variants in src/lib/motion.ts.
- Apply fadeUp to every section header and card on scroll into view.
- Apply press to all primary buttons.
- Remove parallax, slide-in-from-side, bounces, springs, and anything decorative.
#motion#animation#framer
Design System

Single Icon Set Discipline

Старт

Audit and standardize icon usage to lucide-react.

Standardize on lucide-react.

- Find any non-lucide icons (heroicons, react-icons, emoji used as icons, inline SVGs) and replace them.
- Default size: 16 for inline, 20 for buttons, 24 for navigation.
- Default stroke width: 1.75.
- Always pair icons with a text label or aria-label.
- No two icons in the app should represent the same meaning differently.

Output the list of replacements made.
#icons#consistency
Design System

Refactor to shadcn Primitives

Средний

Replace bespoke UI with shadcn primitives.

Audit for places that reimplement shadcn primitives by hand:
- Custom dropdowns → DropdownMenu.
- Custom modals → Dialog or Sheet.
- Custom tooltips → Tooltip.
- Custom selects → Select.
- Custom checkboxes/switches → Checkbox / Switch.
- Custom toasts → Sonner.

For each, refactor to the shadcn component, preserving styling via semantic tokens (no hardcoded colors).
#shadcn#refactor
Design System

Full Responsive Pass

Средний

Make every page look intentional from 360px to 1920px.

Do a responsive audit and fix issues.

Breakpoints to verify: 360, 414, 768, 1024, 1280, 1536, 1920.

For each main route, check:
- No horizontal scroll.
- Tap targets >= 44px on mobile.
- Text doesn't overflow containers.
- Images scale without cropping subjects.
- Navigation collapses to a sheet on < md.
- Modals fit on small screens (max-h-[90vh] + scroll).
- Tables become cards or horizontal scroll on mobile.

Output a list of remaining issues you couldn't fix automatically.
#responsive#mobile
AI Features

AI Text Summarizer

Старт

Paste long text, get a structured summary.

Build a /tools/summarize page.

- Textarea for input (10k char max), token counter below.
- Options: length (Short / Medium / Long), style (Bullets / Paragraph / Tweet).
- "Summarize" button calls an edge function that calls the Lovable AI Gateway with model 'google/gemini-2.5-flash', system prompt instructing the requested length and style.
- Stream the response into an output panel.
- "Copy", "Regenerate", "Download .md" actions.

No API key on the client. Use LOVABLE_API_KEY in the edge function.
#ai#summarize#gemini
AI Features

AI Chat with Conversation Memory

Средний

Multi-turn chat where past messages persist across sessions.

Build a chat interface with persistent conversation memory.

Schema:
- 'conversations' (id, user_id, title, created_at, updated_at).
- 'messages' (id, conversation_id, role 'user'|'assistant'|'system', content, created_at).
- RLS: user owns their conversations and messages.

UI:
- Left rail: list of conversations, "New chat" button, search.
- Main: message list with markdown rendering, code blocks with copy button, streaming assistant cursor.
- Input with Cmd+Enter to send.

Edge function 'chat':
- Loads the last 20 messages of the conversation, sends to Lovable AI Gateway (google/gemini-2.5-flash) with streaming, persists user + assistant messages.
- Auto-generates a conversation title after the first turn.
#chat#ai#memory
AI Features

AI Image Generation

Средний

User-facing image generator with prompt history.

Build /tools/imagine.

- Prompt input + negative prompt input.
- Size selector (square, portrait, landscape).
- "Generate" button calls an edge function that calls the Lovable AI Gateway with model 'google/gemini-2.5-flash-image' (Nano Banana) and returns base64.
- Save the resulting image to Lovable Cloud storage bucket 'user-images' and create a row in 'generations' (user_id, prompt, image_url, created_at).
- Gallery grid below the prompt showing the user's last 24 generations with "Download" and "Use as variation" actions.

RLS: user only sees their own generations.
#image#ai#nano-banana
AI Features

AI Form Field Validator

Средний

Use AI to validate free-text form fields with helpful feedback.

Add AI-assisted validation to the {{FIELD}} text field on the {{FORM}} form.

- On blur (debounced 800ms), call an edge function 'validate-field' with the field name, value, and validation intent (e.g. "should be a clear, specific bug report").
- The edge function calls Gemini Flash with a system prompt asking it to return JSON: { valid: bool, suggestion?: string, score: 1-5 }.
- UI: show a subtle inline hint under the field. If invalid, show the suggestion as a clickable chip that, on click, replaces the field value.

Do not block submission on AI validation. It's advisory only.
#forms#validation#ai
AI Features

AI Data Extraction from Text

Продвинутый

Paste an email/PDF/snippet, get structured fields.

Build a /tools/extract page.

- Input: large textarea or file upload (PDF parsed via pdf-parse in an edge function).
- Schema selector: Invoice, Receipt, Business Card, Job Posting, Custom (JSON schema).
- Edge function calls Gemini Flash with the input and a system prompt: "Extract the fields per this JSON schema. Return ONLY valid JSON. If a field is missing, use null."
- Parse, validate against the schema with zod, render as an editable form.
- "Export JSON" and "Export CSV" actions.

Handle malformed JSON gracefully: retry once with a stricter instruction, then surface the raw response.
#extraction#structured#ai
AI Features

RAG Over User Documents

Продвинутый

Let users upload docs and chat with their content.

Build a RAG pipeline.

Schema:
- Enable the pgvector extension.
- 'documents' (id, user_id, name, source_url, created_at).
- 'doc_chunks' (id, document_id, content text, embedding vector(768), token_count).

Upload pipeline (edge function):
- Accept PDF/MD/TXT. Chunk to ~800 tokens with 100 overlap.
- Generate embeddings via Lovable AI Gateway (model 'google/text-embedding-004' or current).
- Insert chunks with embeddings.

Query (edge function):
- Embed the question. Run a similarity search (ivfflat index on embedding).
- Pass top-8 chunks to Gemini Flash with a system prompt requiring it to cite chunk ids.

UI:
- /docs upload + chat. Show citations as superscript links that scroll to the chunk.
#rag#embeddings#search
AI Features

AI Content Moderation

Средний

Block harmful user-generated content before it's published.

Add AI moderation for user-generated text in the {{RESOURCE}} flow.

- Edge function 'moderate' takes text and returns { allowed: bool, categories: string[], reason?: string }.
- Calls Gemini Flash with a strict system prompt classifying into: sexual, hate, harassment, self-harm, violence, illegal, spam.
- Threshold: any category at "high" confidence -> block.
- Borderline -> flag for manual review (insert into 'moderation_queue' with the content + categories).

Server: call moderate() before persisting any user-submitted text. If blocked, return a 422 with a generic message ("This content violates our guidelines"). Never echo the moderation reason back to the user verbatim.
#moderation#safety#ai
AI Features

AI Translation Pipeline

Средний

Translate articles into another language with brand-voice preservation.

Add an admin-only "Translate to {{LANG}}" action on the article editor.

- Edge function 'translate-article' takes article_id and target lang.
- Loads title, description, body. Calls Gemini Flash with a system prompt:
  "Translate to {{LANG}}. Preserve markdown. Preserve code blocks verbatim. Preserve proper nouns. No em-dashes, no emoji, no AI filler phrases. Match the source's tone."
- Saves the translated copy to a 'translations' table keyed by (article_id, lang).
- UI: language switcher on the article page reads from translations when available.

Run the project's article sanitization on the output before saving.
#translation#i18n#ai
AI Features

AI Search Suggestions

Средний

Show smart query reformulations when a search returns 0 results.

Improve the search UX:

- When a search returns 0 results, call an edge function 'suggest-queries' with the original query and the list of available content categories.
- The function returns 3 reformulated queries via Gemini Flash.
- Render them as clickable chips below the empty state: "Try: …".
- Cache responses for 24h keyed by the lowercased query.
#search#ai#autocomplete
AI Features

AI Batch Tagger

Продвинутый

Auto-tag existing rows using AI in the background.

Auto-tag rows in the {{TABLE}} table.

- Add 'tags text[]' column if missing.
- Edge function 'tag-batch':
  - Selects rows where tags IS NULL, limit 50.
  - For each, calls Gemini Flash with the row's text content and a fixed taxonomy of {{TAGS}}.
  - Parses JSON {tags: [...]} and updates the row.
- Schedule via pg_cron every 10 minutes until backlog == 0.

Idempotency: never re-tag a row that already has tags.
#tagging#classification#ai
AI Features

Voice Transcription

Средний

Record audio in the browser, transcribe via AI.

Build a /tools/transcribe page.

- Record button using the MediaRecorder API (webm/opus, mono).
- Live waveform during recording, max 10 minutes.
- On stop, upload to Lovable Cloud storage and call an edge function 'transcribe' that sends the audio to a speech-to-text model on the Lovable AI Gateway.
- Render the transcript with timestamps (every 15s a tiny gray timecode chip).
- Actions: copy, download .txt, "Generate summary" (chains to the summarizer).
#voice#transcription#audio
AI Features

Internal Prompt Tester

Продвинутый

Internal tool to A/B test prompt variations against a fixed dataset.

Build an /admin/prompt-lab internal page.

- "Datasets" tab: upload a CSV of test cases (input, expected).
- "Prompts" tab: a code editor for a system prompt template with {{variables}}.
- "Run" button: for each test case, call Gemini Flash with the rendered prompt, store output.
- Side-by-side compare two prompt versions over the same dataset, scored by:
  - Exact match.
  - Embedding cosine similarity to expected.
  - Optional LLM-as-judge with a rubric.

Save runs to a 'prompt_runs' table with full metadata for later review.
#prompts#evals#internal
Bug Fixes

Debug the White Screen

Старт

App renders blank, get to the root cause fast.

The app loads to a blank white screen. Do this in order:

1. Open the browser console. Quote the first error verbatim.
2. Open the Network tab. List any 4xx/5xx responses, especially for the JS bundle and Supabase calls.
3. Check src/App.tsx for a top-level throw or a provider with a missing prop.
4. Check src/main.tsx and the router setup.
5. Look for a recent change to an Auth provider that calls getSession before subscribing to onAuthStateChange, fix the order.
6. Look for a useEffect with a thrown error and no error boundary.

Apply the smallest fix that restores rendering. Add an ErrorBoundary at the app root so the next white screen shows a friendly fallback instead.
#bug#blank-screen#debug
Bug Fixes

Fix Flaky Auth Session

Средний

User gets logged out on refresh or session is undefined intermittently.

Fix the auth provider.

Required pattern:
1. In the provider mount effect, FIRST subscribe to supabase.auth.onAuthStateChange((event, session) => setSession(session)).
2. THEN call supabase.auth.getSession() and set the initial session.
3. Return the unsubscribe in the cleanup.

If you reverse the order you get a race where the initial session overwrites a fresh one from a token refresh.

Also:
- Do not make supabase calls inside the onAuthStateChange callback synchronously, wrap them in setTimeout(() => ..., 0) to avoid deadlocks.
- Persist session in localStorage (default) and do NOT clear it on tab close.
#auth#session#race
Bug Fixes

Debug 401/Permission Denied

Средний

A Supabase query returns 401 or 'permission denied'.

A query to public.{{TABLE}} returns 401 or 'permission denied for table'. Diagnose in order:

1. Are GRANTs in place? Run:
   GRANT SELECT, INSERT, UPDATE, DELETE ON public.{{TABLE}} TO authenticated;
   GRANT ALL ON public.{{TABLE}} TO service_role;
   (Add anon only if the policy allows public read.)
2. Is RLS enabled? Run: ALTER TABLE public.{{TABLE}} ENABLE ROW LEVEL SECURITY.
3. Is there a matching policy for the operation and the calling role?
4. Does the policy expression succeed for this user? Test:
   SELECT * FROM public.{{TABLE}} WHERE ...; logged in as the user via supabase.read_query.
5. Is the client actually sending the JWT? Check Authorization header in Network.

Apply the missing GRANT or policy. Never disable RLS.
#rls#401#permissions
Bug Fixes

Hydration Mismatch Warning

Средний

Console shows hydration mismatch errors.

Find and fix the hydration mismatch.

Common causes:
- Using Date.now(), Math.random(), or new Date().toLocaleString() during render.
- Reading from localStorage/window during the initial render.
- Conditional rendering based on theme without a mounted-guard.

Fix pattern:
- Wrap client-only content in a 'mounted' check: useEffect(() => setMounted(true), []); if (!mounted) return null.
- For theme-dependent UI, render a placeholder until mounted.
- Replace Date.now() with stable timestamps passed via props.
#hydration#ssr#warning
Bug Fixes

Infinite Re-render Loop

Средний

"Maximum update depth exceeded", find the offender.

Diagnose the infinite render loop.

Likely causes:
1. setState called unconditionally in render.
2. useEffect with a non-memoized object/array dependency that's recreated every render.
3. A child component calling a parent setter on mount with no condition.
4. A useEffect whose body sets state that the same effect depends on.

Fix:
- Move object/array deps inside the effect or memoize with useMemo.
- Add a real condition before setState in effects.
- Use useCallback for handlers passed to memoized children.
- If a derived value is computed in state, replace with useMemo and drop the state.
#react#performance#loop
Bug Fixes

Stale React Query Cache

Старт

UI doesn't update after a mutation succeeds.

After a successful mutation, the list view doesn't reflect the change. Fix it:

- In the mutation's onSuccess: queryClient.invalidateQueries({ queryKey: [{{KEY}}] }).
- For optimistic updates, also implement onMutate (snapshot + setQueryData) and onError (rollback).
- Make sure the query key in invalidateQueries matches the query key exactly (same array shape).
- If the data is in a paginated/infinite query, invalidate with exact: false.
#react-query#cache#mutation
Bug Fixes

CORS Error from Edge Function

Старт

Browser blocks edge function call with CORS error.

Fix CORS on the {{FUNCTION}} edge function.

At the top of the function:

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
  "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
};

if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });

Then include corsHeaders in EVERY Response, including error responses. Forgetting them on errors is the most common subtle CORS bug.
#cors#edge-function
Bug Fixes

Fix TypeScript Build Errors

Средний

Build fails on types, get to green without 'any' carpet-bombing.

The build is failing on TypeScript errors. For each error:

1. Quote the exact message and file:line.
2. Diagnose the root cause (missing prop, wrong return type, narrowed-away null, etc.).
3. Apply the minimum-impact fix:
   - Add the missing prop or default.
   - Narrow with a guard, not 'as'.
   - Add an explicit return type on the function.
   - Update the consumer to match a corrected signature.

Forbidden: blanket 'any', '@ts-ignore', '@ts-expect-error' without a TODO comment and a linked issue. Forbidden: changing tsconfig strictness.
#typescript#build
SEO

Sitemap & robots.txt

Старт

Generate a correct sitemap and robots.txt for a multi-route app.

Generate /public/sitemap.xml and /public/robots.txt.

sitemap.xml:
- Include all public routes.
- Include both EN and RU URLs as separate entries.
- Add <xhtml:link rel="alternate" hreflang="en" /> and hreflang="ru" cross-references per URL.
- lastmod = today's ISO date.
- Exclude /admin, /auth, /account, /api, /404.

robots.txt:
- Allow all by default.
- Disallow /admin, /auth, /account, /api.
- Sitemap: https://{{DOMAIN}}/sitemap.xml.

Also expose a /sitemap.xml route via an edge function that returns the file with Content-Type: application/xml, in case CDN doesn't serve the static asset correctly.
#sitemap#robots#seo
SEO

Per-Route Meta Tags

Старт

Unique title, description, OG image per route.

Ensure every public route sets unique meta tags.

Use the project's useSEO hook with:
- title: under 60 chars, includes the primary keyword, ends with " | {{BRAND}}".
- description: under 158 chars, action-oriented, includes the keyword once.
- canonical: absolute URL of the current page.
- og:image: 1200x630, route-specific (default to the hero image, fallback to a brand default).
- hreflang for EN and RU variants.
- jsonLd appropriate to the page (WebSite on /, Article on /blog/:slug, FAQPage on /faq, BreadcrumbList where applicable).

Audit every route in src/pages/* and fix any missing or duplicated tags.
#meta#og#seo
SEO

Article JSON-LD

Средний

Rich-result-eligible JSON-LD on every article.

Add JSON-LD schema to every /blog/:slug page.

Required fields:
- @context, @type: "Article".
- headline (= page H1, under 110 chars).
- description.
- image: array of absolute URLs.
- datePublished, dateModified (ISO 8601 with offset).
- author: { @type: "Person", name, url }.
- publisher: { @type: "Organization", name, logo: { @type: "ImageObject", url } }.
- mainEntityOfPage: { @type: "WebPage", @id: canonical }.
- inLanguage: "en" or "ru".

If the article has a FAQ block, add a second JSON-LD script of @type "FAQPage" with the questions and answers.

Validate against schema.org and Google's rich-results test mentally before finishing.
#jsonld#schema#article
SEO

Internal Linking Pass

Средний

Add contextual internal links across the article corpus.

Do an internal linking pass across the blog.

For each article:
1. Identify 3-5 other articles that are topically related (same cluster).
2. Inside the body, replace plain keyword mentions with links to those related articles: natural anchors, no "click here", no stuffing.
3. At the bottom, render the existing RelatedInCluster component with 3-4 manual picks (not just by date).
4. From hub pages (/blog, /comparisons, /prompts) ensure every article is linked at least once.

Report orphaned articles (no incoming internal links).
#linking#topical-authority
SEO

Fix Core Web Vitals

Средний

Improve LCP, CLS, INP on the marketing pages.

Fix Core Web Vitals on / and /blog.

LCP (target < 2.5s):
- Identify the LCP element. If it's an image, add fetchpriority="high", preload it, serve AVIF/WebP, set explicit width/height.
- Inline critical CSS for above-the-fold.

CLS (target < 0.1):
- Reserve space for every image, embed, and async-loaded block (aspect-ratio or min-height).
- Avoid late-injected banners/cookies that push content.

INP (target < 200ms):
- Defer non-critical JS.
- Avoid long synchronous handlers; chunk with requestIdleCallback if needed.
- Replace heavy hover effects with cheaper transforms.

Measure with Lighthouse before and after, report the deltas.
#performance#cwv#lighthouse
SEO

SEO Content Brief Generator

Средний

Generate a writer-ready brief for a target keyword.

Produce a content brief for the target keyword: "{{KEYWORD}}".

Output a markdown brief with:
1. Primary keyword + 5 semantic variants.
2. Search intent (informational / commercial / transactional) and a 1-sentence justification.
3. Suggested H1 (under 60 chars) and meta description (under 158).
4. Outline: H2/H3 structure with bullet points per section, total target length in words.
5. 5 questions to answer (People Also Ask flavor).
6. 5 internal links from the existing site to weave in (cite slugs).
7. 3 external authoritative sources to cite.
8. 3 image ideas with alt-text suggestions.

Do not write the article, just the brief.
#brief#content#research
SEO

Image Optimization Pass

Старт

Make every image lighter and accessible.

Audit images across the site:

- Convert hero and content images to AVIF with WebP fallback, sized at 800w and 1600w (srcset).
- Add explicit width and height to every <img>.
- Add descriptive alt text (specific, not "image of …"). Decorative images: alt="".
- Add loading="lazy" to images below the fold, fetchpriority="high" to the LCP image.
- Replace any image > 500KB.

Output the list of files changed with before/after byte sizes where possible.
#images#performance#alt
SEO

Breadcrumbs with Schema

Старт

Add accessible breadcrumbs with JSON-LD on all nested pages.

Add breadcrumbs to every nested route (anything below the root).

- Use the existing Breadcrumbs component or shadcn Breadcrumb.
- Visible breadcrumbs: Home / Section / Page title (truncate long titles to 60 chars).
- Add a BreadcrumbList JSON-LD via the useSEO hook on each page.
- Style: muted, small, separated by a chevron icon, last item not a link.
- Hide on / (root) and /auth.
#breadcrumbs#schema#navigation
Mobile

Mobile Nav Sheet

Старт

Replace squished desktop nav with a proper mobile sheet.

Implement a mobile navigation drawer.

- Below md breakpoint: hide desktop nav, show a hamburger button (44x44px tap target).
- On tap: open a shadcn Sheet from the right covering 85% of the viewport width.
- Inside: logo at top, primary links (large, 18px), secondary links (14px), language toggle, CTA at the bottom pinned with safe-area-inset-bottom.
- Close on link click, on Esc, on backdrop click.
- Trap focus inside while open.
#mobile#nav#sheet
Mobile

Mobile Bottom Tab Bar

Средний

Native-feeling bottom tabs for an app-style mobile experience.

Add a mobile-only bottom tab bar to the authenticated app.

- 4-5 tabs max, each with an icon and a short label.
- Active tab indicator: icon fills + label color changes (no underline bars).
- Sticky to the bottom, respects safe-area-inset-bottom.
- Hidden on desktop (md+).
- Hides on scroll-down, reappears on scroll-up.
- Hidden when a modal/sheet is open.

Use lucide icons, 24px stroke 1.75.
#mobile#tabs#navigation
Mobile

Pull-to-Refresh

Средний

Native-style pull-to-refresh on mobile list views.

Add pull-to-refresh to the {{LIST_ROUTE}} page on mobile.

- Trigger when at scrollTop = 0 and the user drags > 70px.
- Show a circular spinner that scales/rotates with drag distance.
- On release past threshold, call the page's refetch (React Query) and resolve the spinner.
- Add a subtle haptic on trigger (navigator.vibrate(10)).
- Disabled on desktop (no touch).
#mobile#ux#refresh
Mobile

Mobile Form Keyboard UX

Старт

Make mobile forms feel native.

Polish all forms for mobile keyboards.

- Set correct inputMode and autoComplete on every input:
  - email -> inputMode="email" autoComplete="email"
  - phone -> inputMode="tel"
  - numbers -> inputMode="numeric"
  - search -> inputMode="search" enterKeyHint="search"
  - one-time codes -> autoComplete="one-time-code"
- Set enterKeyHint per field role (next, done, go, send).
- Scroll the active field into view when keyboard opens.
- Submit on enterKeyHint='go' presses in single-field forms.
#mobile#forms#keyboard
Mobile

Safe Areas & Notch Handling

Старт

Stop sticky headers and tab bars from sitting under the notch/home bar.

Fix safe-area handling for iOS.

- Add to index.html viewport meta: viewport-fit=cover.
- Sticky topbar: padding-top: env(safe-area-inset-top, 0).
- Bottom tab bar / sticky CTA: padding-bottom: env(safe-area-inset-bottom, 0).
- Side gutters in landscape: padding-left/right: env(safe-area-inset-left/right, 0).
- Add Tailwind utilities pt-safe, pb-safe, px-safe via a small plugin in tailwind.config.ts.
#safe-area#ios#notch
Mobile

Mobile Image Gallery

Средний

Swipeable, pinch-to-zoom image gallery on mobile.

Add a mobile image gallery viewer.

- Tapping any image opens a fullscreen overlay.
- Horizontal swipe between images (use embla-carousel).
- Pinch to zoom (use a small wrapper around CSS transforms with touch events, or react-zoom-pan-pinch).
- Double-tap zooms to 2x at the tap point, double-tap again to fit.
- Swipe down > 80px closes.
- Page indicator (3 / 12) at the top, close button top-right, share button bottom-right.

Lock body scroll while open.
#mobile#gallery#swipe
Content & Writing

Blog Outline from a Keyword

Старт

Skeleton for a 1500-word article around a target keyword.

Write a blog outline for the keyword "{{KEYWORD}}".

Output:
1. Working title (under 60 chars, includes the keyword).
2. 2-sentence hook (the angle, why now).
3. H2/H3 outline with 6-8 H2 sections, each with 2-4 bullet sub-points.
4. 5 stats or examples to research and include.
5. Conclusion section with one specific call to action.
6. Suggested internal links (3 from the project's existing articles).

No filler, no AI cliches, no em-dashes.
#outline#blog#seo
Content & Writing

Customer Case Study Template

Средний

Standard structure for a credible customer case study.

Draft a customer case study using this structure:

1. One-line summary with the headline metric ("How {{Customer}} cut churn 38% in 90 days").
2. About the customer (industry, size, who).
3. The problem (specific, with a number or a quote).
4. Why they evaluated {{PRODUCT}}.
5. Implementation (steps, timeline, who was involved).
6. Results (3 metrics, before/after, with the timeframe).
7. Quote from the customer (one paragraph max).
8. What's next.

Tone: matter-of-fact, no superlatives, no marketing puffery. Numbers do the work.
#case-study#customer#story
Content & Writing

Release Notes Writer

Старт

Turn a list of PR titles into readable release notes.

Convert this list of changes into release notes for {{VERSION}}:

{{CHANGES}}

Format:
- Group by: New, Improved, Fixed.
- Each line: a benefit-led sentence (not a PR title), max 16 words, present tense.
- Use bullet lists, no nested bullets.
- Add a one-paragraph "Highlights" intro at the top calling out the 1-2 most important items.
- No emoji, no exclamation marks, no "we are excited to announce".
#release-notes#changelog
Content & Writing

Documentation Page Skeleton

Средний

Standard structure for a feature docs page.

Write a documentation page for the {{FEATURE}}.

Sections in order:
1. What it is, one paragraph.
2. When to use it, 3 bullet scenarios.
3. Quickstart, copy-pasteable code block that works in under 60 seconds.
4. How it works, 2 paragraphs of conceptual model + a small diagram (ASCII).
5. API reference: props/params table with type, default, description.
6. Common patterns, 3 examples with code.
7. Limits and gotchas, bullet list of edge cases.
8. Related, links to adjacent docs.

Code blocks must be runnable, not pseudo-code. Use the project's actual stack.
#docs#developer
Content & Writing

Pull Tweets from an Essay

Старт

Extract 5 standalone tweets from a long-form essay.

From the essay below, pull 5 standalone tweets.

Rules:
- Each tweet stands alone, no "as I wrote in my piece".
- Under 240 chars to leave room for retweets with comment.
- One specific idea per tweet, with at least one concrete number, name, or example.
- No hashtags. No emoji. No questions used as engagement bait.
- Vary structure: one one-liner, one short observation, one contrarian take, one list (2-3 items), one quote-shaped line.

Essay: {{ESSAY}}
#twitter#essay#repurpose
Content & Writing

Founder Monthly Update

Старт

Standard monthly update for investors / community.

Write a monthly founder update for {{COMPANY}} covering {{MONTH}}.

Sections:
1. TL;DR, 3 bullets.
2. Metrics: MRR, growth %, churn %, active users, runway (table).
3. Wins, 3-5 specific items with what changed and why it mattered.
4. Lowlights, 1-2 things that didn't go well + the lesson.
5. Asks: specific intros, hiring needs, customer leads.
6. Next month's focus, 3 priorities.

Tone: candid, numbers-first, no spin, no hype.
#update#investor#founder
Marketing Copy

10 Homepage Headline Options

Старт

Generate 10 distinct headline angles for the homepage.

Write 10 homepage headline options for {{PRODUCT}} which {{ONE_LINE_VALUE}} for {{AUDIENCE}}.

Mix of angles:
- Outcome-led ("Ship a landing page before lunch").
- Pain-led ("Stop wrestling with Figma exports").
- Contrarian ("Stop A/B testing button colors").
- Mechanism-led ("Generative components, no design system required").
- Comparison-led ("Like Webflow, but for AI apps").

Rules:
- Under 9 words each.
- No buzzwords (revolutionize, empower, unlock, leverage).
- No exclamation marks.
- Each must work without any subhead.

Output as a numbered list with a one-sentence rationale per headline.
#headline#copywriting
Marketing Copy

Feature Page Copy

Средний

Long-form copy for a single feature page.

Write copy for the /features/{{FEATURE}} page.

Sections in order:
1. Hero: feature name eyebrow, headline (outcome), 1-sentence subhead, primary + secondary CTA.
2. The problem (2 short paragraphs, specific scenario).
3. How {{FEATURE}} solves it (3 cards, each with a verb-led title + 2 sentences).
4. "See it in action", a 30-word setup for a demo embed.
5. Who it's for (3 personas, 1 line each).
6. Trust strip (logos placeholder).
7. FAQ (5 questions).
8. CTA.

Tone: concrete, second-person, present tense. No filler verbs (utilize, enable, facilitate).
#feature#page#copy
Marketing Copy

Onboarding Email Sequence (5 emails)

Средний

Drip sequence for new signups.

Write a 5-email onboarding sequence for new {{PRODUCT}} signups.

For each email provide: send timing (e.g. day 0), subject line (under 45 chars), preheader (under 90 chars), body (under 130 words), single primary CTA.

Sequence:
1. Day 0: Welcome + the one thing to do first.
2. Day 1: Show a real success story from a similar user.
3. Day 3: Address the most common stuck point + how to unstick.
4. Day 5: A power-user tip that feels like an inside joke.
5. Day 7: Soft ask, "what's getting in the way?", one-question reply.

No "I hope this finds you well". No emoji. No exclamation marks except the welcome subject.
#email#onboarding#sequence
Marketing Copy

Google Ads Headlines & Descriptions

Старт

Responsive search ads assets for a campaign.

Generate Google Responsive Search Ads assets for {{PRODUCT}}, keyword "{{KEYWORD}}".

Output:
- 15 headlines, each up to 30 chars (count characters and show counts).
- 4 descriptions, each up to 90 chars.
- 2 paths, each up to 15 chars.

Constraints:
- At least 5 headlines include the keyword verbatim.
- At least 3 headlines are benefit-led without the keyword.
- 1 headline is a CTA ("Start free", "See pricing").
- No superlatives that require disclaimers ("best", "#1").
#ads#google#ppc
Marketing Copy

Product Launch Press Release

Средний

Boilerplate press release for a launch.

Write a press release for the launch of {{PRODUCT}} by {{COMPANY}} on {{DATE}}.

Format:
- Dateline.
- Headline (under 12 words).
- Subhead (one sentence).
- Lede paragraph: who, what, when, where, why, how: under 60 words.
- 3 body paragraphs: the problem, the product, the milestone (funding/customers/numbers).
- One customer quote, one founder quote.
- Boilerplate "About {{COMPANY}}" paragraph.
- Media contact block.

Tone: AP-style, third person, present tense. No hype words.
#pr#launch#press
Marketing Copy

LinkedIn Company About Section

Старт

Crisp LinkedIn About copy for a company page.

Write the LinkedIn About section for {{COMPANY}}.

Structure (under 1800 chars total):
- Opening line: what we do, for whom, in 1 sentence.
- 2-paragraph story: why this exists.
- 3-bullet list: what we offer.
- 1 paragraph: how we work (values made concrete with verbs, not adjectives).
- Closing line: how to start.

Tone: human, specific, second person where natural. No "we are passionate about". No "world-class".
#linkedin#company#bio
Social Media

X Thread from a Tutorial

Старт

Repurpose a tutorial as a 9-tweet X thread.

Turn this tutorial into a 9-tweet thread for X:

{{TUTORIAL}}

Rules:
- Hook tweet: a specific claim with a number, under 200 chars, no emoji.
- Tweets 2-8: one concrete step or insight each, under 240 chars, can include code snippets in triple-backticks.
- Final tweet: link to the full tutorial + a one-line "follow for more".
- No "🧵" labels. No "1/", "2/" numbering. No bait questions.
#x#thread#tutorial
Social Media

Instagram Carousel (10 slides)

Старт

Plan a 10-slide IG carousel from one big idea.

Script a 10-slide Instagram carousel about: {{TOPIC}}.

For each slide: a headline (under 8 words), 1-2 sentence body, and a visual direction (one sentence).

Structure:
- Slide 1: hook with a specific promise.
- Slides 2-3: the problem framed sharply.
- Slides 4-8: the answer in 5 numbered steps.
- Slide 9: one common mistake.
- Slide 10: CTA (follow + saved-for-later prompt).

Visual style: editorial, off-white background, single accent color, serif italic for accent words. No memes.
#instagram#carousel
Social Media

30-Second TikTok Script

Старт

Tight 30-second script with on-screen text cues.

Write a 30-second TikTok script about {{TOPIC}}.

Format as a table with columns: Time, Spoken VO, On-screen text, B-roll.

Structure:
- 0-3s: pattern-interrupt hook (claim or visual). On-screen text mirrors the hook.
- 3-15s: the why (one number + one example).
- 15-25s: the how (3 quick steps, each with a smash-cut).
- 25-30s: CTA ("follow for the full breakdown").

No "hey guys". No "before we get started". No music suggestions.
#tiktok#video#shortform
Social Media

LinkedIn Thought-Leader Post

Средний

200-word LinkedIn post that earns engagement without cringe.

Write a LinkedIn post about: {{POINT_OF_VIEW}}.

Constraints:
- 180-220 words.
- First line: a specific, contrarian observation (under 90 chars).
- Second line: one-line setup ("Here's what changed my mind.").
- Body: 3 short paragraphs, each making one point with a concrete example.
- Close: a question that's a real question, not engagement bait.
- No emoji. No "agree?". No "thoughts?". No hashtag wall (max 2 at the end).
- No "in today's fast-paced world". No "I'm humbled".
#linkedin#thought-leadership
Productivity

Daily Shutdown Checklist

Старт

End-of-day checklist that actually clears the mind.

Generate a daily shutdown checklist for an indie founder.

Sections:
- Inbox to zero (email + Slack/Discord), explicit rules ("anything > 2 min becomes a task").
- Open loops to capture (anything I committed to today).
- Tomorrow's top 1 (single most important task, written in one sentence).
- Numbers to log (MRR, signups, support tickets handled).
- One sentence: what worked today, what didn't.
- Hard stop: close laptop, no exceptions.

Format as a printable single-page markdown checklist with checkboxes.
#habit#daily#shutdown
Productivity

Quarterly Planning Doc

Средний

Lightweight quarterly plan that fits on one page.

Draft a quarterly plan for {{COMPANY}}, Q{{N}} {{YEAR}}.

One-page format:
- Theme (one sentence, what this quarter is really about).
- 3 goals max, each with: the metric, the starting value, the target value, the rationale.
- Top 5 projects, each with: owner, start, end, success criterion.
- Explicit "not doing" list (3 items we are deliberately ignoring).
- Risks (3 bullets).
- Weekly cadence (what we review every Monday in 15 minutes).

No vague verbs (improve, optimize, leverage). Every line passes the "how would we know we did it?" test.
#planning#quarterly#okr
Productivity

Writer's Block Breaker

Старт

10 prompts that get a writer unstuck in 5 minutes.

Give me 10 specific, fast prompts to break writer's block on the topic: {{TOPIC}}.

Each prompt must:
- Be a single sentence.
- Force a concrete answer (a number, a name, a scene).
- Take under 5 minutes to answer in 100 words.

Examples of the shape, not content:
- "What's the exact moment you realized X was wrong?"
- "Describe the worst version of {{TOPIC}} you've seen, in 80 words."

No abstract prompts ("brainstorm ideas about…").
#writing#block#creative
Research & Strategy

JTBD Interview Script

Средний

Customer interview script following Jobs To Be Done.

Write a 30-minute Jobs To Be Done interview script for a recent customer of {{PRODUCT}}.

Structure:
- Warm-up (2 min): who they are, role, day-to-day.
- Trigger (5 min): when did they first realize they needed something like {{PRODUCT}}? Walk me through that day.
- Search (5 min): what did they look at, who did they ask, what did they try?
- Decision (10 min): why us vs alternatives? What almost made them not pick us? What pushed them over?
- Outcome (5 min): what's different now? Specifically, what do they do that they didn't before?
- Forces (3 min): pull (what attracted them) + push (what they were running from) + anxieties + habits.

Each section: 3-5 open questions, no leading questions, no yes/no.
#jtbd#research#interview
Research & Strategy

Bottom-Up Market Sizing

Продвинутый

Defensible TAM/SAM/SOM calculated bottom-up.

Calculate a bottom-up market size for {{PRODUCT}} targeting {{ICP}}.

Show the math step by step:
1. Count of potential customers (cite source).
2. % that have the problem severely enough to pay (with rationale).
3. Average annual revenue per customer (with comparable pricing).
4. Multiply to get TAM.
5. Realistic SAM: filter by geography, language, buying mechanism we can actually reach.
6. Realistic SOM: 3-year capture %, with a sanity-check against comparable startups.

Call out the 2 most fragile assumptions and what evidence would strengthen or kill them.
#sizing#market#tam
Research & Strategy

Honest SWOT

Средний

SWOT analysis without the generic filler.

Write a SWOT for {{COMPANY}} that a board member would respect.

Rules per quadrant:
- 4 items max per quadrant.
- Each item: one specific sentence + one piece of evidence (a number, a customer quote, a competitor action).
- No platitudes ("strong team", "growing market", "competition is increasing").
- Threats and Weaknesses must be at least as detailed as Strengths and Opportunities: if not, you're not being honest.

Close with one sentence: given this SWOT, what is the single most important bet for the next 90 days?
#swot#strategy
Строй осознанно

Лучший промпт это тот, который вы реально отгружаете.

Открыть Lovable и попробовать →