Frontend Engineering — Vol. 11

Overview

9 prompts with one job: helping programming & dev move faster with AI. That's the Frontend Engineering — Vol. 11. Highlights include “AI-Powered Personal Compliment & Coaching Engine”, “Dating Profile Optimization Suite” and “Personalized Digital Avatar Generator”. They reward specifics — the more real detail you add, the sharper the result. Copy, paste into ChatGPT, Claude and Gemini, and refine the output in a reply or two.

• 1.AI-First Design Handoff Generator (Dev-Ready Spec)

  Copy

  You are a senior product designer and frontend architect.
  
  Generate a complete, implementation-ready design handoff optimized for AI coding agents and frontend developers.
  
  Be structured, precise, and system-oriented.
  
  ---
  
  ### 1. System Overview
  - Purpose of UI
  - Core user flow
  
  ### 2. Component Architecture
  - Full component tree
  - Parent-child relationships
  - Reusable components
  
  ### 3. Layout System
  - Grid (columns, spacing scale)
  - Responsive behavior (mobile → desktop)
  
  ### 4. Design Tokens
  - Color system (semantic roles)
  - Typography scale
  - Spacing system
  - Radius / elevation
  
  ### 5. Interaction Design
  - Hover / active states
  - Transitions (timing, easing)
  - Micro-interactions
  
  ### 6. State Logic
  - Loading
  - Empty
  - Error
  - Edge states
  
  ### 7. Accessibility
  - Contrast
  - Keyboard navigation
  - ARIA (if applicable)
  
  ### 8. Frontend Mapping
  - Suggested React/Tailwind structure
  - Component naming
  - Props and variants
  
  ---
  
  ### Output Format:
  
  **Overview**
  **Component Tree**
  **Design Tokens**
  **Interaction Rules**
  **State Handling**
  **Accessibility Notes**
  **Frontend Mapping**
  **Implementation Notes**

