How does this skill differ from a standard manual UI audit?

This skill compares your site's screenshots and computed styles against your design tokens to detect typography, spacing, and color deviations that manual audits often miss.

What file formats do I need to provide for my design tokens and style guides?

It supports design tokens provided in JSON or CSS formats, as well as component documentation from tools like Storybook or formal style guides.

What kind of output can I expect after the audit is complete?

The skill generates a categorized report where issues are ranked P1-P3, providing clear implementation steps and a retest checklist for your development team.

Does this skill require access to my live code or repository?

While it can audit visual screenshots alone, providing HTML/CSS exports or computed-style data significantly increases the accuracy and depth of the technical findings.

Can I use this on older websites that don't currently use a formal design system?

Yes, the skill is specifically designed to identify 'CSS creep' and can even propose new candidate tokens to help you establish a baseline for legacy projects.

What is included in the purchase of this skill?

You will receive the full skill logic, integration instructions for compatible AI agents, and a template for organizing your design system assets for optimal results.

Website Design System Consistency Auditor

Example session with this skill installed

Review these screenshots of our login flow against our primary branding: blue is #0055FF, border-radius is 8px, and headers use Inter 24px. Check for any inconsistencies in the button states.

Read your context and instructions
Compiled the website design system

I have completed the visual consistency audit of the login flow against your provided design tokens (Primary Blue #0055FF, Radius 8px, Inter 24px).

Audit Findings Report

ID	Component	Category	Observation	Evidence	Confidence	Priority	Recommendation
AUD-01	Primary Button	Color	Background color appears darker than brand blue.	Visual hex check: #0044CC	High	P1	Update background-color to #0055FF.
AUD-02	Login Card	Border	Corners appear sharper than the 8px standard.	Visual estimate: 4px radius	Medium	P2	Apply border-radius: 8px to card container.
AUD-03	Page Header	Typography	Font size is larger than the specified 24px.	Visual comparison to 24px ref	Medium	P2	Set h1 style to Inter 24px.
AUD-04	Input Fields	Spacing	Internal padding is inconsistent between Email/Password.	Visual misalignment	High	P3	Standardize internal padding to 12px.

Implementation Sequence

Fix P1 Color Mismatch: Correct the primary button background to ensure brand alignment in the main CTA.
Standardize Layout Tokens: Apply the 8px border-radius and 24px header styles across the login container.
Refine Input Padding: Align the internal spacing of all form controls.

Next steps

Provide computed CSS exports for the Login Button to confirm the exact color value.
Upload screenshots of the 'Error' and 'Hover' states to audit interaction consistency.
Review the proposed 12px padding standard for form inputs.

Connects securely to your tools. The creator never sees your data.

About this skill

Manual UI audits are slow and prone to human error, especially when managing large design systems across multiple viewports. This skill automates the detection of visual inconsistencies by comparing screenshots and documentation against your established design tokens. It identifies deviations in typography, spacing, color usage, and component states to ensure brand coherence.

What it does

Visual auditing reviews screenshots to detect deviations from design standards.
Token validation checks implemented UI against provided color, type, and spacing scales.
Prioritized reporting categorizes issues by severity (P1-P3) based on user impact and frequency.
Standardization proposes candidate tokens when no baseline exists for a pattern.
Remediation planning generates specific fix recommendations and retest checklists.

How it works

Scope definition by recording the pages, viewport sizes, and design system assets provided.
Reference establishing using your design tokens or component library as the source of truth.
Evidence collection through inspection of typography, layout, and control states.
Report generation including a prioritized findings table and implementation sequence.

Frameworks & tools

This skill works with design tokens (JSON/CSS), component documentation (Storybook/Styleguides), and page screenshots. It processes HTML/CSS exports and computed-style data for higher-confidence audits.

Why this beats prompting it yourself

Generic prompts often hallucinate CSS values or miss subtle spacing shifts between viewports. This skill follows a rigorous evidence-led workflow that distinguishes between visible observations and code-level facts, ensuring every finding is grounded in your specific design system rules.

Use cases

Auditing a new feature branch against a Figma design system before merge.
Syncing visual styling across desktop and mobile breakpoints.
Identifying "CSS creep" in legacy applications without a formal token system.
Preparing a UI remediation backlog for a brand refresh.

Known limitations

Cannot verify interaction states without specific screenshots. Visual audits are not a substitute for full accessibility or functional testing. Confidence is lower without computed-style exports.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Money-back guarantee

Doesn't do what its page promises? You get your money back.

Website Design System Consistency Auditor