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
- 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
More from fusengine/agents
laravel-architecture
Design Laravel app architecture with services, repositories, actions, and clean code patterns. Use when structuring projects, creating services, implementing DI, or organizing code layers.
99laravel-blade
Create Blade templates with components, slots, layouts, and directives. Use when building views, reusable components, or templating.
93laravel-livewire
Livewire 4 reactive components on Laravel 13 - wire:model, actions, events, Volt, Folio. Use when building reactive UI without JavaScript.
92nextjs-i18n
Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters.
62solid-php
SOLID principles for Laravel 12 and PHP 8.5. Files < 100 lines, interfaces separated, PHPDoc mandatory. Auto-detects Laravel and FuseCore architecture.
53laravel-testing
Write tests with Pest 3/PHPUnit, feature tests, unit tests, mocking, fakes, and factories. Use when testing controllers, services, models, or implementing TDD.
52