Every frame here is a real draft from one Baste run for Moss, scored by a vision model that looked at it. The circled frames are what Baste kept: the best in each direction it explored.
8 kept from 24 drafts
Drafted from Moss’s measurements
Hero image for a field-notes app about fungi networks: a greenhouse bench at dusk where mycelium glows through moss
Mushishi, Ernst Haeckel, bioluminescent, mycelial, solarpunk
Create something that feels like it belongs in Annihilation as interpreted by Ernst Haeckel.
“This image perfectly captures the essence of The Cyberbotanist's world. The bioluminescent mycelial structures, set within a greenhouse at dusk, evoke a sense of hidden complexity and organic growth.”— the judge, looking at the image
Real output from baste generate cyberbotanist --provider fal · Seedream drafts, judged by Gemini through fal. Select any frame to read the judge’s notes.
“Users aged 25–34” has no taste. A person does. They own a stack of films, a playlist, a room they feel at home in, and a list of things they can't stand in software. Baste takes all of that as measurements.
Tailors tack a garment together loosely, try it on, and only then sew it for good. Baste does the same with design: it explores many loose options, fits them to the persona, and only then produces the finished assets.
Load or write a persona: influences, habitat, behaviour. Baste infers the aesthetic profile, or you set it by hand.
Each asset type gets its own prompt. An icon is described differently from a hero image or an ambient loop.
Quality-diversity evolution, 5–10 generations. Candidates spread across temperature, density and abstractness; every niche keeps its best.
An LLM judge scores each candidate against the persona, weighted toward whether it feels made for them.
A diverse final set becomes production assets — SVG, images, video loops — packaged with tokens and a suite manifest.
Generation ends in files you can ship: assets in assets/output/{svg,images,videos}, tokens for whichever stack you use, and a manifest that says why each piece exists.
:root {
/* The Night Market Coder - Generated Design System */
/* Colors */
--color-primary: #e44635;
--color-secondary: #ebb230;
--color-accent: #fe12a9;
--color-background: #150d0c;
--color-surface: #211816;
--color-text: #f5ecea;
--color-text-muted: #b1a09d;
--color-border: #3a302e;
--color-warm: #eb6200;
--color-cool: #18b1cd;
/* Typography */
--font-heading: 'Dela Gothic One', sans-serif;
--font-body: 'Instrument Sans', sans-serif;
--font-mono: 'Fira Code', monospace;
/* Spacing Scale */
--space-0: 0;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4rem;
--space-7: 6rem;
--space-8: 8rem;
/* Border Radius */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-base: 0.25rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-full: 9999px;
/* Motion: Quick and decisive: short moves, crisp stops and readable pauses between them. */
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 400ms;
--duration-slower: 800ms;
--duration-spring: 340ms;
--duration-ambient: 4000ms;
--ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-snappy: cubic-bezier(0.25, 0.1, 0, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
--ease-emphasis: linear(0, 0.044, 0.145, 0.272, 0.404, 0.527, 0.636, 0.728, 0.803, 0.862, 0.907, 0.94, 0.964, 0.981, 0.992, 0.999, 1.003, 1.005, 1.006, 1.006, 1.006, 1);
--ease-spring: linear(0, 0.044, 0.145, 0.272, 0.404, 0.527, 0.636, 0.728, 0.803, 0.862, 0.907, 0.94, 0.964, 0.981, 0.992, 0.999, 1.003, 1.005, 1.006, 1.006, 1.006, 1);
--motion-nudge: 2px;
--motion-shift: 6px;
--motion-travel: 12px;
--motion-press: 0.96;
--motion-stagger: 25ms;
}
/* The Night Market Coder — motion primitives (generated by Baste)
* Quick and decisive: short moves, crisp stops and readable pauses between them.
* Classes: .motion-enter .motion-exit .motion-hover .motion-press .motion-emphasis .motion-ambient .motion-stagger
*/
@keyframes baste-enter {
0% { opacity: 0; transform: translateY(6px) scale(0.98); }
100% { opacity: 1; transform: none; }
}
@keyframes baste-exit {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(-3px) scale(0.98); }
}
@keyframes baste-emphasis {
0% { transform: scale(1); }
30% { transform: scale(1.06); }
100% { transform: scale(1); }
}
@keyframes baste-ambient {
0% { opacity: 1; }
2% { opacity: 0.55; }
4% { opacity: 1; }
6% { opacity: 0.75; }
8% { opacity: 1; }
100% { opacity: 1; }
}
/* Arrive: content, cards and panels coming into view. */
.motion-enter { animation: baste-enter 200ms cubic-bezier(0.05, 0.7, 0.1, 1) 1 normal both; }
/* Leave: dismissals and content making way. */
.motion-exit { animation: baste-exit 100ms cubic-bezier(0.3, 0, 0.8, 0.15) 1 normal both; }
/* Answer the pointer: lift, swell or slide toward the cursor. */
.motion-hover { transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.motion-hover:hover { transform: translateY(-2px); }
/* Confirm a press: the control gives under the finger. */
.motion-press { transition-property: transform; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.motion-press:active { transform: scale(0.96); }
/* Draw the eye once: a new badge, a saved state, a result. */
.motion-emphasis { animation: baste-emphasis 400ms cubic-bezier(0.2, 0, 0, 1) 1 normal both; }
/* Flicker: a sign catching power, then a long readable hold. */
.motion-ambient { animation: baste-ambient 4000ms steps(1, end) infinite normal both; }
/* Sequence: the children of .motion-stagger enter one after another. */
.motion-stagger > * { animation: baste-enter 200ms cubic-bezier(0.05, 0.7, 0.1, 1) 1 normal both; }
.motion-stagger > :nth-child(2) { animation-delay: calc(1 * var(--motion-stagger)); }
.motion-stagger > :nth-child(3) { animation-delay: calc(2 * var(--motion-stagger)); }
.motion-stagger > :nth-child(4) { animation-delay: calc(3 * var(--motion-stagger)); }
.motion-stagger > :nth-child(5) { animation-delay: calc(4 * var(--motion-stagger)); }
.motion-stagger > :nth-child(6) { animation-delay: calc(5 * var(--motion-stagger)); }
.motion-stagger > :nth-child(7) { animation-delay: calc(6 * var(--motion-stagger)); }
.motion-stagger > :nth-child(8) { animation-delay: calc(7 * var(--motion-stagger)); }
.motion-stagger > :nth-child(9) { animation-delay: calc(8 * var(--motion-stagger)); }
.motion-stagger > :nth-child(10) { animation-delay: calc(9 * var(--motion-stagger)); }
.motion-stagger > :nth-child(11) { animation-delay: calc(10 * var(--motion-stagger)); }
.motion-stagger > :nth-child(12) { animation-delay: calc(11 * var(--motion-stagger)); }
@media (prefers-reduced-motion: reduce) {
@keyframes baste-enter-reduced {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes baste-exit-reduced {
0% { opacity: 1; }
100% { opacity: 0; }
}
.motion-enter, .motion-stagger > * { animation-name: baste-enter-reduced; animation-delay: 0s; }
.motion-exit { animation-name: baste-exit-reduced; }
.motion-hover, .motion-hover:hover, .motion-press, .motion-press:active { transform: none; transition: none; }
.motion-emphasis, .motion-ambient { animation: none; }
}
$ baste tokens nightmarketcoder --format css
Every command has a --dry-run that writes the prompts without calling an API. Add keys for OpenAI, QuiverAI or Google when you want finished assets.