PROMPT
VAULT
SOURCE ↗
FIELD GUIDE 03 / RESEARCH-TO-INTERFACE40 BLUEPRINTS · 2 DISTINCT TRACKS

NO MORE ONE-SIZE-FITS-ALL DESIGN

A website makes an argument.
An app makes an action.

Find the right sections or screens, the right order, and the research behind each decision. Inspect an original preview, copy a complete prompt and build a product that actually belongs to its audience.

ART DIRECTION≠DECORATION
RESEARCH • DESIGN • PROVEBUILD WITH INTENT / 2026
37 PRIMARY-SOURCE RESEARCH RECORDS28 CURATED OPEN-SOURCE BUILDING BLOCKS0 MANDATORY AI OR 3D EFFECTS
01 / BLUEPRINT EXPLOREREVERY SECTION EARNS ITS PLACE

Choose the job.
Not a template.

Each blueprint gives you an ordered information architecture, a responsive concept specimen, three genuinely different directions, optional AI/3D decisions, published sources, and complete Markdown you can copy.

WEBSITE / STUDY 001

Building the right blueprint.

Loading the complete collection…

ORIGINAL EXAMPLE / NOT A VENDOR COMPONENT

Design specimen

Three different structures. Not three recolored templates.

Loading interactive specimen…

These previews are original educational HTML/CSS studies. They are not 40 deployed websites or compiled iOS/Android apps. Examples use illustrative data and real interaction state where indicated.

02 / INFORMATION ARCHITECTURE

The sequence, and why.

  1. Loading…
SELECTED SECTION
Choose any step

Read this section guide ↗
03 / DESIGN DECISIONS

Why this belongs.

The distinct idea

Should this have AI?

AI decision guide ↗
Should this use 3D?

Motion + 3D guide ↗
Practical skills
04 / RESEARCH & SOURCE LIMITATIONS

Built on evidence.

Broader concept guide ↗
05 / PRODUCTION HANDOFF

Copy the whole plan.

The complete, authored Markdown blueprint includes section order, platform-specific guidance, AI/3D decisions, research identifiers, three art directions, functional states and an evidence-based four-round improvement loop.

GitHub source ↗

Try 20 mobile journeys in Mobile Studio with separate Expo Native Kit source ↗

06 / CONTINUE LEARNINGRESEARCHED SOURCES, HONEST LICENSES

Explore wide.
Build selectively.

07 / ADVANCED WHEN NEEDEDAI AND 3D ARE OPTIONS, NOT MANDATES

More capability.
Less theater.

A beautifully simple page may need neither. Explore the execution boundaries before adding a chatbot or spatial scene.

DEMONSTRATION A / AI ROUTINGNO LIVE AI CALLS

Where should
AI run?

NO AI / RECOMMENDED DEFAULT

Use direct navigation, useful search and clear forms when they solve the job better than a chatbot.

See integration choices, consent and code ↗
DEMONSTRATION B / CSS 3DNO 3D ASSET DOWNLOAD

Does the object
need depth?

Illustrative object. Rotated 25 degrees to the left. All information is also available in text.

When 3D is useful, with accessible fallback ↗