# AGENTS.md - Agentic Design Ops

This is a clean static restart of the former Myclaude site.

## First Read

Read `BRAIN.md` before changing IA, content, positioning, or page strategy. It defines the center of the project, the north star rule, the site layers, source policy, and first build order.

## Product Direction

Agentic Design Ops is a practical field guide for designers building workflows with AI agents. The site should focus on:

- foundations first: industry shift, AI design process, light Harness map, skills, project memory, design context, orchestration, source trust, then full Harness
- design ops workflows, not generic AI design content
- personal experience from real product work
- reusable context files, prompts, review loops, and validation habits
- case studies such as Planark and Design Harness
- a future downloadable harness designers can install and adapt

Claude, Codex, MCPs, and skills belong inside the reference layer. They should not be the whole brand.

## Stack

- Static HTML
- One `styles.css`
- No build step
- No framework
- No server required for normal preview

Open `index.html` directly in a browser, or use a tiny local HTTP server for validation.

## Current Structure

- `index.html`
- `workflows.html`
- `harness.html`
- `case-studies.html`
- `reference.html`
- `field-notes.html`
- `about.html`
- `foundation-brief.html`
- `article-template.html`
- `editorial-template.html`
- `docs/`
- `BRAIN.md`
- `DESIGN.md`
- `styles.css`
- `images/`
- `_source-archive/` for old copied material that should remain recoverable

## Design Notes

Keep it calm, editorial, and useful. Avoid turning this into a generic SaaS landing page. The site should feel like a high-signal operating manual made by a designer who is actively building products with AI.

## Required Context Before Visual Edits

Before changing visual design, layout, typography, cards, buttons, spacing, colors, or page structure, read these files in order:

1. `DESIGN.md` - visual direction, font roles, type scale discipline, anti-drift rules
2. `docs/DESIGN-SYSTEM.md` - design system overview and CSS organization
3. `docs/design-system/TOKENS.md` - canonical token values for fonts, type, colors, radius, shadows, spacing, and widths
4. `docs/design-system/COMPONENTS.md` - reusable component roles
5. `docs/design-system/LAYOUT.md` - page and reading layout rules

Use the tokens in `styles.css` instead of hard-coded one-off values. If a new visual value is needed, add it as a token and document it in `docs/design-system/TOKENS.md`.

Do not introduce a new font, color palette, radius system, shadow style, or page layout pattern without updating `DESIGN.md` and the relevant design-system doc.

## Required Context Before Content Or IA Work

Before adding pages, writing articles, changing navigation, or deciding what old material to reuse, read these files in order:

1. `BRAIN.md` - central product brain, north star rule, site layers, source policy, and first build order
2. `docs/CONTENT-INDEX.md` - readable recap of chapters, articles, newsletter index, and derivative rules
3. `docs/FOUNDATION.md` - product thesis, audience, positioning, and what this site is not
4. `docs/FOUNDATION-IA.md` - canonical foundation-course sequence and page requirements
5. `docs/FOUNDATION-GLOSSARY.md` - plain-language definitions to use consistently
6. `docs/FOUNDATION-LESSONS.md` - course-ready lesson objectives, exercises, and artifacts
7. `docs/INDUSTRY-OVERVIEW.md` - external framing for the new design process, taste, craft, AI-assisted coding, and learning by building
8. `docs/skills/marco-writing-voice/SKILL.md` - writing voice, no-copy rule, and Planark proof rule
9. `docs/skills/article-to-marco-voice/SKILL.md` - transform external references into Marco's argument and Harness lessons
10. `docs/logs/2026-08-02-foundation-and-writing-system.md` - build log and lessons from the early IA/writing decisions
11. `docs/NEWSLETTER-ROADMAP.md` - free email course direction and chapter derivative rules
12. `docs/EMAIL-COURSE-20-DAY.md` - expanded free email course outline
13. `docs/CONTENT-INVENTORY.md` - recovered source material and where it should go
14. `docs/CONTENT-MODEL.md` - page types, templates, required sections, and done criteria
15. `docs/SITEMAP.md` - current IA, planned child pages, source mapping, priorities, and build order
16. `docs/EDITORIAL-ROADMAP.md` - first 10 pieces and publishing sequence
17. `docs/HARNESS-ROADMAP.md` - Design Harness scope, modules, and downloadable direction

Use source material from `_source-archive/content/` first. Do not create generic AI-design articles if a Planark/build/process source can ground the page in real work.

Source policy:

- Use Planark product book, Planark build book, Planark product guidelines/documentation when available, designer-agent notes, and current context/design docs as source material.
- Do not rely on old HTML pages for content. Old HTML can be used only as visual/layout reference.
- Do not copy-paste ideas from external articles. Use them as inspiration, then transform them through Marco's point of view, Planark examples, and reusable Harness rules.
- Use build logs as source material for field notes, course lessons, and learning-by-mistake articles.
- For serious chapters, plan derivatives: email lesson, LinkedIn post, short snippets, course exercise, and Harness artifact.
- Build the foundations before the full Harness: Planark proof, industry shift, AI design process, light Design Harness map, skill format, `AGENTS.md` / `CLAUDE.md`, `DESIGN.md`, orchestration, source trust, then full Design Harness setup.

## Article Templates

Use two canonical article templates:

- `article-template.html` for practical how-to guides, workflow documentation, setup pages, comparisons, and reusable references. It uses `.template-hero`, `.template-layout`, `.section-nav`, and structured components.
- `editorial-template.html` for Medium-style essays, field notes, product stories, and reflective public writing. It uses `.editorial-hero`, `.editorial-article`, `.editorial-section`, and a narrow reading column with no sidebar.