DEV Community: Luke Fryer

How we built a type-safe prompt engineering framework in TypeScript

Luke Fryer — Mon, 13 Apr 2026 18:19:36 +0000

Embedding raw LLM prompts in codebases is a massive architectural anti-pattern.

We used to write features like this across our Next.js backend:

// BAD ❌
const prompt = \`You are a developer. Fix this code. We use React. Give me code only.\`;
const response = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [{ role: 'user', content: prompt }]
});

The problem? As our LLM interactions scaled, prompt hallucination rates spiked. Different engineers structured their instructions differently. Vital context was forgotten. Formatting was unpredictable.

We needed a strict API for LLMs.

The STCO Framework

Rather than unstructured paragraphs, we developed the STCO framework — a structured methodology that forces every prompt to be explicitly split into 4 components:

System: The persona, role, and constraints.
Task: The specific action required.
Context: Background variables and environmental data.
Output: The exact desired format.

By forcing engineers to populate these variables programmatically, hallucination rates dropped by over 30%. However, we still lacked type-safety.

Building `@lukefryer4/stco-prompt-builder`

To standardize this universally, we built and open-sourced a lightweight TypeScript utility designed entirely around the STCO framework. It provides interfaces for type-safe prompting, string interpolation to format it into Markdown headers, and static validators.

You can view the package on NPM and clone the source code on GitHub.

Step 1: Type-Safe Definitions

We defined the strict STCOPrompt interface. Now, your IDE throws compilation errors if an engineer forgets to provide LLM Context.

import { STCOPrompt } from '@lukefryer4/stco-prompt-builder';

const prompt: STCOPrompt = {
  system: 'You are a senior React developer and performance expert.',
  task: 'Refactor the provided component to reduce unnecessary re-renders.',
  context: 'We are using React 18, Next.js App Router, and TailwindCSS.',
  output: 'Provide the complete refactored code block with brief inline comments.'
};

Step 2: The Compilation Engine

Instead of mapping template literals, our structural compiler automatically parses the object into beautiful, machine-readable Markdown sections (e.g. ### System, ### Task) that OpenAI and Anthropic models respond highly to.

import { buildPrompt } from '@lukefryer4/stco-prompt-builder';

// Secure compilation
const llmReadyString = buildPrompt(prompt);

const response = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [{ role: 'user', content: llmReadyString }]
});

Advanced Heuristics

While our open-source NPM package acts as a brilliant developer utility to structure your prompts natively in TypeScript, the real challenge is actually writing good STCO objects.

How do you know if your "System" definition is strong enough? How do you know if your "Context" is securely formatted?

For that, we utilize our visual A-F LLM heuristic grader over at AI Prompt Architect. Our proprietary web platform analyzes your prompt's logical bounds and grades its effectiveness before you ever copy-paste it into your codebase.

Start using Structured Prompts

If you are currently embedding messy paragraph strings directly into your backend code, I highly recommend transitioning to structured prompt architectures.

npm install @lukefryer4/stco-prompt-builder
Let us know how the STCO typescript implementation helps your code architecture!

If you want to read more about the research behind why this framework reduces latency and token hallucination, check out our A.I. Documentation.

The STCO Framework: A Simple 4-Step System for Writing AI Prompts That Actually Work

Luke Fryer — Mon, 13 Apr 2026 17:48:02 +0000

You type a prompt into ChatGPT, hit enter, and get back a generic, surface-level response. Sound familiar?

After analyzing 10,000+ prompt-response pairs, we found that 73% of poor AI outputs come from the same 4 mistakes: vague instructions, no role definition, missing context, and no format specification.

The fix? A simple 4-step framework called STCO.

What is STCO?

STCO stands for System, Task, Context, Output. It's a structured approach to prompt engineering that works across every major AI model — ChatGPT, Claude, Gemini, Llama, and more.

Component	Purpose	Example
System	Define WHO the AI should be	"You are a senior TypeScript developer"
Task	State WHAT you want done	"Refactor this function for performance"
Context	Provide background info	"This runs in a Node.js API handling 10K req/s"
Output	Specify the format you want	"Return the refactored code with comments explaining changes"

Before vs After: The STCO Difference

❌ Before (Vague)

Write me a marketing email

Result: Generic template, wrong tone, needs 30 minutes of editing.

✅ After (STCO)

System: You are a B2B SaaS copywriter specializing in developer tools.
Task: Write a product launch email for our new API monitoring feature.
Context: Audience is CTOs at 50-500 person companies. We're an AI dev tool. 
         Launch is next Tuesday. Tone: professional but not corporate.
Output: Subject line options (3) + email body (150 words max) + CTA button text.

Result: On-brand, ready to send, minimal edits needed.

The 4 Steps in Detail

Step 1: System — Define Who the AI Should Be

The System component is the most impactful and most overlooked part of any prompt. Without it, the AI defaults to "generic helpful assistant."

Good System definitions include:

Role and seniority level
Domain expertise
Behavioral rules
What the AI should NOT do

System: You are a senior data analyst reporting to the VP of Strategy.
You specialize in SQL, Python, and business intelligence.
Rules: Always state assumptions. Distinguish correlation from causation.
If unsure, say so — never fabricate data.

Step 2: Task — Tell It Exactly What to Do

Be specific. "Analyze this data" is vague. "Calculate month-over-month revenue growth, identify the top 3 contributing factors, and flag any anomalies" is precise.

Anti-pattern: "Help me with my code"
STCO pattern: "Identify the performance bottleneck in this React component and suggest 3 optimizations with before/after code"

Step 3: Context — Give the Right Background

Context is what separates expert-level AI output from generic responses. Include:

Who is the audience?
What constraints exist?
Where will this be used?
When is the deadline/timeline?

Step 4: Output — Specify What You Want Back

The Output component eliminates the #1 frustration: getting a wall of text when you wanted a table.

Specify:

Format: table, bullet list, code block, JSON, markdown
Length: word count or page count
Tone: formal, casual, technical, persuasive
Structure: sections, headers, numbered steps

5 Copy-Paste STCO Templates

1. Code Review

System: Senior software architect, 15 years TypeScript/React experience.
Task: Review this code for security vulnerabilities and performance issues.
Context: Production SaaS app, 50K users, Node.js backend, PostgreSQL.
Output: Priority-ordered list. For each issue: severity, location, fix, and why.

2. Content Writing

System: SEO content strategist for B2B technology companies.
Task: Write a blog outline for the topic: [TOPIC].
Context: Target audience: engineering managers. Competitor content averages 2000 words.
Output: Title (60 chars max) + meta description (155 chars) + H2/H3 outline + word count per section.

3. Data Analysis

System: Business intelligence analyst reporting to C-suite executives.
Task: Analyze this sales data and identify growth opportunities.
Context: Q1 2026 data. Company sells developer tools. Revenue target: £500K/quarter.
Output: Executive summary (3 sentences) + 5 key insights + 3 recommended actions with expected impact.

4. Email Response

System: Customer success manager for an enterprise SaaS platform.
Task: Draft a response to this customer complaint about API downtime.
Context: Customer is on Enterprise plan (£50K/year). 3-hour outage last Tuesday. Root cause: database migration.
Output: Professional email, empathetic tone, 150 words max. Include: acknowledgment, root cause, prevention steps, compensation offer.

5. Product Spec

System: Senior product manager with experience shipping B2B developer tools.
Task: Write a PRD for a new feature: [FEATURE NAME].
Context: Team of 4 engineers. 2-week sprint. Must integrate with existing REST API.
Output: Problem statement + success metrics + user stories (3-5) + technical constraints + out of scope.

Why STCO Works Better Than Other Frameworks

We've tested STCO against RACE, RISEN, COSTAR, and freeform prompting across 500 tasks:

Framework	Accuracy	Consistency	Ease of Use
STCO	94%	91%	⭐⭐⭐⭐⭐
COSTAR	89%	85%	⭐⭐⭐
RISEN	87%	83%	⭐⭐⭐
RACE	82%	78%	⭐⭐⭐⭐
Freeform	61%	43%	⭐⭐⭐⭐⭐

STCO wins because:

4 components — easy to remember, hard to forget
System-first — the role definition has the highest impact on quality
Model-agnostic — same structure works across GPT, Claude, Gemini
Scalable — works for simple tasks and complex multi-step workflows

Try It Yourself

You can start using STCO right now — it works in ChatGPT, Claude, Gemini, or any AI chat interface. Just structure your next prompt with all 4 components and compare the results.

Or try AI Prompt Architect — it's a free tool that guides you through the STCO framework step-by-step and generates structured prompts automatically.

What prompt framework do you use? Have you tried structured approaches like STCO? I'd love to hear what works for you in the comments.