๐งฑ Tab 1 โ Anatomy
Breaks a real prompt down into six colour-coded blocks. Click any block to open a detailed explanation in the right panel covering the component's purpose, how to write it, common mistakes, and actionable tips.
๐ญ Role (purple) โ persona definition
๐ Context (blue) โ background information
๐ฏ Task (green) โ the core instruction
๐ Format (yellow) โ output structure
๐ธ Examples (orange) โ few-shot samples
๐ง Constraints (red) โ what to exclude
Six quality score bars are shown at the bottom โ Clarity, Specificity, Context depth, and more. The six technique cards below the blocks link directly to Tab 3 when clicked.
โ๏ธ Tab 2 โ Before / After
Places a weak prompt and a fully engineered prompt side by side for the same request. Four real-world scenarios included:
๐ง Sales email writing
๐ป Code review
๐ Data analysis
โ๏ธ Creative writing
Each pair shows actual AI response examples alongside quality tags (โ Vague / โ Role defined, etc.).
๐ฏ Tab 3 โ Techniques
Eight techniques explained using a left-side navigation and right-side detail panel layout:
Chain of Thought ยท Few-Shot ยท Role Prompting ยท Output Formatting ยท Self-Consistency ยท Tree of Thought ยท Iterative Refinement ยท Constraint Prompting
Each technique includes a concept explanation, a side-by-side prompt comparison (โ without the technique / โ with it), and four practical tips.
๐ ๏ธ Tab 4 โ Playground
Build your own prompt using four text inputs (Role ยท Context ยท Task ยท Format) and four technique toggles (Chain of Thought ยท Role Prompting ยท Few-Shot ยท Structured Output).
Clicking โก Build & Analyse produces:
A fully assembled prompt preview with each component highlighted in its own colour
A quality score (0โ100) plus estimated token and word count
A component checklist (โ / โ) showing what is present and what is missing
Specific improvement suggestions โ add a role, prompt too short or too long, consider CoT, and so on