AI Blocks › Build websites and web apps
Page design gate
Describe your page. Get one that looks designed, checked in a real browser at phone and desktop width.
Page design gate 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 · CC BY 4.0 licence · Made by sickn33
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
A page that looks designed instead of generic, and that has been opened in a real browser at phone and desktop width before it is called done. It starts by reading the room: who visits, what feel suits them, and one signature detail to make the page memorable. It then builds on a set floor of rules for type, colour, layout, buttons states and motion, and bans familiar AI looks like purple glow gradients and emoji icons. The last step renders the page at both sizes and keeps the work open while any hard problem remains, such as overlapping text or sideways scrolling. It needs a browser it can control.
You give it
- What the page is for and who visits
- Brand fonts or colours (optional)
- The page code or a short brief
- A browser the AI can open
- Codebase (optional)
You get
- A built page with a chosen visual direction
- Phone and desktop render checks
- List of problems found and fixed
- Sign-off only when hard issues are closed
Use it when
- You asked an AI for a landing page and it looks like every other one.
- You want proof the page works on a phone, not a guess.
- You are about to ship a new screen and want a final check.
- A redesign needs a clear look, not just tweaks.
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.