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 Playwright:
browser_navigate→ URLbrowser_evaluate→window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})- Wait 5s → scroll back to top → wait 2s
browser_take_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 |