Platform Rebuild
A high-stakes Experience Infrastructure initiative to stabilize and scale a platform-wide rebuild by engineering AI-governance layers and a tokenized design system for a high-velocity, "vibe-coding" environment.
01 Project Brief
Goal
To transform a fragmented, AI-accelerated development environment into a governed, scalable infrastructure that ensures experience coherence and design-to-code integrity without sacrificing development speed.
Users
- The "Elite" Core Team: 30+ engineers, product managers, architects and designers using vibe-coding to rebuild the platform in real-time.
- AI Agents (Claude/Cursor): Functioning as primary contributors that require strict logic and rule-based guardrails to generate high-quality UI.
- Future Contributors: Developers who need a scalable, tokenized framework that adapts to new components automatically.
Team
- UX Team: 7 principal-level designers plus me 😎
- Engineering Team: 30 engineers
- Product Management Team: 5 product managers
- Technical Writing Team: 3 technical writers
Skills
- Experience Infrastructure
- Agentic Governance
- Systems Refactoring
- Scalable Architecture
Before
A "Frankenstein" repository of fragmented styles, conflicting libraries, and unmanaged technical debt with no unified development process.
After
A unified experience infrastructure and automated development process that scales design logic and system compliance through a master rule+skill+token framework.
02 My Approach
This infrastructure flow stabilizes the platform by sanitizing legacy technical debt, establishing agentic governance through rule-based AI guardrails, and architecting a scalable referencing system to ensure long-term design coherence.
03 Foundation: The One-Time Migration
Step 1: Token Injection
Introduced a centralized library of Color, Typography, Iconography, Layout and Depth & Elevation tokens directly into the master Git repository to establish the new source of truth.
Step 2: AI-Driven Audit
Leveraged AI to crawl the codebase and generate a comprehensive map of all legacy CSS classes and hard-coded values alongside suggested token mappings.
Step 3: Human-in-the-Loop Validation
Conducted a manual review to resolve complex mapping conflicts, audit AI suggestions for accuracy, and define new tokens for unique edge cases that the AI could not categorize.
Step 4: Systemic AI Execution
Requested the AI to perform a coordinated, project-wide migration, swapping thousands of legacy instances for standardized tokens to ensure experience coherence.
04 Governance: The Rule + Skill Layer
The .claude.md Rule Files
The "Source of Truth": I authored and maintained central rule files that define the "code of conduct" for all AI contributions. Logic Constraints: These files provided strict instructions on token usage, layout patterns, and component hierarchy to prevent "design drift" during vibe-coding sessions.
AI Skill Files (Automated Enforcement)
To scale design capacity, I developed specialized AI "skills" that act as automated quality gates in the development lifecycle:
- PR-Readiness & Review: Automated checks to ensure that new code adheres to the master repo's architectural standards before it reaches human review.
- Accessibility Check: A built-in skill that audits every generated UI component for WCAG 2.1 compliance in real-time.
05 Evolution: The The Scalable Infrastructure
The Hierarchy of Truth
- The Master Gate (claude.md): This serves as the entry point for the AI, containing high-level design principles and global constraints to prevent "design drift".
- Domain-Specific Rules: The system branches into specialized files for Typography, Color, Spacing, and Icons, allowing AI agents to call only the context relevant to the current task.
- Deep Component Specs: By organizing logic into sub-directories (e.g., /components/buttons.md), the AI has access to granular technical specifications and implementation examples.
Automated Quality Gates
I established a critical agentic workflow that integrates rules, skills and hooks to maintain repository health and scale design capacity:
- Component Registry: A single source of truth for what UI components exist in design system and where to find them.
- ui-guardrails.md: A set of pre-submission skills where the AI scans for UI changes, validates them against the design guides, and flags violations before human review.
- pr-readiness.md: A pre-submission skill that ensures code is "production-ready" before a pull request (PR) is created.
It resulted in 0% hard-coded values in the master repo since implementation; 40% reduction in manual UI review cycles.
Cross-Referencing Logic
To maximize both system accuracy and agent performance, I implemented a dynamic referencing model using a specialized tagging syntax (e.g., @typography.md, @color.md).
- Context-Aware Injection: Rather than forcing the AI to process a massive, 10,000-line “Master Guide,” this structure allows the agent to selectively read only the relevant guidance needed for the specific task at hand (e.g., only loading buttons.md when building a form).
- Performance & Accuracy: By minimizing the "noise" in the AI’s context window, this modular approach significantly increases response accuracy, reduces hallucination rates, and improves generation speed.
- Dynamic Synchronization: This infrastructure ensures that when a token is updated in a specialized "leaf" file, the change propagates across the entire agentic system automatically, maintaining a "Living Source of Truth" without manual logic updates.
