Skip to main content
Prompts Customizable Company Web Template Builder

developer coding template risk: low

Customizable Company Web Template Builder

Act as a web developer to build modular frontend (HTML, CSS, JavaScript) and scalable backend (Node.js or Python) structures adaptable for various company brands using variables li…

PROMPT 

Act as a Web Developer specializing in creating customizable web templates. Your task is to build a foundational frontend and backend structure that can be adapted for various company brands.

You will:
- Design a modular frontend using HTML, CSS, and JavaScript, focusing on ${visualStyle}.
- Implement a scalable backend with technologies such as Node.js or Python, based on ${companyName} requirements.
- Ensure the template allows easy swapping of visual elements and features to suit each company's needs.

Rules:
- The template must remain consistent in structure but flexible in visual and functional customization.
- All code should be clean, well-documented, and follow best practices.

Example:
For a tech company, use a modern, sleek design with interactive elements.
For a retail company, implement a vibrant, customer-focused interface.

Variables:
- ${companyName} - The name of the company
- ${visualStyle} - The desired visual style
- ${features} - Additional features required for the company

INPUTS

companyName REQUIRED

The name of the company

e.g. TechCorp

visualStyle REQUIRED

The desired visual style

e.g. modern sleek

features REQUIRED

Additional features required for the company

e.g. user authentication, e-commerce

ROLES & RULES

Role assignments

  • Act as a Web Developer specializing in creating customizable web templates.
  1. The template must remain consistent in structure but flexible in visual and functional customization.
  2. All code should be clean, well-documented, and follow best practices.

EXPECTED OUTPUT

Format
code
Constraints
  • clean well-documented code
  • follow best practices
  • modular structure
  • flexible customization

SUCCESS CRITERIA

  • Design a modular frontend using HTML, CSS, and JavaScript focusing on visualStyle.
  • Implement a scalable backend with Node.js or Python based on companyName requirements.
  • Ensure the template allows easy swapping of visual elements and features.

FAILURE MODES

  • May generate non-modular or inflexible code.
  • Could produce undocumented or unclean code.
  • Might ignore template variables like companyName, visualStyle, or features.

EXAMPLES

Includes two examples of adaptations for tech and retail companies.

CAVEATS

Dependencies
  • Requires ${companyName} value.
  • Requires ${visualStyle} value.
  • Requires ${features} value.
Missing context
  • Exact output format (e.g., code snippets, folder structure, ZIP).
  • Minimal viable features for frontend/backend.
  • Details on ${features} implementation scope.
  • Deployment or hosting assumptions.
Ambiguities
  • Unclear what 'build a foundational frontend and backend structure' exactly entails (e.g., full app, skeleton code, or wireframes).
  • Backend choice 'Node.js or Python, based on ${companyName} requirements' – requirements not detailed in prompt.
  • No specification on how to deliver or structure the output code (e.g., files, repo).

QUALITY

OVERALL
0.77
CLARITY
0.85
SPECIFICITY
0.70
REUSABILITY
0.90
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • Add 'Output the code as a simulated ZIP structure with folders: /frontend (index.html, styles.css, script.js), /backend (server.js or app.py, package.json/requirements.txt).'
  • Specify backend default: 'Default to Node.js unless ${features} require Python-specific libs.'
  • Include success criteria: 'Template should allow swapping logo, colors, and adding ${features} with <30min effort.'
  • Provide a usage example: 'Input: companyName=AcmeTech, visualStyle=modern sleek, features=e-commerce cart → Output: ...'.

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