6 starting points.
HTML + CSS.
Original starter sections with source you can read and adapt. Choose a section for its purpose, then make it fit your project.
FOR YOU. AND YOUR AI AGENT.
Give your next build a better starting point.
Bring a pattern into the conversation. Help your agent find a section that fits, understand its structure and adapt it to your website.
Public catalogue. HTML + CSS. No API key needed.
HOW IT WORKS
Three steps. A stronger foundation.
01 / DISCOVER
Find the right section
Ask your agent to read the catalogue and compare section types, descriptions and previews against your goal. Start with the job the section needs to do.
02 / ADAPT
Make it fit your project
Use the source as a starting point. Ask your agent to follow your existing components and design tokens, then replace the example content, links and section IDs.
03 / REVIEW
Check it in context
Preview the result in your website. Review mobile layouts, keyboard navigation, contrast and links before publishing. Ask your agent to explain the changes.
Tell your agent what good looks like.
A section type is a start. A goal and a little context help your agent make a more useful choice.
Give your agent the essentials
- 01Purpose & audience
Who is this for, and what should visitors do?
- 02Project & platform
Your framework, existing components and site structure.
- 03Visual direction
Your brand colours, typography and a reference you like.
A better build starts
with a better brief.
Replace the bracketed details, then paste this into an agent that can read web pages or fetch URLs.
Read https://presspatterns.com/llms.txt and https://presspatterns.com/patterns.json. I’m building [type of website] for [audience] using [framework or platform]. I need a [section type] that helps visitors [goal]. Choose a suitable pattern and explain why it fits. Use its source as a starting point. Adapt it to my existing components, brand colours and typography. Replace the example copy and links, and make section IDs unique. Check the result on mobile and desktop, including keyboard access and colour contrast. Tell me which pattern you used and what you changed.
FOR AGENTS & DEVELOPERS
Two endpoints. A direct way in.
These are public, read-only resources served from presspatterns.com. Fetch them with a normal HTTP GET request. There is no sign-in or API key step.
01 / THE CATALOGUE
patterns.json ↗
Pattern metadata and the source your agent needs to start building.
02 / THE QUICK GUIDEllms.txt ↗
A short, plain-text introduction with discovery links and usage guidance.
| Field | How to use it |
|---|---|
slug | Stable identifier for the pattern. |
title | Human-readable name of the section. |
category | Section type, such as Hero or FAQ. |
description | What the pattern is designed to do. |
url | Full URL of the pattern preview page. |
source | HTML markup and a CSS style block, returned together as a string. |
The response also includes the collection name, status and format. Entries currently include visual metadata such as tone and headline. Use category and description to find a fit, then read source before adapting it.
KNOW YOUR STARTING POINT
A foundation to build on.
A few things to know.
6 starting points.
Your agent.
Your workflow.
Your agent needs access to the public catalogue. Framework exports, WordPress block exports and a dedicated MCP server aren’t currently provided.
Make it yours.
Check it in context.
Review CSS scope and unique IDs. Replace sample names and claims, connect real links, and check accessibility and mobile layouts.
Before your next build.
How agent access works, what you can adapt, and what to check before publishing.
Will this work with my agent?
An agent that can fetch public URLs can read the catalogue and guide. Tools differ in how they access the web. If your agent cannot open a URL, download the catalogue or copy the relevant pattern source into its context.
Can I use the patterns with Astro, React or WordPress?
The source is HTML and CSS. Ask your agent to translate it into your project’s conventions. React may need JSX attribute changes; Astro can use the markup in an Astro component. WordPress integration depends on your editor and theme. These are adaptations, not framework-specific exports.
Do I need to install anything or connect an account?
No Press Patterns installation or account connection is required to read the public endpoints. Use the catalogue URL in your agent’s prompt, or open a pattern page and copy its source.
What if there isn’t a pattern that fits?
Ask your agent to explain the closest match and the changes it would need. You can also suggest a pattern with the section type, audience and purpose you have in mind.
Should my agent publish the result automatically?
Review the adapted section in your site before publishing. Check real content, working links, responsive behaviour and accessibility. Follow your project’s normal review and deployment process.