Skip to main content
Prompts Notion Clone Application Developer

model coding template risk: low

Notion Clone Application Developer

Act as a software developer to create a Notion clone replicating core features like databases, markdown support, and real-time collaboration using React or Vue.js frontend and Node…

PROMPT 

Act as a Software Developer tasked with creating a Notion clone application. Your goal is to replicate the core features of Notion, enabling users to efficiently manage notes, tasks, and databases in a collaborative environment.\n\nYour task is to:\n- Design an intuitive user interface that mimics Notion's flexible layout.\n- Implement key functionalities such as databases, markdown support, and real-time collaboration.\n- Ensure a seamless experience across web and mobile platforms.\n- Incorporate integrations with other productivity tools.\n\nRules:\n- Use modern web technologies such as React or Vue.js for the frontend.\n- Implement a robust backend using Node.js or Django.\n- Prioritize user privacy and data security throughout the application.\n- Make the application scalable to handle a large number of users.\n\nVariables:\n- ${framework:React} - Preferred frontend framework\n- ${backend:Node.js} - Preferred backend technology

INPUTS

framework REQUIRED

Preferred frontend framework

e.g. React

backend REQUIRED

Preferred backend technology

e.g. Node.js

ROLES & RULES

Role assignments

  • Act as a Software Developer tasked with creating a Notion clone application.
  1. Use modern web technologies such as React or Vue.js for the frontend.
  2. Implement a robust backend using Node.js or Django.
  3. Prioritize user privacy and data security throughout the application.
  4. Make the application scalable to handle a large number of users.

EXPECTED OUTPUT

Format
markdown

SUCCESS CRITERIA

  • Design an intuitive user interface that mimics Notion's flexible layout.
  • Implement key functionalities such as databases, markdown support, and real-time collaboration.
  • Ensure a seamless experience across web and mobile platforms.
  • Incorporate integrations with other productivity tools.

FAILURE MODES

  • May ignore specified framework and backend variables.
  • May produce high-level design without implementation details.
  • May overlook mobile platform support or integrations.

CAVEATS

Dependencies
  • ${framework:React} variable
  • ${backend:Node.js} variable
Missing context
  • Detailed feature breakdown or MVP scope.
  • Specific integrations with productivity tools.
  • Database and other backend technologies.
  • Cross-platform implementation details (e.g., PWA, React Native).
  • Success criteria or evaluation metrics
Ambiguities
  • 'Core features of Notion' is vague and not exhaustively listed.
  • 'Intuitive user interface that mimics Notion's flexible layout' lacks specifics on layout elements.
  • 'Key functionalities such as...' provides examples but not a complete list or implementation details.
  • No explicit output format or deliverable specified (e.g., code, design doc, prototype).

QUALITY

OVERALL
0.65
CLARITY
0.85
SPECIFICITY
0.55
REUSABILITY
0.75
COMPLETENESS
0.45

IMPROVEMENT SUGGESTIONS

  • Add a section defining exact core features with bullet points, e.g., 'Block-based editing, linked databases, templates'.
  • Specify output structure: 'Output a high-level architecture diagram, wireframes for key pages, and starter code repositories structure'.
  • Expand variables to include more tech choices like '${database:MongoDB}' or '${mobile:React Native}'.
  • Limit scope to MVP to improve completeness, e.g., 'Focus on web version first with core note-taking and databases'.
  • Include user stories or example workflows for clarity.

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 MODEL