Генерация дизайн-системы и кода страницы

★ 7.0 · web-development

web-design is a Claude Code skill that implements a two-phase web design workflow: first it produces a structured DESIGN.md specification file, then generates production-ready code strictly based on that spec. During the analysis phase the skill accepts any combination of inputs — reference URLs (crawled via Playwright for real-browser rendering), screenshots, PRD documents, or plain keywords — extracting design tokens, typography, motion patterns, and layout structure. The resulting DESIGN.md covers nine sections: a full CSS-variable color palette, typography rules with Google Fonts URLs, component styles for all states, a shadow system, animations across three interaction tiers (L1 static, L2 scroll-reveal, L3 immersive GSAP/ScrollTrigger), Do's & Don'ts guardrails, and responsive breakpoints. Built-in references include 58 pre-loaded brand design systems and scene-specific layout baselines for Landing Pages, Portfolios, blogs, product pages, and SaaS sites. A final audit checklist validates DESIGN.md compliance, responsive behavior, and performance constraints before code is delivered.