Design tools
Live browser preview, screenshot capture, and Tailwind design‑system checks.
@elyracode/design-tools closes the loop between writing markup and seeing it. The agent can render HTML in your browser, capture screenshots for visual QA, and audit views for design‑system consistency.
Install
elyra install npm:@elyracode/design-tools
Tools
| Tool | Description |
|---|---|
design_preview |
Render HTML/Tailwind in the browser with auto‑reload. Iterate on design in real time. |
screenshot_url |
Capture a screenshot of any URL (localhost or web). Returns an image for visual QA. |
design_system_check |
Analyze files for Tailwind consistency: spacing, colors, responsive, dark mode, accessibility |
Commands
| Command | Description |
|---|---|
/design |
Interactive selector for all design tools |
Examples
Live preview
> Preview a pricing table with 3 tiers using Tailwind
> Show me a hero section with gradient background
> Preview this component in dark mode
The agent writes HTML with Tailwind, opens it in your browser, and the page auto‑reloads every 2 seconds while it iterates.
Visual QA
> Take a screenshot of localhost:8000 and check the layout
> Screenshot the login page on mobile viewport
> Capture the dashboard and evaluate the spacing
The agent captures the screenshot and reads it back with vision capabilities to spot alignment, spacing, and responsive issues.
Design‑system check
> Check resources/views/dashboard.blade.php for design consistency
> Analyze the spacing and colors in my pricing component
Flags: mixed spacing scales, missing responsive breakpoints, no hover/focus states, hardcoded colors, missing dark‑mode coverage, conflicting classes.
Requirements
- Preview: no dependencies (uses the Tailwind CDN)
- Screenshots: install Puppeteer globally —
npm install -g puppeteer - Design check: no dependencies