Dazzler
Turn a brief into a coherent, polished design. Dazzler gives your AI agent practical tools for typography, color, layout, charts and print. Ask for the result you want; it chooses the details, builds the artifact and checks what it can render.
Use $dazzler-frontend to redesign this dashboard so the important numbers stand out.
Explore the field manual · Try the live templates · Choose your platform
A 30-second guided tour of the Dazzler field guide
A guided walkthrough of the brief builder and worked examples, not a timed AI-generation recording.
Why use Dazzler?
| What you need | What Dazzler does |
|---|---|
| A design that fits the brief | Chooses expressive or restrained typography, colors and composition for the audience. |
| Consistency across a project | Resumes saved design decisions and preserves your existing brand and components. |
| Clear charts and reports | Carries shared colors and type into visualizations, documents and slides without changing the data. |
| A useful starting point | Includes 30 worked templates with fictional data, editable structures and local assets. |
| Fewer finishing problems | Checks rendered layouts, font loading, keyboard controls and relevant print pages when those tools are available. |
| Control when you want it | Responds to “bolder,” “quieter,” “typeset,” “colorize” and other focused refinements. |
No design questionnaire is required. Fonts, colors and layout are automatic; your instructions and brand constraints take precedence.
Install once
For a compatible local agent, run:
npx skills add jongos/Dazzler --skill dazzler-frontend
Requires Node 22.20+. Select your agent in the installer. This downloads the larger source skill, including the full font catalog. The installer may replace local changes: back them up first. Its optional install telemetry supports directory rankings; set DISABLE_TELEMETRY=1 to opt out. Listing or ranking is not guaranteed. For a pinned, smaller package with rollback, use the method below.
Download the host ZIP, install_skill.py and SHA256SUMS.txt from the release linked below. With Python 3.10+ available, run this from the download folder for an existing project:
python install_skill.py install --host codex --scope project --root /absolute/project --version 0.23.1 --archive dazzler-codex.zip --checksums SHA256SUMS.txt
Restart or refresh the agent, then ask it to use $dazzler-frontend. Add --dry-run to inspect an installation first. The installer checks hashes and resource completeness without executing downloaded scripts; updates preserve one previous version and refuse local edits.
Claude, Gemini CLI, Cursor and Copilot have matching packages and short installation guides. Claude Code plugins use /dazzler:dazzler-frontend; standalone Claude skills use /dazzler-frontend. A portable prompt is available for other chat hosts. A downloaded skill does not install itself into a ChatGPT account.
Every host ZIP is capped at 24 MB compressed and unpacked, with six versatile font families, all 30 templates and the complete rendering helpers. The larger font catalog remains in the source checkout; missing families are never represented as installed. The compact Claude filename remains an alias of the standard Claude download.
See installation, updates and rollback for user-wide installs or an existing manual installation. Local package checks do not guarantee cloud-upload acceptance or account eligibility.
Start with the outcome
Use $dazzler-frontend to make this restaurant menu colorful and easy to scan.
Use $dazzler-frontend to turn this CSV into a branded revenue report.
Use $dazzler-frontend to improve this landing page while keeping our logo and colors.
Browse 19 starter prompts, the composition guide or the typography specimen. Optional design handoff and visual-comp workflows use tools already available to your agent.
Thirty examples to build on
Ten Word documents, ten editorial HTML documents and ten interactive interfaces show distinct typography, color and layout. Their data is fictional; adapt it to your project. Word previews are actual rendered pages, and interface actions are local demonstrations.
View the complete snapshot gallery
Editable Word documents
Editorial HTML documents
Interactive interfaces
What runs locally
The core helpers use Python and Node.js with bundled resources: no API keys, npm install or network service is required. Browser review needs an available browser runtime; native Word and PowerPoint exports need their existing Python libraries. Dazzler reports unavailable checks instead of claiming they passed. Contrast reports cover measured pairs, not complete accessibility certification.
Developers can start with the tools guide. Release validation covers tests, extracted archives, resource hashes and reproducibility across Windows/Linux and Node 20/22. The Windows offline build kit is a separate maintainer download, not a skill-upload package.
Feedback
Send ideas, feature requests and feedback to Jon Gosier at jon@filmhedge.com.
Notes and credits
Created by Jon Gosier and named after Dazzler, one of his favorite X-Men characters. The name celebrates a love of expressive design. This is an independent project, with no affiliation to Disney/Marvel, OpenAI, or Anthropic.
Attribution
- Original frontend guidance: davila7/claude-code-templates, specifically its creative-design/frontend-design folder. Adapted with its original Apache-2.0 license and provenance retained.
- De-slop framework: Samuel Berthe (samber), from frontend-design-deslop. Only that folder’s framework was adapted, not the wider project. MIT notice and source inventory remain included.
- Font discovery and typography: Open Foundry and the individual font creators credited in the catalog and bundled notices.
- Color foundations: hue3, Ankhorage color-theory, and Culori. bivex’s palette generator informed preview/export interactions; no code or external service from it is incorporated.
License
Our original instructions, scripts, catalog annotations, and Dazzler artwork use Apache License 2.0. Fonts, upstream support files, adapted framework guidance, palette data, and vendored libraries retain their respective third-party licenses. See THIRD_PARTY_NOTICES.md and adjacent notices. Renaming the project does not change those terms.
Downloads and maintenance links
The directory listing is live. Its Gen Agent Trust Hub audit currently reports Critical/Fail; review the findings and follow-up before installing. See installation and removal guidance for the shared-project-directory behavior of the skills CLI.
Contributor source archive (unpinned main). Maintainer remote: git@github.com:jongos/Dazzler.git.
Visualization credits: Vega/Vega-Lite, D3, Microcharts, React, and the optional mschart/officer runtime; see third-party notices. Resource discovery: bkrsln/dataviz; no collection content was copied.
Interactive illustrations use SVG.js and React/Vue Img Mapper under MIT, with runtime/parser notices retained. Live examples.
Comparison notes
Where Dazzler fits separates verified here, documented, and not assessed claims, with primary sources and current limitations. Reviewed September 28, 2026. No popularity or speculative candidate lists are used.