html2bricks
🥈SilverConverts 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.
810Updated 2mo ago
Intermediate30min to implementautomation
Saves ~70 min per use
Quick InstallView Source
git clone https://github.com/iamfilipp/html2bricks.gitWorks with:
Claude
Overview
About This Skill
html2bricks is a Claude AI skill that converts HTML, CSS, and JavaScript into Bricks Builder paste-ready JSON format. It supports a flat ID-based structure with 166+ elements across all categories, native parallax effects, complete interactions schema with 16 triggers and 17 actions, and element conditions for server-side show/hide logic. The tool achieves 99.5%+ native CSS property coverage using Bricks' native properties, with _cssCustom fallback for complex transforms and blend modes. Web developers and designers migrating existing websites to Bricks Builder can paste the generated JSON directly into the canvas, eliminating manual element recreation and property mapping.
How to Use
Download the h2b.skill file and upload it to Claude.ai Settings > Skills. Prompt Claude with 'Convert this HTML to Bricks JSON' or 'Build this component in Bricks', then paste the resulting JSON directly into Bricks Builder via Cmd+V on the canvas. Alternatively, copy example JSON from the repository directly into Bricks Builder.
Use Cases
Migrate existing HTML websites to Bricks Builder without manual reconstruction
Convert static HTML components to Bricks-native interactive elements
Batch convert multiple HTML templates to Bricks JSON format
Add interactions and conditions to HTML layouts during Bricks conversion
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/iamfilipp/html2bricksRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
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].
Example Output
# 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.Apply to these tools
Browse all toolsRead
Auto-transcribe meetings and generate action items
Claude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan