User Guide: App & Code Architect

Overview

The App & Code Architect is a "No-Code" tool for people who want "Pro-Code" results. It generates a precise System Prompt that instructs AI models to act as Senior Full Stack Developers.

The goal is to generate complete, self-contained, and runnable applications (games, tools, dashboards) in a single response, optimized for modern AI preview windows.

How to Use

1. Define Your App (Left Sidebar)

• App Idea: Be descriptive!
  • Good: "Snake Game"
  • Better: "Cyberpunk Snake Game with neon glow effects and techno music sounds"
• Application Type:
  • Browser Game (Canvas API): Best for arcade games (Pong, Tetris, Space Invaders). It uses the HTML5 <canvas> element which renders perfectly in AI previews.
  • Single Page App: Great for To-Do lists, Expense Trackers, or Dashboards.
  • Landing Page: For marketing mockups with hero sections and CTA buttons.
• Preferred Tech Stack (Crucial):
  • HTML5 + Vanilla JS (Recommended): The most robust option. It puts everything (Structure, Style, Logic) into one file. This works 100% of the time in Gemini Canvas and Claude Artifacts.
  • React: Good for modern UI components, but sometimes requires specific preview environments.
• Visual Aesthetic:
  • Neumorphism: Soft, extruded plastic look.
  • Cyberpunk: Dark mode, neon colors, glitch effects.
  • Retro Pixel: 8-bit style fonts and blocky colors.

2. Add Modules

• Gamification Logic: Enables score tracking, sound effects (synthesized), and "Game Over" states.
• UI/UX Polish: Adds hover animations, mobile responsiveness, and smooth transitions.

3. Output Formats

• MARKDOWN (Default): The standard format for pasting into chatbots.
• JSON/XML: For advanced API usage.

🚀 How to Run the Apps (Platform Specifics)

To see your app come to life instantly, follow these instructions for your specific AI:

1. Google Gemini (Canvas Mode) - Recommended

• Setup: Open Gemini (using Gemini 2.5 or newer models). Ensure you are in a mode that supports Canvas (the workspace editor).
• Action: Paste the prompt.
• The Magic: Gemini will likely open a "Canvas" on the right side.
  • If you selected "Browser Game", the game will render inside this window.
  • Interaction: You can click, type, and play the game directly in the Gemini interface.
  • Editing: You can ask Gemini to "Make the ball faster" or "Change the background to red", and it will update the code in real-time.

2. Claude (Anthropic Artifacts)

• Model Version: Works best with Claude 4.5 Sonnet or Opus 4.5.
• Setup: The "Artifacts" feature is now standard. It automatically detects code and renders it.
• Action: Paste the prompt.
• The Magic: Claude will create a dedicated "Artifact" window on the right.
  • Because the prompt enforces a Single File structure, the app will run immediately in the preview pane without any manual setup.

3. ChatGPT (from GPT-5.2)

• Model Version: Select GPT-5.2 (Auto or Thinking mode) for the best coding performance.
• Action: Paste the prompt.
• The Magic: ChatGPT will generate the code block.
• How to Run:
  • Copy the code.
  • Save it as an .html file (e.g., game.html) on your computer.
  • Open that file in Chrome/Safari/Edge.

Troubleshooting & Tips

• "The game screen is blank": Sometimes the AI forgets to set a background color for the <canvas>. Simply tell the AI: "The canvas is white, please add a black background."
• "Code cut off": If the generated code stops halfway, type "Continue code".
• Sound Effects: The "Gamification" module instructs the AI to use AudioContext (synthesized beeps/boops) instead of external MP3 files. This ensures sound works without you needing to upload files!