Feat/intelligent page overrides (#93)
* feat: intelligent page override generation - Add _generate_intelligent_overrides() function - Detect page types from page name AND query keywords - Generate filled-in rules for: Dashboard, Checkout, Settings, Landing, Auth - Fix combined_context to check both page name and query * feat: project-based folder structure - Each project now gets its own directory: design-system/<project>/ - Multiple projects can coexist without conflicts - Structure: design-system/<project>/MASTER.md + pages/ * docs: update examples to Marketing Website and SaaS App * docs: add merge request note to maintainer * refactor: data-driven intelligent overrides using layered search - Remove hardcoded page type rules - Use existing search infrastructure (style, ux, landing CSVs) - Extract layout, spacing, colors from search results - Keep page type detection with keyword patterns - No new CSV files needed - leverages existing data * docs: update PR description for data-driven approach * docs: add note about design quality needing review * Delete PR_DESCRIPTION.md --------- Co-authored-by: Viet Tran <viettranx@gmail.com>
This commit is contained in:
@@ -479,7 +479,7 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
# Persist to files if requested
|
# Persist to files if requested
|
||||||
if persist:
|
if persist:
|
||||||
persist_design_system(design_system, page, output_dir)
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
@@ -487,20 +487,26 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
|
|
||||||
# ============ PERSISTENCE FUNCTIONS ============
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None) -> dict:
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
"""
|
"""
|
||||||
Persist design system to design-system/ folder using Master + Overrides pattern.
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
Args:
|
Args:
|
||||||
design_system: The generated design system dictionary
|
design_system: The generated design system dictionary
|
||||||
page: Optional page name for page-specific override file
|
page: Optional page name for page-specific override file
|
||||||
output_dir: Optional output directory (defaults to current working directory)
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
dict with created file paths and status
|
dict with created file paths and status
|
||||||
"""
|
"""
|
||||||
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
design_system_dir = base_dir / "design-system"
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
pages_dir = design_system_dir / "pages"
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
created_files = []
|
created_files = []
|
||||||
@@ -517,10 +523,10 @@ def persist_design_system(design_system: dict, page: str = None, output_dir: str
|
|||||||
f.write(master_content)
|
f.write(master_content)
|
||||||
created_files.append(str(master_file))
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
# If page is specified, create page override file
|
# If page is specified, create page override file with intelligent content
|
||||||
if page:
|
if page:
|
||||||
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
page_content = format_page_override_md(design_system, page)
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
with open(page_file, 'w', encoding='utf-8') as f:
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
f.write(page_content)
|
f.write(page_content)
|
||||||
created_files.append(str(page_file))
|
created_files.append(str(page_file))
|
||||||
@@ -795,18 +801,22 @@ def format_master_md(design_system: dict) -> str:
|
|||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
def format_page_override_md(design_system: dict, page_name: str) -> str:
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
"""Format a page-specific override file."""
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
project = design_system.get("project_name", "PROJECT")
|
project = design_system.get("project_name", "PROJECT")
|
||||||
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
lines = []
|
lines = []
|
||||||
|
|
||||||
lines.append(f"# {page_title} Page Overrides")
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append(f"> **PROJECT:** {project}")
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
lines.append(f"> **Generated:** {timestamp}")
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
@@ -814,75 +824,233 @@ def format_page_override_md(design_system: dict, page_name: str) -> str:
|
|||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific sections (template)
|
# Page-specific rules with actual content
|
||||||
lines.append("## Page-Specific Rules")
|
lines.append("## Page-Specific Rules")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Document only the DEVIATIONS from MASTER.md for this page -->")
|
|
||||||
lines.append("")
|
# Layout Overrides
|
||||||
lines.append("### Layout Overrides")
|
lines.append("### Layout Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
layout = page_overrides.get("layout", {})
|
||||||
lines.append("<!-- Example: This page uses a different max-width -->")
|
if layout:
|
||||||
lines.append("max-width: 1400px (instead of default 1200px)")
|
for key, value in layout.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("### Color Overrides")
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
spacing = page_overrides.get("spacing", {})
|
||||||
lines.append("<!-- Example: This page uses a darker background -->")
|
if spacing:
|
||||||
lines.append("No overrides - use Master colors")
|
for key, value in spacing.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("")
|
else:
|
||||||
lines.append("### Component Overrides")
|
lines.append("- No overrides — use Master spacing")
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Example: Cards on this page have different padding -->")
|
|
||||||
lines.append("No overrides - use Master component specs")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
lines.append("### Typography Overrides")
|
lines.append("### Typography Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
typography = page_overrides.get("typography", {})
|
||||||
lines.append("<!-- Example: Hero heading uses larger font size -->")
|
if typography:
|
||||||
lines.append("No overrides - use Master typography")
|
for key, value in typography.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific patterns
|
# Color Overrides
|
||||||
lines.append("---")
|
lines.append("### Color Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Unique Page Elements")
|
colors = page_overrides.get("colors", {})
|
||||||
lines.append("")
|
if colors:
|
||||||
lines.append("<!-- Document any elements unique to this page -->")
|
for key, value in colors.items():
|
||||||
lines.append("")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("### Hero Section")
|
else:
|
||||||
lines.append("")
|
lines.append("- No overrides — use Master colors")
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Describe hero-specific styling if different from Master -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("### Page-Specific Components")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- List any components only used on this page -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Notes section
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Notes")
|
lines.append("## Page-Specific Components")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Add any additional context for AI or developers -->")
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("- Refer to `design-system/MASTER.md` for all base rules")
|
|
||||||
lines.append("- Only add overrides here when this page deviates from the Master")
|
# Recommendations
|
||||||
lines.append("- Delete placeholder sections if no overrides are needed")
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -77,15 +77,16 @@ if __name__ == "__main__":
|
|||||||
|
|
||||||
# Print persistence confirmation
|
# Print persistence confirmation
|
||||||
if args.persist:
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
print("\n" + "=" * 60)
|
print("\n" + "=" * 60)
|
||||||
print("✅ Design system persisted to design-system/ folder")
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
print(" 📄 design-system/MASTER.md (Global Source of Truth)")
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
if args.page:
|
if args.page:
|
||||||
page_filename = args.page.lower().replace(' ', '-')
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
print(f" 📄 design-system/pages/{page_filename}.md (Page Overrides)")
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
print("")
|
print("")
|
||||||
print("📖 Usage: When building a page, check design-system/pages/[page].md first.")
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
print(" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
print("=" * 60)
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -338,6 +344,21 @@ def format_ascii_box(design_system: dict) -> str:
|
|||||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("| PRE-DELIVERY CHECKLIST:".ljust(BOX_WIDTH) + "|")
|
||||||
|
checklist_items = [
|
||||||
|
"[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
|
||||||
|
"[ ] cursor-pointer on all clickable elements",
|
||||||
|
"[ ] Hover states with smooth transitions (150-300ms)",
|
||||||
|
"[ ] Light mode: text contrast 4.5:1 minimum",
|
||||||
|
"[ ] Focus states visible for keyboard nav",
|
||||||
|
"[ ] prefers-reduced-motion respected",
|
||||||
|
"[ ] Responsive: 375px, 768px, 1024px, 1440px"
|
||||||
|
]
|
||||||
|
for item in checklist_items:
|
||||||
|
lines.append(f"| {item}".ljust(BOX_WIDTH) + "|")
|
||||||
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
lines.append("+" + "-" * w + "+")
|
lines.append("+" + "-" * w + "+")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
@@ -422,11 +443,23 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("### Pre-Delivery Checklist")
|
||||||
|
lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] cursor-pointer on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard nav")
|
||||||
|
lines.append("- [ ] prefers-reduced-motion respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -434,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -452,7 +458,8 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -460,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -479,7 +479,7 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
# Persist to files if requested
|
# Persist to files if requested
|
||||||
if persist:
|
if persist:
|
||||||
persist_design_system(design_system, page, output_dir)
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
@@ -487,20 +487,26 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
|
|
||||||
# ============ PERSISTENCE FUNCTIONS ============
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None) -> dict:
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
"""
|
"""
|
||||||
Persist design system to design-system/ folder using Master + Overrides pattern.
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
Args:
|
Args:
|
||||||
design_system: The generated design system dictionary
|
design_system: The generated design system dictionary
|
||||||
page: Optional page name for page-specific override file
|
page: Optional page name for page-specific override file
|
||||||
output_dir: Optional output directory (defaults to current working directory)
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
dict with created file paths and status
|
dict with created file paths and status
|
||||||
"""
|
"""
|
||||||
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
design_system_dir = base_dir / "design-system"
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
pages_dir = design_system_dir / "pages"
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
created_files = []
|
created_files = []
|
||||||
@@ -517,10 +523,10 @@ def persist_design_system(design_system: dict, page: str = None, output_dir: str
|
|||||||
f.write(master_content)
|
f.write(master_content)
|
||||||
created_files.append(str(master_file))
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
# If page is specified, create page override file
|
# If page is specified, create page override file with intelligent content
|
||||||
if page:
|
if page:
|
||||||
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
page_content = format_page_override_md(design_system, page)
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
with open(page_file, 'w', encoding='utf-8') as f:
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
f.write(page_content)
|
f.write(page_content)
|
||||||
created_files.append(str(page_file))
|
created_files.append(str(page_file))
|
||||||
@@ -795,18 +801,22 @@ def format_master_md(design_system: dict) -> str:
|
|||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
def format_page_override_md(design_system: dict, page_name: str) -> str:
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
"""Format a page-specific override file."""
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
project = design_system.get("project_name", "PROJECT")
|
project = design_system.get("project_name", "PROJECT")
|
||||||
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
lines = []
|
lines = []
|
||||||
|
|
||||||
lines.append(f"# {page_title} Page Overrides")
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append(f"> **PROJECT:** {project}")
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
lines.append(f"> **Generated:** {timestamp}")
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
@@ -814,75 +824,233 @@ def format_page_override_md(design_system: dict, page_name: str) -> str:
|
|||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific sections (template)
|
# Page-specific rules with actual content
|
||||||
lines.append("## Page-Specific Rules")
|
lines.append("## Page-Specific Rules")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Document only the DEVIATIONS from MASTER.md for this page -->")
|
|
||||||
lines.append("")
|
# Layout Overrides
|
||||||
lines.append("### Layout Overrides")
|
lines.append("### Layout Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
layout = page_overrides.get("layout", {})
|
||||||
lines.append("<!-- Example: This page uses a different max-width -->")
|
if layout:
|
||||||
lines.append("max-width: 1400px (instead of default 1200px)")
|
for key, value in layout.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("### Color Overrides")
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
spacing = page_overrides.get("spacing", {})
|
||||||
lines.append("<!-- Example: This page uses a darker background -->")
|
if spacing:
|
||||||
lines.append("No overrides - use Master colors")
|
for key, value in spacing.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("")
|
else:
|
||||||
lines.append("### Component Overrides")
|
lines.append("- No overrides — use Master spacing")
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Example: Cards on this page have different padding -->")
|
|
||||||
lines.append("No overrides - use Master component specs")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
lines.append("### Typography Overrides")
|
lines.append("### Typography Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
typography = page_overrides.get("typography", {})
|
||||||
lines.append("<!-- Example: Hero heading uses larger font size -->")
|
if typography:
|
||||||
lines.append("No overrides - use Master typography")
|
for key, value in typography.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific patterns
|
# Color Overrides
|
||||||
lines.append("---")
|
lines.append("### Color Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Unique Page Elements")
|
colors = page_overrides.get("colors", {})
|
||||||
lines.append("")
|
if colors:
|
||||||
lines.append("<!-- Document any elements unique to this page -->")
|
for key, value in colors.items():
|
||||||
lines.append("")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("### Hero Section")
|
else:
|
||||||
lines.append("")
|
lines.append("- No overrides — use Master colors")
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Describe hero-specific styling if different from Master -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("### Page-Specific Components")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- List any components only used on this page -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Notes section
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Notes")
|
lines.append("## Page-Specific Components")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Add any additional context for AI or developers -->")
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("- Refer to `design-system/MASTER.md` for all base rules")
|
|
||||||
lines.append("- Only add overrides here when this page deviates from the Master")
|
# Recommendations
|
||||||
lines.append("- Delete placeholder sections if no overrides are needed")
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -77,15 +77,16 @@ if __name__ == "__main__":
|
|||||||
|
|
||||||
# Print persistence confirmation
|
# Print persistence confirmation
|
||||||
if args.persist:
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
print("\n" + "=" * 60)
|
print("\n" + "=" * 60)
|
||||||
print("✅ Design system persisted to design-system/ folder")
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
print(" 📄 design-system/MASTER.md (Global Source of Truth)")
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
if args.page:
|
if args.page:
|
||||||
page_filename = args.page.lower().replace(' ', '-')
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
print(f" 📄 design-system/pages/{page_filename}.md (Page Overrides)")
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
print("")
|
print("")
|
||||||
print("📖 Usage: When building a page, check design-system/pages/[page].md first.")
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
print(" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
print("=" * 60)
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -338,6 +344,21 @@ def format_ascii_box(design_system: dict) -> str:
|
|||||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("| PRE-DELIVERY CHECKLIST:".ljust(BOX_WIDTH) + "|")
|
||||||
|
checklist_items = [
|
||||||
|
"[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
|
||||||
|
"[ ] cursor-pointer on all clickable elements",
|
||||||
|
"[ ] Hover states with smooth transitions (150-300ms)",
|
||||||
|
"[ ] Light mode: text contrast 4.5:1 minimum",
|
||||||
|
"[ ] Focus states visible for keyboard nav",
|
||||||
|
"[ ] prefers-reduced-motion respected",
|
||||||
|
"[ ] Responsive: 375px, 768px, 1024px, 1440px"
|
||||||
|
]
|
||||||
|
for item in checklist_items:
|
||||||
|
lines.append(f"| {item}".ljust(BOX_WIDTH) + "|")
|
||||||
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
lines.append("+" + "-" * w + "+")
|
lines.append("+" + "-" * w + "+")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
@@ -422,11 +443,23 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("### Pre-Delivery Checklist")
|
||||||
|
lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] cursor-pointer on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard nav")
|
||||||
|
lines.append("- [ ] prefers-reduced-motion respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -434,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -452,7 +458,8 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -460,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -338,6 +344,21 @@ def format_ascii_box(design_system: dict) -> str:
|
|||||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("| PRE-DELIVERY CHECKLIST:".ljust(BOX_WIDTH) + "|")
|
||||||
|
checklist_items = [
|
||||||
|
"[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
|
||||||
|
"[ ] cursor-pointer on all clickable elements",
|
||||||
|
"[ ] Hover states with smooth transitions (150-300ms)",
|
||||||
|
"[ ] Light mode: text contrast 4.5:1 minimum",
|
||||||
|
"[ ] Focus states visible for keyboard nav",
|
||||||
|
"[ ] prefers-reduced-motion respected",
|
||||||
|
"[ ] Responsive: 375px, 768px, 1024px, 1440px"
|
||||||
|
]
|
||||||
|
for item in checklist_items:
|
||||||
|
lines.append(f"| {item}".ljust(BOX_WIDTH) + "|")
|
||||||
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
lines.append("+" + "-" * w + "+")
|
lines.append("+" + "-" * w + "+")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
@@ -422,11 +443,23 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("### Pre-Delivery Checklist")
|
||||||
|
lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] cursor-pointer on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard nav")
|
||||||
|
lines.append("- [ ] prefers-reduced-motion respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -434,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -452,7 +458,8 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -460,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
@@ -479,7 +479,7 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
# Persist to files if requested
|
# Persist to files if requested
|
||||||
if persist:
|
if persist:
|
||||||
persist_design_system(design_system, page, output_dir)
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
@@ -487,20 +487,26 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
|
|
||||||
|
|
||||||
# ============ PERSISTENCE FUNCTIONS ============
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None) -> dict:
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
"""
|
"""
|
||||||
Persist design system to design-system/ folder using Master + Overrides pattern.
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
Args:
|
Args:
|
||||||
design_system: The generated design system dictionary
|
design_system: The generated design system dictionary
|
||||||
page: Optional page name for page-specific override file
|
page: Optional page name for page-specific override file
|
||||||
output_dir: Optional output directory (defaults to current working directory)
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
dict with created file paths and status
|
dict with created file paths and status
|
||||||
"""
|
"""
|
||||||
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
design_system_dir = base_dir / "design-system"
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
pages_dir = design_system_dir / "pages"
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
created_files = []
|
created_files = []
|
||||||
@@ -517,10 +523,10 @@ def persist_design_system(design_system: dict, page: str = None, output_dir: str
|
|||||||
f.write(master_content)
|
f.write(master_content)
|
||||||
created_files.append(str(master_file))
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
# If page is specified, create page override file
|
# If page is specified, create page override file with intelligent content
|
||||||
if page:
|
if page:
|
||||||
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
page_content = format_page_override_md(design_system, page)
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
with open(page_file, 'w', encoding='utf-8') as f:
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
f.write(page_content)
|
f.write(page_content)
|
||||||
created_files.append(str(page_file))
|
created_files.append(str(page_file))
|
||||||
@@ -795,18 +801,22 @@ def format_master_md(design_system: dict) -> str:
|
|||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
def format_page_override_md(design_system: dict, page_name: str) -> str:
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
"""Format a page-specific override file."""
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
project = design_system.get("project_name", "PROJECT")
|
project = design_system.get("project_name", "PROJECT")
|
||||||
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
lines = []
|
lines = []
|
||||||
|
|
||||||
lines.append(f"# {page_title} Page Overrides")
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append(f"> **PROJECT:** {project}")
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
lines.append(f"> **Generated:** {timestamp}")
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
@@ -814,75 +824,233 @@ def format_page_override_md(design_system: dict, page_name: str) -> str:
|
|||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific sections (template)
|
# Page-specific rules with actual content
|
||||||
lines.append("## Page-Specific Rules")
|
lines.append("## Page-Specific Rules")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Document only the DEVIATIONS from MASTER.md for this page -->")
|
|
||||||
lines.append("")
|
# Layout Overrides
|
||||||
lines.append("### Layout Overrides")
|
lines.append("### Layout Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
layout = page_overrides.get("layout", {})
|
||||||
lines.append("<!-- Example: This page uses a different max-width -->")
|
if layout:
|
||||||
lines.append("max-width: 1400px (instead of default 1200px)")
|
for key, value in layout.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("### Color Overrides")
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
spacing = page_overrides.get("spacing", {})
|
||||||
lines.append("<!-- Example: This page uses a darker background -->")
|
if spacing:
|
||||||
lines.append("No overrides - use Master colors")
|
for key, value in spacing.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("")
|
else:
|
||||||
lines.append("### Component Overrides")
|
lines.append("- No overrides — use Master spacing")
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Example: Cards on this page have different padding -->")
|
|
||||||
lines.append("No overrides - use Master component specs")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
lines.append("### Typography Overrides")
|
lines.append("### Typography Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("```")
|
typography = page_overrides.get("typography", {})
|
||||||
lines.append("<!-- Example: Hero heading uses larger font size -->")
|
if typography:
|
||||||
lines.append("No overrides - use Master typography")
|
for key, value in typography.items():
|
||||||
lines.append("```")
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Page-specific patterns
|
# Color Overrides
|
||||||
lines.append("---")
|
lines.append("### Color Overrides")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Unique Page Elements")
|
colors = page_overrides.get("colors", {})
|
||||||
lines.append("")
|
if colors:
|
||||||
lines.append("<!-- Document any elements unique to this page -->")
|
for key, value in colors.items():
|
||||||
lines.append("")
|
lines.append(f"- **{key}:** {value}")
|
||||||
lines.append("### Hero Section")
|
else:
|
||||||
lines.append("")
|
lines.append("- No overrides — use Master colors")
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- Describe hero-specific styling if different from Master -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("### Page-Specific Components")
|
|
||||||
lines.append("")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("<!-- List any components only used on this page -->")
|
|
||||||
lines.append("```")
|
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
# Notes section
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
lines.append("---")
|
lines.append("---")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("## Notes")
|
lines.append("## Page-Specific Components")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("<!-- Add any additional context for AI or developers -->")
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
lines.append("- Refer to `design-system/MASTER.md` for all base rules")
|
|
||||||
lines.append("- Only add overrides here when this page deviates from the Master")
|
# Recommendations
|
||||||
lines.append("- Delete placeholder sections if no overrides are needed")
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -77,15 +77,16 @@ if __name__ == "__main__":
|
|||||||
|
|
||||||
# Print persistence confirmation
|
# Print persistence confirmation
|
||||||
if args.persist:
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
print("\n" + "=" * 60)
|
print("\n" + "=" * 60)
|
||||||
print("✅ Design system persisted to design-system/ folder")
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
print(" 📄 design-system/MASTER.md (Global Source of Truth)")
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
if args.page:
|
if args.page:
|
||||||
page_filename = args.page.lower().replace(' ', '-')
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
print(f" 📄 design-system/pages/{page_filename}.md (Page Overrides)")
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
print("")
|
print("")
|
||||||
print("📖 Usage: When building a page, check design-system/pages/[page].md first.")
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
print(" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
print("=" * 60)
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
|
|||||||
@@ -7,10 +7,16 @@ to generate comprehensive design system recommendations.
|
|||||||
Usage:
|
Usage:
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system
|
||||||
result = generate_design_system("SaaS dashboard", "My Project")
|
result = generate_design_system("SaaS dashboard", "My Project")
|
||||||
|
|
||||||
|
# With persistence (Master + Overrides pattern)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True)
|
||||||
|
result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import csv
|
import csv
|
||||||
import json
|
import json
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
from core import search, DATA_DIR
|
from core import search, DATA_DIR
|
||||||
|
|
||||||
@@ -338,6 +344,21 @@ def format_ascii_box(design_system: dict) -> str:
|
|||||||
lines.append(line.ljust(BOX_WIDTH) + "|")
|
lines.append(line.ljust(BOX_WIDTH) + "|")
|
||||||
lines.append("|" + " " * BOX_WIDTH + "|")
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("| PRE-DELIVERY CHECKLIST:".ljust(BOX_WIDTH) + "|")
|
||||||
|
checklist_items = [
|
||||||
|
"[ ] No emojis as icons (use SVG: Heroicons/Lucide)",
|
||||||
|
"[ ] cursor-pointer on all clickable elements",
|
||||||
|
"[ ] Hover states with smooth transitions (150-300ms)",
|
||||||
|
"[ ] Light mode: text contrast 4.5:1 minimum",
|
||||||
|
"[ ] Focus states visible for keyboard nav",
|
||||||
|
"[ ] prefers-reduced-motion respected",
|
||||||
|
"[ ] Responsive: 375px, 768px, 1024px, 1440px"
|
||||||
|
]
|
||||||
|
for item in checklist_items:
|
||||||
|
lines.append(f"| {item}".ljust(BOX_WIDTH) + "|")
|
||||||
|
lines.append("|" + " " * BOX_WIDTH + "|")
|
||||||
|
|
||||||
lines.append("+" + "-" * w + "+")
|
lines.append("+" + "-" * w + "+")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
@@ -422,11 +443,23 @@ def format_markdown(design_system: dict) -> str:
|
|||||||
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
lines.append(f"- {anti_patterns.replace(' + ', '\n- ')}")
|
||||||
lines.append("")
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist section
|
||||||
|
lines.append("### Pre-Delivery Checklist")
|
||||||
|
lines.append("- [ ] No emojis as icons (use SVG: Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] cursor-pointer on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard nav")
|
||||||
|
lines.append("- [ ] prefers-reduced-motion respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
return "\n".join(lines)
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
# ============ MAIN ENTRY POINT ============
|
# ============ MAIN ENTRY POINT ============
|
||||||
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii") -> str:
|
def generate_design_system(query: str, project_name: str = None, output_format: str = "ascii",
|
||||||
|
persist: bool = False, page: str = None, output_dir: str = None) -> str:
|
||||||
"""
|
"""
|
||||||
Main entry point for design system generation.
|
Main entry point for design system generation.
|
||||||
|
|
||||||
@@ -434,18 +467,590 @@ def generate_design_system(query: str, project_name: str = None, output_format:
|
|||||||
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
query: Search query (e.g., "SaaS dashboard", "e-commerce luxury")
|
||||||
project_name: Optional project name for output header
|
project_name: Optional project name for output header
|
||||||
output_format: "ascii" (default) or "markdown"
|
output_format: "ascii" (default) or "markdown"
|
||||||
|
persist: If True, save design system to design-system/ folder
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
|
||||||
Returns:
|
Returns:
|
||||||
Formatted design system string
|
Formatted design system string
|
||||||
"""
|
"""
|
||||||
generator = DesignSystemGenerator()
|
generator = DesignSystemGenerator()
|
||||||
design_system = generator.generate(query, project_name)
|
design_system = generator.generate(query, project_name)
|
||||||
|
|
||||||
|
# Persist to files if requested
|
||||||
|
if persist:
|
||||||
|
persist_design_system(design_system, page, output_dir, query)
|
||||||
|
|
||||||
if output_format == "markdown":
|
if output_format == "markdown":
|
||||||
return format_markdown(design_system)
|
return format_markdown(design_system)
|
||||||
return format_ascii_box(design_system)
|
return format_ascii_box(design_system)
|
||||||
|
|
||||||
|
|
||||||
|
# ============ PERSISTENCE FUNCTIONS ============
|
||||||
|
def persist_design_system(design_system: dict, page: str = None, output_dir: str = None, page_query: str = None) -> dict:
|
||||||
|
"""
|
||||||
|
Persist design system to design-system/<project>/ folder using Master + Overrides pattern.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
design_system: The generated design system dictionary
|
||||||
|
page: Optional page name for page-specific override file
|
||||||
|
output_dir: Optional output directory (defaults to current working directory)
|
||||||
|
page_query: Optional query string for intelligent page override generation
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict with created file paths and status
|
||||||
|
"""
|
||||||
|
base_dir = Path(output_dir) if output_dir else Path.cwd()
|
||||||
|
|
||||||
|
# Use project name for project-specific folder
|
||||||
|
project_name = design_system.get("project_name", "default")
|
||||||
|
project_slug = project_name.lower().replace(' ', '-')
|
||||||
|
|
||||||
|
design_system_dir = base_dir / "design-system" / project_slug
|
||||||
|
pages_dir = design_system_dir / "pages"
|
||||||
|
|
||||||
|
created_files = []
|
||||||
|
|
||||||
|
# Create directories
|
||||||
|
design_system_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
pages_dir.mkdir(parents=True, exist_ok=True)
|
||||||
|
|
||||||
|
master_file = design_system_dir / "MASTER.md"
|
||||||
|
|
||||||
|
# Generate and write MASTER.md
|
||||||
|
master_content = format_master_md(design_system)
|
||||||
|
with open(master_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(master_content)
|
||||||
|
created_files.append(str(master_file))
|
||||||
|
|
||||||
|
# If page is specified, create page override file with intelligent content
|
||||||
|
if page:
|
||||||
|
page_file = pages_dir / f"{page.lower().replace(' ', '-')}.md"
|
||||||
|
page_content = format_page_override_md(design_system, page, page_query)
|
||||||
|
with open(page_file, 'w', encoding='utf-8') as f:
|
||||||
|
f.write(page_content)
|
||||||
|
created_files.append(str(page_file))
|
||||||
|
|
||||||
|
return {
|
||||||
|
"status": "success",
|
||||||
|
"design_system_dir": str(design_system_dir),
|
||||||
|
"created_files": created_files
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def format_master_md(design_system: dict) -> str:
|
||||||
|
"""Format design system as MASTER.md with hierarchical override logic."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
pattern = design_system.get("pattern", {})
|
||||||
|
style = design_system.get("style", {})
|
||||||
|
colors = design_system.get("colors", {})
|
||||||
|
typography = design_system.get("typography", {})
|
||||||
|
effects = design_system.get("key_effects", "")
|
||||||
|
anti_patterns = design_system.get("anti_patterns", "")
|
||||||
|
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
# Logic header
|
||||||
|
lines.append("# Design System Master File")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.")
|
||||||
|
lines.append("> If that file exists, its rules **override** this Master file.")
|
||||||
|
lines.append("> If not, strictly follow the rules below.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Project:** {project}")
|
||||||
|
lines.append(f"**Generated:** {timestamp}")
|
||||||
|
lines.append(f"**Category:** {design_system.get('category', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Global Rules section
|
||||||
|
lines.append("## Global Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Palette
|
||||||
|
lines.append("### Color Palette")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Role | Hex | CSS Variable |")
|
||||||
|
lines.append("|------|-----|--------------|")
|
||||||
|
lines.append(f"| Primary | `{colors.get('primary', '#2563EB')}` | `--color-primary` |")
|
||||||
|
lines.append(f"| Secondary | `{colors.get('secondary', '#3B82F6')}` | `--color-secondary` |")
|
||||||
|
lines.append(f"| CTA/Accent | `{colors.get('cta', '#F97316')}` | `--color-cta` |")
|
||||||
|
lines.append(f"| Background | `{colors.get('background', '#F8FAFC')}` | `--color-background` |")
|
||||||
|
lines.append(f"| Text | `{colors.get('text', '#1E293B')}` | `--color-text` |")
|
||||||
|
lines.append("")
|
||||||
|
if colors.get("notes"):
|
||||||
|
lines.append(f"**Color Notes:** {colors.get('notes', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography
|
||||||
|
lines.append("### Typography")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"- **Heading Font:** {typography.get('heading', 'Inter')}")
|
||||||
|
lines.append(f"- **Body Font:** {typography.get('body', 'Inter')}")
|
||||||
|
if typography.get("mood"):
|
||||||
|
lines.append(f"- **Mood:** {typography.get('mood', '')}")
|
||||||
|
if typography.get("google_fonts_url"):
|
||||||
|
lines.append(f"- **Google Fonts:** [{typography.get('heading', '')} + {typography.get('body', '')}]({typography.get('google_fonts_url', '')})")
|
||||||
|
lines.append("")
|
||||||
|
if typography.get("css_import"):
|
||||||
|
lines.append("**CSS Import:**")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(typography.get("css_import", ""))
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Variables
|
||||||
|
lines.append("### Spacing Variables")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Token | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--space-xs` | `4px` / `0.25rem` | Tight gaps |")
|
||||||
|
lines.append("| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |")
|
||||||
|
lines.append("| `--space-md` | `16px` / `1rem` | Standard padding |")
|
||||||
|
lines.append("| `--space-lg` | `24px` / `1.5rem` | Section padding |")
|
||||||
|
lines.append("| `--space-xl` | `32px` / `2rem` | Large gaps |")
|
||||||
|
lines.append("| `--space-2xl` | `48px` / `3rem` | Section margins |")
|
||||||
|
lines.append("| `--space-3xl` | `64px` / `4rem` | Hero padding |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Shadow Depths
|
||||||
|
lines.append("### Shadow Depths")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("| Level | Value | Usage |")
|
||||||
|
lines.append("|-------|-------|-------|")
|
||||||
|
lines.append("| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |")
|
||||||
|
lines.append("| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |")
|
||||||
|
lines.append("| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |")
|
||||||
|
lines.append("| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Specs section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Component Specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
lines.append("### Buttons")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append("/* Primary Button */")
|
||||||
|
lines.append(".btn-primary {")
|
||||||
|
lines.append(f" background: {colors.get('cta', '#F97316')};")
|
||||||
|
lines.append(" color: white;")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".btn-primary:hover {")
|
||||||
|
lines.append(" opacity: 0.9;")
|
||||||
|
lines.append(" transform: translateY(-1px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("/* Secondary Button */")
|
||||||
|
lines.append(".btn-secondary {")
|
||||||
|
lines.append(f" background: transparent;")
|
||||||
|
lines.append(f" color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(f" border: 2px solid {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" padding: 12px 24px;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-weight: 600;")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Cards
|
||||||
|
lines.append("### Cards")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".card {")
|
||||||
|
lines.append(f" background: {colors.get('background', '#FFFFFF')};")
|
||||||
|
lines.append(" border-radius: 12px;")
|
||||||
|
lines.append(" padding: 24px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-md);")
|
||||||
|
lines.append(" transition: all 200ms ease;")
|
||||||
|
lines.append(" cursor: pointer;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".card:hover {")
|
||||||
|
lines.append(" box-shadow: var(--shadow-lg);")
|
||||||
|
lines.append(" transform: translateY(-2px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Inputs
|
||||||
|
lines.append("### Inputs")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".input {")
|
||||||
|
lines.append(" padding: 12px 16px;")
|
||||||
|
lines.append(" border: 1px solid #E2E8F0;")
|
||||||
|
lines.append(" border-radius: 8px;")
|
||||||
|
lines.append(" font-size: 16px;")
|
||||||
|
lines.append(" transition: border-color 200ms ease;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".input:focus {")
|
||||||
|
lines.append(f" border-color: {colors.get('primary', '#2563EB')};")
|
||||||
|
lines.append(" outline: none;")
|
||||||
|
lines.append(f" box-shadow: 0 0 0 3px {colors.get('primary', '#2563EB')}20;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Modals
|
||||||
|
lines.append("### Modals")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("```css")
|
||||||
|
lines.append(".modal-overlay {")
|
||||||
|
lines.append(" background: rgba(0, 0, 0, 0.5);")
|
||||||
|
lines.append(" backdrop-filter: blur(4px);")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(".modal {")
|
||||||
|
lines.append(" background: white;")
|
||||||
|
lines.append(" border-radius: 16px;")
|
||||||
|
lines.append(" padding: 32px;")
|
||||||
|
lines.append(" box-shadow: var(--shadow-xl);")
|
||||||
|
lines.append(" max-width: 500px;")
|
||||||
|
lines.append(" width: 90%;")
|
||||||
|
lines.append("}")
|
||||||
|
lines.append("```")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Style section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Style Guidelines")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Style:** {style.get('name', 'Minimalism')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("keywords"):
|
||||||
|
lines.append(f"**Keywords:** {style.get('keywords', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if style.get("best_for"):
|
||||||
|
lines.append(f"**Best For:** {style.get('best_for', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if effects:
|
||||||
|
lines.append(f"**Key Effects:** {effects}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Pattern
|
||||||
|
lines.append("### Page Pattern")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"**Pattern Name:** {pattern.get('name', '')}")
|
||||||
|
lines.append("")
|
||||||
|
if pattern.get('conversion'):
|
||||||
|
lines.append(f"- **Conversion Strategy:** {pattern.get('conversion', '')}")
|
||||||
|
if pattern.get('cta_placement'):
|
||||||
|
lines.append(f"- **CTA Placement:** {pattern.get('cta_placement', '')}")
|
||||||
|
lines.append(f"- **Section Order:** {pattern.get('sections', '')}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Anti-Patterns section
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Anti-Patterns (Do NOT Use)")
|
||||||
|
lines.append("")
|
||||||
|
if anti_patterns:
|
||||||
|
anti_list = [a.strip() for a in anti_patterns.split("+")]
|
||||||
|
for anti in anti_list:
|
||||||
|
if anti:
|
||||||
|
lines.append(f"- ❌ {anti}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("### Additional Forbidden Patterns")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)")
|
||||||
|
lines.append("- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer")
|
||||||
|
lines.append("- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout")
|
||||||
|
lines.append("- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio")
|
||||||
|
lines.append("- ❌ **Instant state changes** — Always use transitions (150-300ms)")
|
||||||
|
lines.append("- ❌ **Invisible focus states** — Focus states must be visible for a11y")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Pre-Delivery Checklist
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Pre-Delivery Checklist")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("Before delivering any UI code, verify:")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("- [ ] No emojis used as icons (use SVG instead)")
|
||||||
|
lines.append("- [ ] All icons from consistent icon set (Heroicons/Lucide)")
|
||||||
|
lines.append("- [ ] `cursor-pointer` on all clickable elements")
|
||||||
|
lines.append("- [ ] Hover states with smooth transitions (150-300ms)")
|
||||||
|
lines.append("- [ ] Light mode: text contrast 4.5:1 minimum")
|
||||||
|
lines.append("- [ ] Focus states visible for keyboard navigation")
|
||||||
|
lines.append("- [ ] `prefers-reduced-motion` respected")
|
||||||
|
lines.append("- [ ] Responsive: 375px, 768px, 1024px, 1440px")
|
||||||
|
lines.append("- [ ] No content hidden behind fixed navbars")
|
||||||
|
lines.append("- [ ] No horizontal scroll on mobile")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def format_page_override_md(design_system: dict, page_name: str, page_query: str = None) -> str:
|
||||||
|
"""Format a page-specific override file with intelligent AI-generated content."""
|
||||||
|
project = design_system.get("project_name", "PROJECT")
|
||||||
|
timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
|
||||||
|
page_title = page_name.replace("-", " ").replace("_", " ").title()
|
||||||
|
|
||||||
|
# Detect page type and generate intelligent overrides
|
||||||
|
page_overrides = _generate_intelligent_overrides(page_name, page_query, design_system)
|
||||||
|
|
||||||
|
lines = []
|
||||||
|
|
||||||
|
lines.append(f"# {page_title} Page Overrides")
|
||||||
|
lines.append("")
|
||||||
|
lines.append(f"> **PROJECT:** {project}")
|
||||||
|
lines.append(f"> **Generated:** {timestamp}")
|
||||||
|
lines.append(f"> **Page Type:** {page_overrides.get('page_type', 'General')}")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).")
|
||||||
|
lines.append("> Only deviations from the Master are documented here. For all other rules, refer to the Master.")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-specific rules with actual content
|
||||||
|
lines.append("## Page-Specific Rules")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Layout Overrides
|
||||||
|
lines.append("### Layout Overrides")
|
||||||
|
lines.append("")
|
||||||
|
layout = page_overrides.get("layout", {})
|
||||||
|
if layout:
|
||||||
|
for key, value in layout.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master layout")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Spacing Overrides
|
||||||
|
lines.append("### Spacing Overrides")
|
||||||
|
lines.append("")
|
||||||
|
spacing = page_overrides.get("spacing", {})
|
||||||
|
if spacing:
|
||||||
|
for key, value in spacing.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master spacing")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Typography Overrides
|
||||||
|
lines.append("### Typography Overrides")
|
||||||
|
lines.append("")
|
||||||
|
typography = page_overrides.get("typography", {})
|
||||||
|
if typography:
|
||||||
|
for key, value in typography.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master typography")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Color Overrides
|
||||||
|
lines.append("### Color Overrides")
|
||||||
|
lines.append("")
|
||||||
|
colors = page_overrides.get("colors", {})
|
||||||
|
if colors:
|
||||||
|
for key, value in colors.items():
|
||||||
|
lines.append(f"- **{key}:** {value}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master colors")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Component Overrides
|
||||||
|
lines.append("### Component Overrides")
|
||||||
|
lines.append("")
|
||||||
|
components = page_overrides.get("components", [])
|
||||||
|
if components:
|
||||||
|
for comp in components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No overrides — use Master component specs")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Page-Specific Components
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Page-Specific Components")
|
||||||
|
lines.append("")
|
||||||
|
unique_components = page_overrides.get("unique_components", [])
|
||||||
|
if unique_components:
|
||||||
|
for comp in unique_components:
|
||||||
|
lines.append(f"- {comp}")
|
||||||
|
else:
|
||||||
|
lines.append("- No unique components for this page")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
# Recommendations
|
||||||
|
lines.append("---")
|
||||||
|
lines.append("")
|
||||||
|
lines.append("## Recommendations")
|
||||||
|
lines.append("")
|
||||||
|
recommendations = page_overrides.get("recommendations", [])
|
||||||
|
if recommendations:
|
||||||
|
for rec in recommendations:
|
||||||
|
lines.append(f"- {rec}")
|
||||||
|
lines.append("")
|
||||||
|
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
|
||||||
|
def _generate_intelligent_overrides(page_name: str, page_query: str, design_system: dict) -> dict:
|
||||||
|
"""
|
||||||
|
Generate intelligent overrides based on page type using layered search.
|
||||||
|
|
||||||
|
Uses the existing search infrastructure to find relevant style, UX, and layout
|
||||||
|
data instead of hardcoded page types.
|
||||||
|
"""
|
||||||
|
from core import search
|
||||||
|
|
||||||
|
page_lower = page_name.lower()
|
||||||
|
query_lower = (page_query or "").lower()
|
||||||
|
combined_context = f"{page_lower} {query_lower}"
|
||||||
|
|
||||||
|
# Search across multiple domains for page-specific guidance
|
||||||
|
style_search = search(combined_context, "style", max_results=1)
|
||||||
|
ux_search = search(combined_context, "ux", max_results=3)
|
||||||
|
landing_search = search(combined_context, "landing", max_results=1)
|
||||||
|
|
||||||
|
# Extract results from search response
|
||||||
|
style_results = style_search.get("results", [])
|
||||||
|
ux_results = ux_search.get("results", [])
|
||||||
|
landing_results = landing_search.get("results", [])
|
||||||
|
|
||||||
|
# Detect page type from search results or context
|
||||||
|
page_type = _detect_page_type(combined_context, style_results)
|
||||||
|
|
||||||
|
# Build overrides from search results
|
||||||
|
layout = {}
|
||||||
|
spacing = {}
|
||||||
|
typography = {}
|
||||||
|
colors = {}
|
||||||
|
components = []
|
||||||
|
unique_components = []
|
||||||
|
recommendations = []
|
||||||
|
|
||||||
|
# Extract style-based overrides
|
||||||
|
if style_results:
|
||||||
|
style = style_results[0]
|
||||||
|
style_name = style.get("Style Category", "")
|
||||||
|
keywords = style.get("Keywords", "")
|
||||||
|
best_for = style.get("Best For", "")
|
||||||
|
effects = style.get("Effects & Animation", "")
|
||||||
|
|
||||||
|
# Infer layout from style keywords
|
||||||
|
if any(kw in keywords.lower() for kw in ["data", "dense", "dashboard", "grid"]):
|
||||||
|
layout["Max Width"] = "1400px or full-width"
|
||||||
|
layout["Grid"] = "12-column grid for data flexibility"
|
||||||
|
spacing["Content Density"] = "High — optimize for information display"
|
||||||
|
elif any(kw in keywords.lower() for kw in ["minimal", "simple", "clean", "single"]):
|
||||||
|
layout["Max Width"] = "800px (narrow, focused)"
|
||||||
|
layout["Layout"] = "Single column, centered"
|
||||||
|
spacing["Content Density"] = "Low — focus on clarity"
|
||||||
|
else:
|
||||||
|
layout["Max Width"] = "1200px (standard)"
|
||||||
|
layout["Layout"] = "Full-width sections, centered content"
|
||||||
|
|
||||||
|
if effects:
|
||||||
|
recommendations.append(f"Effects: {effects}")
|
||||||
|
|
||||||
|
# Extract UX guidelines as recommendations
|
||||||
|
for ux in ux_results:
|
||||||
|
category = ux.get("Category", "")
|
||||||
|
do_text = ux.get("Do", "")
|
||||||
|
dont_text = ux.get("Don't", "")
|
||||||
|
if do_text:
|
||||||
|
recommendations.append(f"{category}: {do_text}")
|
||||||
|
if dont_text:
|
||||||
|
components.append(f"Avoid: {dont_text}")
|
||||||
|
|
||||||
|
# Extract landing pattern info for section structure
|
||||||
|
if landing_results:
|
||||||
|
landing = landing_results[0]
|
||||||
|
sections = landing.get("Section Order", "")
|
||||||
|
cta_placement = landing.get("Primary CTA Placement", "")
|
||||||
|
color_strategy = landing.get("Color Strategy", "")
|
||||||
|
|
||||||
|
if sections:
|
||||||
|
layout["Sections"] = sections
|
||||||
|
if cta_placement:
|
||||||
|
recommendations.append(f"CTA Placement: {cta_placement}")
|
||||||
|
if color_strategy:
|
||||||
|
colors["Strategy"] = color_strategy
|
||||||
|
|
||||||
|
# Add page-type specific defaults if no search results
|
||||||
|
if not layout:
|
||||||
|
layout["Max Width"] = "1200px"
|
||||||
|
layout["Layout"] = "Responsive grid"
|
||||||
|
|
||||||
|
if not recommendations:
|
||||||
|
recommendations = [
|
||||||
|
"Refer to MASTER.md for all design rules",
|
||||||
|
"Add specific overrides as needed for this page"
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
"page_type": page_type,
|
||||||
|
"layout": layout,
|
||||||
|
"spacing": spacing,
|
||||||
|
"typography": typography,
|
||||||
|
"colors": colors,
|
||||||
|
"components": components,
|
||||||
|
"unique_components": unique_components,
|
||||||
|
"recommendations": recommendations
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def _detect_page_type(context: str, style_results: list) -> str:
|
||||||
|
"""Detect page type from context and search results."""
|
||||||
|
context_lower = context.lower()
|
||||||
|
|
||||||
|
# Check for common page type patterns
|
||||||
|
page_patterns = [
|
||||||
|
(["dashboard", "admin", "analytics", "data", "metrics", "stats", "monitor", "overview"], "Dashboard / Data View"),
|
||||||
|
(["checkout", "payment", "cart", "purchase", "order", "billing"], "Checkout / Payment"),
|
||||||
|
(["settings", "profile", "account", "preferences", "config"], "Settings / Profile"),
|
||||||
|
(["landing", "marketing", "homepage", "hero", "home", "promo"], "Landing / Marketing"),
|
||||||
|
(["login", "signin", "signup", "register", "auth", "password"], "Authentication"),
|
||||||
|
(["pricing", "plans", "subscription", "tiers", "packages"], "Pricing / Plans"),
|
||||||
|
(["blog", "article", "post", "news", "content", "story"], "Blog / Article"),
|
||||||
|
(["product", "item", "detail", "pdp", "shop", "store"], "Product Detail"),
|
||||||
|
(["search", "results", "browse", "filter", "catalog", "list"], "Search Results"),
|
||||||
|
(["empty", "404", "error", "not found", "zero"], "Empty State"),
|
||||||
|
]
|
||||||
|
|
||||||
|
for keywords, page_type in page_patterns:
|
||||||
|
if any(kw in context_lower for kw in keywords):
|
||||||
|
return page_type
|
||||||
|
|
||||||
|
# Fallback: try to infer from style results
|
||||||
|
if style_results:
|
||||||
|
style_name = style_results[0].get("Style Category", "").lower()
|
||||||
|
best_for = style_results[0].get("Best For", "").lower()
|
||||||
|
|
||||||
|
if "dashboard" in best_for or "data" in best_for:
|
||||||
|
return "Dashboard / Data View"
|
||||||
|
elif "landing" in best_for or "marketing" in best_for:
|
||||||
|
return "Landing / Marketing"
|
||||||
|
|
||||||
|
return "General"
|
||||||
|
|
||||||
|
|
||||||
# ============ CLI SUPPORT ============
|
# ============ CLI SUPPORT ============
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import argparse
|
import argparse
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
|
||||||
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
|
||||||
python search.py "<query>" --design-system [-p "Project Name"]
|
python search.py "<query>" --design-system [-p "Project Name"]
|
||||||
|
python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
|
||||||
|
|
||||||
Domains: style, prompt, color, chart, landing, product, ux, typography
|
Domains: style, prompt, color, chart, landing, product, ux, typography
|
||||||
Stacks: html-tailwind, react, nextjs
|
Stacks: html-tailwind, react, nextjs
|
||||||
|
|
||||||
|
Persistence (Master + Overrides pattern):
|
||||||
|
--persist Save design system to design-system/MASTER.md
|
||||||
|
--page Also create a page-specific override file in design-system/pages/
|
||||||
"""
|
"""
|
||||||
|
|
||||||
import argparse
|
import argparse
|
||||||
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
|
||||||
from design_system import generate_design_system
|
from design_system import generate_design_system, persist_design_system
|
||||||
|
|
||||||
|
|
||||||
def format_output(result):
|
def format_output(result):
|
||||||
@@ -51,13 +56,38 @@ if __name__ == "__main__":
|
|||||||
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
|
||||||
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
|
||||||
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
|
||||||
|
# Persistence (Master + Overrides pattern)
|
||||||
|
parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
|
||||||
|
parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
|
||||||
|
parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
|
||||||
|
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
# Design system takes priority
|
# Design system takes priority
|
||||||
if args.design_system:
|
if args.design_system:
|
||||||
result = generate_design_system(args.query, args.project_name, args.format)
|
result = generate_design_system(
|
||||||
|
args.query,
|
||||||
|
args.project_name,
|
||||||
|
args.format,
|
||||||
|
persist=args.persist,
|
||||||
|
page=args.page,
|
||||||
|
output_dir=args.output_dir
|
||||||
|
)
|
||||||
print(result)
|
print(result)
|
||||||
|
|
||||||
|
# Print persistence confirmation
|
||||||
|
if args.persist:
|
||||||
|
project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
|
||||||
|
print("\n" + "=" * 60)
|
||||||
|
print(f"✅ Design system persisted to design-system/{project_slug}/")
|
||||||
|
print(f" 📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
|
||||||
|
if args.page:
|
||||||
|
page_filename = args.page.lower().replace(' ', '-')
|
||||||
|
print(f" 📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
|
||||||
|
print("")
|
||||||
|
print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
|
||||||
|
print(f" If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
|
||||||
|
print("=" * 60)
|
||||||
# Stack search
|
# Stack search
|
||||||
elif args.stack:
|
elif args.stack:
|
||||||
result = search_stack(args.query, args.stack, args.max_results)
|
result = search_stack(args.query, args.stack, args.max_results)
|
||||||
|
|||||||
Reference in New Issue
Block a user