← Back to Skills / Marketplace / studio
SKL · 43PRO

Studio.

A complete premium dark agency landing page — near-black canvas, grayscale imagery, and a slow animated aurora as the only color, across a full set of scroll-animated sections from hero to giant footer wordmark.

UNLOCK WITH PRO →
● Live preview · Studio demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Studio builds a complete premium dark agency landing page — near-black canvas, grayscale imagery, a slow animated aurora glowing through the edges and gaps, and a full set of scroll-animated sections from hero to giant footer wordmark. It's a strong starting point for design studios, creative agencies, and serious portfolios: bring your brand, copy, and images, then add, cut, and rearrange sections to fit what you're building. This is the skill for the kind of landing page that makes your studio look like you charge what you're worth.

● Looks Like
High-end creative studio websitesAward-winning agency one-pagersDark premium portfolio sites with smooth scroll revealsThe kind of page that gets submitted to AwwwardsA studio website that feels like the work it's selling
02 · Best For / Avoid If
＋ Best For
+Design and creative studio websites
+Creative agency and branding firm landing pages
+Freelancer and independent designer portfolios
+Any professional services firm that needs to look seriously good
+Product studios and development agencies with strong visual identity
+Anyone building a dark premium one-pager where the page itself is a portfolio piece
× Avoid If
×You need a light, minimal, or bright-brand look — Studio is a dark near-black aesthetic, always
×You're building a product app or SaaS dashboard rather than a landing page — this is a full marketing site template, not a product UI
×Your brand is playful, casual, or colorful — the whole tone is restrained and premium
03 · Design Philosophy
01

01 — Aurora is the only color

The near-black canvas and grayscale imagery stay monochrome; all color comes from the slow animated aurora glowing through the background. That discipline is what makes the page read as premium rather than busy.

02

02 — Restraint at every section

Generous space, simple typography at two weights, and a consistent structure across every section — the same system repeated without variation. The page looks expensive because nothing is fighting for attention.

03

03 — A complete starting point

Every section comes pre-designed — hero, stats, services, projects, team, pricing, testimonials, footer wordmark — so you start from a finished page instead of a blank one. Keep what fits, cut what doesn't, and reshape it around your own content.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Losing the aesthetic while you edit
Add, remove, and rearrange sections however you want — the page is yours to reshape. Just keep the core look intact as you go: near-black canvas, grayscale imagery, and the aurora as the one source of color.
! WARNING
Dropping the grayscale filter
Every image is greyscaled by CSS so arbitrary photos unify into the palette. Remove the filter on one image and it sits completely outside the aesthetic.
! WARNING
Overloading the aurora palette
The aurora is the one source of color, so it should stay subtle — if it's too bright, it starts competing with the content. Dial the opacity down rather than picking a more vivid palette when in doubt.
! WARNING
Skipping the numbered conventions
The roman numerals on stat cards, services, and awards are part of the look, not placeholder text. Keep them in — they're a design element.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →