AI Blocks › Build websites and web apps
Build a page that looks designed and clicks through without breaking
Describe your site. Get fonts and a grid, a page that follows them and a browser test.
Build a page on a clear grid and test it is a free AI workflow for the job "Build websites and web apps". It guides your AI through several skills in order, passing each step's output to the next.
Free · No account · Made by AI Blocks
What it does
Pages built straight from a prompt tend to look like every other template. The fonts are the default, the spacing is random and nothing sits on a grid. Then nobody clicks through it, so a broken menu or form ships with the page. The steps fix the look first, then build. It picks fonts that suit what the site says and who reads it, and sets sizes and line spacing. Next it builds a grid and layout around those fonts. You add the type, grid and layout to your page brief. Then the art director builds the page to follow it and checks it at phone and desktop width. Last it opens the page in a real browser, clicks through links, forms and menus and reports what failed.
You give it
- A plain description of the site, covering what it says, who reads it and what they should do
- The words and images you have (optional)
- Any brand fonts or colours you must keep (optional)
- Brand brain (optional)
- A draft (optional)
You get
- Font pairs, sizes and line spacing for each screen
- A grid, margins and a layout for each page, with white space planned
- A built page that follows the type and grid, checked at phone and desktop width
- A test report from a real browser with failures, screenshots and console errors
Use it when
- You are starting a new page or site and want it to look chosen, not templated.
- Your last AI-built page had random spacing or mismatched type.
- You want the page clicked through before you show it to anyone.
Steps
- Web font pairing picker: Describe your site. Get font pairs, sizes and line spacing that read well on every screen.
- Website typography and layout planner: Paste your content and page type. Get a grid, a short type list and a white-space plan.
- Website art director: Describe your site or app screen. Get a built page with a chosen look, checked in a browser, not a template.
- Web app tester: Point it at your local app. Get its screens tried in a real browser, with screenshots and error logs.
How to use it
- Download the handoff pack. It's a zip with HANDOFF.md and every skill file this workflow uses.
- Give the folder to Claude (in Claude Code, or as files in a Claude Project) and say "Follow HANDOFF.md".
- Have your real words and images ready. The grid is only as good as the content it holds.
- Your step is to copy the type list, grid and layout into the page brief before the build.