fusengine/designing-systems
plugins/design-expert/skills/1-designing-systems/SKILL.md
Phase 1: Browse 4 catalog sites via fuse-browser, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.
$ install --global
skillsauthnpx skillsauth add fusengine/agents designing-systemsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 3:41 AM146.0s23 files scanned
SKILL.md
- name:
- designing-systems
- description:
- Phase 1: Browse 4 catalog sites via fuse-browser, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.
- phase:
- 1
Phase 1: RESEARCH — Browse, observe, extract CSS specs
When
After Phase 0 identity templates are read. Before writing design-system.md.
Input (from Phase 0)
- Sector identified (creative/fintech/ecommerce/devtool/health)
- Typography pair chosen, OKLCH palette direction known
Steps
- Read inspiration catalog —
references/design-inspiration.md+references/design-inspiration-urls.md - Pick 4 URLs from catalog matching the project sector (MUST be from KNOWN_DOMAINS)
- Browse each site via fuse-browser (open one session, reuse for all 4):
browser_open→ sessionId (once)browser_navigate→ URLbrowser_scroll→to: "end"(loads lazy content)- Wait 5s →
browser_scrolldeltaY: -100000(back to top) → wait 2s browser_screenshotfullPage: true
- Write 5 CSS-precise observations per screenshot (NOT vague descriptions):
- (1) Colors: exact oklch() values for primary, accent, background, text
- (2) Typography: font-family name, font-size as clamp(min, preferred, max), font-weight
- (3) Layout: grid/flex structure with column ratios (60/40, 1fr/1fr), gap in px
- (4) Effects: border-radius in px, box-shadow values, backdrop-blur, opacity
- (5) Spacing: section padding in px, margin between elements, max-width
- Declare reference — "Site choisi: {URL}. Je reproduis: {el1}, {el2}, {el3}" Pick 3 visually distinctive elements with their CSS specs.
Output
- 4 fullPage screenshots taken (state: screenshots_count >= 4)
- 20 CSS-precise observations (5 per site)
- 1 reference site declared with 3 elements to reproduce
- Ready to write design-system.md (Phase 2)
Next → Phase 2: UX COPY
2-ux-copy/SKILL.md — Define voice, tone, and microcopy patterns.
References
| 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 |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026