@jay-framework/aiditor 0.17.3 → 0.18.0

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.
Files changed (48) hide show
  1. package/README.md +1 -5
  2. package/dist/actions/check-add-page-route.jay-action +12 -0
  3. package/dist/actions/check-add-page-route.jay-action.d.ts +10 -0
  4. package/dist/actions/check-page-add-page-brief.jay-action +9 -0
  5. package/dist/actions/check-page-add-page-brief.jay-action.d.ts +8 -0
  6. package/dist/actions/check-plugin-update.jay-action +14 -0
  7. package/dist/actions/check-plugin-update.jay-action.d.ts +13 -0
  8. package/dist/actions/ensure-project-plugin.jay-action +9 -0
  9. package/dist/actions/ensure-project-plugin.jay-action.d.ts +8 -0
  10. package/dist/actions/generate-add-page-brief-from-image.jay-action +20 -0
  11. package/dist/actions/generate-add-page-brief-from-image.jay-action.d.ts +20 -0
  12. package/dist/actions/get-plugin-setup-status.jay-action +9 -0
  13. package/dist/actions/get-plugin-setup-status.jay-action.d.ts +6 -0
  14. package/dist/actions/list-jay-plugins.jay-action +8 -0
  15. package/dist/actions/list-jay-plugins.jay-action.d.ts +5 -0
  16. package/dist/actions/list-plugin-contracts.jay-action +11 -0
  17. package/dist/actions/list-plugin-contracts.jay-action.d.ts +9 -0
  18. package/dist/actions/open-add-page-from-brief.jay-action +20 -0
  19. package/dist/actions/open-add-page-from-brief.jay-action.d.ts +18 -0
  20. package/dist/actions/reclassify-add-page-asset.jay-action +12 -0
  21. package/dist/actions/reclassify-add-page-asset.jay-action.d.ts +10 -0
  22. package/dist/actions/rerun-plugin-setup.jay-action +12 -0
  23. package/dist/actions/rerun-plugin-setup.jay-action.d.ts +10 -0
  24. package/dist/actions/save-add-page-draft.jay-action +10 -0
  25. package/dist/actions/save-add-page-draft.jay-action.d.ts +9 -0
  26. package/dist/actions/start-add-page-request.jay-action +12 -0
  27. package/dist/actions/start-add-page-request.jay-action.d.ts +10 -0
  28. package/dist/actions/submit-add-page.jay-action +21 -0
  29. package/dist/actions/submit-add-page.jay-action.d.ts +17 -0
  30. package/dist/actions/submit-task.jay-action +1 -0
  31. package/dist/actions/submit-task.jay-action.d.ts +1 -0
  32. package/dist/actions/sync-add-page-plugin-manifest.jay-action +11 -0
  33. package/dist/actions/sync-add-page-plugin-manifest.jay-action.d.ts +9 -0
  34. package/dist/actions/upload-add-page-asset.jay-action +13 -0
  35. package/dist/actions/upload-add-page-asset.jay-action.d.ts +13 -0
  36. package/dist/actions/write-plugin-source.jay-action +13 -0
  37. package/dist/actions/write-plugin-source.jay-action.d.ts +12 -0
  38. package/dist/add-page-agent/SKILL.md +79 -0
  39. package/dist/add-page-agent/system.md +47 -0
  40. package/dist/index.client.js +2696 -278
  41. package/dist/index.d.ts +797 -6
  42. package/dist/index.js +2682 -14
  43. package/dist/pages/aiditor/page.jay-html +603 -2
  44. package/dist/prompts/add-page-figma-brief-prompt.md +163 -0
  45. package/dist/prompts/add-page-figma-design-definitions-prompt.md +256 -0
  46. package/dist/prompts/add-page-figma-design-from-image-prompt.md +144 -0
  47. package/package.json +24 -7
  48. package/plugin.yaml +34 -0
@@ -0,0 +1,163 @@
1
+ # Add Page — Figma brief generator prompt
2
+
3
+ Copy everything below the line into **ChatGPT, Claude, Cursor**, or any vision-capable AI agent. Attach a **full-page Figma screenshot** (desktop; optional mobile frame as a second image).
4
+
5
+ Optionally add a few lines of project context before or after the prompt (target route, plugins, “match home header”, etc.).
6
+
7
+ If you have a separate **design definitions** frame (brand colors, typography, logo), run [add-page-figma-design-definitions-prompt.md](./add-page-figma-design-definitions-prompt.md) or [add-page-figma-design-from-image-prompt.md](./add-page-figma-design-from-image-prompt.md) first and paste that output at the top of **Design** in AIditor. For a page mock only (no token board), prefer the **design-from-image** prompt.
8
+
9
+ ---
10
+
11
+ You are helping me prepare an **AIditor Add Page brief** for a Jay Stack web project.
12
+
13
+ I will attach a screenshot of my **Figma web page design** (and optionally a mobile frame). Your job is **not** to write code. Produce two markdown briefs I can paste into AIditor’s Add Page composer: **Content** and **Design**.
14
+
15
+ ## What I may also provide (optional)
16
+
17
+ - Target URL route (e.g. `/pricing`, `/products/[slug]`)
18
+ - Page name / purpose in one sentence
19
+ - Plugins or headless contracts we must use (e.g. product search, cart)
20
+ - “Match existing site header/footer from home”
21
+ - Copy that must appear verbatim
22
+ - Links/CTAs and where they go
23
+ - Dynamic vs static route preference
24
+
25
+ If I did not provide something, **infer cautiously from the screenshot** and mark uncertain items with `(confirm with team)`.
26
+
27
+ ## Output format (strict)
28
+
29
+ Respond with **exactly** these sections, in order:
30
+
31
+ ### 1. Suggested page route
32
+
33
+ One line:
34
+
35
+ - **Route:** `/example` or `/products/[slug]`
36
+ - **Route kind:** `static` or `dynamic` (dynamic only if the page clearly needs a URL parameter)
37
+ - **One-line purpose:** what this page is for
38
+
39
+ ### 2. Content brief (paste into AIditor → Content)
40
+
41
+ Use this structure:
42
+
43
+ ```markdown
44
+ # <Page title>
45
+
46
+ ## Purpose
47
+
48
+ <1–3 sentences>
49
+
50
+ ## Route notes
51
+
52
+ - Target route: <same as above>
53
+ - Dynamic params: <if any, what they represent>
54
+
55
+ ## Copy & content blocks
56
+
57
+ <List every visible text block: hero, sections, cards, labels, buttons, legal, etc. Use exact wording from the design when readable; otherwise [placeholder: describe intent]>
58
+
59
+ ## Behavior & interactions
60
+
61
+ - Navigation: <header/footer links if visible>
62
+ - Buttons/CTAs: <label → destination or action>
63
+ - Forms: <fields, validation hints if visible>
64
+ - States: <empty, loading, error, sold out, etc. if implied>
65
+ - Responsive behavior: <what stacks, hides, or changes on mobile if a mobile frame was provided>
66
+
67
+ ## Plugins & contracts (Jay headless)
68
+
69
+ - If I named plugins/contracts: list each as:
70
+ `- Plugin: @jay-framework/<plugin-name> / contract: <contract-name>`
71
+ - If none were named: write `None identified — static/marketing page unless user specifies` OR list **suspected** integrations as `(possible — confirm)` only when the UI clearly needs backend data (product grid, cart, search, auth, etc.)
72
+
73
+ ## SEO / meta (if inferable)
74
+
75
+ - Title, description hints
76
+
77
+ ## Open questions
78
+
79
+ - Bullet list of anything ambiguous from the screenshot
80
+ ```
81
+
82
+ ### 3. Design brief (paste into AIditor → Design)
83
+
84
+ Use this structure:
85
+
86
+ ```markdown
87
+ ## Overall layout
88
+
89
+ - Page structure top → bottom (hero, sections, grid, footer)
90
+ - Max content width / alignment if visible
91
+ - Match existing site chrome: <yes/no — header/footer like home if I said so>
92
+
93
+ ## Typography
94
+
95
+ - Headings: <sizes/weight/style as seen>
96
+ - Body: <size, line-height if inferable>
97
+ - Notable text styles (labels, captions, prices)
98
+
99
+ ## Color & surfaces
100
+
101
+ - Backgrounds, text colors, borders, cards, buttons (use hex if you can estimate from the image; else descriptive)
102
+ - Primary / secondary CTA styling
103
+
104
+ ## Spacing & components
105
+
106
+ - Section padding rhythm
107
+ - Card/grid patterns (columns, gaps, radius, shadows)
108
+ - Images/media treatment (aspect ratios, full-bleed, etc.)
109
+
110
+ ## Breakpoints
111
+
112
+ - Desktop: <summary from main screenshot>
113
+ - Mobile: <summary if mobile image provided; else “assume stack vertically, full-width CTAs”>
114
+
115
+ ## Reference alignment
116
+
117
+ - Primary visual reference: `references/figma-desktop.png` (user will attach this file in AIditor)
118
+ - Secondary: <other frames if any>
119
+
120
+ ## Assets likely needed in the build (for AIditor Assets, not References)
121
+
122
+ List images/icons that should **ship on the page** (hero photos, logos, illustrations), not the whole mock:
123
+
124
+ - e.g. `assets/hero.jpg`, `assets/icon-check.svg`
125
+ Mark `(export from Figma)` where the user must supply files.
126
+
127
+ ## Accessibility notes (brief)
128
+
129
+ - Contrast concerns, focus states, alt text hints for key images
130
+ ```
131
+
132
+ ### 4. Checklist before I submit in AIditor
133
+
134
+ Short bullet list:
135
+
136
+ - [ ] Route does not already exist in our app (I will verify)
137
+ - [ ] I will paste Content and Design into the two composer fields
138
+ - [ ] I will attach the **same Figma screenshot(s)** under **References** (inspiration)
139
+ - [ ] I will upload real images/icons under **Assets** only if they should appear on the live page
140
+ - [ ] I filled in any `(confirm)` items
141
+
142
+ ## Rules
143
+
144
+ 1. **Separate concerns:** behavior/copy/plugins → Content; look-and-feel → Design.
145
+ 2. **Be specific:** prefer measurable notes (e.g. “3-column pricing cards, 24px gap”) over “modern and clean.”
146
+ 3. **Do not invent** plugin names, API shapes, or routes I did not imply — use `(confirm)` instead.
147
+ 4. **Do not output code** (no HTML, React, or Jay).
148
+ 5. If text in the screenshot is unreadable, use `[illegible]` and describe placement.
149
+ 6. Keep total output **under ~1200 words** unless the page is very large.
150
+
151
+ ## Attachments
152
+
153
+ [Figma screenshot(s) attached by user]
154
+
155
+ ---
156
+
157
+ ## Lite version (power users)
158
+
159
+ ```text
160
+ From this Figma screenshot, write two AIditor Add Page briefs (Content = behavior/copy/plugins; Design = layout/colors/type/spacing). Suggest route static/dynamic. Use Design log #14-style markdown, mark guesses (confirm), list references/figma-desktop.png and assets to export. No code.
161
+ ```
162
+
163
+ See [add-page-figma-brief-instructions.md](./add-page-figma-brief-instructions.md) for the full workflow. Design log: [14 - aiditor-add-page-request.md](../../../design-log/14%20-%20aiditor-add-page-request.md).
@@ -0,0 +1,256 @@
1
+ # Add Page — Figma design definitions → markdown prompt
2
+
3
+ Use this when you have a **Figma design definitions** frame (brand colors, typography scale, logo treatment) **in addition to** a page mock.
4
+
5
+ Typical frames look like: **Brand Colors** swatches with hex labels, **EN Brand Font** with family name and H1–H8 sizes, and a **logo / wordmark** sample.
6
+
7
+ **If the user only has a page mock or reference screenshot (no token board),** use [add-page-figma-design-from-image-prompt.md](./add-page-figma-design-from-image-prompt.md) instead — it infers design tokens from visible UI.
8
+
9
+ **Related docs**
10
+
11
+ - Page mock → brief: [add-page-figma-brief-prompt.md](./add-page-figma-brief-prompt.md)
12
+ - Full workflow: [add-page-figma-brief-instructions.md](./add-page-figma-brief-instructions.md)
13
+
14
+ Copy everything below the line into your AI agent. Attach:
15
+
16
+ 1. **Design definitions** screenshot (colors + type + logo frame), and
17
+ 2. **Page mock** screenshot (optional but recommended — run the page prompt after, or combine both images in one message).
18
+
19
+ ---
20
+
21
+ You are converting a **Figma design definitions** board into markdown sections for **AIditor Add Page**.
22
+
23
+ AIditor uses two composer fields:
24
+
25
+ | Field | What belongs here |
26
+ | -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
27
+ | **Design** (`design.md`) | Tokens (colors, fonts, type scale), logo usage, surfaces, spacing — **everything from the definitions board** |
28
+ | **Content** (`content.md`) | Page copy, CTAs, plugins, behavior — **not** the definitions board (unless the board specifies brand voice rules) |
29
+
30
+ Your job: read the definitions image and output markdown that the **Add Page implementation agent** can follow. **Do not write code.**
31
+
32
+ ## Input you receive
33
+
34
+ - Screenshot(s) of Figma **design definitions** (brand colors, typography, logo).
35
+ - Optional: short note — e.g. “Brand INTIMA”, “reuse on all marketing pages”, “match existing Jay home header”.
36
+
37
+ ## Conversion rules (Figma → Add Page markdown)
38
+
39
+ ### 1. Brand colors → `## Design tokens — color`
40
+
41
+ - Extract **every labeled hex** (e.g. under swatches). Use the **printed hex code**, not a guess from pixel color.
42
+ - If a swatch color and its label disagree, output the **label hex** and add `(swatch appears different — verify in Figma)`.
43
+ - Name tokens semantically for this brand (not `Color 1`):
44
+
45
+ | Figma label / role | Markdown token name |
46
+ | ---------------------------- | ------------------------------------- |
47
+ | Tallest / primary brand pink | `brand-primary` or `color-brand-rose` |
48
+ | Secondary pink | `brand-secondary` |
49
+ | Light background pink | `background-page` or `surface-canvas` |
50
+ | Accent / deep accent | `accent` or `cta` |
51
+
52
+ - Format as a **table** plus optional CSS custom properties block:
53
+
54
+ ````markdown
55
+ ## Design tokens — color
56
+
57
+ | Token | Hex | Use on page |
58
+ | ----------------- | ------- | -------------------------------------------- |
59
+ | `brand-primary` | #EAA3B1 | Logo, key headings |
60
+ | `brand-secondary` | #D68D9A | Secondary emphasis |
61
+ | `background-page` | #FFF4F6 | Page background |
62
+ | `accent` | #F9CCD3 | Accents, borders, highlights (verify swatch) |
63
+
64
+ ```css
65
+ /* Suggested CSS variables for implementation agent */
66
+ --color-brand-primary: #eaa3b1;
67
+ --color-brand-secondary: #d68d9a;
68
+ --color-background-page: #fff4f6;
69
+ --color-accent: #f9ccd3;
70
+ ```
71
+ ````
72
+
73
+ ````
74
+
75
+ ### 2. Typography → `## Design tokens — typography`
76
+
77
+ - Extract **font family** exactly as shown (e.g. **Didot**).
78
+ - List **weights** shown (Regular, Bold, etc.).
79
+ - Copy the **type scale table** (H1–H8 and px values) verbatim when readable.
80
+ - Map each level to **semantic usage** on a web page (agent needs intent, not only numbers):
81
+
82
+ ```markdown
83
+ ## Design tokens — typography
84
+
85
+ - **Font family (brand):** Didot, serif fallback stack: Didot, "Didot LT STD", "Bodoni MT", Georgia, serif
86
+ - **Weights:** Regular 400, Bold 700 (confirm in Figma if other weights exist)
87
+
88
+ | Level | Size | Weight | Typical use |
89
+ | --- | --- | --- | --- |
90
+ | H1 | 108px | Regular | Hero display (desktop; scale down on mobile) |
91
+ | H2 | 88px | Regular | Section titles |
92
+ | H3 | 68px | Regular | Subsection titles |
93
+ | H4 | 58px | Regular | Card titles |
94
+ | H5 | 48px | Regular | Feature headings |
95
+ | H6 | 38px | Regular | Labels / large UI text |
96
+ | H7 | 28px | Regular | Body large / nav |
97
+ | H8 | 14px | Regular | Captions, legal, meta |
98
+
99
+ - **Character set note:** Brand uses full alphanumeric + symbols as in Figma sample.
100
+ - **Responsive:** Scale display sizes (H1–H4) down ~40–60% on mobile unless page brief says otherwise.
101
+ ````
102
+
103
+ - If the board is **English-only** (“EN Brand Font”), note: `Other locales: (not defined in this board)`.
104
+
105
+ ### 3. Logo / wordmark → `## Brand mark`
106
+
107
+ - Describe logo **text**, **color** (hex from definitions), **case** (e.g. INTIMA all caps).
108
+ - Say whether the logo is **text-only** or includes a mark/icon.
109
+ - Specify implementation hint for Add Page agent:
110
+
111
+ ```markdown
112
+ ## Brand mark
113
+
114
+ - Wordmark: **INTIMA** — all caps, Didot, color `#EAA3B1` (or `brand-primary`)
115
+ - Background behind mark in board: `#FFF4F6` (`background-page`) — use as page canvas, not necessarily behind logo on every page
116
+ - **Asset:** If user exports logo as SVG/PNG → `assets/logo-intima.svg` (user uploads in AIditor Assets). If text-only, agent may render as styled text per tokens above.
117
+ ```
118
+
119
+ ### 4. What does NOT go in Design from definitions alone
120
+
121
+ Do **not** invent page layout, sections, or CTAs from a definitions-only board. Those come from the **page mock** brief ([add-page-figma-brief-prompt.md](./add-page-figma-brief-prompt.md)).
122
+
123
+ Put in **Content** only if the board explicitly states:
124
+
125
+ - Brand voice / tone rules
126
+ - Required legal line
127
+ - Link domains or social handles
128
+
129
+ Otherwise Content stays minimal:
130
+
131
+ ```markdown
132
+ # <Page name> (fill when combining with page mock)
133
+
134
+ ## Brand
135
+
136
+ - Apply design tokens from Design brief (INTIMA brand definitions).
137
+ - No extra plugins unless specified separately.
138
+ ```
139
+
140
+ ## Output format (strict)
141
+
142
+ Produce **one block** the user can paste into AIditor **Design** (and a tiny **Content** stub if definitions-only):
143
+
144
+ ### Design brief — paste into AIditor → Design
145
+
146
+ ```markdown
147
+ # Brand design system — <Brand name>
148
+
149
+ > Source: Figma design definitions board. Apply to this page and match existing site chrome if noted below.
150
+
151
+ ## Design tokens — color
152
+
153
+ <table>
154
+
155
+ ## Design tokens — typography
156
+
157
+ <table>
158
+
159
+ ## Brand mark
160
+
161
+ <logo rules>
162
+
163
+ ## Implementation notes for Jay / AIditor agent
164
+
165
+ - Use tokens above in page `.jay-html` styles (inline or project CSS).
166
+ - Prefer CSS variables for colors; use exact px sizes for desktop, clamp or media queries for mobile.
167
+ - If project already has global styles, **merge** — do not duplicate conflicting font imports.
168
+ - Logo: <text-only | file assets/logo-...>
169
+
170
+ ## Open questions
171
+
172
+ - <anything illegible or ambiguous>
173
+ ```
174
+
175
+ ### Content stub (only if definitions-only, no page mock yet)
176
+
177
+ ```markdown
178
+ # Page TBD
179
+
180
+ ## Brand
181
+
182
+ - Use Design brief tokens for <Brand name>.
183
+ - Page structure, copy, and CTAs: add when page mock brief is ready.
184
+ ```
185
+
186
+ ### Checklist for user
187
+
188
+ - [ ] Pasted **Design** section into AIditor Design field (append to page design notes if combined)
189
+ - [ ] Attached definitions screenshot as **Reference** (`references/figma-design-definitions.png`)
190
+ - [ ] Exported logo/icons as **Assets** if they are image files (not text-only wordmark)
191
+ - [ ] Combined with page mock brief for layout and copy
192
+
193
+ ## Rules
194
+
195
+ 1. **Hex from labels** — always prefer printed `#RRGGBB` under swatches.
196
+ 2. **No invented tokens** — if a value is unreadable, write `[illegible]` and ask user to confirm.
197
+ 3. **No code files** — only markdown tables and optional CSS variable suggestions inside fenced blocks.
198
+ 4. **Separate brand vs page** — definitions → Design; page behavior → Content (from page prompt).
199
+ 5. Keep definitions output **under ~600 words** unless the board has many extra sections (spacing grid, shadows, components).
200
+
201
+ ## Example (INTIMA-style board)
202
+
203
+ **Input:** Brand frame with INTIMA wordmark, Didot H1–H8 scale, four pink swatches (#EAA3B1, #D68D9A, #FFF4F6, #F9CCD3).
204
+
205
+ **Output fragment (Design brief):**
206
+
207
+ ```markdown
208
+ # Brand design system — INTIMA
209
+
210
+ ## Design tokens — color
211
+
212
+ | Token | Hex | Use on page |
213
+ | ----------------- | ------- | -------------------------------------------- |
214
+ | `brand-primary` | #EAA3B1 | Wordmark, primary brand elements |
215
+ | `brand-secondary` | #D68D9A | Secondary text and UI |
216
+ | `background-page` | #FFF4F6 | Page canvas / section backgrounds |
217
+ | `accent` | #F9CCD3 | Highlights (verify swatch vs label in Figma) |
218
+
219
+ ## Design tokens — typography
220
+
221
+ - **Font family:** Didot (serif), with system serif fallbacks
222
+ - **Weights:** Regular, Bold
223
+
224
+ | Level | Size | Typical use |
225
+ | ----- | ----- | -------------------- |
226
+ | H1 | 108px | Hero display |
227
+ | H2 | 88px | Major section titles |
228
+ | H3 | 68px | Subsections |
229
+ | H4 | 58px | Cards |
230
+ | H5 | 48px | Features |
231
+ | H6 | 38px | Large UI |
232
+ | H7 | 28px | Body emphasis |
233
+ | H8 | 14px | Captions / meta |
234
+
235
+ ## Brand mark
236
+
237
+ - **INTIMA** — uppercase, Didot, color `brand-primary` (#EAA3B1)
238
+ - Canvas in board: `background-page` (#FFF4F6)
239
+
240
+ ## Implementation notes for Jay / AIditor agent
241
+
242
+ - Apply tokens to new page; scale H1–H4 down on mobile.
243
+ - Wordmark may be HTML text styled with Didot + `brand-primary` unless user provides `assets/logo-intima.svg`.
244
+ ```
245
+
246
+ ---
247
+
248
+ ## Combining with a page mock
249
+
250
+ **Recommended order**
251
+
252
+ 1. Run **this prompt** with the definitions screenshot → paste into **Design** (top of field).
253
+ 2. Run [add-page-figma-brief-prompt.md](./add-page-figma-brief-prompt.md) with the page screenshot → append page layout/spacing to **Design**; put copy/CTAs in **Content**.
254
+ 3. In AIditor: attach **both** PNGs as **References**; export any raster logos/backgrounds as **Assets**.
255
+
256
+ Or send **both images in one message** with this prompt first, then: “Now also produce Content + page-specific Design sections from the second image (page mock).”
@@ -0,0 +1,144 @@
1
+ # Add Page — Design brief from image (definitions board or reference mock)
2
+
3
+ Use this when you want **Design** markdown for AIditor Add Page from **any** screenshot:
4
+
5
+ - A formal **Figma design definitions** board (colors, typography scale, logo), **or**
6
+ - A **page mock**, landing page, or reference UI where tokens must be **inferred** from the visible design
7
+
8
+ **Related docs**
9
+
10
+ - Page mock → Content brief: [add-page-figma-brief-prompt.md](./add-page-figma-brief-prompt.md)
11
+ - Formal definitions only (external workflow): [add-page-figma-design-definitions-prompt.md](./add-page-figma-design-definitions-prompt.md)
12
+ - Full workflow: [add-page-figma-brief-instructions.md](./add-page-figma-brief-instructions.md)
13
+
14
+ Copy everything below the line into your AI agent, or use **Fill from image** on the Design section in AIditor (Design log #17).
15
+
16
+ Attach **one or more images** (definitions board, page/reference mock, desktop + mobile, etc.). Optional short note in chat or AIditor **Context notes**: brand name, “match home header”, which image is which (`Image 1 = desktop`, `Image 2 = brand colors`).
17
+
18
+ ---
19
+
20
+ You are producing **Design** markdown for **AIditor Add Page**. **Do not write code.** **Do not** write page copy, CTAs, or plugin lists — those belong in Content.
21
+
22
+ ## Step 1 — Detect input mode
23
+
24
+ Look at the attached image and choose **one** mode:
25
+
26
+ | Mode | Image looks like | Your job |
27
+ | ----------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
28
+ | **A — Definitions board** | Labeled color swatches, typography scale table (H1–H8), logo specimen, “Brand Colors”, “Brand Font” | Extract **labeled tokens** (hex from printed labels, type scale verbatim) |
29
+ | **B — Reference / page mock** | Full webpage, app screen, marketing layout, Dribbble shot — **no** token board | **Infer** a practical design brief from visible UI |
30
+
31
+ If both appear in one image (definitions + mock), extract tokens from the definitions area **and** layout notes from the mock area.
32
+
33
+ ## Mode A — Definitions board
34
+
35
+ Follow the same rules as [add-page-figma-design-definitions-prompt.md](./add-page-figma-design-definitions-prompt.md):
36
+
37
+ 1. **Colors** — every labeled `#RRGGBB`; semantic token names; table + optional CSS variables block.
38
+ 2. **Typography** — font family as shown; weights; H1–H8 (or equivalent) table with px and typical web use.
39
+ 3. **Brand mark** — wordmark/logo rules, colors, asset hints.
40
+ 4. Do **not** invent page sections or CTAs from a definitions-only board.
41
+
42
+ ## Mode B — Reference / page mock (infer design system)
43
+
44
+ When there is **no** token board, build the best design brief you can from the screenshot:
45
+
46
+ ### Colors
47
+
48
+ - Identify **dominant** background, primary text, secondary/muted text, primary CTA, secondary CTA, borders, card surfaces.
49
+ - Output hex **estimates** from the image; suffix with `(estimated from screenshot)` unless a hex label is visible.
50
+ - Prefer a small semantic palette (5–8 tokens), not every pixel color.
51
+
52
+ ### Typography
53
+
54
+ - Describe **hierarchy**: hero/display, H1–H3 equivalents, body, captions — relative size, weight, serif vs sans.
55
+ - Name a font family **only** if clearly identifiable (e.g. distinctive geometric sans) or shown in the design; otherwise `sans-serif (similar to modern grotesk — confirm)`.
56
+ - Do **not** fabricate a full H1–H8 px table unless the image shows a type scale.
57
+
58
+ ### Layout & components
59
+
60
+ - Page structure **top → bottom** (header, hero, sections, footer).
61
+ - Grid patterns (columns, gaps), max content width, alignment.
62
+ - Buttons, cards, inputs: shape (radius), fill vs outline, shadow depth.
63
+ - Images/media: aspect ratios, full-bleed vs contained.
64
+
65
+ ### Spacing
66
+
67
+ - Section padding rhythm, card gaps, header height — use px estimates where helpful.
68
+
69
+ ### Breakpoints
70
+
71
+ - If a mobile frame is visible, summarize differences.
72
+ - If desktop only: note “mobile: stack sections, full-width CTAs unless specified elsewhere”.
73
+
74
+ ### Brand mark
75
+
76
+ - If logo/wordmark visible: describe treatment and color; suggest `assets/logo.svg` only if it is clearly a raster/logo asset, not plain text.
77
+
78
+ ### Honesty rules for Mode B
79
+
80
+ - Mark inferred values `(estimated — confirm)`.
81
+ - Use `[illegible]` for unreadable text.
82
+ - Do not invent plugin names, routes, or API behavior.
83
+
84
+ ## Output format (strict)
85
+
86
+ Respond with **one markdown document** for AIditor **Design** only:
87
+
88
+ ```markdown
89
+ # Design brief — <page or brand name if inferable>
90
+
91
+ > Source: <definitions board | reference mock>. Mode: <A | B>.
92
+
93
+ ## Design tokens — color
94
+
95
+ <table and/or list>
96
+
97
+ ## Design tokens — typography
98
+
99
+ <family, weights, hierarchy table — no fake scale if Mode B>
100
+
101
+ ## Layout & components
102
+
103
+ <structure, grids, buttons, cards, media>
104
+
105
+ ## Spacing & surfaces
106
+
107
+ <section rhythm, shadows, radius>
108
+
109
+ ## Breakpoints
110
+
111
+ <desktop / mobile notes>
112
+
113
+ ## Brand mark
114
+
115
+ <if applicable>
116
+
117
+ ## Reference alignment
118
+
119
+ - Primary visual reference: user will attach this screenshot in AIditor References
120
+ - Assets likely needed: <list shippable images/icons, not the whole mock>
121
+
122
+ ## Implementation notes for Jay / AIditor agent
123
+
124
+ - Apply tokens in `.jay-html` styles; prefer CSS variables for colors from Mode A
125
+ - Merge with existing project globals if user noted “match home”
126
+ - Mode B tokens are estimates — refine during implementation
127
+
128
+ ## Open questions
129
+
130
+ - <ambiguities>
131
+ ```
132
+
133
+ Keep output **under ~800 words** for Mode B, **~600** for Mode A unless the board is large.
134
+
135
+ ## Rules
136
+
137
+ 1. **Design only** — no Content brief, no code files.
138
+ 2. **Mode A:** hex from **labels**, not pixel picking when labels exist.
139
+ 3. **Mode B:** infer cautiously; label estimates clearly.
140
+ 4. **No invented plugins or routes.**
141
+
142
+ ## Attachments
143
+
144
+ [Image attached by user]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jay-framework/aiditor",
3
- "version": "0.17.3",
3
+ "version": "0.18.0",
4
4
  "type": "module",
5
5
  "description": "AIditor — visual AI-driven code editor plugin for Jay Framework",
6
6
  "main": "dist/index.js",
@@ -25,6 +25,23 @@
25
25
  "./list-freezes.jay-action": "./dist/actions/list-freezes.jay-action",
26
26
  "./submit-task.jay-action": "./dist/actions/submit-task.jay-action",
27
27
  "./read-file.jay-action": "./dist/actions/read-file.jay-action",
28
+ "./check-add-page-route.jay-action": "./dist/actions/check-add-page-route.jay-action",
29
+ "./start-add-page-request.jay-action": "./dist/actions/start-add-page-request.jay-action",
30
+ "./save-add-page-draft.jay-action": "./dist/actions/save-add-page-draft.jay-action",
31
+ "./upload-add-page-asset.jay-action": "./dist/actions/upload-add-page-asset.jay-action",
32
+ "./reclassify-add-page-asset.jay-action": "./dist/actions/reclassify-add-page-asset.jay-action",
33
+ "./submit-add-page.jay-action": "./dist/actions/submit-add-page.jay-action",
34
+ "./check-page-add-page-brief.jay-action": "./dist/actions/check-page-add-page-brief.jay-action",
35
+ "./open-add-page-from-brief.jay-action": "./dist/actions/open-add-page-from-brief.jay-action",
36
+ "./generate-add-page-brief-from-image.jay-action": "./dist/actions/generate-add-page-brief-from-image.jay-action",
37
+ "./check-plugin-update.jay-action": "./dist/actions/check-plugin-update.jay-action",
38
+ "./list-jay-plugins.jay-action": "./dist/actions/list-jay-plugins.jay-action",
39
+ "./list-plugin-contracts.jay-action": "./dist/actions/list-plugin-contracts.jay-action",
40
+ "./ensure-project-plugin.jay-action": "./dist/actions/ensure-project-plugin.jay-action",
41
+ "./get-plugin-setup-status.jay-action": "./dist/actions/get-plugin-setup-status.jay-action",
42
+ "./rerun-plugin-setup.jay-action": "./dist/actions/rerun-plugin-setup.jay-action",
43
+ "./sync-add-page-plugin-manifest.jay-action": "./dist/actions/sync-add-page-plugin-manifest.jay-action",
44
+ "./write-plugin-source.jay-action": "./dist/actions/write-plugin-source.jay-action",
28
45
  "./dist/pages/aiditor/page.jay-html": "./dist/pages/aiditor/page.jay-html",
29
46
  "./dist/pages/aiditor/page.css": "./dist/pages/aiditor/page.css"
30
47
  },
@@ -34,7 +51,7 @@
34
51
  "validate": "jay-stack-cli validate-plugin",
35
52
  "build:client": "vite build",
36
53
  "build:server": "vite build --ssr",
37
- "build:copy-assets": "mkdir -p dist/actions dist/pages/aiditor && cp lib/*.jay-contract* dist/ && cp lib/actions/*.jay-action* dist/actions/ && cp lib/pages/aiditor/page.jay-html dist/pages/aiditor/ && cp lib/pages/aiditor/page.css dist/pages/aiditor/ && cp lib/pages/aiditor/page.jay-contract* dist/pages/aiditor/",
54
+ "build:copy-assets": "mkdir -p dist/actions dist/pages/aiditor dist/add-page-agent dist/prompts && cp lib/*.jay-contract* dist/ && cp lib/actions/*.jay-action* dist/actions/ && cp lib/pages/aiditor/page.jay-html dist/pages/aiditor/ && cp lib/pages/aiditor/page.css dist/pages/aiditor/ && cp lib/pages/aiditor/page.jay-contract* dist/pages/aiditor/ && cp add-page-agent/*.md dist/add-page-agent/ && cp ../../docs/add-page-figma-brief-prompt.md ../../docs/add-page-figma-design-definitions-prompt.md ../../docs/add-page-figma-design-from-image-prompt.md dist/prompts/",
38
55
  "build:types": "tsup lib/index.ts lib/index.client.ts --dts-only --format esm",
39
56
  "build:check-types": "tsc",
40
57
  "clean": "rimraf dist",
@@ -42,16 +59,16 @@
42
59
  },
