Design
Astro components for agents.
Give your agent one prompt. It reads the docs and installs the parts.
You need an Astro project and an agent that can edit its files, such as Claude Code. The agent adds the foundation stylesheet and then any component you ask for.
-
Paste the prompt
Into Claude Code, Cursor or any agent working in your Astro project.
Use the Viewership UI library (copy-in Astro components) for UI work in this project. Start from the index: https://viewership.ai/design/llms.txt For a component, read https://viewership.ai/design/components/<slug>.md and create every file listed in https://viewership.ai/design/components/<slug>.bundle.txt at its path. Import src/styles/foundation.css once in the base layout. Style new UI with --vs-* tokens. -
It reads the index
Every page here has a Markdown twin.
- llms.txt Start here. Index of docs and components.
- llms-full.txt Every doc and component source in one file.
- index.md Overview, install steps, catalogue.
- conventions.md The component contract.
- stylesheets.md Design tokens and foundation.css.
- registry.json Catalogue with dependencies and URLs.
-
It copies the files
One URL per component, by slug.
-
/design/components/<slug>.mdOne component: install, usage, example, props, source. -
/design/components/<slug>.bundle.txtEvery file needed, each with its destination path. -
/design/components/<slug>.jsonSame as .md, structured, with file contents. -
/design/raw/<slug>/<file>.txtOne source file, raw.
Slugs are in registry.json. Absolute URLs use https://viewership.ai.
-
Prefer to work by hand? Copy foundation.css into your project, then copy the files for any component from its page. Want us to set it up for you? See AI-Native Sites.