How to write creative briefs for AI agents

TL;DR - Before your AI writes a single line of code, it needs to know what it's building. This unit covers the tools you'll use, how agentic coding works, and gets you started on the SITE PLAN.md that will guide every session from here on. It's mostly setup and concepts - but the concepts pay off for the rest of the course.

Estimated time: 30-45 minutes

Outcomes & What you'll make

By the end of this unit you'll understand:

• How agentic coding tools differ from regular AI chatbots
• How to create reusable assets like SKILL.md
• How to keep your AI focused with a SITE PLAN.md

What you'll make:

• All tools installed and accounts set up
• A Site Plan outline, the grand plan of your website which we'll build throughout the course

First time coding with AI? Fasten your seatbelt.

I’m glad you’re here, and I want this to be a fun learning experience. But I have to warn you - while AI is immensely useful - it’s like a teenager with a Porsche. It will end up in a ditch sooner rather than later.

Planning your website before execution is the entire point of this course.

That takes time, BUT: this course teaches you how to direct AI in your creative process.

Not to replace your creativity or generate content for you - but to apply the results of your creative process.

Agentic coding and reusable documents

Your website is built with various files working together to express your vision in code. Code is just a written instruction, expressed in specific programming languages. HTML, CSS and JavaScript are most common in web design.

Thankfully, AI can help us translate what we want using these languages fairly easily.

From somewhat manual - to fully automatic, these are three levels of coding with AI:

1. Copy and pasting code from the AI in your browser
2. AI revising code directly in your IDE (code editor)
3. Agentic coding - AI writes code based on your instructions, in a planning - evaluating - executing loop

With 3: Agentic coding, your AI gets a folder on your computer to work from, and that makes the iterative loop very fast because:

• you can save prompts.
• you can make project tracking documents
• the AI updates those documents as you work
• this maintains the context, scope and progress of your project.
• the AI can cross-reference files in your folder

For my website, I have files that explain everything about the website structure, technology it uses, code explanations etc.

These documents are incredibly useful when you decide to switch AI, or you want to give proper context to another AI without typing your hands off.

Don't make the AI guess. Give it a SITE PLAN.md

Planning is 80% of the real work in crafting a website. The Site Plan document is meant to keep the AI from guessing what you want. By planning well, you will:

• create a unique website without countless revisions
• reduce the risk of having to start over
• avoid scrapping designs that didn't work
• make sure the AI makes the right choices

It's true that you can easily generate a website in minutes, but since you're reading this, I'm assuming you want to make something special.

Below, you will find the outline that we will work on throughout this course. Please copy the outline and save it as a Markdown file. It's a regular text file, but you save it with the .md file extension. Consider using a Markdown editor such as Obsidian for Windows, macOS or Linux

SITE PLAN.md outline: copy and save this in your own document

1 Site overview

• Purpose — what the site is for and who it's for
• Page map — page list, contents, page types

2 Design, layout etc.

• Page layouts (+Responsive design)
• Design system: colors, typography, shapes
• Motion: approach and constraints

3 Site architecture

• Tech stack
• Architecture decisions & why
• Content model: how content is structured and stored
• Core principles: rules the AI should follow throughout (e.g. minimal JS, boilerplate CSS, using certain Skills etc. ...)

4 Hosting

• Suitable provider according to site type & architecture

SITE PLAN.md is your AI's Northern Star. It helps you build the site without big surprises, and makes it easy for the AI to build with less of your input. Every AI session you fire up will use this file as common ground.

Setup: Apps and tools you will need

Please install the tools listed in this chapter. Make sure you have accounts for each service.

Set aside some time to do this when you’re not in a creative mood, perhaps.

Tools you'll need:

• Codex (Open AI)
• Claude / Claude Code (Anthropic)
• Antigravity (Google)
• VS Code
• Chrome
• Safari (or a non-Chrome browser)
• Obsidian (or any other Markdown text editor)

The first three tools support Agentic coding on your computer. But we will use the web based versions too - so make sure you have an account for each, even if you plan to stick with one of them.

Beyond PLAN.md: Skills and Harnesses

AI need guardrails to stick to the plan, that's the SITE PLAN.md we just discussed, right?

If the PLAN.md provides context for our project along with important domain knowledge...what comes to mind if I said SKILL.md?

Skills

Let's take copywriting as an example - any skill that you use often. That's where Skills come in, use them when you need to:

• inform the AI how to tackle a specific task
• apply preferences, taste - anything relevant for the task
• save time and create consistency

Usually, you would tell the AI: "You're acting as a senior copywriter, with a witty but lighthearted tone...". But that's just a prompt, right?

Rather than writing a detailed prompt every time you want some copywriting done, create a SKILL:

• save your preferred instructions/prompt in a SKILL.md document
• call it COPYWRITER.md (or whatever skill it is)
• tell the AI to use @COPYWRITER.md
• that's it!

Skills are an easy way to create consistency and personality in your projects.

Current AI tools may automatically fetch SKILLS based on your request. But the beautiful thing about writing your own skills is that they become yours.

Harnesses

Harnesses tackle one of the most annoying aspect about using AI, being:

• Yes, it will do what you asked it to do.
• But you always have to verify that it performed the task well.
• If you have a specific evaluation criteria, or an approach to validating ideas - that's where harnesses come in handy.

Harnesses are the little lab coat-donning inspectors. For any given task, how is the LLM supposed to know it’s done - without any gates or criteria?

A harness:

• does not have to be complex
• think of your "definition of done", and use that.
• add a section in your SKILL.md -or-
• keep it separate, but add a reference in the SKILL.md

Returning to the COPYWRITER.md example - a check for culturally insensitive phrasing or jokes could be appropriate, for example.

Naturally, more complicated evaluation requires its own document. Just make sure that any related SKILLS refer to that harness, to avoid reminding the AI.

Combining Skills and Harnesses, the process then becomes:

• Ask AI to perform a task, according to SKILL.md
• AI uses the SKILL.md
• Checks its own work with the HARNESS.md (or a Harness section in the skill)

Don’t worry if this feels like a lot at once. We're mainly going to work with SITE PLAN.md and a couple of SKILLS, which we will create together throughout this course.

Learning reflections

• Consider the files PLAN.md, SKILL.md and HARNESS.md. How do each of these file types work together?
• Is there anything you’ve done recently where this approach might have helped?
• Can you think of any other instructions or opinions you might want to pass on to an AI?
• Could there be better ways to direct the AI than these approaches?

Side note:

• The AI coding process is evolving and changing often.
• Rather than focus on words like "agentic, skill, harness...";
• try to think about how the current process is helping the AI stay on track and achieve the goals you described.

AI tools have changed a lot in the past two years, so the terminology in this chapter will certainly be outdated soon. But the basic logic behind guiding the AI’s actions is likely to persist.

If you want further reading, go ahead and google Agentic Loops.