A browser clone of the Zotero 7 reference manager. Three-pane layout, collections by research direction, and a seeded AI and machine-learning paper library.
30 standalone websites for real LA small businesses, each built from Google reviews, hours, and local photos in one conversation.
2026-07-24
9.4k9399 views
Addams Family Polaroid Gallery
Flip, drag, and shuffle gothic Polaroid snapshots of the Addams Family, each one turning over to reveal the scene behind it, with a fitting soundtrack.
2026-07-24
23.6k23637 views
Cinematic Perfume Brand Landing Page
An indie perfume brand landing page with a fullscreen smoke-and-glass hero, scent collection, and a mood that shifts color for every fragrance.
2026-07-24
2.8k2816 views
British Museum Website
Build a museum website from one prompt. British Museum landing page with hero section, Rosetta Stone spotlight, collection timeline, and scroll animations.
2026-07-24
38k38049 views
Start with this prompt
Collections sidebar, a sortable item list, and a reading pane, rebuilt pixel-for-pixel from Zotero 7 and preloaded with an AI and machine-learning paper library sorted by research direction.
# Zotero Clone Build Prompt (AI/ML Literature Library)
> Execution order: **build the UI first, load data second**. Two phases.
```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(light theme), with a pixel-accurate three-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.
Data schema (fields per paper, none may be missing):
id / type (journal-article | conference-paper | preprint) / title / full author list /
year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded
UI fidelity (match Zotero 7 light theme — this is a CLONE, not "inspired by"):
Overall macOS-style sans-serif font, light-gray window background (#f6f6f6),
white panels, 1px light-gray dividers (#dcdcdc), compact row height, selected row in
Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
Three panes (draggable splitters to resize):
[LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
(folder icon + item count): LLM Alignment / Diffusion & Generative Models /
Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
below them: My Publications, Duplicate Items, Unfiled Items, Trash;
bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
filters the middle pane.
[MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
selected row highlighted blue; journal/conference/preprint shown with distinct item
icons; switching collection → middle pane shows only that direction, and the bottom
status bar updates to "X items in this view".
[RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
Abstract tab holds the full abstract. Field labels gray and right-aligned, values
black and left-aligned, exactly like Zotero.
Top toolbar: left = New Collection / New Item (+); right = search box
(placeholder "All Fields & Tags").
Interactions (all native Zotero behaviors — no games / flashy animation):
click a collection to filter the middle pane; click My Library to show all
(deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
search box live-filters title/author/abstract/tags (debounced); click tags to filter
(multi-select); click headers to sort; splitters draggable.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
or abstracts from memory. Sources, in priority order:
arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
is fine). Target counts:
LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /
Multimodal ~120 / Efficient Inference & Quantization ~64.
Abstracts MUST be the paper's original abstract (full, not a generated summary);
DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
paper into the HTML.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
rewrite the whole project from memory.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: three-pane layout / colors / selection highlight / font match Zotero 7 with
no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
text, author/year/venue correct; no fabricated entries anywhere in the library.
```
Switch to a dark theme
The same three-pane reference manager in a dark mode tuned for long, low-glare night reading, with charcoal panels replacing the light Zotero palette.
# Zotero Clone Build Prompt (AI/ML Literature Library)
> Execution order: **build the UI first, load data second**. Two phases.
```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(light theme), with a pixel-accurate three-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.
Data schema (fields per paper, none may be missing):
id / type (journal-article | conference-paper | preprint) / title / full author list /
year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded
UI fidelity (match Zotero 7 light theme — this is a CLONE, not "inspired by"):
Overall macOS-style sans-serif font, light-gray window background (#f6f6f6),
white panels, 1px light-gray dividers (#dcdcdc), compact row height, selected row in
Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
Three panes (draggable splitters to resize):
[LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
(folder icon + item count): LLM Alignment / Diffusion & Generative Models /
Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
below them: My Publications, Duplicate Items, Unfiled Items, Trash;
bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
filters the middle pane.
[MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
selected row highlighted blue; journal/conference/preprint shown with distinct item
icons; switching collection → middle pane shows only that direction, and the bottom
status bar updates to "X items in this view".
[RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
Abstract tab holds the full abstract. Field labels gray and right-aligned, values
black and left-aligned, exactly like Zotero.
Top toolbar: left = New Collection / New Item (+); right = search box
(placeholder "All Fields & Tags").
Interactions (all native Zotero behaviors — no games / flashy animation):
click a collection to filter the middle pane; click My Library to show all
(deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
search box live-filters title/author/abstract/tags (debounced); click tags to filter
(multi-select); click headers to sort; splitters draggable.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
or abstracts from memory. Sources, in priority order:
arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
is fine). Target counts:
LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /
Multimodal ~120 / Efficient Inference & Quantization ~64.
Abstracts MUST be the paper's original abstract (full, not a generated summary);
DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
paper into the HTML.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
rewrite the whole project from memory.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: three-pane layout / colors / selection highlight / font match Zotero 7 with
no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
text, author/year/venue correct; no fabricated entries anywhere in the library.
```
Load a law library
Swaps the AI papers for a legal case library, its collections organized by area of law (constitutional, contract, IP, criminal, antitrust) and sourced from CourtListener and Justia, each record showing court, citation, and docket.
# Zotero Clone Build Prompt (AI/ML Literature Library)
> Execution order: **build the UI first, load data second**. Two phases.
```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(light theme), with a pixel-accurate three-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.
Data schema (fields per paper, none may be missing):
id / type (journal-article | conference-paper | preprint) / title / full author list /
year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded
UI fidelity (match Zotero 7 light theme — this is a CLONE, not "inspired by"):
Overall macOS-style sans-serif font, light-gray window background (#f6f6f6),
white panels, 1px light-gray dividers (#dcdcdc), compact row height, selected row in
Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
Three panes (draggable splitters to resize):
[LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
(folder icon + item count): LLM Alignment / Diffusion & Generative Models /Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
below them: My Publications, Duplicate Items, Unfiled Items, Trash;
bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
filters the middle pane.
[MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
selected row highlighted blue; journal/conference/preprint shown with distinct item
icons; switching collection → middle pane shows only that direction, and the bottom
status bar updates to "X items in this view".
[RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
Abstract tab holds the full abstract. Field labels gray and right-aligned, values
black and left-aligned, exactly like Zotero.
Top toolbar: left = New Collection / New Item (+); right = search box
(placeholder "All Fields & Tags").
Interactions (all native Zotero behaviors — no games / flashy animation):
click a collection to filter the middle pane; click My Library to show all
(deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
search box live-filters title/author/abstract/tags (debounced); click tags to filter
(multi-select); click headers to sort; splitters draggable.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
or abstracts from memory. Sources, in priority order:
arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
is fine). Target counts:
LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /Multimodal ~120 / Efficient Inference & Quantization ~64.
Abstracts MUST be the paper's original abstract (full, not a generated summary);
DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
paper into the HTML.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
rewrite the whole project from memory.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: three-pane layout / colors / selection highlight / font match Zotero 7 with
no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
text, author/year/venue correct; no fabricated entries anywhere in the library.
```
Add a citation graph
Adds a fourth pane, an interactive citation graph / knowledge map of how the papers cite each other, turning the static library into a navigable research network.
# Zotero Clone Build Prompt (AI/ML Literature Library)
> Execution order: **build the UI first, load data second**. Two phases.
```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(light theme), with a pixel-accurate three-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.
Data schema (fields per paper, none may be missing):
id / type (journal-article | conference-paper | preprint) / title / full author list /
year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded
UI fidelity (match Zotero 7 light theme — this is a CLONE, not "inspired by"):
Overall macOS-style sans-serif font, light-gray window background (#f6f6f6),
white panels, 1px light-gray dividers (#dcdcdc), compact row height, selected row in
Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
Three panes (draggable splitters to resize):
[LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
(folder icon + item count): LLM Alignment / Diffusion & Generative Models /
Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
below them: My Publications, Duplicate Items, Unfiled Items, Trash;
bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
filters the middle pane.
[MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
selected row highlighted blue; journal/conference/preprint shown with distinct item
icons; switching collection → middle pane shows only that direction, and the bottom
status bar updates to "X items in this view".
[RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
Abstract tab holds the full abstract. Field labels gray and right-aligned, values
black and left-aligned, exactly like Zotero.
Top toolbar: left = New Collection / New Item (+); right = search box
(placeholder "All Fields & Tags").
Interactions (all native Zotero behaviors — no games / flashy animation):
click a collection to filter the middle pane; click My Library to show all
(deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
search box live-filters title/author/abstract/tags (debounced); click tags to filter
(multi-select); click headers to sort; splitters draggable.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
or abstracts from memory. Sources, in priority order:
arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
is fine). Target counts:
LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /
Multimodal ~120 / Efficient Inference & Quantization ~64.
Abstracts MUST be the paper's original abstract (full, not a generated summary);
DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
paper into the HTML.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
rewrite the whole project from memory.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: three-pane layout / colors / selection highlight / font match Zotero 7 with
no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
text, author/year/venue correct; no fabricated entries anywhere in the library.
```