Skip to content
tileio

Menu

10 layers · 7 free

Claude website prompts: whole pages in one file

Claude handles long, detailed prompts well, which makes it a good fit for the biggest layers in the catalogue: whole websites described section by section, with art direction, colour tokens, a motion system and every block's layout and content in order. These prompts are long, and Claude follows them closely.

The four immersive templates lead: Abyss, Grid City, Bloop and Stride stage a real-time three.js scene behind the story, built on a shared kit of stage, camera, post-processing and intro modules. Next to them are six more full sites whose heroes are code-heavy: three thousand canvas particles spelling a word, a photographer's iris loader, a component library that types a React file into an editor, a tree surgeon's ring-dated oak, an online school's drawn lesson path and a course presale with a waveform that changes week by week.

Pick single HTML for one file that opens from disk, or Next.js for a project. Abyss, Ember, Grainhouse, Kinetic, Pollard, Brightwick and Quiet Takes are free.

The 10 layers, in order

  1. Abyss: AI research assistant landing page template preview

    Abyss

    3DFREE

    N° 0724 · AI research assistant

    Immersive: a procedural three.js creature of light swims toward the cursor behind an AI research site.

  2. Grid City: cloud and edge platform landing page template preview

    Grid City

    3DPRO

    N° 0725 · Cloud and edge platform

    Immersive: a procedural three.js city of glass server towers at night for a cloud platform.

  3. Bloop: art toys and collectibles online store template preview

    Bloop

    3DPRO

    N° 0726 · Art toys and collectibles

    Immersive: a glossy three.js vinyl robot in a pastel studio for an art-toy shop.

  4. Stride: running shoes online store template preview

    Stride

    3DPRO

    N° 0727 · Running shoes

    Immersive: a running shoe staged 2.5D from product stills in a graded studio.

  5. Ember: creative agency website template preview

    Ember

    FREE

    N° 0018 · Creative agency / Studio

    A creative agency whose hero is three thousand canvas particles that spell a word.

  6. A photographer's site in near-black where an iris closes on the loader.

  7. Kinetic: UI component library landing page template preview

    Kinetic

    FREE

    N° 0697 · Open-source UI component library

    A UI library: the hero pins while scrolling types a React component into an editor.

  8. Pollard: arborist landing page template preview

    Pollard

    FREE

    N° 0722 · arborist and tree surgeons

    A tree surgeon's site with a felled oak's cross-section you can date ring by ring.

  9. An online school with a lesson path that draws itself through six zigzag cards.

  10. A course presale whose curriculum redraws a recording's waveform for each week.

Browse the full catalogue: Templates

Questions

How do I build a website with a Claude prompt?

Open a layer, pick a stack (single HTML gives you one file), copy the prompt and paste it into Claude. Save the reply as index.html and open it in a browser, or ask Claude Code to write a Next.js project into your repo.

Why are these prompts so long?

They carry everything the design needs: art direction, tokens, fonts, the motion system and each section's layout, motion and content, plus the shipped source where it matters. The length is what makes the result match the preview.

Is Tileio affiliated with Anthropic or Claude?

No. Tileio is an independent library of design layers and prompts. The prompts are plain text, so they work in Anthropic or Claude and in any other AI coding tool that writes HTML, CSS and JavaScript.

Which of these are free?

Abyss, Ember, Grainhouse, Kinetic, Pollard, Brightwick and Quiet Takes. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections