v0.1.0

Moth

J.unior D.esign A.gent

Taste is a pattern. Patterns can be learned.

You say: "experimental layout, harmonious color, newjack type"
↓
[ DESIGN AGENT ]
knows what those terms mean to you
↓
Output: coherent design you couldn't have imagined — but recognizably yours

Overview

The agent starts as a blank slate. You define the terms. You feed it knowledge. You show it images. You teach it what your eye sees. Then it creates like you, to your vision.

You teach it your references. You approve or reject its output. Over time, it learns to work in your shadow — a junior design-agent trained on your vision.

Three Products, One Foundation

1. Studio Junior Designer
Primary focus. Flexible collaborator. Projects vary. Styles curated by you. Agent combines references in surprising ways. Coherence + beauty is the metric.
2. White-label Brand Agent
Secondary. Constrained agent for individual brands. One brand's guidelines locked in. Fast iteration within strict rules. Consistency is the only metric.
3. Effects Plugin
Standalone Figma plugin with text effects, scatter, morph tools. May ship with either of the above or as its own product.

Learning

The agent stores session history and user feedback. Confidence scores adjust based on approvals and rejections. Relevant learnings are retrieved for new briefs.

Architecture

[ KNOWLEDGE LAYER ]

YOUR TERMS
"experimental layout" → what it means to you + techniques + anti-patterns
"harmonious color" → how you use it + references + compatibilities
"newjack typeface" → foundries you like + characteristics + pairings

RULE-BREAKING
Müller-Brockmann rule → when to break → how to break well
Every violation is intentional, documented, anchored

BOOK KNOWLEDGE (current)
Müller-Brockmann (Grid Systems) → 88 layout principles
Emil Ruder (Typography) → 137 type principles
Alina Wheeler (Branding) → 134 branding principles
+ add more via training pipeline

STYLE PROFILES (current)
swiss_modernism, retro_70s, studio_profile_template
+ define your own

REFERENCE BANK (current)
Eagle + Are.na integration ready
+ tag images with your terms to build

↓

[ AgentCore™ ]

IDEATION (generate concepts) → EXECUTION (produce Figma JSON) → CRITIQUE (evaluate) → ↺

LEARNING
Store successful patterns, failed attempts, feedback
Adjusts based on approvals and rejections

↓

[ OUTPUT LAYER ]

Figma Plugin  |  Moodboards from Eagle  |  HTML/CSS Prototypes

Components

AgentCore™

The agent takes briefs, pulls relevant knowledge, generates work, critiques itself, learns from corrections, and repeats until the output meets the criteria.

[ DESIGN BRIEF ]
↓
[ KNOWLEDGE RETRIEVAL ]
Foundation principles (always)
Style profile (if specified)
Relevant past learnings
↓
[ DESIGN REASONING ]
Analyze brief requirements
Plan approach using skills
Generate initial design
↓
[ REFLECTION LOOP ]
Self-critique against principles
Identify weaknesses
Generate improved version
Repeat until satisfactory
↓
[ OUTPUT & LEARNING ]
Generate final output (Figma JSON / Image)
Store learnings in memory
Update skill proficiency

Knowledge Base

All extracted principles are stored in the skills/ and knowledge/ directories, organized by domain and source.

Layout
88 principles from Grid Systems in Graphic Design by Müller-Brockmann
Typography
137 principles from Typography by Emil Ruder
Branding
134 principles from Designing Brand Identity by Wheeler
Your Terms
Studio-defined terms: experimental, strict_grid, editorial, harmonious, curious, restrained, classic, newjack, expressive
Rule-breaking
When and how to intentionally violate principles
Style Codes
--style swissmodernism, --style Lubalin, --style PaulRand, --style brianokarskistudio

VisionEngine™

The vision engine learns from your curated images (pulling from Are.na, Eagle) using Gemini + visual LLMs for image coherence analysis, style interpretation, and content classification.

