法医学的デザインシステム監査プロンプト

{ "colors": { "primary": ["#0070f3", "rgb(37, 99, 235)", "var(--primary)"], "secondary": ["#6b7280", "rgb(107, 114, 128)", "var(--secondary)"], "accent": ["#f59e0b", "#ec4899", "var(--accent)"], "neutral": ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#4b5563", "#374151", "#1f2937", "#111827", "#000000"], "semantic": { "success": ["#10b981", "#059669"], "warning": ["#f59e0b", "#d97706"], "error": ["#ef4444", "#dc2626"], "info": ["#3b82f6", "#2563eb"] }, "cssVariables": { "--primary": "#0070f3", "--primary-foreground": "#ffffff", "--secondary": "#6b7280", "--secondary-foreground": "#ffffff", "--accent": "#f59e0b", "--accent-foreground": "#1f2937", "--background": "#ffffff", "--foreground": "#111827", "--muted": "#f3f4f6", "--muted-foreground": "#6b7280", "--border": "#e5e7eb", "--input": "#d1d5db", "--ring": "#0070f3", "--radius": "0.5rem" }, "inconsistencies": [ "3 different grays used for borders: #e5e7eb, #d1d5db, #9ca3af", "Opacity variations: rgba(0,0,0,0.5) used for overlays, rgba(255,255,255,0.8) for glassmorphism", "Dark mode mappings present but incomplete: some components use dark: classes, others rely on CSS variables" ] }, "typography": { "families": [ "Inter (Google Fonts import)", "system-ui, -apple-system, sans-serif (fallback)", "Roboto Mono (for code blocks)" ], "scale": [ "12px (0.75rem)", "14px (0.875rem)", "16px (1rem)", "18px (1.125rem)", "20px (1.25rem)", "24px (1.5rem)", "30px (1.875rem)", "36px (2.25rem)", "48px (3rem)", "64px (4rem)" ], "weights": { "Inter": [400, 500, 600, 700, 800], "Roboto Mono": [400, 500] }, "lineHeights": { "12px": "16px", "14px": "20px", "16px": "24px", "18px": "28px", "20px": "28px", "24px": "32px", "30px": "36px", "36px": "40px", "48px": "48px", "64px": "64px" }, "letterSpacing": { "normal": "0em", "tight": "-0.025em", "wide": "0.025em", "wider": "0.05em" }, "styles": [ "heading-large = Inter 36px/700/1.2", "heading-medium = Inter 24px/600/1.3", "heading-small = Inter 20px/600/1.4", "body-large = Inter 18px/400/1.5", "body = Inter 16px/400/1.5", "body-small = Inter 14px/400/1.5", "caption = Inter 12px/500/1.4", "code = Roboto Mono 14px/400/1.6" ], "responsive": [ "Mobile: heading-large = 30px, body = 16px", "Desktop: heading-large = 48px, body = 18px" ] }, "spacing": { "scale": ["0px", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "64px", "80px", "96px", "128px"], "containers": { "maxWidth": "1280px", "contentWidth": "768px", "sidebarWidth": "320px", "modalWidth": "560px" }, "grid": { "columns": 12, "gutter": "24px", "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" } }, "zIndex": { "base": 0, "sticky": 100, "dropdown": 1000, "overlay": 2000, "modal": 3000, "toast": 4000, "tooltip": 5000 }, "borderRadius": ["0px", "4px", "8px", "12px", "16px", "24px", "9999px"] }, "components": [ { "name": "Button", "path": "components/ui/button.tsx", "props": { "variant": "default | secondary | outline | ghost | destructive | link", "size": "default | sm | lg | icon", "asChild": "boolean" }, "variants": [ "default: bg-primary text-primary-foreground", "secondary: bg-secondary text-secondary-foreground", "outline: border border-border bg-background", "ghost: hover:bg-muted", "destructive: bg-error text-white", "link: underline-offset-4 hover:underline" ], "internalTokens": ["h-10 px-4 py-2", "h-9 px-3", "h-11 px-8", "h-10 w-10"], "dependencies": ["Slot", "cva"], "usageCount": 87 }, { "name": "Card", "path": "components/ui/card.tsx", "props": { "title": "string", "description": "string", "footer": "ReactNode", "className": "string" }, "variants": ["default: bg-background border border-border rounded-lg"], "internalTokens": ["p-6", "gap-2", "text-sm", "text-muted-foreground"], "dependencies": [], "usageCount": 45 }, { "name": "Input", "path": "components/ui/input.tsx", "props": { "type": "string", "placeholder": "string", "disabled": "boolean", "error": "boolean" }, "variants": ["default: border-input bg-background", "error: border-error"], "internalTokens": ["h-10 px-3 py-2", "text-sm", "focus:ring-2"], "dependencies": [], "usageCount": 32 }, { "name": "Badge", "path": "components/ui/badge.tsx", "props": { "variant": "default | secondary | success | warning | error", "size": "sm | md" }, "variants": [ "default: bg-primary text-primary-foreground", "secondary: bg-secondary text-secondary-foreground", "success: bg-success text-white", "warning: bg-warning text-black", "error: bg-error text-white" ], "internalTokens": ["px-2.5 py-0.5", "text-xs", "rounded-full"], "dependencies": [], "usageCount": 28 }, { "name": "Modal", "path": "components/ui/modal.tsx", "props": { "open": "boolean", "onClose": "() => void", "title": "string", "children": "ReactNode" }, "variants": ["default: fixed inset-0 z-modal"], "internalTokens": ["max-w-lg", "rounded-lg", "p-6"], "dependencies": ["Dialog", "XIcon"], "usageCount": 12 }, { "name": "Tooltip", "path": "components/ui/tooltip.tsx", "props": { "content": "string", "side": "top | bottom | left | right", "children": "ReactNode" }, "variants": ["default: bg-foreground text-background"], "internalTokens": ["px-2 py-1", "text-xs", "rounded"], "dependencies": ["RadixTooltip"], "usageCount": 9 } ], "motion": { "durations": ["150ms", "200ms", "300ms", "500ms", "700ms"], "easings": ["ease-in-out", "ease-out", "cubic-bezier(0.4, 0, 0.2, 1)", "cubic-bezier(0.16, 1, 0.3, 1)"], "animations": [ "fade-in: opacity 0 to 1", "fade-out: opacity 1 to 0", "slide-in-right: translateX(100%) to 0", "slide-out-right: translateX(0) to 100%", "scale-in: scale(0.95) to 1", "spin: rotate 0 to 360deg" ], "hoverTransitions": ["color 150ms ease", "background-color 150ms ease", "border-color 150ms ease", "transform 200ms ease"], "focusTransitions": ["box-shadow 200ms ease", "outline 150ms ease"], "pageTransitions": ["fade-in 300ms ease-out"], "scrollAnimations": ["Framer Motion used for fade-in on scroll", "GSAP used for parallax effects"] }, "icons": { "system": "Lucide React", "sizes": ["16px", "20px", "24px", "32px", "48px"], "count": 156, "customSVGs": ["logo.svg", "favicon.svg", "hero-illustration.svg"] }, "inconsistencies": [ { "type": "duplicate_values", "description": "#1a1a1a used 47 times as inline style but not defined as a token", "severity": "high" }, { "type": "conflicting_patterns", "description": "Some buttons use padding-based sizing (px-4 py-2), others use fixed height (h-10)", "severity": "medium" }, { "type": "missing_states", "description": "Card component lacks hover/focus/disabled states", "severity": "medium" }, { "type": "accessibility_gaps", "description": "Several buttons missing focus ring styles; color contrast insufficient for secondary text on muted background", "severity": "high" }, { "type": "inconsistent_spacing", "description": "Modal uses 24px padding, Card uses 24px, but some custom components use 20px or 28px", "severity": "low" }, { "type": "unused_tokens", "description": "CSS variable --radius defined but not used; some Tailwind classes like 'w-14' used only once", "severity": "low" } ] }