Converts HTML, CSS, and JavaScript to Bricks Builder paste-ready JSON format. Supports complete property mapping and native interactions. Ideal for web developers and designers migrating to Bricks Builder. Integrates with existing web development workflows.
git clone https://github.com/iamfilipp/html2bricks.gitConverts HTML, CSS, and JavaScript to Bricks Builder paste-ready JSON format. Supports complete property mapping and native interactions. Ideal for web developers and designers migrating to Bricks Builder. Integrates with existing web development workflows.
No install command available. Check the GitHub repository for manual installation instructions.
git clone https://github.com/iamfilipp/html2bricksCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Convert the following HTML, CSS, and JavaScript code into Bricks Builder paste-ready JSON format. Ensure complete property mapping and native interactions are preserved. Here is the code for [COMPANY] website in [INDUSTRY]: [HTML_CODE], [CSS_CODE], [JAVASCRIPT_CODE].
# Bricks Builder JSON Output
```json
{
"version": "1.0",
"elements": [
{
"type": "container",
"properties": {
"id": "header-container",
"className": "header",
"styles": {
"display": "flex",
"justifyContent": "space-between",
"alignItems": "center",
"padding": "20px",
"backgroundColor": "#ffffff"
},
"children": [
{
"type": "text",
"properties": {
"content": "Welcome to [COMPANY]",
"styles": {
"fontSize": "24px",
"fontWeight": "bold"
}
}
},
{
"type": "button",
"properties": {
"content": "Contact Us",
"styles": {
"padding": "10px 20px",
"backgroundColor": "#007bff",
"color": "#ffffff",
"borderRadius": "5px"
},
"interactions": {
"onClick": "openContactForm()"
}
}
}
]
}
}
]
}
```
## Notes
- The JSON structure is ready to be pasted into Bricks Builder.
- All properties and interactions from the original HTML, CSS, and JavaScript have been mapped.
- The button includes an interaction to open a contact form.We create engaging workshops for companies and private events centred around plants, flowers and all things botanical.
AI assistant built for thoughtful, nuanced conversation
Automated Meeting Reports Transcripts Notes Video Coaching
IronCalc is a spreadsheet engine and ecosystem
Enterprise workflow automation and service management platform
Automate your spreadsheet tasks with AI power