bricks_import_design
Overview
Imports design tokens from an external URL and applies them to the Bricks design system. This is the action companion to bricks_analyze_url — while analyze_url extracts and reports design tokens, import_design extracts and automatically creates the corresponding colors, variables, classes, and theme style settings.
Combines the extraction capability of bricks_analyze_url with automated creation of design system elements. It can create a full color palette from the extracted colors, set up typography based on detected fonts, and configure spacing based on the source site patterns.
Best used as the first step in a « clone design » workflow, followed by manual refinement of the imported design system tokens.
Key Features
When to Use
You need a starting point for the design system based on a reference site
You want to import a color palette and typography from another website
You are migrating a site from another platform to Bricks and want to preserve the design
A child theme should be active for font uploads (use bricks_ensure_child_theme)
Bricks Builder version 1.9 or higher
Existing design system elements will not be overwritten (safe merge)
When NOT to Use
You already have a design system and want to add to it manually
The reference site requires authentication to access
You want to import actual content or page structure — this only imports design tokens
Parameters
Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28
urlstring (URL)REQUIREDWarning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28
importarray of stringsoptionalallCode Examples
Warning: Undefined array key "example_output" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 12
Import full design from a reference site
Extracts and imports all design tokens from a reference website.
bricks_import_design({
url: "https://reference-site.com"
})
// Returns:
// {
// imported: {
// colors_created: 8,
// fonts_configured: 2,
// variables_created: 5,
// classes_created: 3
// },
// source: { colors: [...], fonts: [...], layout_patterns: [...] },
// skipped: ["Color #ffffff already exists"]
// }Warning: Undefined array key "example_output" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 12
Import only colors
Imports just the color palette from a reference site.
bricks_import_design({
url: "https://reference-site.com",
import: ["colors"]
})Common Mistakes
Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47
Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 1935
Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48
Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49
Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47
Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 1935
Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48
Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49
Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47
Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 1935
Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48
Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49
Tips & Warnings
Tip: The recommended workflow is: (1) bricks_analyze_url to preview tokens, (2) curate the list of desired imports, (3) bricks_import_design to create design system elements, (4) refine the imported tokens using bricks_update_color, bricks_update_theme_styles, etc.
Tip: For best results, analyze the homepage or a representative page with the most diverse design elements (hero, features, cards, footer).
Warning: This tool creates design system elements that are difficult to undo in bulk. If you import 20 colors and realize they are wrong, you will need to delete them one by one. Preview with bricks_analyze_url first.
Warning: Single-page applications (React, Vue, Angular) render content via JavaScript, so the fetched HTML may contain minimal design data. Static or server-rendered sites yield the best results.