• 2.AI-Powered Personal Compliment & Coaching Engine

  Copy

  Build a web app called "Mirror" — an AI-powered personal coaching tool that gives users emotionally intelligent, personalized feedback.
  
  Core features:
  - Onboarding: user selects their domain (career, fitness, creative work, relationships) and sets a "validation style" (tough love / warm encouragement / analytical)
  - Daily check-in: a short form where users submit what they did today, how they felt, and one thing they're proud of
  - AI response: calls the [LLM API] (claude-sonnet-4-20250514) with a system prompt instructing Claude to respond as a perceptive coach — acknowledge effort, name specific strengths, end with one forward-looking insight. Never use generic phrases like "great job" or "well done"
  - Wins Archive: all past check-ins and AI responses, sortable by date, searchable
  - Streak tracker: consecutive daily check-ins shown as a simple counter — no gamification badges
  
  UI: clean, warm, serif typography, cream (#F5F0E8) background. Should feel like a private journal, not an app. No notifications except a gentle daily reminder at a user-set time.
  
  Stack: React frontend, localStorage for data persistence, [LLM API] for AI responses. Single-page app, no backend required.

• 3.Dating Profile Optimization Suite

  Copy

  Build a web app called "First Impression" — a dating profile audit and optimization tool.
  
  Core features:
  - Photo audit: user describes their photos (up to 6) — AI scores each on energy, approachability, social proof, and uniqueness. Returns a ranked order recommendation with one-line reasoning per photo
  - Bio rewriter: user pastes current bio, clicks "Optimize", receives 3 rewritten versions in distinct tones (playful / authentic / direct). Each version includes a word count and a predicted "swipe right rate" label (Low / Medium / High)
  - Icebreaker generator: user describes a match's profile in a few sentences — AI generates 5 personalized openers ranked by predicted response rate, each with a one-line explanation of why it works
  - Profile score dashboard: a 0–100 composite score across bio quality, photo strength, and opener effectiveness — updates live
  - Export: formatted PDF of all assets titled "My Profile Package"
  
  Stack: React, [LLM API] for all AI calls, jsPDF for export. Mobile-first UI with a card-based layout — warm colors, modern dating app feel.

• 4.Personalized Digital Avatar Generator

  Copy

  Build a web app called "Alter" — a personalized digital avatar creation tool.
  
  Core features:
  - Style selector: 8 avatar styles presented as visual cards (professional headshot, anime, pixel art, oil painting, cyberpunk, minimalist line art, illustrated character, watercolor)
  - Input panel: text description of desired look and vibe (mood, colors, personality) — no photo upload required in MVP
  - Generation: calls fal.ai FLUX API with a structured prompt built from the style selection and description — generates 4 variants per request
  - Customization: background color picker overlay, optional username/tagline text added via Canvas API
  - Download: PNG at 400px, 800px, and 1500px square
  - History: last 12 generated packs saved in localStorage — click any to view and re-download
  
  UI: bright, expressive, fun. Large visual cards for style selection. Results shown in a 2x2 grid. Mobile-responsive.
  
  Stack: React, fal.ai API for image generation, HTML Canvas for text overlays, localStorage for history.

• 5.Private Group Coaching Infrastructure

  Copy

  Build a group coaching and cohort management platform called "Cohort OS" — the operating system for running structured group programs.
  
  Core features:
  - Program builder: coach sets program name, session count, cadence (weekly/bi-weekly), max participants, price, and start date. Each session has a title, a pre-work assignment, and a post-session reflection prompt
  - Participant portal: each enrolled participant sees their program timeline, upcoming sessions, submitted assignments, and peer reflections in one dashboard
  - Assignment submission: participants submit written or link-based assignments before each session. Coach sees all submissions in one view, can leave written feedback per submission
  - Peer feedback rounds: after each session, participants are prompted to give one piece of structured feedback to one other participant (rotates automatically so everyone gives and receives equally)
  - Progress tracker: coach dashboard showing assignment completion rate per participant, attendance, and a simple engagement score
  - Certificate generation: at program completion, auto-generates a PDF certificate with participant name, program name, coach name, and completion date
  
  Stack: React, Supabase, Stripe Connect for coach payouts, Resend for session reminders and feedback prompts. Clean, professional design — coach-first UX.

• 6.Trading & Investing Simulation Platform

  Copy

  Build a paper trading simulation platform called "Paper" — a realistic, risk-free environment for learning to trade and invest.
  
  Core features:
  - Portfolio setup: user starts with $100,000 in virtual cash. Real-time stock and ETF prices via Yahoo Finance or Alpha Vantage API
  - Trade execution: market and limit orders supported. Simulate 0.1% slippage on market orders. Commission of $1 per trade (realistic friction without being punitive)
  - Performance dashboard: P&L chart (daily), total return, annualized return, win rate, average gain and loss, Sharpe ratio, and current sector exposure — all updated with each trade. Built with recharts
  - Trade journal: required field on every position close — "What was my thesis entering this trade? What happened? What will I do differently?" Three fields, each max 200 characters. Cannot close a position without completing the journal
  - Behavioral analysis: [LLM API] analyzes the last 20 trade journal entries and identifies recurring behavioral patterns — "You consistently exit winning positions early when they approach round-number price levels" — surfaced monthly
  - Leaderboard: optional, weekly-resetting leaderboard among friend groups — ranked by risk-adjusted return, not raw P&L
  
  Stack: React, Yahoo Finance or Alpha Vantage for market data, [LLM API] for behavioral analysis, recharts. Terminal-inspired design — data dense, no decorative elements.

• 7.Zero to One Solo-Founder Launch System

  Copy

  Build a solo-founder launch system called "Zero to One" — a structured 14-day system for going from idea to first paying customer.
  
  Core features:
  - Idea intake: user inputs their idea, target customer, and intended price point. [LLM API] validates the inputs by asking 3 clarifying questions — forces specificity before any templates are generated
  - Personalized playbook: 14-day calendar where each day has a specific task, a customized template, and a success metric. All templates are generated by [LLM API] using the user's specific idea and customer — not generic. Day 1: problem validation script. Day 3: landing page copy. Day 5: outreach email. Day 7: customer interview guide. Day 10: sales conversation framework. Day 14: post-mortem template
  - Daily execution log: each day the user marks the task complete and answers: "What happened?" and "What's the specific blocker if incomplete?" — two fields, 150 chars each
  - Decision tree: if-then guidance for the 8 most common sticking points ("No one responded to my outreach → here are 3 likely reasons and the fix for each"). Structured as interactive branching, not a wall of text
  - Launch readiness score: composite of daily completions, outreach sent, and conversations held — shown as a 0–100 score that updates daily
  - Post-mortem: on day 14, guided reflection template — what worked, what failed, what the next 14 days should focus on. AI generates a one-page summary
  
  Stack: React, [LLM API] for all template generation and decision tree content, localStorage. High-energy design — daily progress always front and center.

• 8.Legal Risk Minimization Tool for Freelancers

  Copy

  Build a legal risk reduction tool for freelancers called "Shield" — a contract generator and reviewer that reduces common legal exposure.
  
  IMPORTANT: every page of this app must display a clear disclaimer: "This tool provides templates and general information only. It is not legal advice. Review all documents with a qualified attorney before use."
  
  Core features:
  - Contract generator: user inputs project type (web development / copywriting / design / consulting / photography / other), client type (individual / small business / enterprise), payment terms (fixed / milestone / retainer), approximate project value, and 3 custom deliverables in plain language. [LLM API] generates a complete contract covering scope, IP ownership, payment schedule, revision policy, late payment penalties, confidentiality, and termination — formatted as a clean DOCX
  - Contract reviewer: user pastes an incoming contract. AI highlights the 5 most important clauses (ranked by risk), flags anything unusual or asymmetric, and for each flagged clause suggests a specific alternative wording
  - Risk radar: user describes their freelance business in 3 sentences — AI identifies their top 5 legal exposure areas with a one-paragraph explanation of each risk and a mitigation step
  - Template library: 10 pre-built contract types, all downloadable as DOCX and editable in any word processor
  - NDA generator: inputs both party names, confidentiality scope, and duration — generates a mutual NDA in under 30 seconds
  
  Stack: React, [LLM API] for generation and review, docx-js for DOCX export. Professional, trustworthy design — this handles serious matters.

• 9.Astro.js

  Copy

  # Astro v6 Architecture Rules (Strict Mode)
  
  ## 1. Core Philosophy
  
  - Follow Astro’s “HTML-first / zero JavaScript by default” principle:
    - Everything is static HTML unless interactivity is explicitly required.
    - JavaScript is a cost → only add when it creates real user value.
  
  - Always think in “Islands Architecture”:
    - The page is static HTML
    - Interactive parts are isolated islands
    - Never treat the whole page as an app
  
  - Before writing any JavaScript, always ask:
    "Can this be solved with HTML + CSS or server-side logic?"
  
  ---
  
  ## 2. Component Model
  
  - Use `.astro` components for:
    - Layout
    - Composition
    - Static UI
    - Data fetching
    - Server-side logic (frontmatter)
  
  - `.astro` components:
    - Run at build-time or server-side
    - Do NOT ship JavaScript by default
    - Must remain framework-agnostic
  
  - NEVER use React/Vue/Svelte hooks inside `.astro`
  
  ---
  
  ## 3. Islands (Interactive Components)
  
  - Only use framework components (React, Vue, Svelte, etc.) for interactivity.
  
  - Treat every interactive component as an isolated island:
    - Independent
    - Self-contained
    - Minimal scope
  
  - NEVER:
    - Hydrate entire pages or layouts
    - Wrap large trees in a single island
    - Create many small islands in loops unnecessarily
  
  - Prefer:
    - Static list rendering
    - Hydrate only the minimal interactive unit
  
  ---
  
  ## 4. Hydration Strategy (Critical)
  
  - Always explicitly define hydration using `client:*` directives.
  
  - Choose the LOWEST possible priority:
  
    - `client:load`
      → Only for critical, above-the-fold interactivity
  
    - `client:idle`
      → For secondary UI after page load
  
    - `client:visible`
      → For below-the-fold or heavy components
  
    - `client:media`
      → For responsive / conditional UI
  
    - `client:only`
      → ONLY when SSR breaks (window, localStorage, etc.)
  
  - Default rule:
    ❌ Never default to `client:load`
    ✅ Prefer `client:visible` or `client:idle`
  
  - Hydration is a performance budget:
    - Every island adds JS
    - Keep total JS minimal
  
  📌 Astro does NOT hydrate components unless explicitly told via `client:*` :contentReference[oaicite:0]{index=0}
  
  ---
  
  ## 5. Server vs Client Logic
  
  - Prefer server-side logic (inside `.astro` frontmatter) for:
    - Data fetching
    - Transformations
    - Filtering / sorting
    - Derived values
  
  - Only use client-side state when:
    - User interaction requires it
    - Real-time updates are needed
  
  - Avoid:
    - Duplicating logic on client
    - Moving server logic into islands
  
  ---
  
  ## 6. State Management
  
  - Avoid client state unless strictly necessary.
  
  - If needed:
    - Scope state inside the island only
    - Do NOT create global app state unless required
  
  - For cross-island state:
    - Use lightweight shared stores (e.g., nano stores)
    - Avoid heavy global state systems by default
  
  ---
  
  ## 7. Performance Constraints (Hard Rules)
  
  - Minimize JavaScript shipped to client:
    - Astro only loads JS for hydrated components :contentReference[oaicite:1]{index=1}
  
  - Prefer:
    - Static rendering
    - Partial hydration
    - Lazy hydration
  
  - Avoid:
    - Hydrating large lists
    - Repeated islands in loops
    - Overusing `client:load`
  
  - Each island:
    - Has its own bundle
    - Loads independently
    - Should remain small and focused :contentReference[oaicite:2]{index=2}
  
  ---
  
  ## 8. File & Project Structure
  
  - `/pages`
    - Entry points (SSG/SSR)
    - No client logic
  
  - `/components`
    - Shared UI
    - Islands live here
  
  - `/layouts`
    - Static wrappers only
  
  - `/content`
    - Markdown / CMS data
  
  - Keep `.astro` files focused on composition, not behavior
  
  ---
  
  ## 9. Anti-Patterns (Strictly Forbidden)
  
  - ❌ Using hooks in `.astro`
  - ❌ Turning Astro into SPA architecture
  - ❌ Hydrating entire layout/page
  - ❌ Using `client:load` everywhere
  - ❌ Mapping lists into hydrated components
  - ❌ Using client JS for static problems
  - ❌ Replacing server logic with client logic
  
  ---
  
  ## 10. Preferred Patterns
  
  - ✅ Static-first rendering
  - ✅ Minimal, isolated islands
  - ✅ Lazy hydration (`visible`, `idle`)
  - ✅ Server-side computation
  - ✅ HTML + CSS before JS
  - ✅ Progressive enhancement
  
  ---
  
  ## 11. Decision Framework (VERY IMPORTANT)
  
  For every feature:
  
  1. Can this be static HTML?
     → YES → Use `.astro`
  
  2. Does it require interaction?
     → NO → Stay static
  
  3. Does it require JS?
     → YES → Create an island
  
  4. When should it load?
     → Choose LOWEST priority `client:*`
  
  ---
  
  ## 12. Mental Model (Non-Negotiable)
  
  - Astro is NOT:
    - Next.js
    - SPA framework
    - React-first system
  
  - Astro IS:
    - Static-first renderer
    - Partial hydration system
    - Performance-first architecture
  
  - Think:
    ❌ “Build an app”
    ✅ “Ship HTML + sprinkle JS”

1. Step 1

   Pick a prompt

   Browse the 9 prompts and pick the closest match — “AI-First Design Handoff Generator (Dev-Ready Spec)” is a good place to start.

2. Step 2

   Copy it

   Hit Copy on the prompt you want, or grab the whole set with “Copy all 9 prompts”.

3. Step 3

   Fill in the blanks

   Fill in the [bracketed] placeholders with your specifics — that's what makes the output yours.

4. Step 4

   Run and refine

   Drop it into ChatGPT and refine in a reply or two until it fits programming & dev.

Related packs

• 

  Programming & DevFree

  Frontend Engineering — Vol. 10

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Regex Helpers

  Everything you need in one collection

  5 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 3

  Battle-tested prompts, organized and ready

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 12

  A focused toolkit for faster, better output

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Coding Assistants — Vol. 9

  Copy, tweak, and ship in minutes

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 6

  Hand-picked prompts you can copy and run today

  9 promptsChatGPT · Claude · Gemini