Skip to main content
Frontend Developmentfusengine

designing-systems

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.

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--1-designing-systems
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/design-expert/skills/1-designing-systems/SKILL.md -o .claude/skills/1-designing-systems.md

Drops the SKILL.md into .claude/skills/1-designing-systems.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

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

  1. Read inspiration catalog — references/design-inspiration.md + references/design-inspiration-urls.md
  2. Pick 4 URLs from catalog matching the project sector (MUST be from KNOWN_DOMAINS)
  3. Browse each site via Playwright:
    • browser_navigate → URL
    • browser_evaluate → window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})
    • Wait 5s → scroll back to top → wait 2s
    • browser_take_screenshot fullPage: true
  4. 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
  5. 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