{CHIP_CATEGORIES.map((cat, ci) => {
const sel = selections[cat.label] || new Set();
// Repeat items twice so the wall feels infinite at the edges
const items = [...cat.items, ...cat.items.slice(0, 4)];
return (
);
})}
{cat.label}
{items.map((it, idx) => (
6} />
))}
Prompt Preview · Midjourney
Assembling
{tokens.map((tk, i) => (
{tk.txt}
))}
187 tokens · 12 chips selected
Copy ⌘C
100+ presets
·
4 AI models
·
zero expertise needed
The prompt starter pack
for
No prompt expertise needed. Just pick what looks right — shot, lighting, mood, style — and get a perfectly formatted prompt for{' '} Midjourney,{' '} Flux,{' '} Nano Banana, and{' '} GPT Image.{' '} Select, copy, done.
100+ Ready-made presets
4 AI models
3 Clicks to a great prompt
0 Expertise needed
{kicker && (
);
}
// ─────────────────────────────────────────────────────────────
// Showcase — product proof and launch visuals
// ─────────────────────────────────────────────────────────────
function ShowcaseSection({ accent }) {
const items = [
{ src: 'release-package/web-shots/builder-direct-mode.png', caption: 'Live direct mode', sub: 'Fields, chips, subject, scene, and model params rebuild the prompt preview without LLM.' },
{ src: 'release-package/PICS/showcase-creative-range-what-can-you-build.jpg', caption: 'Creative range', sub: 'Product visuals, film posters, maps, storyboards, UI mockups, key art, and style frames.' },
{ src: 'release-package/PICS/preset-library-100-plus-catalog-infographic.jpg', caption: 'Preset library', sub: '100+ curated choices across shot size, camera angle, lens, lighting, mood, style, and aspect ratio.' },
{ src: 'release-package/PICS/before-after-blank-box-to-chips.jpg', caption: 'Before & After', sub: 'From blank prompt box to structured film vocabulary — one click to copy.' },
{ src: 'release-package/PICS/one-scene-four-formats-model-comparison.jpg', caption: 'Four formats', sub: 'Same creative intent, formatted for Midjourney, Flux, Nano, and GPT Image.' },
];
const heroRef = React.useRef(null);
const [heroH, setHeroH] = React.useState(0);
React.useEffect(() => {
const measure = () => { if (heroRef.current) setHeroH(heroRef.current.offsetHeight); };
window.addEventListener('resize', measure);
return () => window.removeEventListener('resize', measure);
}, []);
return (
{kicker}
)}
{title}
{sub && ({sub}
)}
{[
{ n: '100+', label: 'Presets' },
{ n: '10', label: 'Categories' },
{ n: '4', label: 'Models' },
].map((s, i) => (
{i > 0 && }
))}
{/* Hero — creative range full width */}
{s.n}
{s.label}
{item.caption}
{item.sub}
{ paused.current = true; }}
onMouseLeave={() => { paused.current = false; }}
style={{ height: height || 400 }}
>
{/* Slide 0 — preset library */}
![{items[2].caption}]({items[2].src})
![{items[0].caption}]({items[0].src})
);
}
function AudienceProofSection({ accent }) {
return (
{['Director: mood boards and storyboards', 'Designer: product visuals and key art', 'Marketer: campaign images and social content', 'Explorer: styles, moods, and references'].map((line) => (
{line}
))}
{PRODUCT_CATEGORIES.map((group) => (
{group.group}
{group.items.map((it) => (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
background: hover ? 'rgba(255,255,255,0.72)' : 'rgba(255,255,255,0.42)',
backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
border: `1px solid ${hover ? 'var(--border-2)' : 'var(--border)'}`,
borderRadius: 12, padding: '14px 14px 14px 16px',
transition: 'all .2s ease',
transform: hover ? 'translateY(-2px)' : 'none',
position: 'relative', cursor: 'pointer',
}}>
);
}
// ─────────────────────────────────────────────────────────────
// Anatomy of a prompt
// ─────────────────────────────────────────────────────────────
function AnatomySection({ accent }) {
return (
{item.glyph}
{item.llm ? 'LLM' : `${item.presets} preset${item.presets === 1 ? '' : 's'}`}
{item.name}
{item.desc}
{/* Left — annotated image */}
{/* Film grain */}
{/* Framing marks (anamorphic crop) */}
{/* Subject silhouette suggestion */}
{/* Annotation badges */}
);
}
function Annot({ top, left, bottom, right, label, sub, accent }) {
return (
SCENE 14B · T2
STYLE REF · VILLENEUVE / RIDLEY SCOTT / NOLAN
{label}
{sub}
Token-by-token breakdown
{ANATOMY_TOKENS.map((tk, i) => (
{tk.k}
{tk.v}
))}
/imagine
/imagine prompt:{' '}
monumental brutalist steampunk cityscape, modern man alone on a windswept hill, concrete megastructures, brass pipes, industrial haze,{' '}
epic wide shot,{' '}
35mm anamorphic,{' '}
low-angle dusk light,{' '}
awe-struck and foreboding,{' '}
Villeneuve grandeur, Ridley Scott industrial worldbuilding, Nolan scale{' '}
volumetric smoke, realistic film grain
{MODELS.map((m) =>
{line.split(/(\s+|--?\w[\w:-]*|\/\w+)/g).filter(Boolean).map((tok, ti) => {
let color = 'inherit';
if (/^\/\w+/.test(tok)) color = '#a880c8';
else if (/^--/.test(tok)) color = '#b89a5a';
else if (/^\d+(\.\d+)?:?\d*$/.test(tok)) color = '#c89860';
return {tok};
})}
));
}
if (lang === 'json') {
return text.split('\n').map((line, li) => {
const parts = line.split(/("[^"]*"|\{|\}|\[|\]|:|,)/g).filter((s) => s !== '');
return (
{parts.map((p, pi) => {
let color = '#3d3450';
if (/^".*"$/.test(p)) color = li === 0 ? '#3d3450' : '#7a8f6a';
if (/^[{}\[\]:,]$/.test(p)) color = '#9988aa';
// Keys
const isKey = parts[pi + 1] === ':';
if (isKey && /^".*"$/.test(p)) color = '#8a6aaa';
return {p};
})}
);
});
}
// prose / chat — just keep neutral
return text.split('\n').map((line, li) => {line}
);
}
function ModelCard({ model, accent }) {
const [hover, setHover] = React.useState(false);
const bgGlyph = {
mj: '/imagine',
prose: '⟨ prose ⟩',
chat: '💬',
json: '{ }',
}[model.lang];
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: 'relative',
background: 'rgba(255,255,255,0.48)', backdropFilter: 'blur(14px)',
border: `1px solid ${hover ? 'var(--border-2)' : 'var(--border)'}`,
borderRadius: 14, padding: '22px 24px 0',
overflow: 'hidden', transition: 'all .25s ease',
transform: hover ? 'translateY(-3px)' : 'none',
boxShadow: hover ? '0 16px 40px -16px rgba(74,52,108,0.22)' : 'none',
}}>
{/* watermark */}
READY
);
}
// ─────────────────────────────────────────────────────────────
// Author strip
// ─────────────────────────────────────────────────────────────
function AuthorStrip({ accent }) {
return (
{bgGlyph}
{model.name}
{model.tag}
{model.desc}
{tokenizeForLang(model.snippet, model.lang)}
EZ
Why the presets actually work
Eric Zheng — Filmmaker & AI tool builder.
Built this because I got tired of writing prompts from scratch every time. The presets collect real film vocabulary — shot sizes, lighting setups, lens choices — so you can skip the trial-and-error and just pick what you need.
/imagine →
Stop guessing. Stop Googling prompt syntax.
Just select what looks right, and copy.
The whole preset library in one HTML file. Works offline, no account, no setup. Add an API key if you want AI to enhance your prompts further — but great results don't need it.
Open Prompt Builder
→
Source link later