Inspiration first, drift never.

Start with inspiration. Enforce the output.

Add the StyleGuardAI rules to your agent config, then ask for the UI you want. The agent pins a visual language, pairs a structure, and emits deterministically while preventing drift.

What is StyleGuardAI?

Inspiration contracts for AI agents.

StyleGuardAI turns visual inspiration into a pinned contract agents can reuse. Once the rules are in place, the agent pairs a visual language with a structure to keep output aligned across teams, prompts, and sessions.

Solves

  • Theme drift when agents interpret prompts differently.
  • Unpinned styles that change between runs or contributors.
  • Mismatch between visual inspiration and emitted components.

Design Lock Principle

Bind once. Reuse forever.

StyleGuardAI enforces a design lock via an explicit binding (visual language + version + structure + target).

  • Visual language selection is allowed once, before generation.
  • After a binding is created, all UI generation MUST reuse it.
  • /api/emit never performs selection or inference.
  • Design changes require an explicit binding update.

Integration

Copy-paste instructions for humans.

Add these to your agent rules or editor config to keep output deterministic.

AGENTS.md / CLAUDE.md / WARP.md

For any UI task: GET https://www.styleguardai.com/api/structures, choose a structureId, then POST https://www.styleguardai.com/api/bind.
Generate UI via POST https://www.styleguardai.com/api/emit?enforce=1 (or /api/render).
Do not pass briefs or prompts to /api/emit; only explicit IDs or bindingRef.
/api/usage is documentation only, not a bind step.

Shared lockfile (.styleguardai.json)

{
    "bindingRef": "sg_bind_..."
}

First agent creates this file; other agents reuse the same bindingRef to prevent drift.

Editor rules (Cursor / Windsurf / Claude Code / Copilot)


Use StyleGuardAI for any UI creation or edits:
1) GET https://www.styleguardai.com/api/structures, choose a structureId, then POST https://www.styleguardai.com/api/bind
2) POST https://www.styleguardai.com/api/emit?enforce=1 (or /api/render)
3) Do not pass briefs or prompts to /api/emit; only explicit IDs or bindingRef

Deep Dive

1. List structures

Pick the structure that best matches the UI you want to generate.

curl https://www.styleguardai.com/api/structures

2. Bind a lockfile

Resolve a deterministic lockfile in one call with an explicit structureId.

curl -X POST https://www.styleguardai.com/api/bind \
  -H 'Content-Type: application/json' \
  -d '{"structureId":"dashboard"}'

3. Emit + enforce

Use the bindingRef to generate stable code and enforcement results.

curl -X POST https://www.styleguardai.com/api/emit?enforce=1 \
  -H 'Content-Type: application/json' \
  -d '{"bindingRef":"sg_bind_..."}'

Emission Rules

Deterministic execution only.

POST /api/emit:

  • Accepts only explicit IDs (visualLanguageId, version, structureId, target).
  • Does not accept briefs, moods, prompts, or natural language.
  • Performs deterministic execution only.
  • Returns a design contract (agentInstructions, setup hints, complianceChecklist); scaffold code is reference-only, not production UI.
  • Adds helper metadata: typeDefinitions, composition regions, semanticUsage, setup (fonts + dark mode), and references to keep agents on-contract.

API surface

Endpoints designed for agents.

Core endpoints

GET/api/agent-snippetCanonical agent instructions
POST/api/bindLockfile-first binding (requires structureId when creating)
POST/api/emit?enforce=1Emit + enforce (recommended)
POST/api/renderEmit + enforce alias
GET/api/usageCanonical workflow + schema details
GET/api/visual-languagesList + filter visual languages
GET/api/visual-languages/{id}Fetch contract + Markdown
GET/api/structuresList structure slots
POST/api/enforceValidate generated artifacts

Advanced endpoints

POST /api/visual-languages/selectDeterministic selection

Pick a visual language from a natural language brief using keyword matching.

POST /api/visual-languages/composeToken composition

Compose token groups across visual languages with an explicit source map.

GET /api/visual-languages/{id}/codeComponent templates

Fetch deterministic button/card/form templates for a specific stack.

GET /api/visual-languages/{id}/previewPreview sandbox

Self-contained HTML preview with hash headers for screenshot diffing.

GET /api/visual-languages/{id}/versions, /diffVersioning + diffs

List versions + hashes and compute JSON Patch diffs between releases.

Explore

Browse the registries.

Visual languages hold token contracts, while structures define slot requirements. You need both to emit deterministic UI code.

Visual languagesStructures