llms.txt Format
What is llms.txt?
llms.txt is an emerging standard (analogous to robots.txt) that places a plain text file at a website's root to describe the site's content in a format optimized for large language models. LLMs have limited context windows; llms.txt lets a model quickly understand what a project is and where to find key information without ingesting the full site.
Why a design system needs llms.txt
Design system documentation is typically consumed by developers, but increasingly also by AI coding assistants helping those developers. Without a llms.txt, an LLM must either:
- Crawl all documentation pages (slow, often not possible)
- Rely on generic knowledge that doesn't know your specific tokens, class names, or conventions
A well-structured llms.txt gives an LLM everything it needs in one pass:
- The technology stack
- Actual token names and values
- The complete list of available blocks and components
- Links to specific documentation pages
Cynosure's llms.txt structure
The Cynosure llms.txt (available at /llms.txt) follows this structure:
# Cynosure Design System
> A design system for Cynosure Lutronic web properties. Components are built
> with Bootstrap 5, Handlebars.js, SCSS, and Vite. The system is authored in
> the Handoff platform and can be automatically compiled into WordPress
> Gutenberg blocks using the handoff-wordpress CLI.
## Stack
- Templates: Handlebars.js (.hbs)
- CSS: Bootstrap 5 + custom SCSS; design tokens as CSS custom properties
- JavaScript: jQuery (legacy) + Vanilla JS (ES modules); Vite bundler
- Fonts: Juana (display), Open Sans (body)
## Design Tokens
Tokens are exported from Figma and live at:
- Colors: /api/component/tokens/css/colors.css
- Typography: /api/component/tokens/css/typography.css
- Effects: /api/component/tokens/css/effects.css
Key color tokens:
- --color-primary-orange: #ff4713
[... full token list ...]
## Blocks
- accordion-simple: Expandable content accordion
- banner: Rotating image/text hero banner (Slick Carousel)
[... full block list ...]
## Shared JavaScript Utilities
- js/components/accordion.js: .c-accordion__toggle — jQuery slide expand/collapse
[... full utility list ...]
## Documentation
- Guidelines: /guidelines
- JavaScript: /guidelines/javascript
- CSS/SCSS: /guidelines/scss
[... full link list ...]
## WordPress Integration
The handoff-wordpress CLI compiles Handlebars components into Gutenberg blocks.
Config: handoff-wp.config.json
Docs: /guidelines/wordpress
## Build Commands
- npm run start — development server
- npm run build:components — production bundle
- npm run fetch — pull latest tokens from FigmaUsing llms.txt
Command-line context injection
1# Download and copy to clipboard (macOS)
2curl https://cynosure.handoff.com/llms.txt | pbcopy
3
4# Download and save locally
5curl -O https://cynosure.handoff.com/llms.txtAs a URL reference in prompts
Some LLMs (Claude, ChatGPT with browsing) can fetch URLs directly:
Before answering, please fetch and read:
https://cynosure.handoff.com/llms.txt
Then help me create a new block component called "content-split" that shows
text on the left and an image on the right.In Claude / ChatGPT Projects
Upload llms.txt as a project knowledge document. It will be included as context in every conversation in that project automatically.
When to regenerate llms.txt
Update src/handoff/public/llms.txt when:
- New blocks are added to
src/handoff/blocks/ - New components are added to
src/handoff/components/ - Token values change (after running
npm run fetchfrom Figma) - New shared JavaScript utilities are added to
js/components/ - The documentation URL structure changes
llms-full.txt (optional)
For very large context windows, a llms-full.txt variant can include the full content of key documentation pages inline rather than just links. This is not currently generated automatically but can be assembled manually for intensive prompting sessions:
On This Page