> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/craft/craft-guide.md).
# Use Craft
Apply the Craft specification in a Webstudio project.
Use the Craft Style Guide as a starting point, then map its semantic variables and composite Tokens to your project.
## Get started
1. Go to **Marketplace → Pages → Craft**.
2. Insert the **Style Guide** page.
3. Customize the theme or palette variables on **Global Root**.
4. Map Craft semantic variables to the theme.
5. Build with semantic variables and composite Tokens.
6. Document project extensions in the Style Guide.
## Use the page template
The Craft Style Guide includes a page template with navigation, a main region, sections, containers, and a footer:
1. Copy the template structure when creating a page.
2. Duplicate the template section and name it for its content, such as `Hero`.
3. Design the section using Craft variables and Tokens.
4. Duplicate the clean template section for the next section.
## Maintain the Style Guide
Use `Style Guide` as the page name. Prefix Tokens used only to present the Style Guide with two underscores, such as `__badge` or `__outline`. Do not use these presentation Tokens on the published site.
## Name Navigator items
Use title case and semantic labels in the Navigator.
* Give Box, Slot, HTML Embed, and Collection instances names that describe their purpose.
* Name containers after their content rather than position or appearance.
* Use a plural parent and singular children for repeated content, such as `Cards` containing several `Card` items.
* Prefix a Box using the `section` element with `Section`, such as `Section Hero`.
* Keep one HTML Embed instance responsible for one purpose, and begin its code with a comment describing that purpose.
Recommended page structure:
```
Page Wrapper
├── Slot
│ ├── Global Styles
│ └── Nav
├── Main
│ └── Section
│ └── Container
└── Slot
└── Footer
```
## Use Craft Library
Craft Library is a collection of section templates built to Craft standards and available in the [Marketplace](/university/marketplace.md).
Templates must avoid unexplained hardcoded design values. They must consume documented Craft variables or documented extensions so that a section adapts when inserted into another conforming project.
Craft Library in the Marketplace
{% embed url="" %}
## Related
* [Craft](/university/craft.md) – Follow the universal specification
* [Craft changelog](/university/craft/craft-changelog.md) – Review changes to the standard
* [Marketplace](/university/marketplace.md) – Access Craft Library and other resources
* [Contributing to the Marketplace](/contributing/marketplace.md) – Submit Craft resources
* [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder.md) – Understand the Builder interface
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.webstudio.is/university/craft/craft-guide.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
