@jay-framework/aiditor 0.17.4 → 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.
- package/README.md +1 -5
- package/dist/actions/check-add-page-route.jay-action +12 -0
- package/dist/actions/check-add-page-route.jay-action.d.ts +10 -0
- package/dist/actions/check-page-add-page-brief.jay-action +9 -0
- package/dist/actions/check-page-add-page-brief.jay-action.d.ts +8 -0
- package/dist/actions/check-plugin-update.jay-action +14 -0
- package/dist/actions/check-plugin-update.jay-action.d.ts +13 -0
- package/dist/actions/ensure-project-plugin.jay-action +9 -0
- package/dist/actions/ensure-project-plugin.jay-action.d.ts +8 -0
- package/dist/actions/generate-add-page-brief-from-image.jay-action +20 -0
- package/dist/actions/generate-add-page-brief-from-image.jay-action.d.ts +20 -0
- package/dist/actions/get-plugin-setup-status.jay-action +9 -0
- package/dist/actions/get-plugin-setup-status.jay-action.d.ts +6 -0
- package/dist/actions/list-jay-plugins.jay-action +8 -0
- package/dist/actions/list-jay-plugins.jay-action.d.ts +5 -0
- package/dist/actions/list-plugin-contracts.jay-action +11 -0
- package/dist/actions/list-plugin-contracts.jay-action.d.ts +9 -0
- package/dist/actions/open-add-page-from-brief.jay-action +20 -0
- package/dist/actions/open-add-page-from-brief.jay-action.d.ts +18 -0
- package/dist/actions/reclassify-add-page-asset.jay-action +12 -0
- package/dist/actions/reclassify-add-page-asset.jay-action.d.ts +10 -0
- package/dist/actions/rerun-plugin-setup.jay-action +12 -0
- package/dist/actions/rerun-plugin-setup.jay-action.d.ts +10 -0
- package/dist/actions/save-add-page-draft.jay-action +10 -0
- package/dist/actions/save-add-page-draft.jay-action.d.ts +9 -0
- package/dist/actions/start-add-page-request.jay-action +12 -0
- package/dist/actions/start-add-page-request.jay-action.d.ts +10 -0
- package/dist/actions/submit-add-page.jay-action +21 -0
- package/dist/actions/submit-add-page.jay-action.d.ts +17 -0
- package/dist/actions/submit-task.jay-action +1 -0
- package/dist/actions/submit-task.jay-action.d.ts +1 -0
- package/dist/actions/sync-add-page-plugin-manifest.jay-action +11 -0
- package/dist/actions/sync-add-page-plugin-manifest.jay-action.d.ts +9 -0
- package/dist/actions/upload-add-page-asset.jay-action +13 -0
- package/dist/actions/upload-add-page-asset.jay-action.d.ts +13 -0
- package/dist/actions/write-plugin-source.jay-action +13 -0
- package/dist/actions/write-plugin-source.jay-action.d.ts +12 -0
- package/dist/add-page-agent/SKILL.md +79 -0
- package/dist/add-page-agent/system.md +47 -0
- package/dist/index.client.js +2695 -277
- package/dist/index.d.ts +797 -6
- package/dist/index.js +2682 -14
- package/dist/pages/aiditor/page.jay-html +603 -2
- package/dist/prompts/add-page-figma-brief-prompt.md +163 -0
- package/dist/prompts/add-page-figma-design-definitions-prompt.md +256 -0
- package/dist/prompts/add-page-figma-design-from-image-prompt.md +144 -0
- package/package.json +24 -7
- 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.
|
|
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.
|
|
46
|
-
"@jay-framework/stack-client-runtime": "^0.
|
|
47
|
-
"@jay-framework/stack-server-runtime": "^0.
|
|
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.
|
|
54
|
-
"@jay-framework/jay-cli": "^0.
|
|
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
|