AI Blocks › Design things people love
Page design standards checker
Give it a page or component. Get checks on colour contrast, spacing, hierarchy and mobile, with fixes.
Page design standards checker is a free AI skill for the job "Design things people love". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · MIT licence · Made by RampStack · Thinking: low
Made by RampStack. See the original on GitHub; we copied it as it is, with its licence.
What it does
A review of your page or component against six design standards, with a fix for each problem found. It catches the usual causes of a page that feels off: low contrast, uneven spacing, weak hierarchy and layouts that break on a phone. It starts with design tokens, the saved colours, type sizes and spacing steps, and helps you set them if none exist. Then it checks text contrast, a consistent spacing scale, what the eye sees first, button and form rules, and mobile behaviour. It ends with a pre-ship checklist so nothing slips out. It does not define a brand or audit full accessibility law.
You give it
- The page, component or code to check
- Brand colours, fonts and spacing (optional)
- Target devices and screen widths
You get
- Findings on contrast, spacing, hierarchy and mobile
- A fix for each finding
- A starter set of design tokens if you had none
- Pre-ship checklist
Use it when
- A page looks off but you cannot say why.
- You are about to ship a section and want a quality pass.
- Buttons and forms differ from page to page.
- You are starting a project and need colour and spacing rules first.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.