@vibes.diy/prompts 2.2.10 → 2.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/json-docs.d.ts +1 -1
- package/llms/image-gen.d.ts +2 -0
- package/llms/image-gen.js +9 -0
- package/llms/image-gen.js.map +1 -0
- package/llms/image-gen.md +102 -0
- package/llms/index.d.ts +1 -1
- package/llms/index.js +3 -3
- package/package.json +3 -3
- package/prompts.d.ts +6 -0
- package/prompts.js +36 -3
- package/prompts.js.map +1 -1
- package/settings.d.ts +1 -0
- package/system-prompt-initial.md +2 -2
- package/system-prompt.md +86 -2
- package/themes/aether.md +41 -0
- package/themes/archive.md +43 -0
- package/themes/atelier.md +42 -0
- package/themes/atlas.md +42 -0
- package/themes/broadsheet.md +20 -0
- package/themes/brutalist.md +208 -0
- package/themes/capsule.md +47 -0
- package/themes/carbon.md +42 -0
- package/themes/chrome.md +132 -0
- package/themes/chrono.md +33 -0
- package/themes/codex.md +45 -0
- package/themes/computer-angel-heaven.md +57 -0
- package/themes/console.md +46 -0
- package/themes/default.md +96 -0
- package/themes/desktop.md +49 -0
- package/themes/dial.md +46 -0
- package/themes/dossier.md +35 -0
- package/themes/edge.md +39 -0
- package/themes/exemplars/aether/App.jsx +224 -0
- package/themes/exemplars/archive/App.jsx +222 -0
- package/themes/exemplars/atelier/App.jsx +224 -0
- package/themes/exemplars/atlas/App.jsx +216 -0
- package/themes/exemplars/broadsheet/App.jsx +216 -0
- package/themes/exemplars/brutalist/App.jsx +290 -0
- package/themes/exemplars/capsule/App.jsx +216 -0
- package/themes/exemplars/carbon/App.jsx +216 -0
- package/themes/exemplars/chrome/App.jsx +253 -0
- package/themes/exemplars/chrono/App.jsx +222 -0
- package/themes/exemplars/codex/App.jsx +224 -0
- package/themes/exemplars/computer-angel-heaven/App.jsx +224 -0
- package/themes/exemplars/console/App.jsx +216 -0
- package/themes/exemplars/default/App.jsx +219 -0
- package/themes/exemplars/desktop/App.jsx +224 -0
- package/themes/exemplars/dial/App.jsx +216 -0
- package/themes/exemplars/dossier/App.jsx +224 -0
- package/themes/exemplars/edge/App.jsx +216 -0
- package/themes/exemplars/guild/App.jsx +224 -0
- package/themes/exemplars/hearth/App.jsx +224 -0
- package/themes/exemplars/industrial/App.jsx +224 -0
- package/themes/exemplars/matrix/App.jsx +224 -0
- package/themes/exemplars/mesh/App.jsx +222 -0
- package/themes/exemplars/neomario/App.jsx +222 -0
- package/themes/exemplars/neon/App.jsx +224 -0
- package/themes/exemplars/nexus/App.jsx +216 -0
- package/themes/exemplars/opus/App.jsx +224 -0
- package/themes/exemplars/orbit/App.jsx +224 -0
- package/themes/exemplars/palate/App.jsx +224 -0
- package/themes/exemplars/pitch/App.jsx +222 -0
- package/themes/exemplars/poster/App.jsx +222 -0
- package/themes/exemplars/proof/App.jsx +224 -0
- package/themes/exemplars/recon/App.jsx +216 -0
- package/themes/exemplars/rift/App.jsx +224 -0
- package/themes/exemplars/rune/App.jsx +224 -0
- package/themes/exemplars/scrapbook/App.jsx +222 -0
- package/themes/exemplars/sensor/App.jsx +224 -0
- package/themes/exemplars/signal/App.jsx +222 -0
- package/themes/exemplars/slab/App.jsx +224 -0
- package/themes/exemplars/specimen/App.jsx +222 -0
- package/themes/exemplars/terminal/App.jsx +224 -0
- package/themes/exemplars/vault/App.jsx +222 -0
- package/themes/exemplars/winter-sports/App.jsx +224 -0
- package/themes/exemplars/zine/App.jsx +214 -0
- package/themes/guild.md +44 -0
- package/themes/hearth.md +45 -0
- package/themes/index.d.ts +11 -0
- package/themes/index.js +272 -0
- package/themes/index.js.map +1 -0
- package/themes/industrial.md +37 -0
- package/themes/matrix.md +41 -0
- package/themes/mesh.md +42 -0
- package/themes/neomario.md +47 -0
- package/themes/neon.md +48 -0
- package/themes/nexus.md +40 -0
- package/themes/opus.md +61 -0
- package/themes/orbit.md +46 -0
- package/themes/palate.md +35 -0
- package/themes/pitch.md +39 -0
- package/themes/poster.md +39 -0
- package/themes/proof.md +41 -0
- package/themes/recon.md +39 -0
- package/themes/rift.md +45 -0
- package/themes/rune.md +44 -0
- package/themes/scrapbook.md +43 -0
- package/themes/sensor.md +42 -0
- package/themes/signal.md +37 -0
- package/themes/slab.md +35 -0
- package/themes/specimen.md +21 -0
- package/themes/terminal.md +39 -0
- package/themes/vault.md +41 -0
- package/themes/winter-sports.md +39 -0
- package/themes/zine.md +40 -0
- package/llms/img-vibes.d.ts +0 -2
- package/llms/img-vibes.js +0 -9
- package/llms/img-vibes.js.map +0 -1
- package/llms/img-vibes.md +0 -167
package/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from "./chat.js";
|
|
|
4
4
|
export * from "./json-docs.js";
|
|
5
5
|
export * from "./view-state.js";
|
|
6
6
|
export * from "./style-prompts.js";
|
|
7
|
+
export * from "./themes/index.js";
|
|
7
8
|
export { parseContent } from "./segment-parser.js";
|
|
8
9
|
export { resolveEffectiveModel } from "./prompts.js";
|
|
9
10
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
|
package/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export * from "./chat.js";
|
|
|
4
4
|
export * from "./json-docs.js";
|
|
5
5
|
export * from "./view-state.js";
|
|
6
6
|
export * from "./style-prompts.js";
|
|
7
|
+
export * from "./themes/index.js";
|
|
7
8
|
export { parseContent } from "./segment-parser.js";
|
|
8
9
|
export { resolveEffectiveModel } from "./prompts.js";
|
|
9
10
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}
|
package/json-docs.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../jsr/llms/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,kBAAkB;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,0BAA0B;IACvC,YAAY,EAAE,SAAS;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# ImgGen Component
|
|
2
|
+
|
|
3
|
+
Generate and edit images from a text prompt. Each generated image lands as a file ref on the doc — display reads the platform-minted URL via `_files`.
|
|
4
|
+
|
|
5
|
+
## Basic Usage
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { ImgGen } from "use-vibes";
|
|
9
|
+
|
|
10
|
+
function MyComponent() {
|
|
11
|
+
return <ImgGen prompt="A sunset over mountains" />;
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`<ImgGen>` writes the doc into a Fireproof database (default name `"ImgGen"`). The doc carries `_files.v1 = { uploadId, type, size }` and the platform mints `_files.v1.url` on read. Render the image with:
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
const ver = doc.versions?.[doc.currentVersion ?? 0];
|
|
19
|
+
const meta = ver?.id ? doc._files?.[ver.id] : undefined;
|
|
20
|
+
return <img src={meta?.url} alt={doc.prompt} />;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This is the same `_files`-shape contract documented in `fireproof.md`'s "Working with Files" section — read it first if you have not seen the platform's file/URL story.
|
|
24
|
+
|
|
25
|
+
## Editing an Uploaded Image
|
|
26
|
+
|
|
27
|
+
Pass a `File` object via `images` to run img2img:
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { useState } from "react";
|
|
31
|
+
import { ImgGen } from "use-vibes";
|
|
32
|
+
|
|
33
|
+
function MyComponent() {
|
|
34
|
+
const [file, setFile] = useState(null);
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<input type="file" accept="image/*" onChange={(e) => setFile(e.target.files[0])} />
|
|
38
|
+
{file && <ImgGen prompt="Make it look like a watercolor painting" images={[file]} />}
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The input image is automatically resized (max 1024px) and compressed as JPEG before sending. img2img is currently supported on `prodia/*` models.
|
|
45
|
+
|
|
46
|
+
## Loading a Specific Doc
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
<ImgGen _id="my-image-id" database={database} />
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
If the doc has a `prompt` but no `_files` yet, the component generates one.
|
|
53
|
+
|
|
54
|
+
## Gallery Pattern
|
|
55
|
+
|
|
56
|
+
Browse stored images with `useLiveQuery`:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
import { useFireproof } from "use-fireproof";
|
|
60
|
+
import { ImgGen } from "use-vibes";
|
|
61
|
+
|
|
62
|
+
function MyComponent() {
|
|
63
|
+
const { useLiveQuery } = useFireproof("ImgGen");
|
|
64
|
+
const { docs } = useLiveQuery("type", { key: "image", descending: true });
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<div>
|
|
68
|
+
<ImgGen prompt="A colorful landscape" />
|
|
69
|
+
{docs.map((doc) => {
|
|
70
|
+
const ver = doc.versions?.[doc.currentVersion ?? 0];
|
|
71
|
+
const meta = ver?.id ? doc._files?.[ver.id] : undefined;
|
|
72
|
+
return <img key={doc._id} src={meta?.url} alt={doc.prompt} width={128} />;
|
|
73
|
+
})}
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Caching and Versions
|
|
80
|
+
|
|
81
|
+
- Same prompt produces a deterministic `_id` (hash-based), so results are cached across reloads.
|
|
82
|
+
- Each image has a regenerate button that appends a new version (writes a new `_files.v<N>` entry).
|
|
83
|
+
- Prev / next controls navigate between stored versions.
|
|
84
|
+
- Set `showControls={false}` to hide regenerate and version navigation.
|
|
85
|
+
|
|
86
|
+
## Choosing a Model
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
<ImgGen prompt="An astronaut riding a horse" model="openai/gpt-5-image-mini" />
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Model ids follow the `provider/model-name` form from the platform's model catalog. Unknown ids surface as an error in the component's error UI.
|
|
93
|
+
|
|
94
|
+
#### Props
|
|
95
|
+
|
|
96
|
+
- `prompt`: text prompt (required unless `_id` is provided)
|
|
97
|
+
- `images`: array of `File` objects for img2img (uses first image)
|
|
98
|
+
- `_id`: load a specific doc instead of generating
|
|
99
|
+
- `database`: Fireproof db name or instance (default `"ImgGen"`)
|
|
100
|
+
- `className`, `alt`, `style`: standard image styling
|
|
101
|
+
- `showControls`: toggle regenerate + version nav (default `true`)
|
|
102
|
+
- `model`: override the image-gen model for this component
|
package/llms/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { callaiConfig } from "./callai.js";
|
|
2
2
|
export { fireproofConfig } from "./fireproof.js";
|
|
3
|
-
export {
|
|
3
|
+
export { imageGenConfig } from "./image-gen.js";
|
|
4
4
|
export { webAudioConfig } from "./web-audio.js";
|
|
5
5
|
export { d3Config } from "./d3.js";
|
|
6
6
|
export { threeJsConfig } from "./three-js.js";
|
package/llms/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { callaiConfig } from "./callai.js";
|
|
2
2
|
import { fireproofConfig } from "./fireproof.js";
|
|
3
|
-
import {
|
|
3
|
+
import { imageGenConfig } from "./image-gen.js";
|
|
4
4
|
import { webAudioConfig } from "./web-audio.js";
|
|
5
5
|
import { d3Config } from "./d3.js";
|
|
6
6
|
import { threeJsConfig } from "./three-js.js";
|
|
7
7
|
export { callaiConfig } from "./callai.js";
|
|
8
8
|
export { fireproofConfig } from "./fireproof.js";
|
|
9
|
-
export {
|
|
9
|
+
export { imageGenConfig } from "./image-gen.js";
|
|
10
10
|
export { webAudioConfig } from "./web-audio.js";
|
|
11
11
|
export { d3Config } from "./d3.js";
|
|
12
12
|
export { threeJsConfig } from "./three-js.js";
|
|
13
|
-
export const allConfigs = [callaiConfig,
|
|
13
|
+
export const allConfigs = [callaiConfig, imageGenConfig, webAudioConfig, d3Config, threeJsConfig, fireproofConfig];
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibes.diy/prompts",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"description": "",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"@fireproof/core-types-base": "~0.24.19",
|
|
31
31
|
"@fireproof/core-types-protocols-cloud": "~0.24.19",
|
|
32
32
|
"@fireproof/use-fireproof": "~0.24.19",
|
|
33
|
-
"@vibes.diy/call-ai-v2": "^2.2.
|
|
34
|
-
"@vibes.diy/use-vibes-types": "^2.2.
|
|
33
|
+
"@vibes.diy/call-ai-v2": "^2.2.12",
|
|
34
|
+
"@vibes.diy/use-vibes-types": "^2.2.12",
|
|
35
35
|
"arktype": "~2.2.0",
|
|
36
36
|
"json-schema-faker": "~0.6.1"
|
|
37
37
|
},
|
package/prompts.d.ts
CHANGED
|
@@ -39,6 +39,10 @@ export declare const preAllocSchema: {
|
|
|
39
39
|
readonly type: "string";
|
|
40
40
|
readonly description: "A short, vivid one-line description of what an icon for this app should depict \u2014 what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing \u2014 those are added separately by the renderer.";
|
|
41
41
|
};
|
|
42
|
+
readonly theme: {
|
|
43
|
+
readonly type: "string";
|
|
44
|
+
readonly description: "Theme slug from the theme catalog above. Pick the one whose mood best fits the app \u2014 playful apps lean playful themes, focus/utility apps lean clean themes, retro apps lean retro themes, etc. Always pick something rather than leaving empty; the catalog is broad enough to cover most app moods. Only omit if the request is so abstract that every theme would feel arbitrary.";
|
|
45
|
+
};
|
|
42
46
|
};
|
|
43
47
|
};
|
|
44
48
|
export declare const preAllocParsed: import("arktype/internal/variants/object.ts").ObjectType<{
|
|
@@ -48,11 +52,13 @@ export declare const preAllocParsed: import("arktype/internal/variants/object.ts
|
|
|
48
52
|
slug: string;
|
|
49
53
|
}[];
|
|
50
54
|
iconDescription: string;
|
|
55
|
+
theme?: string | undefined;
|
|
51
56
|
}, {}>;
|
|
52
57
|
export type PreAllocParsed = typeof preAllocParsed.infer;
|
|
53
58
|
export interface SystemPromptResult {
|
|
54
59
|
systemPrompt: string;
|
|
55
60
|
skills: string[];
|
|
61
|
+
theme?: string;
|
|
56
62
|
demoData: boolean;
|
|
57
63
|
model: string;
|
|
58
64
|
}
|
package/prompts.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { loadAsset, KeyedResolvOnce } from "@adviser/cement";
|
|
2
2
|
import { getLlmCatalog, getLlmCatalogNames } from "./json-docs.js";
|
|
3
|
+
import { getThemeCatalogNames, vibesThemes } from "./themes/index.js";
|
|
3
4
|
import { type } from "arktype";
|
|
4
5
|
import { defaultStylePrompt } from "./style-prompts.js";
|
|
5
6
|
export const DEFAULT_CODING_MODEL = "anthropic/claude-opus-4.5";
|
|
@@ -28,17 +29,23 @@ export async function resolveEffectiveModel(settingsDoc, vibeDoc) {
|
|
|
28
29
|
return defaultCodingModel();
|
|
29
30
|
}
|
|
30
31
|
export async function getDefaultSkills() {
|
|
31
|
-
return ["fireproof", "callai", "
|
|
32
|
+
return ["fireproof", "callai", "image-gen", "web-audio"];
|
|
32
33
|
}
|
|
33
34
|
export async function makePreAllocUserMessage(userPrompt) {
|
|
34
35
|
const catalog = await getLlmCatalog();
|
|
35
36
|
const catalogText = catalog.map((l) => `- ${l.name}: ${l.description}`).join("\n");
|
|
37
|
+
const themeText = vibesThemes
|
|
38
|
+
.map((t) => `- ${t.slug}: ${t.name}${t.bodyFont ? ` (${t.bodyFont.replace(/['"]/g, "").split(",")[0].trim()})` : ""}`)
|
|
39
|
+
.join("\n");
|
|
36
40
|
return [
|
|
37
|
-
"Pick skills from this catalog that fit the user's app request, propose 3 title/slug pairs for naming,
|
|
41
|
+
"Pick skills from this catalog that fit the user's app request, propose 3 title/slug pairs for naming, propose a one-line icon subject, and pick a theme that matches the app's mood.",
|
|
38
42
|
"",
|
|
39
43
|
"Skill catalog:",
|
|
40
44
|
catalogText,
|
|
41
45
|
"",
|
|
46
|
+
"Theme catalog:",
|
|
47
|
+
themeText,
|
|
48
|
+
"",
|
|
42
49
|
"User request:",
|
|
43
50
|
userPrompt,
|
|
44
51
|
].join("\n");
|
|
@@ -66,12 +73,17 @@ export const preAllocSchema = {
|
|
|
66
73
|
type: "string",
|
|
67
74
|
description: "A short, vivid one-line description of what an icon for this app should depict — what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing — those are added separately by the renderer.",
|
|
68
75
|
},
|
|
76
|
+
theme: {
|
|
77
|
+
type: "string",
|
|
78
|
+
description: "Theme slug from the theme catalog above. Pick the one whose mood best fits the app — playful apps lean playful themes, focus/utility apps lean clean themes, retro apps lean retro themes, etc. Always pick something rather than leaving empty; the catalog is broad enough to cover most app moods. Only omit if the request is so abstract that every theme would feel arbitrary.",
|
|
79
|
+
},
|
|
69
80
|
},
|
|
70
81
|
};
|
|
71
82
|
export const preAllocParsed = type({
|
|
72
83
|
skills: type("string").array(),
|
|
73
84
|
pairs: type({ title: "string", slug: "string" }).array(),
|
|
74
85
|
iconDescription: "string",
|
|
86
|
+
"theme?": "string",
|
|
75
87
|
});
|
|
76
88
|
export function generateImportStatements(llms) {
|
|
77
89
|
const seen = new Set();
|
|
@@ -136,7 +148,26 @@ export async function makeBaseSystemPrompt(model, sessionDoc) {
|
|
|
136
148
|
concatenatedLlmsTxts.push(`</${llm.label}-docs>`);
|
|
137
149
|
}
|
|
138
150
|
const concatenatedLlmsTxt = concatenatedLlmsTxts.join("\n");
|
|
139
|
-
const
|
|
151
|
+
const themeCatalogNames = getThemeCatalogNames();
|
|
152
|
+
const requestedTheme = typeof sessionDoc?.theme === "string" ? sessionDoc.theme : undefined;
|
|
153
|
+
const validatedTheme = requestedTheme && themeCatalogNames.has(requestedTheme) ? requestedTheme : undefined;
|
|
154
|
+
let themeDesignSection = "";
|
|
155
|
+
if (validatedTheme) {
|
|
156
|
+
const rTheme = await keyedLoadAsset.get(`theme:${validatedTheme}`).once(async () => {
|
|
157
|
+
return loadAsset(`./themes/${validatedTheme}.md`, {
|
|
158
|
+
fallBackUrl: pkgBaseUrl,
|
|
159
|
+
basePath: () => import.meta.url,
|
|
160
|
+
mock: { fetch: sessionDoc.fetch },
|
|
161
|
+
});
|
|
162
|
+
});
|
|
163
|
+
if (rTheme.isErr()) {
|
|
164
|
+
console.warn(`Failed to load theme ${validatedTheme}:`, rTheme.Err());
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
themeDesignSection = `<theme-design-md>\n${rTheme.Ok() ?? ""}\n</theme-design-md>`;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
const stylePrompt = sessionDoc?.stylePrompt || (themeDesignSection ? "" : defaultStylePrompt);
|
|
140
171
|
const demoDataLines = includeDemoData
|
|
141
172
|
? "\n- If your app has a function that uses callAI with a schema to save data, include a Demo Data button that calls that function with an example prompt. Don't write an extra function, use real app code so the data illustrates what it looks like to use the app.\n- Never have an instance of callAI that is only used to generate demo data, always use the same calls that are triggered by user actions in the app."
|
|
142
173
|
: "";
|
|
@@ -151,12 +182,14 @@ export async function makeBaseSystemPrompt(model, sessionDoc) {
|
|
|
151
182
|
.replaceAll("{{STYLE_PROMPT}}", stylePrompt)
|
|
152
183
|
.replaceAll("{{DEMO_DATA}}", demoDataLines)
|
|
153
184
|
.replaceAll("{{CONCATENATED_LLMS}}", concatenatedLlmsTxt)
|
|
185
|
+
.replaceAll("{{THEME_DESIGN}}", themeDesignSection)
|
|
154
186
|
.replaceAll("{{TITLE_SECTION}}", titleSection)
|
|
155
187
|
.replaceAll("{{USER_PROMPT}}", userPromptSection)
|
|
156
188
|
.replaceAll("{{IMPORT_STATEMENTS}}", importStatements);
|
|
157
189
|
return {
|
|
158
190
|
systemPrompt,
|
|
159
191
|
skills: selectedNames,
|
|
192
|
+
theme: validatedTheme,
|
|
160
193
|
demoData: includeDemoData,
|
|
161
194
|
model,
|
|
162
195
|
};
|
package/prompts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prompts.js","sourceRoot":"","sources":["../jsr/prompts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAAoC,CAAC;AAEzE,KAAK,UAAU,kBAAkB;IAC/B,OAAO,oBAAoB,CAAC;AAC9B,CAAC;AAED,SAAS,wBAAwB,CAAC,EAAW;IAC3C,IAAI,OAAO,EAAE,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAC7C,MAAM,OAAO,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;IAC1B,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAW;IAC1C,OAAO,wBAAwB,CAAC,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAW;IAC5C,OAAO,OAAO,wBAAwB,CAAC,EAAE,CAAC,KAAK,QAAQ,CAAC;AAC1D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,qBAAqB,CACzC,WAAgC,EAChC,OAAoC;IAEpC,MAAM,aAAa,GAAG,wBAAwB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACvE,IAAI,aAAa;QAAE,OAAO,aAAa,CAAC;IACxC,MAAM,YAAY,GAAG,wBAAwB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClE,IAAI,YAAY;QAAE,OAAO,YAAY,CAAC;IACtC,OAAO,kBAAkB,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB;IACpC,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3D,CAAC;AASD,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAAC,UAAkB;IAC9D,MAAM,OAAO,GAAG,MAAM,aAAa,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnF,OAAO;QACL,
|
|
1
|
+
{"version":3,"file":"prompts.js","sourceRoot":"","sources":["../jsr/prompts.ts"],"names":[],"mappings":"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"}
|
package/settings.d.ts
CHANGED
package/system-prompt-initial.md
CHANGED
|
@@ -13,7 +13,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
13
13
|
- Use Fireproof for data persistence
|
|
14
14
|
- Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
|
|
15
15
|
- Always show loading states during any async operation (callAI, fetch, database queries): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
|
|
16
|
-
- For file uploads use drag and drop and store using the `doc._files` API
|
|
16
|
+
- For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
|
|
17
17
|
- Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
|
|
18
18
|
- Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
|
|
19
19
|
- List data items on the main page of your app so users don't have to hunt for them
|
|
@@ -21,7 +21,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
21
21
|
- Add small AI-powered suggestion buttons next to form field groups and empty states. When tapped, use callAI to generate example ideas and fill them in, so users can see what's possible without typing from scratch. Use the same callAI calls the app already makes for real functionality — don't create separate AI functions just for suggestions.{{DEMO_DATA}}
|
|
22
22
|
|
|
23
23
|
{{CONCATENATED_LLMS}}
|
|
24
|
-
|
|
24
|
+
{{THEME_DESIGN}}
|
|
25
25
|
{{TITLE_SECTION}}{{USER_PROMPT}}IMPORTANT: You are working in one JavaScript file (`App.jsx`). This is the **first turn** — `App.jsx` does not exist yet. You'll scaffold it once, then sculpt it through a rapid stream of small edits the user can watch land in real time.
|
|
26
26
|
|
|
27
27
|
Before writing code, provide a title and brief description of the app. Then list the top 3 features that are the best fit for a mobile web database with real-time collaboration and describe a short planned workflow showing how those features connect into a coherent user experience.
|
package/system-prompt.md
CHANGED
|
@@ -13,7 +13,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
13
13
|
- Use Fireproof for data persistence
|
|
14
14
|
- Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
|
|
15
15
|
- Always show loading states during any async operation (callAI, fetch, database queries): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
|
|
16
|
-
- For file uploads use drag and drop and store using the `doc._files` API
|
|
16
|
+
- For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
|
|
17
17
|
- Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
|
|
18
18
|
- Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
|
|
19
19
|
- Consider and potentially reuse/extend code from previous responses if relevant
|
|
@@ -27,7 +27,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
27
27
|
- Add small AI-powered suggestion buttons next to form field groups and empty states. When tapped, use callAI to generate example ideas and fill them in, so users can see what's possible without typing from scratch. Use the same callAI calls the app already makes for real functionality — don't create separate AI functions just for suggestions.{{DEMO_DATA}}
|
|
28
28
|
|
|
29
29
|
{{CONCATENATED_LLMS}}
|
|
30
|
-
|
|
30
|
+
{{THEME_DESIGN}}
|
|
31
31
|
{{TITLE_SECTION}}{{USER_PROMPT}}IMPORTANT: You are working in one JavaScript file (`App.jsx`). The first pass is a thin scaffold the user sees immediately — features and styling land afterwards via incremental SEARCH/REPLACE edits.
|
|
32
32
|
|
|
33
33
|
Before writing code, provide a title and brief description of the app. Then list the top 3 features that are the best fit for a mobile web database with real-time collaboration and describe a short planned workflow showing how those features connect into a coherent user experience.
|
|
@@ -60,6 +60,90 @@ Each `<<<<<<< SEARCH` snippet must match exactly one place in the current file (
|
|
|
60
60
|
|
|
61
61
|
If a single SEARCH/REPLACE grows beyond ~25 lines, split it.
|
|
62
62
|
|
|
63
|
+
**Two `...` shortcuts on the SEARCH side keep edits compact:**
|
|
64
|
+
|
|
65
|
+
- A line ending in `...` is a single-line **prefix match** — the source line must begin with what's before the `...`; the rest is ignored. Use this to skip long Tailwind class strings or other noisy line tails.
|
|
66
|
+
- A line starting with `...` is a **multi-line skip** — it matches zero or more source lines of any content. Any text after the leading `...` is just a comment for clarity (e.g. `...rest of body`). The skipped lines are part of the replaced range.
|
|
67
|
+
- A `...` in the middle of a line is literal text and participates in exact match. The REPLACE side never has special meaning for `...` — write the new content verbatim.
|
|
68
|
+
|
|
69
|
+
Example — replacing a function with a fat Tailwind line without retyping the classes:
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
<<<<<<< SEARCH
|
|
73
|
+
function CardHeader() {
|
|
74
|
+
return <h2 className="text-2xl font-bold...
|
|
75
|
+
}
|
|
76
|
+
=======
|
|
77
|
+
function CardHeader() {
|
|
78
|
+
return <h2 className="text-3xl font-extrabold tracking-tight">{title}</h2>;
|
|
79
|
+
}
|
|
80
|
+
>>>>>>> REPLACE
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
The matcher still requires exactly one match in the file; if the `...` shortcuts make the SEARCH ambiguous, add a surrounding anchor line to disambiguate.
|
|
84
|
+
|
|
85
|
+
**The most common use of `...` is editing one key in a multi-line styles object.** Tailwind class strings, theme `:root { ... }` blocks, oklch/rgba color tokens — these lines are long and easy to misremember. Always edit ONE key per SEARCH/REPLACE, anchor on the key name, and let `...` consume the value:
|
|
86
|
+
|
|
87
|
+
**Keep the prefix as short as possible — just enough to be unique in the file.** For an object key, the key name alone is usually unique. You do NOT need to copy the existing value to anchor on it; the `...` does that.
|
|
88
|
+
|
|
89
|
+
Tailwind classNames object — change the page background color only:
|
|
90
|
+
|
|
91
|
+
```jsx
|
|
92
|
+
<<<<<<< SEARCH
|
|
93
|
+
page: "...
|
|
94
|
+
=======
|
|
95
|
+
page: "min-h-screen flex flex-col max-w-lg mx-auto bg-[#1a0015]",
|
|
96
|
+
>>>>>>> REPLACE
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
` page: "` is unique inside the `c = { ... }` object, so that's the whole anchor needed. The `...` consumes whatever value is there now; the REPLACE writes the new one.
|
|
100
|
+
|
|
101
|
+
CSS variable inside `THEME_CSS` — change one variable, leave the rest:
|
|
102
|
+
|
|
103
|
+
```jsx
|
|
104
|
+
<<<<<<< SEARCH
|
|
105
|
+
--bg:...
|
|
106
|
+
=======
|
|
107
|
+
--bg: #1a0510;
|
|
108
|
+
>>>>>>> REPLACE
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Inline JSX attribute on a long element — change just one prop:
|
|
112
|
+
|
|
113
|
+
```jsx
|
|
114
|
+
<<<<<<< SEARCH
|
|
115
|
+
<button className="...
|
|
116
|
+
=======
|
|
117
|
+
<button className="px-6 py-3 rounded-2xl bg-emerald-600 hover:bg-emerald-700">
|
|
118
|
+
>>>>>>> REPLACE
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
If a short prefix would match in two places, then add just enough surrounding context to disambiguate — but don't pre-emptively copy the whole long line.
|
|
122
|
+
|
|
123
|
+
❌ Do NOT replace the entire `c = { ... }` styles object, the entire `:root { ... }` block, or a long JSX line in one giant SEARCH/REPLACE. Reproducing those bytes from memory drifts (variable names invented, rgba values guessed, key order shuffled, trailing commas changed) and the matcher rejects with `no-match` over and over. **One key, one variable, one attribute per edit, with `...` doing the heavy lifting.**
|
|
124
|
+
|
|
125
|
+
❌ Even worse: writing a single-line SEARCH that retypes the FULL existing Tailwind value to anchor on it, like:
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
<<<<<<< SEARCH
|
|
129
|
+
page: "w-full h-screen flex flex-col overflow-hidden relative",
|
|
130
|
+
=======
|
|
131
|
+
page: "w-full h-screen flex flex-col overflow-hidden relative bg-[#2a1810]",
|
|
132
|
+
>>>>>>> REPLACE
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
That looks safe but isn't — your memory of the value drifts a single space or class away from the bytes on disk and the matcher fails. **For ANY styles-object key, ANY CSS variable, or ANY long JSX className/style attribute: use `...`. The whole value is don't-care — let the matcher swallow it.** The correct shape is:
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
<<<<<<< SEARCH
|
|
139
|
+
page: "...
|
|
140
|
+
=======
|
|
141
|
+
page: "w-full h-screen flex flex-col overflow-hidden relative bg-[#2a1810]",
|
|
142
|
+
>>>>>>> REPLACE
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Same edit, fewer bytes, and the SEARCH matches whatever the file actually contains regardless of whether you remembered it correctly. **Never retype a value just to anchor on it — anchor on the key + `...` instead.**
|
|
146
|
+
|
|
63
147
|
**Always go feature-by-feature with SEARCH/REPLACE.** Do NOT emit the whole file as a single edit just because the build feels substantial — the user wants to see each feature land incrementally. If you find yourself thinking "this is a substantial build, I'll do it in one pass", do not — go feature-by-feature instead.
|
|
64
148
|
|
|
65
149
|
**Heavy rewrites use a full-file block, never a giant SEARCH/REPLACE.** When the user explicitly asks for a complete overhaul or redesign (e.g. "redo the whole thing", "switch to a totally different layout"), or when more than ~60% of the file would change, emit a fresh **full-file block** — exactly the same shape as the scaffold above: a filename line, a fenced ```jsx block, the entire new file contents, the closing fence. **No `<<<<<<< SEARCH` markers.\*\* This replaces the file in one shot.
|
package/themes/aether.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Aether Brass
|
|
3
|
+
colors:
|
|
4
|
+
parchment: "#dcbfa6"
|
|
5
|
+
parchment-dark: "#c4a482"
|
|
6
|
+
ink: "#3e2723"
|
|
7
|
+
leather: "#2a1d15"
|
|
8
|
+
brass-light: "#fdf5bb"
|
|
9
|
+
brass-mid: "#cfa562"
|
|
10
|
+
brass-dark: "#745428"
|
|
11
|
+
amber: "#ffaa00"
|
|
12
|
+
typography:
|
|
13
|
+
body-md:
|
|
14
|
+
fontFamily: Special Elite
|
|
15
|
+
fontSize: 1rem
|
|
16
|
+
fontWeight: "400"
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Brand & Style
|
|
20
|
+
|
|
21
|
+
Aether Brass design system. A clean, structured theme with Cinzel Decorative and Homemade Apple and Special Elite typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
22
|
+
|
|
23
|
+
## Colors
|
|
24
|
+
|
|
25
|
+
- **parchment** (#dcbfa6): Use for backgrounds.
|
|
26
|
+
- **parchment-dark** (#c4a482): Use for supporting UI elements.
|
|
27
|
+
- **ink** (#3e2723): Use for text content.
|
|
28
|
+
- **leather** (#2a1d15): Use for supporting UI elements.
|
|
29
|
+
- **brass-light** (#fdf5bb): Use for supporting UI elements.
|
|
30
|
+
- **brass-mid** (#cfa562): Use for supporting UI elements.
|
|
31
|
+
- **brass-dark** (#745428): Use for supporting UI elements.
|
|
32
|
+
- **amber** (#ffaa00): Use for supporting UI elements.
|
|
33
|
+
|
|
34
|
+
## Typography
|
|
35
|
+
|
|
36
|
+
Load fonts from Google Fonts: Cinzel Decorative, Homemade Apple, Special Elite. Use display=optional.
|
|
37
|
+
Primary body font: 'Special Elite', monospace.
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Archive
|
|
3
|
+
colors:
|
|
4
|
+
bg: "oklch(0.95 0.01 70)"
|
|
5
|
+
text: "oklch(0.15 0.02 50)"
|
|
6
|
+
border: "oklch(0.20 0.02 50)"
|
|
7
|
+
accent: "oklch(0.35 0.04 50)"
|
|
8
|
+
accent-text: "oklch(0.95 0.01 70)"
|
|
9
|
+
muted: "oklch(0.55 0.02 50)"
|
|
10
|
+
page-bg: "oklch(0.92 0.01 65)"
|
|
11
|
+
typography:
|
|
12
|
+
body-md:
|
|
13
|
+
fontFamily: Inter
|
|
14
|
+
fontSize: 1rem
|
|
15
|
+
fontWeight: "400"
|
|
16
|
+
headline:
|
|
17
|
+
fontFamily: Playfair Display
|
|
18
|
+
fontSize: 2rem
|
|
19
|
+
fontWeight: "700"
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Brand & Style
|
|
23
|
+
|
|
24
|
+
Archive design system. A clean, structured theme with Playfair Display and Inter typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
25
|
+
|
|
26
|
+
## Colors
|
|
27
|
+
|
|
28
|
+
- **bg** (oklch(0.95 0.01 70)): Use for backgrounds.
|
|
29
|
+
- **text** (oklch(0.15 0.02 50)): Use for text content.
|
|
30
|
+
- **border** (oklch(0.20 0.02 50)): Use for borders and dividers.
|
|
31
|
+
- **accent** (oklch(0.35 0.04 50)): Use for primary actions and accents.
|
|
32
|
+
- **accent-text** (oklch(0.95 0.01 70)): Use for text content.
|
|
33
|
+
- **muted** (oklch(0.55 0.02 50)): Use for secondary/muted content.
|
|
34
|
+
- **page-bg** (oklch(0.92 0.01 65)): Use for backgrounds.
|
|
35
|
+
|
|
36
|
+
## Typography
|
|
37
|
+
|
|
38
|
+
Load fonts from Google Fonts: Playfair Display, Inter. Use display=optional.
|
|
39
|
+
Primary body font: 'Inter', sans-serif.
|
|
40
|
+
|
|
41
|
+
## Components
|
|
42
|
+
|
|
43
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Atelier Studio
|
|
3
|
+
colors:
|
|
4
|
+
comp-bg: "oklch(0.95 0.03 70)"
|
|
5
|
+
comp-text: "oklch(0.25 0.04 30)"
|
|
6
|
+
comp-border: "oklch(0.25 0.04 30 / 0.15)"
|
|
7
|
+
comp-accent: "oklch(0.65 0.18 55)"
|
|
8
|
+
comp-accent-text: "oklch(1.00 0 0)"
|
|
9
|
+
comp-muted: "oklch(0.50 0.04 30)"
|
|
10
|
+
color-background: "oklch(0.96 0.03 70)"
|
|
11
|
+
comp-accent-secondary: "oklch(0.60 0.15 40)"
|
|
12
|
+
comp-golden: "oklch(0.72 0.15 80)"
|
|
13
|
+
typography:
|
|
14
|
+
body-md:
|
|
15
|
+
fontFamily: Playfair Display
|
|
16
|
+
fontSize: 1rem
|
|
17
|
+
fontWeight: "400"
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Brand & Style
|
|
21
|
+
|
|
22
|
+
Atelier Studio design system. A clean, structured theme with Italianno and Playfair Display and Space Mono typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
23
|
+
|
|
24
|
+
## Colors
|
|
25
|
+
|
|
26
|
+
- **comp-bg** (oklch(0.95 0.03 70)): Use for backgrounds.
|
|
27
|
+
- **comp-text** (oklch(0.25 0.04 30)): Use for text content.
|
|
28
|
+
- **comp-border** (oklch(0.25 0.04 30 / 0.15)): Use for borders and dividers.
|
|
29
|
+
- **comp-accent** (oklch(0.65 0.18 55)): Use for primary actions and accents.
|
|
30
|
+
- **comp-accent-text** (oklch(1.00 0 0)): Use for text content.
|
|
31
|
+
- **comp-muted** (oklch(0.50 0.04 30)): Use for secondary/muted content.
|
|
32
|
+
- **color-background** (oklch(0.96 0.03 70)): Use for backgrounds.
|
|
33
|
+
- **comp-accent-secondary** (oklch(0.60 0.15 40)): Use for primary actions and accents.
|
|
34
|
+
|
|
35
|
+
## Typography
|
|
36
|
+
|
|
37
|
+
Load fonts from Google Fonts: Italianno, Playfair Display, Space Mono. Use display=optional.
|
|
38
|
+
Primary body font: 'Playfair Display', serif.
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|