Skip to main content
Prompts Alter Personalized Avatar Creation Web App

developer coding user risk: low

Alter Personalized Avatar Creation Web App

Build a React web app called 'Alter' for personalized digital avatar creation, including style selector with 8 visual cards, text description input, fal.ai FLUX API image generatio…

PROMPT 

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.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Implement style selector with 8 visual cards.
  • Add input panel for text description.
  • Generate 4 avatar variants via fal.ai FLUX API.
  • Add customization with background color picker and text overlay using Canvas.
  • Provide PNG downloads at 400px, 800px, 1500px.
  • Implement history of last 12 packs in localStorage.
  • Design bright, expressive, fun, mobile-responsive UI.
  • Use React, fal.ai API, HTML Canvas, localStorage stack.

FAILURE MODES

  • May add photo upload despite no MVP requirement.
  • Could fail to structure prompts correctly for fal.ai.
  • Might produce non-responsive layout.
  • Possible errors in Canvas overlays or resizing.
  • localStorage history may not handle 12 packs properly.
  • UI may lack visual appeal or grid layout.

CAVEATS

Missing context
  • fal.ai API key or authentication method.
  • Pre-made images or generation method for style cards.
  • Detailed UI wireframes or CSS specifications.
  • Error handling and loading states for API calls.
  • React setup instructions or version.
Ambiguities
  • Unclear exact format of 'structured prompt' for fal.ai FLUX API.
  • Source of visual images for the 8 style selector cards.
  • Details on how background color picker overlays on generated images.
  • Precise positioning, font, and styling for username/tagline via Canvas API.

QUALITY

OVERALL
0.70
CLARITY
0.85
SPECIFICITY
0.75
REUSABILITY
0.15
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • Provide an example structured prompt template for the FLUX API based on style and description.
  • Specify or include placeholder images for the 8 style cards.
  • Add instructions for secure API key management (e.g., environment variables).
  • Include basic wireframe descriptions or key CSS classes for UI layout.
  • Define success criteria like 'app loads in under 2s' or 'passes mobile responsiveness tests'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER