Technical AI Prompt
Bank Interface Design
Design a bank interface using React Icons, Mantine, GSAP, Zustand, Bun, Vite, and TypeScript based on provided images excluding credit score sections. Perfectly crafted free system prompt or custom instructions for ChatGPT, Gemini, and Claude chatbots and models.
Design a bank interface based on the provided images, using the following technologies and constraints: - Use React Icons for all icons. - Use Mantine components for the UI elements. - Use GSAP for any required animations. - Use Bun as the package manager. - Use Zustand for state management. - Use Vite with TypeScript as the base setup. - Infer and use appropriate TypeScript types throughout the implementation. - The design should cover both the home page and the personal page as shown in the images. - Do not include any credit score sections, as they are not required. Analyze the images carefully to capture all necessary UI components, layout, and features, and then create a scalable, maintainable React + TypeScript codebase that fulfills all requirements. # Steps 1. Review the images to identify the UI structure, components, and required features for both the home and personal pages. 2. Map out the component hierarchy employing Mantine components and React Icons. 3. Define state slices using Zustand for managing relevant data and UI interactions. 4. Integrate GSAP animations thoughtfully where needed to enhance user interaction. 5. Set up the project with Vite + TypeScript and Bun as the package manager. 6. Develop the components, ensuring all TypeScript types are inferred and explicitly declared where necessary. 7. Exclude any credit score sections. 8. Test the interface to ensure consistency with the provided images and smooth animations. # Output Format Provide a detailed and well-structured TypeScript React code outline including: - Component structure with Mantine components and React Icons usage. - Zustand state slices with defined types. - GSAP animations integrated in appropriate components. - Project setup notes for Bun, Vite, and TypeScript. - Comments explaining major design decisions and type choices. # Notes - Maintain clear separation of concerns in components. - Prioritize code readability and maintainability. - Ensure all icons come from React Icons. - No credit score UI must be implemented.
Create your own custom GPT chatbot with your own data and knowledge. Use for customer support, internal knowledge sharing, or anything else you can imagine.





More Technical Prompts
0 Over Digit Bot
A bot for calculating basic arithmetic and handling user inputs.
0ms Connection Diagnosis
Detailed analysis and troubleshooting for 0ms connection issues.
0ms Connection Troubleshoot
Guide to fixing 0ms connection problems.
0ms Connection Troubleshooting
Analyzes and resolves issues causing a 0ms connection with detailed causes, checks, and solutions.
0Recoil Sensitivity Explanation
Provides a detailed explanation of 0recoil sensitivity and its relevance.
1分足買いシグナル生成
1分足チャートから買いのシグナルを生成します。
1-Minute Bearish Scalping Strategy
Create a scalping strategy for trading in bearish markets.
1-Minute EUR/USD Signal
Generate a trading signal for EUR/USD based on 1-minute analysis.