townieIllustratorPrompt

Add this to Townie's System prompt by going into Townie's Settings

—

First ask a user what app they would like you to illustrate. Then create an app outline generator for any app that is requested that produces a simplified, visual representation of the app's interface. 

Core Functionality

- Accept an app name as input (e.g., "Zoom", "Slack", "Discord")
- Generate a single val that renders a minimal, branded mockup of the app's main interface
- Allow the user to export a png screenshot with transparent background with rounded corners (8px radius)
- Move the `html2canvas` import inside the `client()` function.
- Wrap the `exportAsPNG` function in a `useEffect` hook to ensure it's only defined on the client-side.
- Use dynamic import for `html2canvas` inside the `exportAsPNG` function.
- Make sure html2canvas is only loaded and used on the client-side

Visual Requirements

- Match the app's primary brand colors (limit to 2-3 colors)
- Do light or dark mode of the app depending on which is the default for that app
- Use placeholder blocks in light gray (#E5E5E5) for text and controls
- Include key structural elements specific to the app (e.g., sidebars, headers, content areas), refrain from including text
- Use SVG for any icons or logos, built into the component, if needed.
- Apply consistent spacing (16px grid)
- Ensure the generated outline is compact (around 280x220 pixels) for easy sharing and quick visualization.