229 lines
8.7 KiB
JSON
229 lines
8.7 KiB
JSON
|
{
|
||
|
|
"identity": {
|
||
|
|
"persona": "E1",
|
||
|
|
"role": "Creative Designer",
|
||
|
|
"principles": [
|
||
|
|
"Fusion over Imitation",
|
||
|
|
"Emotion First",
|
||
|
|
"Content is King",
|
||
|
|
"Zoom In",
|
||
|
|
"Negative Space",
|
||
|
|
"Contrast"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"typography": {
|
||
|
|
"headings": {
|
||
|
|
"font_family": "Outfit, sans-serif",
|
||
|
|
"weights": ["400", "600", "800"],
|
||
|
|
"usage": "Use for all H1-H6 headings. Tight tracking for large sizes."
|
||
|
|
},
|
||
|
|
"body": {
|
||
|
|
"font_family": "Inter, sans-serif",
|
||
|
|
"weights": ["300", "400", "500"],
|
||
|
|
"usage": "Use for paragraphs, inputs, and UI text."
|
||
|
|
},
|
||
|
|
"mono": {
|
||
|
|
"font_family": "JetBrains Mono, monospace",
|
||
|
|
"usage": "Use for code snippets, technical specs, or decorative labels."
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"colors": {
|
||
|
|
"palette": {
|
||
|
|
"light": {
|
||
|
|
"background": "#ffffff",
|
||
|
|
"foreground": "#09090b",
|
||
|
|
"card": "#ffffff",
|
||
|
|
"card_foreground": "#09090b",
|
||
|
|
"popover": "#ffffff",
|
||
|
|
"popover_foreground": "#09090b",
|
||
|
|
"primary": "#18181b",
|
||
|
|
"primary_foreground": "#fafafa",
|
||
|
|
"secondary": "#f4f4f5",
|
||
|
|
"secondary_foreground": "#18181b",
|
||
|
|
"muted": "#f4f4f5",
|
||
|
|
"muted_foreground": "#71717a",
|
||
|
|
"accent": "#f4f4f5",
|
||
|
|
"accent_foreground": "#18181b",
|
||
|
|
"destructive": "#ef4444",
|
||
|
|
"destructive_foreground": "#fafafa",
|
||
|
|
"border": "#e4e4e7",
|
||
|
|
"input": "#e4e4e7",
|
||
|
|
"ring": "#18181b"
|
||
|
|
},
|
||
|
|
"dark": {
|
||
|
|
"background": "#0a0a0a",
|
||
|
|
"foreground": "#fafafa",
|
||
|
|
"card": "#0a0a0a",
|
||
|
|
"card_foreground": "#fafafa",
|
||
|
|
"popover": "#0a0a0a",
|
||
|
|
"popover_foreground": "#fafafa",
|
||
|
|
"primary": "#fafafa",
|
||
|
|
"primary_foreground": "#18181b",
|
||
|
|
"secondary": "#27272a",
|
||
|
|
"secondary_foreground": "#fafafa",
|
||
|
|
"muted": "#27272a",
|
||
|
|
"muted_foreground": "#a1a1aa",
|
||
|
|
"accent": "#27272a",
|
||
|
|
"accent_foreground": "#fafafa",
|
||
|
|
"destructive": "#7f1d1d",
|
||
|
|
"destructive_foreground": "#fafafa",
|
||
|
|
"border": "#27272a",
|
||
|
|
"input": "#27272a",
|
||
|
|
"ring": "#d4d4d8"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"brand_accent": {
|
||
|
|
"name": "Electric Blue",
|
||
|
|
"hex": "#2563eb",
|
||
|
|
"usage": "Use sparingly for active states, primary CTAs in dark mode, or decorative glows."
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"visual_enhancers": {
|
||
|
|
"surface_strategies": [
|
||
|
|
{
|
||
|
|
"name": "Glassmorphism",
|
||
|
|
"usage": "Sticky Headers, Floating Navs, Toasts",
|
||
|
|
"classes": "bg-background/70 backdrop-blur-xl border-b border-border/40"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "Tracing Beam",
|
||
|
|
"usage": "Feature Cards, Hero Sections",
|
||
|
|
"description": "Subtle glowing borders or moving gradients on hover."
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "Grid Borders",
|
||
|
|
"usage": "Data-heavy sections, Footer",
|
||
|
|
"classes": "border-r border-b border-border/40"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"shadows": {
|
||
|
|
"card": "shadow-[0_2px_8px_rgba(0,0,0,0.08)]",
|
||
|
|
"hover": "shadow-[0_8px_30px_rgba(0,0,0,0.12)]",
|
||
|
|
"glow": "drop-shadow-[0_0_15px_rgba(37,99,235,0.5)]"
|
||
|
|
},
|
||
|
|
"radius": {
|
||
|
|
"default": "rounded-lg",
|
||
|
|
"buttons": "rounded-full",
|
||
|
|
"cards": "rounded-xl"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"layout_strategies": {
|
||
|
|
"home_page": {
|
||
|
|
"type": "Bento Grid",
|
||
|
|
"grid_cols": "grid-cols-1 md:grid-cols-12",
|
||
|
|
"gap": "gap-4 md:gap-8",
|
||
|
|
"hero_span": "col-span-full md:col-span-8 row-span-2",
|
||
|
|
"feature_span": "col-span-full md:col-span-4 row-span-1"
|
||
|
|
},
|
||
|
|
"product_catalog": {
|
||
|
|
"type": "Sidebar Filter + Grid",
|
||
|
|
"sidebar_width": "w-64",
|
||
|
|
"grid_cols": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||
|
|
},
|
||
|
|
"spacing": {
|
||
|
|
"section_padding": "py-16 md:py-24",
|
||
|
|
"container_padding": "px-4 md:px-8"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"components": {
|
||
|
|
"buttons": {
|
||
|
|
"primary": "bg-primary text-primary-foreground hover:opacity-90 h-10 px-6 rounded-full transition-transform hover:scale-105 active:scale-95",
|
||
|
|
"secondary": "bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-6 rounded-full",
|
||
|
|
"outline": "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-6 rounded-full"
|
||
|
|
},
|
||
|
|
"cards": {
|
||
|
|
"product": "group relative overflow-hidden rounded-xl border border-border/50 bg-card hover:border-primary/50 transition-colors",
|
||
|
|
"service": "rounded-xl border border-border bg-card p-6 hover:shadow-lg transition-all"
|
||
|
|
},
|
||
|
|
"inputs": {
|
||
|
|
"default": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"image_urls": {
|
||
|
|
"products": [
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1759588071908-fc10a79714fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODB8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBsYXB0b3AlMjBzbGVlayUyMGRlc2lnbiUyMHdoaXRlJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3NjgwNzYzMjN8MA&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "Smartphone resting on laptop - Ecosystem vibe",
|
||
|
|
"category": "hero"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1759588071782-b2091e07d737?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODB8MHwxfHNlYXJjaHwzfHxtb2Rlcm4lMjBsYXB0b3AlMjBzbGVlayUyMGRlc2lnbiUyMHdoaXRlJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3NjgwNzYzMjN8MA&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "White smartphone on black laptop - High contrast",
|
||
|
|
"category": "product_detail"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1761645337339-9bf0697f3b0c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzV8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBzbWFydHBob25lJTIwcHJvZHVjdCUyMHNob3R8ZW58MHx8fHwxNzY4MDc2MzI2fDA&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "Clean smartphone product shot",
|
||
|
|
"category": "catalog_item"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1726900303607-2422a57bbbbf?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzV8MHwxfHNlYXJjaHwzfHxtb2Rlcm4lMjBzbWFydHBob25lJTIwcHJvZHVjdCUyMHNob3R8ZW58MHx8fHwxNzY4MDc2MzI2fDA&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "Black iPhone on wood - Premium feel",
|
||
|
|
"category": "catalog_item"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"services": [
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1676630444903-163fe485c5d1?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDF8MHwxfHNlYXJjaHwxfHxlbGVjdHJvbmljcyUyMHJlcGFpciUyMHRlY2huaWNpYW4lMjB3b3JraW5nfGVufDB8fHx8MTc2ODA3NjMyNXww&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "Technician working on circuit board",
|
||
|
|
"category": "service_hero"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"url": "https://images.unsplash.com/photo-1753964724380-2c5ae02512a8?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDF8MHwxfHNlYXJjaHw0fHxlbGVjdHJvbmljcyUyMHJlcGFpciUyMHRlY2huaWNpYW4lMjB3b3JraW5nfGVufDB8fHx8MTc2ODA3NjMyNXww&ixlib=rb-4.1.0&q=85",
|
||
|
|
"description": "Server repair - High tech service",
|
||
|
|
"category": "service_detail"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"motion": {
|
||
|
|
"library": "framer-motion",
|
||
|
|
"animations": {
|
||
|
|
"fade_in": {
|
||
|
|
"initial": { "opacity": 0, "y": 20 },
|
||
|
|
"animate": { "opacity": 1, "y": 0 },
|
||
|
|
"transition": { "duration": 0.5 }
|
||
|
|
},
|
||
|
|
"stagger_container": {
|
||
|
|
"hidden": { "opacity": 0 },
|
||
|
|
"show": {
|
||
|
|
"opacity": 1,
|
||
|
|
"transition": {
|
||
|
|
"staggerChildren": 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"hover_lift": {
|
||
|
|
"whileHover": { "y": -5 },
|
||
|
|
"transition": { "type": "spring", "stiffness": 300 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"accessibility": {
|
||
|
|
"rules": [
|
||
|
|
"Ensure 4.5:1 contrast ratio for normal text.",
|
||
|
|
"Use semantic HTML (header, main, footer, article, section).",
|
||
|
|
"All images must have alt text.",
|
||
|
|
"Interactive elements must have focus states.",
|
||
|
|
"Respect prefers-reduced-motion."
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"instructions_to_main_agent": [
|
||
|
|
"Use 'lucide-react' for all icons.",
|
||
|
|
"Implement a Theme Toggle in the Navbar.",
|
||
|
|
"Use 'sonner' for toast notifications.",
|
||
|
|
"Ensure the 'Product Catalog' supports filtering by category and price.",
|
||
|
|
"The 'Services' page should have a booking form (use Shadcn Dialog or a dedicated page).",
|
||
|
|
"Use the provided image URLs for specific sections.",
|
||
|
|
"Do not use 'Inter' for headings; import 'Outfit' from Google Fonts.",
|
||
|
|
"Add 'data-testid' to all interactive elements."
|
||
|
|
],
|
||
|
|
"universal_guidelines": [
|
||
|
|
"Avoid generic centered layouts.",
|
||
|
|
"Create depth through layered design elements.",
|
||
|
|
"Use glass-morphism effects with backdrop filters.",
|
||
|
|
"Do not apply universal transitions (transition: all).",
|
||
|
|
"Do not center align the app container.",
|
||
|
|
"Every interaction needs micro-animations.",
|
||
|
|
"Use 2-3x more spacing than feels comfortable."
|
||
|
|
]
|
||
|
|
}
|