Stats
Actions
Tags
From fuse-design
Phase 1: Browse 4 catalog sites via Playwright, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-design:1-designing-systemsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
After Phase 0 identity templates are read. Before writing design-system.md.
references/breakpoint-patterns.mdreferences/color-mapping.mdreferences/color-system.mdreferences/complex-themes.mdreferences/container-queries.mdreferences/design-inspiration-urls.mdreferences/design-inspiration.mdreferences/edge-cases.mdreferences/fluid-typography.mdreferences/gradients-guide.mdreferences/image-handling.mdreferences/multi-brand.mdreferences/tailwind-config.mdreferences/tailwind-performance.mdreferences/tailwind-utilities.mdreferences/templates/responsive-dashboard.mdreferences/templates/responsive-mobile-nav.mdreferences/theme-presets.mdreferences/typography.mdreferences/ui-hierarchy.mdAfter Phase 0 identity templates are read. Before writing design-system.md.
references/design-inspiration.md + references/design-inspiration-urls.mdbrowser_navigate → URLbrowser_evaluate → window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})browser_take_screenshot fullPage: true2-ux-copy/SKILL.md — Define voice, tone, and microcopy patterns.
| File | Purpose |
|---|---|
references/design-inspiration.md | Browsing methodology and observation format |
references/design-inspiration-urls.md | Catalog of sector-matched inspiration URLs |
references/color-system.md | OKLCH palette generation |
references/typography.md | Font scale and pairings |
references/ui-hierarchy.md | Visual hierarchy patterns |
references/ui-spacing.md | Spacing systems |
npx claudepluginhub fusengine/agents --plugin fuse-designExtracts design system from websites, HTML files, or screenshots into DESIGN.md via Playwright automation, HTML inspection, and visual analysis for UI consistency.
Extracts a website's design tokens, imagery, and visual structure into a structured DESIGN.md file using Firecrawl. Useful for cloning UI, gathering brand guidance, or generating agent-ready design specs.
Creates or extracts DESIGN.md visual design systems from scratch, a URL, or a codebase — documenting tokens, components, and style rules for AI agents to reproduce.