AI Blocks › Design things people love
Story-led page style guide writer
Describe your story. Get a style guide for a page that walks visitors through it, with clear steps and tone.
Story-led page style guide writer 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 Bergside · Level: beginner · Thinking: low
Made by Bergside. See the original on GitHub; we copied it as it is, with its licence.
What it does
A design guide for a web page that tells a story, so a designer or developer can build it without guessing. You describe the story and the feeling you want, and get rules for how the page leads a visitor from one step to the next. The guide sets fonts and size scale, colours with named tokens, spacing steps, and how each part of the page behaves, including hover, focus and loading states. It adds accessibility rules to WCAG 2.2 AA, keyboard use and visible focus, plus a writing tone, do and don't lists and example components. The default style is playful, but you can change that. It is a specification document, not a finished page.
You give it
- A short description of your story
- The mood or style you want
- Brand colours and fonts (optional)
- Who the page is for
You get
- Typography and colour rules
- A spacing scale
- Behaviour rules for page parts
- Accessibility requirements
- Do and don't lists and a tone guide
Use it when
- You are building a product or brand page that should read like a story.
- A developer and a designer need shared rules for one page.
- Your landing page feels like a list of features with no flow.
- You want accessibility rules written in from the start.
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.