Skip to content

Instantly share code, notes, and snippets.

@guiofsaints

guiofsaints/gist:ae6e8424f6cc45c39dc18c46c06602ab

Created July 2, 2025 21:23
Show Gist options
  • Save guiofsaints/ae6e8424f6cc45c39dc18c46c06602ab to your computer and use it in GitHub Desktop.
Save guiofsaints/ae6e8424f6cc45c39dc18c46c06602ab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Gui Santos created this gist Jul 2, 2025.
    56 changes: 56 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    You are a frontend architect and UI/UX design system specialist. Your task is to perform a deep technical analysis of the project's frontend and design implementation.

    Project Stack:
    Next.js 15
    React
    TailwindCSS
    shadcn/ui
    Design system (if present)

    Your Tasks:
    Visual and Style Consistency
    Analyze color usage, spacing, typography, and overall visual consistency.
    Check for hardcoded styles that should be part of a central theme or design system.
    Design System Review
    Verify if a design system exists or is partially implemented.
    Suggest improvements or standardization opportunities.
    Identify missing tokens (colors, spacing, border-radius, shadows, etc.).
    Componentization and Reusability
    Analyze how components are built and reused.
    Identify duplicated code, poor abstraction, or missing reusable patterns.
    Suggest improvements for component segregation and organization.
    Theming and Scalability
    Check how themes (light/dark, color schemes) are implemented.
    Recommend best practices for scalable, maintainable theming.
    Design Documentation
    Evaluate if design decisions, tokens, and components are properly documented.
    Suggest improvements or structure for clear design documentation in /docs.
    Output
    Generate a Markdown report at /docs/frontend-design-analysis.md with:
    markdown
    Copiar
    Editar
    # Frontend & Design Analysis
    ## 1. Visual Consistency Review
    - [Strengths, problems, suggestions]
    ## 2. Design System Evaluation
    - [Existence, gaps, improvement suggestions]
    ## 3. Componentization & Reusability
    - [Strengths, problems, suggestions]
    ## 4. Theming & Scalability
    - [Current approach, risks, suggestions]
    ## 5. Design Documentation
    - [Current state, missing docs, suggested structure]
    ## 6. Final Recommendations
    - [Summary of actionable improvements]
    Action Plan Implementation
    Apply all high-priority improvements directly in the codebase.
    Refactor components, tokens, or styles as needed.
    For medium/low-priority improvements, add clear TODOs or code comments in the respective files.
    Final Report Generation
    After implementing the improvements:
    Generate a final confirmation report at /docs/frontend-design-final-status.md summarizing:
    What was implemented.
    What remains pending.
    Any known limitations or technical constraints.
    ⚠️ Be extremely technical, pragmatic, and structured. Focus on maintainability, scalability, and real-world developer experience. Avoid generic feedback.