AI Blocks › Build websites and web apps
Accessible UI builder
Describe the screen. Get accessible, responsive component code that follows your design system.
Accessible UI builder is a free AI skill for the job "Build websites and web apps". 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 Addy Osmani
Made by Addy Osmani. See the original on GitHub; we copied it as it is, with its licence.
What it does
A screen that is responsive, usable with a keyboard and screen reader, and consistent with your design system is built for you. It should look like a careful designer made it, not a generic AI page. The skill keeps each component small and does one job. It prefers composing parts, such as a card with a header and a body, over one component with a dozen options. It follows your existing spacing, colour and type rules rather than inventing new ones, and it adds proper labels, focus states and sensible states for loading, empty and error. It also steers away from the stock AI look. You need a front-end project to build in.
You give it
- A description of the screen
- Your design system or style rules
- The framework your project uses
- Existing components to reuse (optional)
- Codebase (optional)
You get
- Component code
- Responsive layout
- Accessible labels and focus handling
- Loading, empty and error states
- Tests for the component (optional)
Use it when
- You need a new page or component that follows your style.
- Your current screen fails on keyboard or screen reader use.
- You want a layout that works on phone and desktop.
- Generated screens in your app all look the same and you want them to look hand made.
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.
- It works best when your AI can run code and open a browser.