designing-systems

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