Documentation
Operating Method
How m558 works, how to integrate it into your workflow, and how it connects to the LIGHT HOPE ecosystem standards.
Overview
What is m558?
m558 is a design coordination layer for the LIGHT HOPE / X1000 ecosystem. It turns visual design rules into structured markdown that coding agents can read and execute consistently.
The problem it solves: AI agents generate UI quickly, but produce inconsistent output across sessions. Without a shared design reference, every page looks slightly different. m558 eliminates that drift.
# The core model
DESIGN.md → brand rules (what is allowed)
persona/*.md → emotional tone (how it should feel)
prompts/*.md → execution spec (what to produce)
= Coherent UI every time
Architecture
The Four Layers
L1 — Design System
design-systems/{domain}/DESIGN.mdDefines the brand rules for a product domain. Colors, typography, spacing, component patterns, what to avoid. This is the law.
L2 — Design Persona
personas/{persona}.mdDefines the emotional register. Not what colors to use — how they should feel. The difference between "uses blue" and "uses blue like Apple would".
L3 — Execution Prompt
prompts/{tool}-v{n}.mdThe operational instruction for a specific coding agent. Tells it what files to read, what to produce, and how to validate success.
L4 — Page Brief
demos/{name}/brief.mdA specific page generation spec. Describes the page, audience, sections, constraints, and expected CTA. Plug it into the execution prompt.
Integration
How to use in a project
Option A — Direct file reference
# In Claude Code session:
Read these files before writing any UI:
1. /path/to/m558/design-systems/lighthope/DESIGN.md
2. /path/to/m558/personas/airbnb-warm.md
Then build: {your page}Option B — Copy to project root
cp m558/design-systems/lighthope/DESIGN.md your-project/ cp m558/personas/airbnb-warm.md your-project/ # Then reference relative paths in prompts
Option C — MCP Memory Bridge (V5.4) ✅ Live
# m558 is registered in m556 MCP (project #23)
# Agents can fetch m558 context via:
get_project_overview("m558")
get_project_structure("m558")
get_project_issues("m558")⚠️ Existing Project Integration (v1.1.0)
# For EXISTING projects with established brands: # 1. Read target project's tailwind.config + globals.css FIRST # 2. Use DESIGN.md for layout patterns, NOT to override brand colors # 3. Persona = emotional tone within existing brand, not new palette # See "Integration Guide" in each DESIGN.md for details
Ecosystem Standards
V5.3 + V5.4 Compliance
m558 follows the LIGHT HOPE Ecosystem Standard V5.3 (Stability) and V5.4 (AI OS Integration).
Docker Compose
✅ V5.3 template
Memory limit
✅ 1GB cap
Restart policy
✅ unless-stopped
/api/health
✅ JSON response
Log rotation
✅ 10MB × 3
Port convention
✅ m558 → 8558
MCP snapshot
✅ m556 registered
Visual audit
✅ Playwright-based
Skills registry
⏳ V2 planned
README > 100 lines
✅ 248 lines
Version Roadmap
What's coming
Start applying
Read one DESIGN.md. Ship one page.
The fastest way to grok m558 is to run one execution prompt on a real page. Try the playground to see four personas on the same content, then use the Claude Code prompt.