Taste Pattern / Visual + VideoOpen the live Atlas

THE PROJECT

OverviewWhat’s includedRun it locallyHost your ownInside the code
Share edition · v4September 16, 2026React · TypeScript · D1
OVERVIEW & SOURCE CODE

Find your taste.
Then build on it.

Start with other people’s work. Name what draws you in, what you want less of, and what feels like your own style. Taste Pattern brings visual references and video into one workspace, with feedback you can turn into a creative brief.

Download the sourceExplore the live Atlas

Complete application source + setup guide · ZIP download

01

Start with real work

Explore 113 visual, design, and delivery references plus 47 video references in one Atlas, with creator credits and source links.

02

Say what fits

Choose qualities you want more or less of, including motifs and symbols. Separate a direction that feels like you from one you admire.

03

Connect the evidence

From Your style, copy combined feedback into your AI assistant, then paste its JSON interpretation back. No AI service is called automatically.

04

Keep your judgment

Compare 24 starting directions, 30 real typefaces, and 60 palettes at each size from two to five colors. Record preferences, then confirm, correct, or dismiss interpretations with their evidence.

01

Your own workspace, from a clean start.

The live link opens the public reference collection. The download lets you run a separate Atlas with your own ratings, notes, rounds, and taste profile.

  • 113 visual, design, and delivery references plus 47 videos in one Atlas
  • Covers, author sites, presentations, portraits, typography, color, motifs, and symbols
  • More/less feedback, personal fit versus admiration, and your own notes
  • Your style: combined evidence and interpretations you can confirm, correct, or dismiss
  • An external AI handoff: copy feedback, then paste the JSON response
  • 30 real fonts, 60 palettes in sizes 2–5, and explicit preference feedback
  • 24 starting directions, 10 layouts, and 27 motif, symbol, and annotation treatments
  • 10 photographic directions and 14 material styles with attributed examples
  • Source code, local setup, database migrations, and workspace export
A reference and feedback tool.

The Atlas records your choices and links observations to their evidence. AI interpretations need your review; importing valid JSON does not make them correct. The Style lab uses preview studies to help you compare typography and color. Real human recordings support delivery feedback. Finished assets and combined AI interpretation use an external assistant.

The package contains no private ratings, personal taste profile, account credentials, or live database. Film links and editorial catalogue descriptions are included; referenced media files are not.

02

Run it locally.

You’ll need Node.js 22.13 or newer, npm, and an internet connection for packages, reference images, and embedded video. No paid video editor, AI API key, or ChatGPT account is needed for the local app.

  1. Download and unzip

    Download the source ZIP and extract it. Open a terminal in the resulting taste-atlas folder.

  2. Install and initialize

    npm ci
    npm run local:setup

    The setup creates a local database, an empty taste profile, and new local credentials. Running it again preserves your saved work.

  3. Start your Atlas

    npm run dev

    Open http://localhost:3000 to browse and give visual feedback without signing in. Choose Video or visit /video to open video in the same Atlas. Click Sign in for video feedback; local setup uses the test identity seedy@sites.test.

  4. Review your combined feedback

    In Your style, choose Copy feedback for AI analysis. Paste the evidence into your external AI assistant, then paste its JSON response into Add AI interpretation. Confirm, correct, or dismiss each suggestion using its evidence links. This handoff makes no automatic AI analysis call.

    For new video rounds, save direction in Round feedback and copy the curator handoff. The included docs/CURATOR.md explains that separate research workflow. Use Copy creative brief to guide new samples and bring them back with the upload controls.

Where is my data? What if setup fails?

Visual reference feedback and samples stay in this browser’s IndexedDB. Video records and combined interpretations using the signed-in owner’s video preferences live in protected D1 storage (locally, .wrangler/state/). Export Atlas can include both; Import restores the browser workspace only. Credentials live in .dev.vars and work/curator-config.json; keep them private. The README covers backups and recovery.

If port 3000 is in use, stop the other server and retry. If installation fails, check node --version first. Run commands from the extracted folder, and run setup before starting the app.

03

Put your own Atlas online.

The included local version runs on your computer. The hosted application uses ChatGPT Sites, a Cloudflare D1 database, and Sites’ authenticated owner identity.

  1. Create a new Sites project from the extracted source. Have your coding assistant follow the included docs/HOSTING.md.
  2. Provision your own DB binding, apply the included migrations, and configure your owner email and a new curator secret.
  3. Deploy through Sites, seed the empty taste profile, and verify owner access and visitor privacy before sharing.

Sites availability and hosting costs depend on your account. Other hosts require a database adapter and verified authentication. The video records and combined interpretations have one authenticated owner. Visual workspaces stay in each visitor’s browser and do not sync across devices.

04

Inside the code.

React and TypeScript, App Router conventions via Vinext, Tailwind, and Cloudflare D1. Everything needed to inspect and modify the app is in the ZIP, including the dependency lockfile.

app/studio/Integrated reference workspace, Your style, and sample renderer
lib/reference-catalogue.tsAttributed visual, design, and delivery references
lib/reference-insights.tsCombined evidence, JSON checks, and interpretation decisions
lib/style-atlas.tsEditable directions and browser IndexedDB
public/studio/Original demo imagery and portable sample styles
app/atlas.tsxVideo rounds and profile within the Atlas
app/taste-studio.tsxVideo gallery and per-film feedback
lib/catalogue.jsonThe 47 video references
app/api/atlas/reference-analysis/Owner-protected combined interpretation storage
app/api/ + lib/atlas-*.tsVideo feedback, validation, and curator research jobs
drizzle/Database schema migrations
scripts/atlas-curator.mjsCLI for the curator workflow
README.md + docs/Installation, hosting, and curator guides

Take a copy. Make it yours.

A self-contained source download; no repository access required.

Download source ZIP

Third-party packages retain their own licenses. Reference images and films belong to their creators; links and embeds do not grant media reuse rights.

Taste Pattern / Visual + VideoA shared vocabulary for what you want to make.