Skip to content

VISION.md

Latest commit

 

History

History
111 lines (69 loc) · 6.32 KB

VISION.md

File metadata and controls

111 lines (69 loc) · 6.32 KB

VISION

Argus exists because AI agents are blind.

They can generate a thousand lines of code in seconds. They can wire up APIs, handle state, manage routing. But when it comes to visual quality — spacing, hierarchy, color harmony, typographic rhythm, responsive behavior — they're guessing. Every agent-generated UI looks like it was designed by someone who read the docs but never developed taste.

That's not a model problem. It's an infrastructure problem.

The core thesis

Design quality cannot be prompt-engineered. You can't write a system prompt that gives Claude or GPT-4 or Gemini the ability to see that your button's padding feels wrong, or that your heading is competing with your subheading, or that your grid has 47 different spacing values when it should have 5.

Design quality requires a runtime — a structured perception layer that does for visual quality what linters do for code quality. Not opinions. Measurements. Patterns. Rules that are observable, scorable, and teachable.

Argus is that runtime.

The four capabilities

An excellent design intelligence system must do four things:

  1. See — Inspect any DOM surface and extract what's actually happening. Not what the CSS says. What the user sees. Computed styles, element relationships, spatial arrangement, visual hierarchy, accessibility tree. The inspector layer.

  2. Judge — Apply design principles as measurable rules. Spacing consistency. Typographic scale adherence. Color contrast ratios. Touch target sizes. Visual hierarchy scoring. Not aesthetic opinions — structural analysis against proven principles. The scorer layer.

  3. Act — When a problem is identified, apply the fix. CSS interpolation, typography adjustment, spacing normalization, color correction. Not suggestions in a report. Actual mutations with before/after proof. The action layer.

  4. Learn — Remember what the human approved and rejected. Build a taste profile over time. Export it as structured context any agent can consume. The agent stops making the same mistakes because the system remembers every decision. The memory layer.

See. Judge. Act. Learn. That's the loop.

What Argus is not

Argus is not a design tool. You don't open Argus to design things.

Argus is not a linter. Linters enforce rules you write. Argus discovers the rules by observing your codebase.

Argus is not an AI wrapper. It doesn't call an LLM to judge your design. It applies deterministic, principle-based analysis that runs in milliseconds.

Argus is not a style guide generator. It's a runtime that plugs into your agent's tool chain and gives it perception it didn't have before.

The architecture

Argus is a local-first design intelligence runtime with four layers:

Browser / DOM / Screenshots
         │
         ▼
┌─────────────────────────────┐
│      Inspector Layer        │
│   (DOM · CSS · A11y · Structure)  │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│       Scorer Layer          │
│  (Rules · Principles · Audit)     │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│       Action Layer          │
│  (Flux · Typo · Pulse · Lens)     │
└──────────────┬──────────────┘
               │
               ▼
┌─────────────────────────────┐
│       Memory Layer          │
│  (Preferences · Profiles · Export) │
└─────────────────────────────┘

Each layer operates independently. Use just the inspector. Use just the scorer. Use the full stack. The layers compose but don't depend.

The MCP interface

The primary distribution channel is MCP (Model Context Protocol). Any AI coding agent — Claude Code, Cursor, Copilot, Windsurf — connects to the Argus MCP server and gains design intelligence tools. The agent calls design.inspect to see, design.score to judge, design.apply to act, and design.preferences to learn. No setup beyond connecting the server.

This is the viral loop. Developers don't install Argus because they want a design tool. They install it because their agent suddenly gets better at design. The value is in the integration, not the product.

The design principles behind Argus itself

  1. Local-first. All data stays on your machine. Inspection results, scores, preference profiles — nothing leaves localhost unless you export it.

  2. Deterministic. No LLM in the scoring loop. Rules are code. Results are reproducible. Two runs on the same DOM produce identical scores.

  3. Composable. Each package works alone. @argus-design/inspector doesn't need @argus-design/scorer. You take what you need.

  4. Observable. Every score comes with the rule that produced it, the element it applies to, the measured value, the expected range, and a human-readable explanation. No black boxes.

  5. Fast. Full page inspection + scoring completes in under 200ms. If it's slow, agents won't use it. Speed is a feature.

  6. Extensible. Write custom rules. Write custom skills. The rules API is a function that takes an inspection result and returns findings. That's it.

Where this goes

Phase 1: Inspector + Scorer + Memory + MCP server. The core loop works end-to-end.

Phase 2: Action layer integration (Flux, Typo, Pulse, Lens). The agent can now fix what it finds.

Phase 3: Browser extension. Non-developers can use Argus visually.

Phase 4: Figma/design tool plugins. Bridge between design and code quality.

Phase 5: Team profiles. Shared taste profiles across organizations. Your entire engineering team's agents share the same design standards.

The endgame is a world where AI agents have genuine design taste — not because we taught the models about design, but because we gave them a perception layer that measures quality in real time. The model provides intelligence. Argus provides sight.

"Design is direction, not decoration."