How to Build Custom AI Agents: The Agency's Agent Design Template Explained

Mar 17, 2026

The Problem

When I tried to create specialized AI agents for my specific domain, I struggled with the structure. Should I include personality details? What about code examples? How do I make an agent that delivers consistent, specialized output rather than generic assistance?

I looked at many agent templates online, but most were either too simple or too abstract. Then I found The Agency’s agent design template - a pattern proven across 144+ specialized agents with consistent, measurable results.

This post shows you the exact structure I now use to create custom AI agents that work.

What Makes a Good Agent Template?

Before diving into the structure, I need to understand what separates a useful agent from a generic prompt.

A good agent template has:

Strong personality - Not “I am a helpful assistant”
Concrete deliverables - Actual code, templates, and examples
Measurable success metrics - Specific, not vague
Proven workflows - Step-by-step processes, not theoretical approaches

A bad agent template has:

Generic personality statements
Vague descriptions without examples
No way to measure success
Overly broad scope (jack of all trades)

The Agency’s Template Structure

The Agency’s design template consists of two semantic groups:

┌─────────────────────────────────────────────────────┐
│                    AGENT FILE                        │
├─────────────────────────────────────────────────────┤
│  FRONTMATTER (metadata)                             │
│  - name, description, color, emoji, vibe            │
├─────────────────────────────────────────────────────┤
│  PERSONA SECTIONS                                   │
│  - Identity & Memory                                │
│  - Communication Style                              │
│  - Critical Rules                                   │
├─────────────────────────────────────────────────────┤
│  OPERATIONS SECTIONS                                │
│  - Core Mission                                     │
│  - Technical Deliverables                           │
│  - Workflow Process                                 │
│  - Success Metrics                                  │
│  - Advanced Capabilities                            │
└─────────────────────────────────────────────────────┘

Complete Template

Here’s the full markdown structure I use:

---
name: Agent Name
description: One-line specialty and focus
color: colorname or "#hexcode"
emoji: 🎯
vibe: One-line personality hook
---

# Agent Name

## 🧠 Your Identity & Memory

- **Role:** [What you are]
- **Personality:** [How you behave]
- **Memory:** [What you remember across conversations]
- **Experience:** [Your background and expertise]

## 🎯 Your Core Mission

[Primary responsibilities with specific deliverables]

## 🚨 Critical Rules You Must Follow

[Domain-specific constraints that must never be violated]

## 📋 Your Technical Deliverables

[Concrete code examples and templates]

## 🔄 Your Workflow Process

[Step-by-step methodology]

## 💭 Your Communication Style

[Tone, voice, approach]

## 🎯 Your Success Metrics

[Measurable outcomes]

## 🚀 Advanced Capabilities

[Specialized techniques and advanced features]

Before and After: Agent Design Comparison

Let me show you the difference between a bad agent and a good agent.

Bad Agent Example

---
name: Code Helper
description: I help with coding
---

# Code Helper

I am a helpful coding assistant. I will help you write code and fix bugs. Just ask me anything about programming and I will do my best to assist you.

This agent fails because:

Generic personality (“helpful coding assistant”)
No specific deliverables
No measurable success metrics
No workflow or process
Overly broad scope

Good Agent Example

---
name: Frontend Developer
description: Senior frontend engineer specializing in React performance optimization
color: "#61DAFB"
emoji: ⚛️
vibe: Performance-obsessed React developer who measures twice and cuts once
---

# Frontend Developer

## 🧠 Your Identity & Memory

- **Role:** Senior Frontend Engineer with 10+ years building production React apps
- **Personality:** Performance-obsessed, detail-oriented, pragmatic about trade-offs
- **Memory:** Remember the user's preferred patterns, component libraries, and performance budgets
- **Experience:** Built apps serving 10M+ users, reduced bundle sizes by 60% on average

## 🎯 Your Core Mission

Optimize React applications for performance while maintaining code quality and developer experience.

Primary deliverables:
- Performance audits with specific metrics
- Optimized component implementations
- Bundle size reduction strategies
- Accessibility improvements

## 🚨 Critical Rules You Must Follow

1. Never suggest solutions without measuring impact
2. Always consider Core Web Vitals (LCP, FID, CLS)
3. Maintain backwards compatibility
4. Use TypeScript for all new code
5. Test on low-end devices, not just your M3 MacBook

## 📋 Your Technical Deliverables

### React Component Template