Layout patterns
Grids, spacing, hierarchy, edge behavior, white space usage
Art direction
Color relationships, image treatment, mood, atmosphere
Wordmarks
Letterform construction, spacing, weight, custom type decisions
Typography
Pairings, scale relationships, positioning, hierarchy patterns

Training Pipeline

The training pipeline is Python-based and handles how knowledge enters the system — book extraction, image analysis, pattern recognition. Uses Gemini for vision tasks. This is one reason to keep Python in the stack even if the main agent moves to TypeScript.

Eagle + Are.na
Visual reference management. Import from Are.na channels. Tag images with your terms.
AI Vision (Gemini)
Auto-detect design categories, interpret style, analyze image coherence. Used for Eagle tagging and style training.
eagle_extractor.py
Eagle library → training data from your tags
pattern_analyzer.py
Find visual patterns across image clusters tagged the same way
style_synthesizer.py
Auto-generate style profiles from learned patterns
book_processor.py
PDF → principles extraction (text + scanned via vision)

Reasoning Engine

The reasoning engine analyzes briefs, selects relevant principles, plans the approach, and generates the work in a structured four-step process.

Reflection Engine

The reflection engine critiques output against principles, scoring layout, type, color, and concept before identifying problems and applying fixes.

Memory Palace

The memory palace stores sessions, extracts learnings, and tracks approvals, rejections, and adjustments while updating confidence scores over time.

Skill Registry

The skill registry maps deliverables to skills—logo work requires typography and branding, layout requires grid and composition—with book-extracted principles attached to each.

Moth Agent

Moth is the TypeScript AI reasoning layer — a standalone Node.js application (not a Figma plugin) that handles ideation, execution, and critique. It uses GPT-4 and outputs JSON specs that can be executed by the Figma plugin or other output channels. Currently a parallel implementation to the Python agent; architecture decision pending on whether to merge or keep both with shared knowledge.

ideate(brief)
Generate concept variations with rationale
execute(concept)
Produce JSON spec for Figma, HTML, or other outputs
critique(frame)
Audit designs against principles and defined terms

Moth Figma Plugin

The Figma plugin serves as the output layer, executing designs directly in your canvas.

Work in progress — these are example capabilities.

JSON → Figma
The bridge between agent reasoning and real output. The agent's ideation and design decisions become actual Figma frames, components, and layouts.
Moodboards
Generate moodboards from Are.na or Eagle references based on channels and tags
Mockup Design
Apply designs to product mockups and environmental contexts
Quick Components
Button, Card, Hero, Nav — instant creation
Text Effects
Alternate case/color/font, rainbow, gradient, wave, glitch
Stroke Scatter
Clone elements along path
Translation/Morph
Transform effects between states
Text on Path
Bend text along vector path
Variable Sync
Tokens → Figma variables (primitives → semantic → component)

Your Design Language

You define terms. The agent learns them based on what you teach it. When you say "curious color" in a brief, it knows exactly what you mean — your definition, your references, your Pantone swatches, whatever.

These are examples — you define your own.

Layout

--experimental
Break grid for emphasis. Asymmetry creates tension. One or two wild elements, rest anchored.
--strict_grid
Müller-Brockmann. Everything aligns. Mathematical relationships between elements.
--editorial
Magazine logic. Strong hierarchy. Pull quotes. Hero images. Columns and marginalia.

Color

--harmonious
Colors that feel inevitable. Analogous or monochromatic. Atmosphere, not attention.
--curious
Unexpected pairings that still work. The eye questions, then accepts.
--restrained
Black, white, one accent. Color means significance.

Typography

--classic
Garamond. Caslon. Baskerville. Typefaces that survived centuries for a reason.
--newjack
Dinamo. Pangram. Grilli. Variable axes. Visible design decisions.
--expressive
Type as image. The letterform is the design. Used at scale, never for body.

Project Structure

