Classical Collage Web Design
Use when designing or building a website, landing page, Framer template, pitch visual or brand system in the "classical painting × modern tech" art direction (Renaissance / neoclassical oil paintings and marble ruins combined with laptops, phones, coins and quiet product UI, as on the Aureon fintech page and contralabs.com). Covers art direction, metaphor selection, image sourcing and AI prompts, halftone and texture techniques, exact design tokens, components, page blueprints, motion, copy voice, and Figma / Framer / Next.js build steps.
Installation
$ npx shadcn@latest add @creative-ui/classical-collage-web-designOn an older shadcn CLI, use the URL: npx shadcn@latest add https://ui.krutikraut.com/r/classical-collage-web-design.json. Files go into .claude/skills/classical-collage-web-design/
This skill includes reference code that imports clsx, motion, next. Those files have type-checking and lint turned off, so they won't break your project. To use one in your app, install its packages and delete the header at the top of the file.
What gets installed
30 files- SKILL.md
- LICENSE
- CREDITS.template.md
- halftone.css
- tailwind.preset.js
- tokens.css
- ChipTestimonial.tsx
- DataTexture.tsx
- Eyebrow.tsx
- FeatureCardStack.tsx
- FloatingCoins.tsx
- Hero.tsx
- PillButton.tsx
- Reveal.tsx
- ScrollStory.tsx
- StatBlock.tsx
- landing.html
- 01-art-direction.md
- 02-metaphor-bank.md
- 03-imagery-and-prompts.md
- 04-techniques.md
- 05-design-tokens.md
- 06-components.md
- 07-page-blueprints.md
- 08-motion.md
- 09-copywriting.md
- 10-build-figma.md
- 11-build-framer.md
- 12-build-nextjs.md
- 13-qa-checklist.md