aios-core
Version:
Synkra AIOS: AI-Orchestrated System for Full Stack Development - Core Framework
503 lines (445 loc) • 16.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Shock Report - {{PROJECT_NAME}}</title>
<style>
/* Self-contained CSS - zero external dependencies */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: #dc2626;
}
h2 {
font-size: 1.8rem;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 3px solid #dc2626;
}
h3 {
font-size: 1.3rem;
margin: 30px 0 15px;
color: #374151;
}
.subtitle {
font-size: 1.2rem;
color: #6b7280;
margin-bottom: 30px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-card {
padding: 20px;
background: #fef2f2;
border-left: 4px solid #dc2626;
border-radius: 4px;
}
.stat-card.good {
background: #f0fdf4;
border-left-color: #16a34a;
}
.stat-label {
font-size: 0.9rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-value {
font-size: 2.5rem;
font-weight: bold;
color: #dc2626;
margin: 10px 0;
}
.stat-card.good .stat-value {
color: #16a34a;
}
.stat-detail {
font-size: 0.95rem;
color: #4b5563;
}
.horror-show {
background: #fef2f2;
padding: 30px;
border-radius: 8px;
margin: 30px 0;
}
.pattern-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
}
.pattern-item {
padding: 15px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 4px;
text-align: center;
font-size: 0.85rem;
}
.pattern-preview {
width: 100%;
height: 40px;
margin-bottom: 10px;
border-radius: 4px;
}
.consolidation-preview {
background: #f0fdf4;
padding: 30px;
border-radius: 8px;
margin: 30px 0;
}
.comparison {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin: 20px 0;
font-size: 1.5rem;
}
.comparison .before {
color: #dc2626;
font-weight: bold;
}
.comparison .after {
color: #16a34a;
font-weight: bold;
}
.comparison .arrow {
font-size: 2rem;
color: #6b7280;
}
.roi-calculator {
background: #eff6ff;
padding: 30px;
border-radius: 8px;
margin: 30px 0;
}
.cost-row {
display: flex;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #e5e7eb;
}
.cost-row:last-child {
border-bottom: none;
font-weight: bold;
font-size: 1.2rem;
}
.cost-label {
color: #4b5563;
}
.cost-value {
color: #1e40af;
font-weight: 600;
}
.cost-row:last-child .cost-value {
color: #16a34a;
font-size: 1.5rem;
}
.timeline {
margin: 30px 0;
}
.timeline-item {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.timeline-marker {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #dc2626;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.timeline-marker.complete {
background: #16a34a;
}
.timeline-content {
flex: 1;
padding: 10px 0;
}
.timeline-title {
font-weight: 600;
margin-bottom: 5px;
}
.timeline-desc {
color: #6b7280;
font-size: 0.9rem;
}
.chart {
width: 100%;
height: 300px;
margin: 30px 0;
position: relative;
}
.chart-bar {
position: absolute;
bottom: 0;
width: 45%;
background: linear-gradient(to top, #dc2626, #f87171);
border-radius: 4px 4px 0 0;
transition: height 0.3s;
}
.chart-bar.before {
left: 5%;
}
.chart-bar.after {
right: 5%;
background: linear-gradient(to top, #16a34a, #4ade80);
}
.chart-label {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
font-weight: 600;
}
.chart-value {
position: absolute;
top: -30px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
}
@media print {
body {
background: white;
padding: 0;
}
.container {
box-shadow: none;
}
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.8rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.comparison {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<h1>🔍 Design System Shock Report</h1>
<p class="subtitle">Let me show you the horror show you've created</p>
<p><strong>Project:</strong> {{PROJECT_NAME}}<br>
<strong>Scanned:</strong> {{SCAN_DATE}}<br>
<strong>Path:</strong> {{SCAN_PATH}}<br>
<strong>Files Analyzed:</strong> {{TOTAL_FILES}}</p>
<!-- Executive Summary Stats -->
<h2>📊 Executive Summary</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Unique Patterns Found</div>
<div class="stat-value">{{TOTAL_PATTERNS}}</div>
<div class="stat-detail">Across {{PATTERN_CATEGORIES}} categories</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Usage Instances</div>
<div class="stat-value">{{TOTAL_INSTANCES}}</div>
<div class="stat-detail">{{REDUNDANCY_FACTOR}}x redundancy factor</div>
</div>
<div class="stat-card">
<div class="stat-label">Monthly Waste</div>
<div class="stat-value">${{MONTHLY_WASTE}}</div>
<div class="stat-detail">${{ANNUAL_WASTE}}/year in maintenance</div>
</div>
<div class="stat-card good">
<div class="stat-label">Potential Savings</div>
<div class="stat-value">${{ANNUAL_SAVINGS}}</div>
<div class="stat-detail">After consolidation</div>
</div>
</div>
<!-- Horror Show Section -->
<h2>😱 The Horror Show</h2>
<div class="horror-show">
<h3>{{PATTERN_TYPE_1}} Variations ({{PATTERN_COUNT_1}} unique)</h3>
<p>You have {{PATTERN_COUNT_1}} different {{PATTERN_TYPE_1}} implementations when you should have {{CONSOLIDATED_COUNT_1}}.</p>
<div class="pattern-grid">
{{#EACH_PATTERN_1}}
<div class="pattern-item">
<div class="pattern-preview" style="background: {{PATTERN_COLOR}}; {{PATTERN_STYLE}}"></div>
<div>{{PATTERN_NAME}}</div>
<div style="color: #6b7280; font-size: 0.75rem;">Used {{USAGE_COUNT}} times</div>
</div>
{{/EACH_PATTERN_1}}
</div>
<h3 style="margin-top: 40px;">{{PATTERN_TYPE_2}} Variations ({{PATTERN_COUNT_2}} unique)</h3>
<p>{{PATTERN_COUNT_2}} different colors detected. Industry standard: 10-15 tokens.</p>
<div class="pattern-grid">
{{#EACH_PATTERN_2}}
<div class="pattern-item">
<div class="pattern-preview" style="background: {{COLOR_VALUE}};"></div>
<div>{{COLOR_HEX}}</div>
<div style="color: #6b7280; font-size: 0.75rem;">{{USAGE_PERCENTAGE}}% usage</div>
</div>
{{/EACH_PATTERN_2}}
</div>
</div>
<!-- Consolidation Preview -->
<h2>✨ Consolidated Future State</h2>
<div class="consolidation-preview">
<h3>What Your System Should Look Like</h3>
<div class="comparison">
<span class="before">{{TOTAL_PATTERNS}} patterns</span>
<span class="arrow">→</span>
<span class="after">{{CONSOLIDATED_PATTERNS}} patterns</span>
</div>
<div class="comparison">
<span style="font-size: 1.2rem;">Reduction: <strong style="color: #16a34a;">{{REDUCTION_PERCENTAGE}}%</strong></span>
</div>
<div class="chart">
<div class="chart-bar before" style="height: {{BEFORE_HEIGHT}}%;">
<div class="chart-value">{{TOTAL_PATTERNS}}</div>
<div class="chart-label">Before</div>
</div>
<div class="chart-bar after" style="height: {{AFTER_HEIGHT}}%;">
<div class="chart-value">{{CONSOLIDATED_PATTERNS}}</div>
<div class="chart-label">After</div>
</div>
</div>
<h3 style="margin-top: 40px;">Recommended Minimal Set</h3>
<div class="pattern-grid">
{{#EACH_CONSOLIDATED_PATTERN}}
<div class="pattern-item" style="border-color: #16a34a;">
<div class="pattern-preview" style="{{CONSOLIDATED_STYLE}}"></div>
<div><strong>{{CONSOLIDATED_NAME}}</strong></div>
<div style="color: #16a34a; font-size: 0.75rem;">Replaces {{REPLACES_COUNT}} variations</div>
</div>
{{/EACH_CONSOLIDATED_PATTERN}}
</div>
</div>
<!-- ROI Calculator -->
<h2>💰 Cost Analysis & ROI</h2>
<div class="roi-calculator">
<h3>Monthly Maintenance Costs</h3>
<div class="cost-row">
<span class="cost-label">Current: {{TOTAL_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
<span class="cost-value">${{MONTHLY_COST_BEFORE}}</span>
</div>
<div class="cost-row">
<span class="cost-label">After: {{CONSOLIDATED_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
<span class="cost-value">${{MONTHLY_COST_AFTER}}</span>
</div>
<div class="cost-row">
<span class="cost-label">Monthly Savings</span>
<span class="cost-value">${{MONTHLY_SAVINGS}}</span>
</div>
<h3 style="margin-top: 30px;">Annual Projection</h3>
<div class="cost-row">
<span class="cost-label">Annual Maintenance Waste (Current)</span>
<span class="cost-value">${{ANNUAL_WASTE}}</span>
</div>
<div class="cost-row">
<span class="cost-label">Annual Maintenance Cost (After)</span>
<span class="cost-value">${{ANNUAL_COST_AFTER}}</span>
</div>
<div class="cost-row">
<span class="cost-label">Implementation Investment</span>
<span class="cost-value">${{IMPLEMENTATION_COST}}</span>
</div>
<div class="cost-row">
<span class="cost-label">Annual Savings</span>
<span class="cost-value">${{ANNUAL_SAVINGS}}</span>
</div>
<h3 style="margin-top: 30px;">ROI Metrics</h3>
<div class="cost-row">
<span class="cost-label">ROI Ratio</span>
<span class="cost-value">{{ROI_RATIO}}x</span>
</div>
<div class="cost-row">
<span class="cost-label">Breakeven Timeline</span>
<span class="cost-value">{{BREAKEVEN_DAYS}} days</span>
</div>
<div class="cost-row">
<span class="cost-label">3-Year Total Savings</span>
<span class="cost-value">${{THREE_YEAR_SAVINGS}}</span>
</div>
</div>
<!-- Migration Timeline -->
<h2>🗓️ Estimated Migration Timeline</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-marker">1</div>
<div class="timeline-content">
<div class="timeline-title">Phase 1: Foundation ({{PHASE_1_DURATION}})</div>
<div class="timeline-desc">Deploy token system, no visual changes. Zero risk.</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker">2</div>
<div class="timeline-content">
<div class="timeline-title">Phase 2: High-Impact Patterns ({{PHASE_2_DURATION}})</div>
<div class="timeline-desc">Replace top 3 most-used components. Immediate ROI.</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker">3</div>
<div class="timeline-content">
<div class="timeline-title">Phase 3: Long-Tail Cleanup ({{PHASE_3_DURATION}})</div>
<div class="timeline-desc">Consolidate remaining patterns. Medium risk.</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker">4</div>
<div class="timeline-content">
<div class="timeline-title">Phase 4: Enforcement ({{PHASE_4_DURATION}})</div>
<div class="timeline-desc">CI/CD validation prevents regression. Low risk.</div>
</div>
</div>
</div>
<div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin-top: 30px;">
<p style="font-size: 1.1rem;"><strong>Total Estimated Timeline:</strong> {{TOTAL_DURATION}}</p>
<p style="color: #6b7280; margin-top: 10px;">Phased approach minimizes disruption. Each phase completes independently.</p>
</div>
<!-- Footer -->
<div style="margin-top: 60px; padding-top: 30px; border-top: 2px solid #e5e7eb; color: #6b7280; font-size: 0.9rem;">
<p><strong>Generated by Brad (Design System Architect)</strong></p>
<p>🤖 Generated with <a href="https://claude.com/claude-code" style="color: #2563eb;">Claude Code</a></p>
<p>For questions about this report, activate Brad: <code>*agent design-system</code></p>
</div>
</div>
</body>
</html>