×

Terms and Conditions

This tool is made available for use as-is, free of charge, without any warranties or guarantees of any kind, either expressed or implied. The author is not liable for any damages or issues arising from the use of this tool.

No data whatsoever is collected when using Notes2LLM. All processing happens entirely in your browser.

×

Notes2LLM Prompt Generator

This tool helps you compose effective prompts for Large Language Models (LLMs) to generate high-quality code with specific styling and functionality. The resulting code can be used directly or further refined in Notes2LLM to streamline your workflow and achieve consistent, precise results from AI models. You can save your current selections as a JSON profile and load profiles to quickly prefill the form.

Purpose
Styling

Paste reference code here (e.g., a code snippet from your site, or the full 'View Source' output of a page). If 'View Source' is pasted, we will attempt to extract the main body content and internal CSS styles as a reference for the AI. Any pasted code will be given to the model as style reference.

Tip: You can also make a screenshot of the page or element you want to use as a reference and upload it to the LLM (Claude, ChatGPT, and Gemini all accept images as input).

Colors & Fonts

#384D68
#384D68
#2ecc71
#384D68
Composition / Elements (Optional)

These options are here to help you with ideas and structuring elements (like photo links, headers, etc.). This section can be safely ignored, and all structural or content requirements can be described in the "Content Instructions" section below.

Note: Generally not needed for WordPress as it has built-in lightbox functionality.

Content

Provide the text or bullet points for your content here. It's helpful to specify a structure, such as: which text should be a heading (and what level: H1, H2, etc.), which parts form distinct sections, or what items should appear in a menu if you're designing a full page or site. These instructions will take precedence if they conflict with earlier settings.





Paste a text fragment for style reference (content will be ignored).

Responsiveness and Accessibility
Other

If yes, all standard HTML tags (p, h1-h4, select, input, form, button etc.) within the generated container will be explicitly styled, and all elements will get specific class names.

Profile Management

Generated Prompt


				

			

		

	







    

        ×
        

            
Edit Element with AI

        

        

            
Describe the changes you want to make to the selected element.

            
            
            

                
                

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        
                    

                

            


            

                

                    
                    
                

                
            


            

                

                    

                        Show Context Sent to AI
                        
                    

                    

                        
HTML Context:

                        

                        
CSS Context:

                        

                        
JavaScript Context:

                        

                    

                

            


            

                
                
Applying edits...

            

        

        

             
        

    







    

        ×
        

            
Generate Code with AI

        

        

            
Enter a description of what you want to create.

            
            
            
            

                
                

                    

                        
                        
Drag & drop an image here, or click to select

                        
                    

                    
                

            


            

                

                    
                    
                    
Variations in one response.

                

                

                    
                    
                    
Sequential requests.

                

            


            

                
                
Generating code...

            

        

        

             
        

    







    

        ×
        

            
AI Configuration

        

        

            
            

                
                
            

            

                

                    

                        
                        
                    

                    

                        
                        
                        
                    

                    

                        
                        
                        

                             Your API key is saved only in your browser's local storage and is never sent to any server other than the AI provider's.
                        

                    

                    
                    
                    
                    

                    

                        
                        

                            
                            
                        

                        
                    

                

                

                    
General settings will be here.

                

            

        

    







    

        ×
        

            
Full Stylesheet (CSS)

        

        

            
            
        

    






    

        ×
        

            
Full Body HTML

        

        

            
            
        

    






    

        ×
        

            
Full Script (JS)

        

        

            
            
        

    







    

        ×
        

            
Choose a Variation

        

        

            

                
            

            

                
            

        

        

            
        

    








    

        
        

            
            
            
            
            
        

    

    
    
    

    


    
    
    
    

    
    












	
	
Notes2LLM

	
	








	
Getting Started

	
    
		
  • Click an element to select it.
    • 
		
  • Use the  and  buttons on the floating toolbar to simulate clicks and hover states.
    • 
		
  • Enter Preview Mode for a clean view and to test any user-written JavaScript.
    • 
	






	 
	




	


	

		

			
			
			
		

		

			
		

		
Preview Mode: Click elements to interact

	

    
    
    

        

            
DOM Tree