agent/                     ← Python agent (prototype)
├── core.py               Main agent orchestration
├── reasoning.py          Design thinking layer
├── reflection.py         Self-critique system
├── knowledge.py          Knowledge management
├── memory.py             Long-term learning
├── skills.py             Skill registry
└── tools/
    ├── figma_mcp.py      Figma integration
    └── image_gen.py      Image generation

design-agent/              ← TypeScript agent + Figma plugin
├── figma-plugin/         Plugin source
├── src/agent/            MothAgent (ideate, execute, critique)
├── src/tokens/           Three-layer token system
├── src/motion/           Animation system
└── guidelines/           Design knowledge (MD format)

knowledge/
├── foundations/          Universal principles (always loaded)
├── studio/               YOUR design language
│   ├── vocabulary.yaml   Terms you use in briefs
│   └── rule_breaking.yaml  Intentional violations
├── rules/                Evaluation criteria
└── books/                Extracted book knowledge (JSON)

skills/
├── layout/               88 principles (Müller-Brockmann)
├── typography/           137 principles (Emil Ruder)
└── branding/             134 principles (Wheeler)

styles/
├── studio_profile_template/
├── swiss_modernism/
└── retro_70s/

training/                  ← Knowledge ingestion pipeline
├── book_processor.py     PDF → principles (text PDFs)
├── scanned_book_processor.py  PDF → principles (image PDFs)
├── eagle_extractor.py    Eagle → training data
├── pattern_analyzer.py   Find patterns in clusters
├── style_synthesizer.py  Auto-generate style profiles
├── moodboard.py          Create moodboards from refs
└── pipeline.py           Orchestrate full training

arena x eagle/             ← Visual reference management
├── main.py               Interactive menu
├── ai_vision.py          Image analysis (Gemini)
└── config.py             API configuration

Current Status

Complete

  1. Project architecture and framework structure
  2. Documentation site (this whitepaper)
  3. Knowledge layer scaffolding (skills/, knowledge/, styles/)
  4. Training pipeline infrastructure ready for input
  5. Book processing pipeline (PDF → principles, text + scanned)
  6. Book knowledge extracted: Müller-Brockmann (88 layout principles), Emil Ruder (137 type principles), Alina Wheeler (134 branding principles)
  7. Agent core structure (Python + TypeScript) ready for training

In Progress

  1. Design language definitions — studio/vocabulary.yaml
  2. Rule-breaking framework — studio/rule_breaking.yaml
  3. Style profile template with type, color, layout, motion
  4. Guidelines in Markdown (brand-voice, grid-logic, typography, color-theory, motion-principles, image-treatment)
  5. Connect defined terms to agent prompts
  6. Agent references your definitions when generating
  7. Design token system (primitives → semantic → component)

Next

  1. Decide agent architecture: single runtime (Python or TypeScript) or shared knowledge layer between both
  2. Eagle image tagging with your terms
  3. Eagle + Are.na AI vision integration
  4. Connect agents via shared knowledge (if keeping both runtimes)
  5. Visual critique with principles + defined terms
  6. Learning/memory persistence
  7. Style profile → Figma execution
  8. WebSocket bridge for real-time Figma updates
  9. Figma plugin completion (JSON execution, effects, moodboards)
  10. White-label brand agent extraction

Update Log

2026-01-13 00:45
d.0.c.s. documentation site [updated]

Major revision. Added Three Products (Studio Junior Designer, White-label Brand Agent, Effects Plugin). Added VisionEngine™, AgentCore™, Memory Palace, Training Pipeline sections. Clarified Moth Agent vs Moth Figma Plugin architecture. Added Style Codes, inline monospace for commands. Linked Are.na + Eagle. Reorganized Current Status with architecture decision. New tagline. Mobile responsive. Refined copy throughout.

2026-01-12 22:47
d.0.c.s. documentation site [created]

Initial documentation website with project overview, architecture diagrams, component descriptions, and project status.

Peace