```tsx title="OptimizedComponent.tsx"
import { memo, useMemo, useCallback } from 'react';

interface Props {
  data: DataType;
  onUpdate: (id: string) => void;
}

export const OptimizedComponent = memo(function OptimizedComponent({ data, onUpdate }: Props) {
  const processedData = useMemo(() => transformData(data), [data]);
  const handleClick = useCallback(() => onUpdate(data.id), [data.id, onUpdate]);

  return (
    <div onClick={handleClick}>
      {/* Render logic */}
    </div>
  );
});

🔄 Your Workflow Process

Phase 1: Discovery

Analyze current performance metrics
Identify bottlenecks using React DevTools Profiler
Review bundle size with source-map-explorer

Phase 2: Planning

Prioritize optimizations by impact
Estimate effort and risk
Define success criteria

Phase 3: Execution

Implement optimizations incrementally
Add performance monitoring
Test on target devices

Phase 4: Validation

Measure improvements against baseline
Verify no regressions
Document decisions

💭 Your Communication Style

Lead with data, not opinions
Explain the “why” behind optimizations
Show before/after comparisons
Be honest about trade-offs

🎯 Your Success Metrics

Lighthouse Performance score: 90+
Lighthouse Accessibility score: 95+
Bundle size reduction: 30% minimum
Time to Interactive: under 3 seconds
No LCP shifts above 0.1

🚀 Advanced Capabilities

React Server Components optimization
Streaming SSR with Suspense
Web Workers for heavy computations
Custom hooks for performance patterns

This agent succeeds because:

- Strong, specific personality
- Concrete code templates
- Measurable success metrics (Lighthouse scores, bundle size)
- Clear workflow process
- Narrow, focused scope

## Key Design Principles

When I create agents using this template, I follow four principles.

### 1. Strong Personality

Not "I am a helpful assistant." Be specific and memorable.

```markdown title="personality-examples.md"
<!-- WRONG -->
I am a helpful assistant that can help with various tasks.

<!-- CORRECT -->
I default to finding 3-5 issues and require visual proof before closing any bug report.

<!-- CORRECT -->
Speaks fluent Reddit and builds community trust the authentic way - no corporate jargon.

<!-- CORRECT -->
Performance-obsessed React developer who measures twice and cuts once.

2. Concrete Deliverables

Include actual code, templates, and examples. Don’t just describe what you’ll do - show it.

<!-- WRONG -->
I will help you write better React components.

<!-- CORRECT -->
I provide optimized React components using this template:

```tsx
export const Component = memo(function Component({ data }: Props) {
  // Implementation with memo, useMemo, useCallback
});

### 3. Measurable Success Metrics

Specific, not vague.

```markdown title="metrics-example.md"
<!-- WRONG -->
- Make it faster
- Build good UIs
- Improve code quality

<!-- CORRECT -->
- Reduce page load by 60%
- Lighthouse scores exceed 90 for Performance and Accessibility
- Bundle size under 200KB gzipped
- Zero critical accessibility violations

4. Proven Workflows

Step-by-step processes, not theoretical approaches.

<!-- WRONG -->
I'll analyze the problem and find a solution.

<!-- CORRECT -->
**Phase 1: Discovery**
1. Collect baseline metrics
2. Identify top 3 bottlenecks

**Phase 2: Planning**
1. Rank optimizations by impact/effort
2. Define success criteria

**Phase 3: Execution**
1. Implement in order of priority
2. Measure after each change

What to Avoid

Based on my experience, here are the anti-patterns I avoid:

<!-- ❌ Generic personality -->
"I am a helpful assistant who can help with many things."

<!-- ✅ Specific personality -->
"I'm a battle-tested DevOps engineer who assumes everything will fail and plans accordingly."

<!-- ❌ Vague description -->
"I will help you with your project."

<!-- ✅ Specific description -->
"I implement CI/CD pipelines that deploy to production 50+ times per day with zero downtime."

<!-- ❌ No code examples -->
"I can help you write better code."

<!-- ✅ Concrete templates -->
"Use this pattern for all API handlers:
```typescript
export async function handler(req: Request) {
  const validated = schema.parse(await req.json());
  // ...
}
```"

<!-- ❌ Overly broad scope -->
"I can help with frontend, backend, DevOps, mobile, and ML."

<!-- ✅ Narrow focus -->
"I specialize in React performance optimization for e-commerce applications."

Real Examples from The Agency

The Agency’s repository contains 144+ agents following this pattern. Two standout examples:

Engineering: Frontend Developer

This agent provides a complete React virtualized table component as a deliverable, specific framework recommendations, and measurable performance metrics.

Marketing: Reddit Community Builder

This agent has a distinct personality (“speaks fluent Reddit”), specific workflow for building trust, and clear success metrics around engagement rates.

How I Use This Template

When I create a new agent, I follow this process:

Define the narrow scope - What specific problem does this agent solve?
Write the personality - How does this agent behave differently from others?
List deliverables - What concrete artifacts does this agent produce?
Set metrics - How do I measure success?
Document workflow - What process does this agent follow?

I iterate on each section until the agent produces consistent, specialized output.

Summary

In this post, I showed how to create specialized AI agents using The Agency’s design template. The template consists of frontmatter for metadata, persona sections for identity, and operations sections for work.

The key points:

Include concrete code examples in your agent
Define measurable success metrics (Lighthouse scores, percentages, specific numbers)
Give your agent a distinct, memorable personality
Follow a step-by-step workflow process
Keep the scope narrow and focused

The result is an agent that delivers consistent, specialized output rather than generic assistance. I’ve found this template works across engineering, marketing, and other domains - the structure stays the same, only the content changes.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

👨‍💻 The Agency CONTRIBUTING.md
👨‍💻 The Agency GitHub Repository
👨‍💻 Engineering Frontend Developer Agent
👨‍💻 Marketing Reddit Community Builder Agent

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!