The method
Paste a snippet of your website’s CSS and UI component code. Specify the key design principles to maintain. Use in initial design phases or audits. Ideal when ensuring brand alignment.
The prompts
Prompt 1
Analyze the following CSS code and UI component definitions, identifying any inconsistencies in typography, color usage, spacing, and component styling. The core design principles are a minimalist aesthetic, a primary color palette of blue and white, and consistent use of a specific font family (Arial). Provide specific examples of inconsistencies and suggest concrete solutions to align the code with these principles. Consider accessibility guidelines in your assessment, pointing out any potential issues arising from the existing styles. Focus on ensuring a unified user experience across all components. The CSS Code is:
[Insert CSS Code Here]
The UI Components are: [Insert UI component definition here]
[Insert CSS Code Here]
The UI Components are: [Insert UI component definition here]
Prompt 2
Review the provided website section's HTML structure and associated CSS to determine if it adheres to established design system guidelines. These guidelines prioritize responsiveness across different screen sizes (desktop, tablet, mobile), clear visual hierarchy, and adherence to the corporate brand identity. Highlight areas where the implementation deviates from the guidelines, particularly in the use of layout grids, font sizes, and color choices. Suggest alternative code implementations that would better align with the design system and improve the overall user experience and accessibility of the website section. Make sure to include an example with code and a way to apply. The website section's HTML structure:
[Insert HTML Structure Here]
The Associated CSS:
[Insert CSS Here]
[Insert HTML Structure Here]
The Associated CSS:
[Insert CSS Here]