← ClaudeAtlas

creative-web-studiolisted

Use when building, redesigning, or reviewing a marketing site, landing page, portfolio, or brand/product site in Next.js and the result must look art-directed rather than templated, or when choosing between CSS, Motion, anime.js, GSAP, Lenis, and React Three Fiber for an interaction.
christianfurr/creative-web-studio · ★ 0 · Web & Frontend · score 70
Install: claude install-skill christianfurr/creative-web-studio
# Creative Web Studio ## Overview Build websites that look like they came from a top-tier digital agency, not from a component library with the defaults left on. **Core principle: design first, code second.** A visual concept decided up front is what separates an art-directed site from `Navbar → Hero → 3 Cards → Testimonials → CTA → Footer`. ## When to Use - Marketing sites, landing pages, portfolios, product/brand sites, campaign microsites - Redesigning something that "works but looks generic" - Deciding which animation technology an interaction should use - Reviewing a site against a professional creative bar **Do not use for:** dashboards, admin panels, internal tools, CRUD apps, or anything where information density beats visual impact. Those want plain shadcn/ui and no motion budget. ## The Workflow Do these in order. Skipping straight to phase 4 is how generic sites happen. ### 1. Brief — establish before designing Answer these from what the user gave you. Do **not** interview them item by item; infer what you can, ask only about what would change the design materially. | Question | Why it changes the design | |---|---| | What is the subject? | Product, service, person, and event sites have different structures | | Who is it for? | Determines tone, density, reading level | | What is the one primary action? | Everything else is subordinate to it | | What content actually exists? | Design for real content, never for lorem ipsum | | What brand assets exist? | E