43
60
  "dependencies": {
44
61
  "@anthropic-ai/claude-agent-sdk": "0.2.119",
45
- "@jay-framework/fullstack-component": "^0.17.3",
46
- "@jay-framework/stack-client-runtime": "^0.17.3",
47
- "@jay-framework/stack-server-runtime": "^0.17.3",
62
+ "@jay-framework/fullstack-component": "^0.18.0",
63
+ "@jay-framework/stack-client-runtime": "^0.18.0",
64
+ "@jay-framework/stack-server-runtime": "^0.18.0",
48
65
  "busboy": "^1.6.0",
49
66
  "html2canvas": "^1.4.1",
50
67
  "zod": "^4.3.6"
51
68
  },
52
69
  "devDependencies": {
53
- "@jay-framework/compiler-jay-stack": "^0.17.3",
54
- "@jay-framework/jay-cli": "^0.17.3",
70
+ "@jay-framework/compiler-jay-stack": "^0.18.0",
71
+ "@jay-framework/jay-cli": "^0.18.0",
55
72
  "@types/busboy": "^1",
56
73
  "rimraf": "^5.0.5",
57
74
  "tsup": "^8.5.1",
package/plugin.yaml CHANGED
@@ -19,6 +19,40 @@ actions:
19
19
  action: submit-task.jay-action
20
20
  - name: readFileAction
21
21
  action: read-file.jay-action
22
+ - name: checkAddPageRouteAction
23
+ action: check-add-page-route.jay-action
24
+ - name: startAddPageRequestAction
25
+ action: start-add-page-request.jay-action
26
+ - name: saveAddPageDraftAction
27
+ action: save-add-page-draft.jay-action
28
+ - name: uploadAddPageAssetAction
29
+ action: upload-add-page-asset.jay-action
30
+ - name: reclassifyAddPageAssetAction
31
+ action: reclassify-add-page-asset.jay-action
32
+ - name: submitAddPageAction
33
+ action: submit-add-page.jay-action
34
+ - name: checkPageAddPageBriefAction
35
+ action: check-page-add-page-brief.jay-action
36
+ - name: openAddPageFromBriefAction
37
+ action: open-add-page-from-brief.jay-action
38
+ - name: generateAddPageBriefFromImageAction
39
+ action: generate-add-page-brief-from-image.jay-action
40
+ - name: checkPluginUpdateAction
41
+ action: check-plugin-update.jay-action
42
+ - name: listJayPluginsAction
43
+ action: list-jay-plugins.jay-action
44
+ - name: listPluginContractsAction
45
+ action: list-plugin-contracts.jay-action
46
+ - name: ensureProjectPluginAction
47
+ action: ensure-project-plugin.jay-action
48
+ - name: getPluginSetupStatusAction
49
+ action: get-plugin-setup-status.jay-action
50
+ - name: rerunPluginSetupAction
51
+ action: rerun-plugin-setup.jay-action
52
+ - name: syncAddPagePluginManifestAction
53
+ action: sync-add-page-plugin-manifest.jay-action
54
+ - name: writePluginSourceAction
55
+ action: write-plugin-source.jay-action
22
56
 
23
57
  routes:
24
58
  - path: /aiditor