Creative Agency Website Impact Designer

What this prompt does

This prompt generates a complete creative agency website where the design execution is the pitch — not a vehicle for it. The template enforces a specific information architecture (entrance reel → work → case studies → capabilities → team → contact) that reflects how effective creative agencies structure their web presence: lead with the work, then explain how you do it, then who does it. Every section directive is prescriptive: full-page transitions, cursor effects, scroll-driven animations, no stock photography, no corporate grids.

What separates this from a generic "build me an agency site" prompt is the anti-pattern section. It explicitly blocks the failure modes — safe color palettes, bullet-list capabilities, generic "full-service agency" copy — that make most agency sites forgettable. The template forces the output to justify every design decision as a portfolio signal, not a layout choice.

The prompt also delivers working framework code for the most technically demanding piece: the full-bleed work showcase with hover reveals and page transitions. That's the component where execution either wins or loses the client.

When to use it

• You're a creative director building a new agency site and need a structured brief to hand to a developer or use as a v1 scaffold.
• A freelancer rebranding as a studio who needs to establish visual identity through the site architecture itself.
• A dev shop expanding into design services and needs to signal that shift credibly.
• You're pitching a redesign to an existing agency and need a fast, specific concept with real code to anchor the conversation.
• A motion or brand studio launching a web presence for the first time and unsure how to structure the narrative.
• Testing different creative directions for the same agency by swapping [agency_type] and [target_clients] across multiple runs.

Example output

For agency_type: brand identity and motion studio, specialties: visual identity, title sequences, brand films, target_clients: Series A–C startups and entertainment studios, case_count: 6, framework: Next.js + Framer Motion:

// WorkShowcase.tsx — full-bleed grid with hover reveal and shared-element transitions
const cases = [
  { slug: "arc-rebrand", client: "Arc", type: "Brand Identity", cover: "/arc-cover.mp4" },
  { slug: "volta-titles", client: "Volta", type: "Title Sequence", cover: "/volta-cover.mp4" },
  // ...
];

export function WorkShowcase() {
  return (
    <section className="grid grid-cols-1 md:grid-cols-2 h-screen overflow-hidden">
      {cases.map((c) => (
        <CaseCard key={c.slug} {...c} />
      ))}
    </section>
  );
}

// CaseCard.tsx — Framer Motion layoutId enables shared-element transition to case study page
function CaseCard({ slug, client, type, cover }: CaseItem) {
  return (
    <motion.div layoutId={`case-${slug}`} className="relative group cursor-pointer overflow-hidden">
      <video src={cover} autoPlay muted loop className="w-full h-full object-cover" />
      <motion.div
        className="absolute inset-0 bg-black/60 flex flex-col justify-end p-8 opacity-0 group-hover:opacity-100"
        transition={{ duration: 0.2 }}
      >
        <p className="text-white/60 text-sm uppercase tracking-widest">{type}</p>
        <h2 className="text-white text-3xl font-display mt-1">{client}</h2>
      </motion.div>
    </motion.div>
  );
}

The layoutId on the wrapper is the key: when the user clicks through to /work/arc-rebrand, Framer Motion morphs the card into the case study hero rather than cutting — this is the page transition the prompt explicitly requires. The case study page output includes: challenge/approach/solution/results structure, a pull-quote from the client testimonial, and full-width imagery placeholders with recommended aspect ratios.

Pro tips

• Set [awards] even if modest — "Behance Featured, 2024" is enough to trigger the recognition framing. Leaving it blank produces generic copy. If you genuinely have none, pass no formal awards yet — let work speak and the output shifts to a results-and-testimonials credibility approach instead.
• [framework] matters for code quality — specify Next.js + Framer Motion or Nuxt + GSAP rather than just "React" to get idiomatic animation patterns tied to each library's mental model. Underspecified framework inputs tend to produce generic imperative DOM manipulation instead of declarative animation.
• Run multiple [agency_type] variations before committing — "brand and motion studio" vs "product design consultancy" produces meaningfully different capability framing and color mood suggestions. Treat the first run as a draft, not a final direction.
• Pair with a real color brief — the prompt generates a signature palette concept, but follow up with use palette: [hex codes] if you already have brand colors, otherwise the output will invent its own and you'll spend time correcting it.
• The team section is where most outputs go wrong — if the result defaults to corporate headshot language, add a style note like team has visible creative personalities, studio-casual to your [agency_type] description to shift the tone. There's no dedicated team-style variable in the template, so this is the most reliable workaround.