A design check your AI runs on every change
Xodia's design check reads your site's code for low contrast text, lines that run too long and the common tells of generated design. Your AI runs it through Xodia's tools, fixes what it finds and runs it again, and its screenshots check the rendered page too.
Free plan. No card needed.
The Agent panel's Activity in Xodia while your AI polishes the home page: it loads the polish skill, runs the design check, which fails, edits the stylesheet and the page, runs the check again, which passes, takes a mobile screenshot and finishes the request.
Design check
The details that make a page look unfinished
Each finding names the file and line, and comes with how to fix it. Errors come first, then warnings, then notes.
Low contrast
Text and background pairs in your CSS and Tailwind classes, with your theme's colors resolved, checked against WCAG 2: 4.5:1 for body text, 3:1 for large text. Under 3:1 counts as an error.
Lines that run too long
Body text set so wide that a line holds far more than the 60 to 75 characters that read comfortably.
Missing focus styles
Focus outlines removed with nothing in their place, so keyboard visitors can't see where they are. These count as errors.
Tells of generated design
Gradient text, purple gradients off brand, emoji or text characters used as icons, px sizes where rem belongs, transitions on every property, pop-in entrances, the same card or entrance repeated everywhere, and !important.
Copy check
Copy in your voice, with nothing made up
Part of the design check, the copy rules read the words on your pages against your plan's voice.
Words to avoid
Any word on your plan's avoid list, or one you banned, and close variants of it. Your AI must reword these.
Facts to confirm
Slots a draft leaves for a fact only you know, such as a price or an opening time. Your AI lists them for you and never fills one with an invented fact.
Long sentences
Sentences that carry two ideas or read heavy. Your AI judges each one and splits it where that reads better.
Passive headings
Headings that would read stronger active. A passive one that sounds natural in your brand's voice can stay.
Link check
Every link checked across the whole site
The link check reads your routes, links and redirects from the code, with no network calls, and reports on every page at once.
Broken internal links
Links to a page your site doesn't have. These are errors.
Links that redirect
Links to an old address a redirect catches, which should point at the final page.
Orphan pages
Pages no other page links to from its body copy, besides the menu and footer.
Vague link text
Empty links, icons without a label, and a bare "click here" or "read more" that doesn't say where it goes.
External links missing rel
Links that open a new tab without rel="noopener", and paid or user links without rel="sponsored" or "ugc".
Pages with few internal links
A suggestion, not an error: add two to four links to related pages where they help the reader.
Where it runs
On your project's code, the same every time
The checks are fast scans of your code with fixed rules, no AI involved, so they give the same answer every time.
- Your AI runs them with Xodia's run_check tool: the design check on the files changed since your last push or on the whole site, the link check on the whole site
- Type and build checks run your site's own build on Xodia's servers, so they work while Xodia is closed
- Screenshots your AI takes add live checks on the rendered page: low contrast and long lines, with where each one is in your code
- Xodia's skills tell your AI to run them after every change, and Build all pages runs them on every page it builds
Settings, Code and Git: the project's GitHub repository, risebakery/website, and the branch main, with the note that edits you save are committed to this branch.
Design skills
Skills for design, and a polish pass
Your AI follows Xodia's design skills while it builds, and /xodia:polish starts a finishing pass on a page or component in Claude Code.
- Design directionBefore building, writes a short design brief drawn from your business itself, offers you clear options, and records the one you pick.
- Design systemKeeps typography, spacing and colour consistent through your site's own tokens, so every page looks considered on any screen.
- UI statesDesigns what visitors see while things load, when a list is empty, when something fails or succeeds, and when a control is unavailable.
- PolishA finishing pass over the small details (corners, alignment, shadows, numbers, focus rings, icons) that make a page feel crafted.
- Design critiqueLooks at new or changed pages at three screen sizes, scores how designed they look, fixes the weak spots and looks again.
- AccessibilityMakes pages work for everyone: keyboard, screen readers, readable contrast, sensible headings and named buttons.
The Agents page in Xodia: Claude Code connected, the skill groups as filters with Design chosen, and the Design group's skills, each with what it does and the request kinds that use it.
Audits
Every planAccessibility checks while you edit
The Audits panel checks the page open in the editor, so you catch problems yourself, without asking your AI.
- Images without alt text, headings that skip a level, and links and buttons with no name
- Text contrast, the page title and description, and the page's language
- Each issue shows where it is and which panel fixes it, or send the whole list to your AI in one click
The Audits panel for the menu page: a missing description, an image without alt text, a heading that skips a level and low text contrast, each with how to fix it, and Fix these with your agent.
Questions
Questions about the checks
Do the checks change my code?
No. They only report. Your AI makes the fixes, and they stay in Xodia until you review them and push.
Which plans include the checks?
Every plan. They are part of the tools your AI gets when it connects to Xodia. See your AI in Xodia.
What if I chose a gradient or purple on purpose?
Keep it. Those findings are warnings, and your AI is told to fix warnings unless they are deliberate. Only missing focus styles and contrast under 3:1 count as errors.
Does the link check open my live site?
No. It reads the code in your preview, so it works before anything is published and never sends a request to another site.
Does the design check work on any framework?
It reads the source files Xodia opens: JSX and TSX, HTML, CSS and SCSS. See every framework.
Keep exploring
Related pages
- Plan with AISitemap, wireframes and style in sync with your site
- Agent skillsThe skills and stack packs your AI follows
- Bring your AIClaude, Cursor and any MCP app, with Xodia's tools and skills
- SEOPage settings, audits and speed tests
- InteractionsHover effects, scroll reveals and timelines
- Sites built with AIImport it from GitHub and edit it without prompts
- Product overviewEvery feature in the order you use it
- PricingPlans, limits and what Free includes