Download the PHP package visualbuilder/filament-design-system without Composer

On this page you can find all versions of the php package visualbuilder/filament-design-system. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of visualbuilder/filament-design-system

Informations about the package filament-design-system

Filament Design System

A standalone design-system review panel for Filament v5, plus an AI-driven theme designer over MCP.

What it is

Two things in one package:

  1. A Filament panel rendering the full catalogue of v5 components — forms, layout, actions, tables (including card-style grids), infolists, widgets, icons, auth screens — against a single tokens config. Drop it into any Filament v5 application and a graphic designer can review the live look-and-feel in actual Filament chrome.
  2. An MCP server that exposes the panel's design surface to AI clients. An agent can read the current theme, generate palettes, edit tokens, swap brand assets, write component-level CSS overrides, and verify visually via screenshots — all through a stdio MCP connection.

The panel is the AI's test canvas. The MCP server is the AI's hands.

Why a separate panel

Version history

Installation

This package is intended to be installed as a dev dependency so it never ships to production:

Gate the panel-provider registration in bootstrap/providers.php so it's silently skipped when the package isn't installed (e.g. on composer install --no-dev):

Publish the panel-provider stub:

This drops app/Providers/Filament/DesignSystemPanelProvider.php into the host app. Edit it to wire your existing theme CSS, panel colours, font, logos — see the published file's comments.

Run the migration and seed the demo user:

The catalogue is then live at /design-system (or whatever path you configure in the panel provider). Login uses the demo credentials shown on the login screen.

MCP server

Wire it up in Claude Code

Add to your project's .mcp.json:

Server runs over stdio. No HTTP, no auth tokens, no extra ports. Restart your Claude Code session and the tool list appears.

Inspect the server

The official MCP Inspector visualises the server's tool surface and lets you fire calls without writing JSON-RPC by hand:

Browse the laravel-mcp docs for further options (web transport, OAuth, etc.).

Tools

The server registers nine tools across three editable layers — tokens (CSS variables), panel (chrome: font, logos, vite_theme), and theme (raw CSS overrides). All edits land in a single overlay file at storage/app/design-system-tokens.json.

Tool Read-only What it does
read_tokens ✓ Resolved tokens + panel + theme overrides + catalogue layout
write_tokens Validates and persists a partial { tokens, panel } overlay; deep-merges by default; dry_run and replace supported
generate_palette ✓ Single hex → 11-shade ramp (50→950) anchored at 500 by default
set_brand_logo Sets panel.brand.{logo|logo_dark|favicon} from a URL, data URI, or existing public/ path
write_theme_overrides Validates and persists a CSS string to theme.css_overrides; injected as a <style> block on every panel page after Filament's own styles
export_theme_css ✓ Returns the current overrides as a string ready to paste into theme.css
list_classes ✓ Returns the manifest of fi-* and ds-* classes actually present on the catalogue, scoped per-page; filterable by prefix and page
reset_overlay destructive Reverts AI edits — scope=all (default) / tokens / panel / css
screenshot_catalogue ✓ Captures a named catalogue page via a host-supplied closure (returns setup guidance gracefully when not configured)

Editing layers

The overlay file at storage/app/design-system-tokens.json has three top-level keys, all optional:

Every key in the overlay deep-merges over the PHP config (config/design-system.php). The PHP config stays as documentation + defaults; the overlay is the only file the AI writes.

Example workflows

These are the kinds of natural-language asks that map cleanly onto the tools. The agent decides which tool(s) to call.

Change the brand colour, with a coherent ramp

"Switch the primary palette to a coral around #ea746b. Generate the full 11-shade ramp and apply it. Show me the result."

Agent calls: generate_palette(hex="#ea746b") → write_tokens(tokens.colors.primary = <returned ramp>) → screenshot_catalogue(page="overview").

Switch the panel font

"Try the panel in Nunito instead of Roboto."

Agent calls: write_tokens(panel.font.family="Nunito"). Filament loads the new Google Font on next render.

Upload a new logo

"Set the dark-mode logo to https://example.com/logo-dark.svg."

Agent calls: set_brand_logo(target="logo_dark", source="https://example.com/logo-dark.svg"). The asset is fetched, content-hashed, saved under public/design-system/brand/, and panel.brand.logo_dark is updated.

Component-level layout tweak

"Section headers feel heavy. Find the right class, then lighten heading weight and tighten letter-spacing."

Agent calls: list_classes(prefix="fi-section-") → reasons over the result → write_theme_overrides(css=".fi-section-header h3 { font-weight: 200; letter-spacing: -0.01em; }") → screenshot_catalogue(page="forms").

Graduate signed-off CSS into the host's theme file

"Looks good. Give me the CSS so I can paste it into theme.css."

Agent calls: export_theme_css() and returns the CSS string with a generated-at banner. You paste it into resources/css/filament/{panel}/theme.css and ask the agent to "reset the css overlay layer" — reset_overlay(scope="css").

Revert everything

"Throw away all my changes."

Agent calls: reset_overlay() (scope defaults to all). Overlay file deleted; you're back to the PHP config defaults.

Screenshots

The screenshot_catalogue tool drives a headless Chromium via Playwright by default. The MCP server signs a temporary URL pointing at a bridge route that logs in the demo user and redirects to the requested catalogue page; the bundled Node CLI navigates to it and writes a PNG.

Setup — one-time per project:

That's all. The package detects the Playwright install at runtime and the screenshot tool starts working. No custom closure, no host service, no AWS keys.

Override with a custom capture closure

Hosts that prefer a different mechanism (hosted screenshot service, Puppeteer, AWS Lambda, etc.) can register their own closure on the plugin. It receives the same signed URL and should return either a base64 string or ['image' => '<base64>', 'mime' => 'image/png']:

When a custom closure is registered it takes precedence over the Playwright default. Without either, the other tools (read_tokens, write_tokens, write_theme_overrides, …) still work — token edits just won't have visual confirmation, and screenshot_catalogue returns setup guidance.

Refreshing the class manifest

list_classes reads from a static manifest at data/filament-class-manifest.json. After upgrading filament/filament (or making major changes to the catalogue), refresh it:

The command auths the demo user, server-renders each catalogue page, extracts every fi-* and ds-* class, and writes the deduped per-page manifest. Initial release captures ~378 classes across 8 pages.

Deployment guidance

The panel is intentionally permissive (login page shows the password; demo flows are no-ops). It is not meant to ship to production untouched. Recommended gating, in order of effort:

  1. Add a dev-only DNS entry for the design-system panel.
  2. Wrap the panel route in nginx basic auth.
  3. Conditionally register the panel provider only outside production environments.
  4. Install as --dev so production composer installs never see the package at all.

License

GPL-2.0-or-later. Copyright © Visual Builder.

All versions of filament-design-system with dependencies

PHP Build Version
Package Version
Requires php Version ^8.2
filament/filament Version ^5.0
spatie/laravel-package-tools Version ^1.16
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package visualbuilder/filament-design-system contains the following files

Loading the files please wait ...