@hegemonart/get-design-done 1.13.3 → 1.14.1
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/.claude-plugin/marketplace.json +2 -2
- package/.claude-plugin/plugin.json +1 -1
- package/CHANGELOG.md +52 -7
- package/README.md +135 -40
- package/agents/design-component-generator.md +221 -0
- package/agents/design-context-builder.md +80 -3
- package/agents/design-paper-writer.md +131 -0
- package/agents/design-pencil-writer.md +99 -0
- package/agents/design-research-synthesizer.md +13 -1
- package/agents/design-verifier.md +51 -0
- package/connections/21st-dev.md +98 -0
- package/connections/connections.md +41 -11
- package/connections/magic-patterns.md +105 -0
- package/connections/paper-design.md +137 -0
- package/connections/pencil-dev.md +88 -0
- package/hooks/budget-enforcer.js +13 -2
- package/hooks/gdd-read-injection-scanner.js +4 -9
- package/hooks/update-check.sh +13 -0
- package/package.json +1 -1
- package/reference/ai-native-tool-interface.md +102 -0
- package/scripts/aggregate-agent-metrics.js +20 -0
- package/scripts/build-intel.cjs +13 -5
- package/scripts/injection-patterns.cjs +17 -0
- package/scripts/run-injection-scanner-ci.cjs +1 -10
- package/scripts/tests/test-authority-watcher-diff.sh +5 -1
- package/skills/check-update/SKILL.md +2 -0
- package/skills/explore/SKILL.md +53 -1
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# 21st.dev Magic MCP — Connection Specification
|
|
2
|
+
|
|
3
|
+
This file is the connection specification for the 21st.dev Magic MCP within the get-design-done pipeline. 21st.dev is a component-generator tool — it searches a marketplace of pre-built components and generates new ones via AI. See `connections/connections.md` for the full connection index and capability matrix.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Setup
|
|
8
|
+
|
|
9
|
+
### Prerequisites
|
|
10
|
+
- Node.js ≥ 18
|
|
11
|
+
- A 21st.dev account and API key at [21st.dev](https://21st.dev)
|
|
12
|
+
- `TWENTY_FIRST_API_KEY` environment variable set
|
|
13
|
+
|
|
14
|
+
### Install command (Claude Code)
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npx @21st-dev/magic@latest init
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
This sets up the local MCP server. Add to Claude Code settings:
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"mcpServers": {
|
|
24
|
+
"21st-magic": {
|
|
25
|
+
"command": "npx",
|
|
26
|
+
"args": ["@21st-dev/magic@latest"],
|
|
27
|
+
"env": { "TWENTY_FIRST_API_KEY": "${TWENTY_FIRST_API_KEY}" }
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Verification
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
ToolSearch({ query: "mcp__21st", max_results: 5 })
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Expect non-empty results including `21st_magic_component_builder` or `21st_magic_component_search`. If empty, re-run `npx @21st-dev/magic@latest init` and restart Claude Code session.
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Probe Pattern
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
ToolSearch({ query: "mcp__21st", max_results: 5 })
|
|
47
|
+
→ Empty → 21st-dev: not_configured (skip all 21st.dev steps)
|
|
48
|
+
→ Non-empty → 21st-dev: available
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Write result to STATE.md `<connections>`: `21st-dev: <status>`
|
|
52
|
+
|
|
53
|
+
Fallback: when `not_configured`, the explore stage skips the prior-art gate and proceeds with custom component generation.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## 21st.dev Magic MCP Tools
|
|
58
|
+
|
|
59
|
+
| Tool | Stage | Purpose |
|
|
60
|
+
|------|-------|---------|
|
|
61
|
+
| `21st_magic_component_search` | explore | Semantic search of marketplace; returns top N matching components with fit scores |
|
|
62
|
+
| `21st_magic_component_builder` | design | Generate component with multiple variations from a description |
|
|
63
|
+
| `21st_magic_component_get` | design | Fetch full source code for a specific marketplace component |
|
|
64
|
+
| `svgl_get_brand_logo` | explore + design | Fetch brand logo/icon SVG by brand name (SVGL integration) |
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## Pipeline Integration
|
|
69
|
+
|
|
70
|
+
| Stage | What 21st.dev provides |
|
|
71
|
+
|-------|------------------------|
|
|
72
|
+
| explore | **Prior-art gate**: `21st_magic_component_search` before any greenfield build; top-3 in `<prior-art>` block in DESIGN.md |
|
|
73
|
+
| explore | **Brand assets**: `svgl_get_brand_logo` for logo/icon lookups by brand name |
|
|
74
|
+
| design | `21st_magic_component_builder` for component scaffolding via `design-component-generator` agent |
|
|
75
|
+
|
|
76
|
+
### Prior-Art Gate Logic
|
|
77
|
+
|
|
78
|
+
Before building any custom component:
|
|
79
|
+
1. `21st_magic_component_search(component_description, limit: 3)`
|
|
80
|
+
2. Evaluate top result fit score (0–100):
|
|
81
|
+
- **≥ 80%**: surface as `<prior-art>` block in DESIGN.md; recommend adoption
|
|
82
|
+
- **< 80%**: note top candidate for reference; proceed with custom build
|
|
83
|
+
3. Design-executor confirms adoption with user before calling `21st_magic_component_get`
|
|
84
|
+
|
|
85
|
+
This is a **decision gate** — the agent surfaces candidates, the user/executor decides. No automatic code insertion.
|
|
86
|
+
|
|
87
|
+
### SVGL Brand Logo Integration
|
|
88
|
+
|
|
89
|
+
`svgl_get_brand_logo(brand_name, format: "svg")` returns SVG markup for major brands (GitHub, Vercel, Stripe, etc.). Wire into explore stage for brand asset lookups — eliminates manual SVG hunting.
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## Fallback Behavior
|
|
94
|
+
|
|
95
|
+
When `21st-dev: not_configured`:
|
|
96
|
+
- Prior-art gate is skipped. Print: `21st.dev not configured — prior-art gate skipped.`
|
|
97
|
+
- Custom component generation proceeds normally.
|
|
98
|
+
- Brand logo lookups fall back to icon library references in `reference/iconography.md` (Phase 15).
|
|
@@ -16,6 +16,10 @@ This directory contains connection specifications for external tools and MCPs th
|
|
|
16
16
|
| Graphify | Active | [`connections/graphify.md`](connections/graphify.md) | CLI: `graphify`; `gsd-tools graphify *` |
|
|
17
17
|
| Pinterest | Active | [`connections/pinterest.md`](connections/pinterest.md) | `mcp__mcp-pinterest__*` tools (ToolSearch-only probe; headless scraping, no API key) |
|
|
18
18
|
| Claude Design | Active | [`connections/claude-design.md`](connections/claude-design.md) | No MCP — bundle file probe; enables `/gdd:handoff` pipeline + bidirectional write-back via figma-writer |
|
|
19
|
+
| paper.design | Active | [`connections/paper-design.md`](connections/paper-design.md) | Uses `mcp__paper-design__*` tools; free tier: 100 calls/week |
|
|
20
|
+
| pencil.dev | Active | [`connections/pencil-dev.md`](connections/pencil-dev.md) | File-based; `.pen` YAML specs; git-tracked; no MCP |
|
|
21
|
+
| 21st.dev Magic MCP | Active | [`connections/21st-dev.md`](connections/21st-dev.md) | Uses `mcp__21st*` tools; `TWENTY_FIRST_API_KEY` required |
|
|
22
|
+
| Magic Patterns | Active | [`connections/magic-patterns.md`](connections/magic-patterns.md) | Claude connector (`mcp__magic_patterns*`) + API key fallback |
|
|
19
23
|
|
|
20
24
|
---
|
|
21
25
|
|
|
@@ -23,16 +27,20 @@ This directory contains connection specifications for external tools and MCPs th
|
|
|
23
27
|
|
|
24
28
|
Each cell describes what the connection contributes at that pipeline stage, or `—` if it is not used.
|
|
25
29
|
|
|
26
|
-
| Connection | scan | discover | plan | design | verify |
|
|
27
|
-
|
|
28
|
-
| Figma | token augmentation via `get_variable_defs` (CONN-03) | decisions pre-populate via `get_variable_defs` (CONN-04) | — | write tokens/annotations/Code Connect via `use_figma` (FWR-01..04) | — |
|
|
29
|
-
| Refero | — | reference search via `mcp__refero__search`; fallback → awesome-design-md (CONN-05) | — | — | — |
|
|
30
|
-
| Preview | — | — | — | — | screenshots for `? VISUAL` checks (VIS-02) |
|
|
31
|
-
| Storybook | — | component inventory (STB-01) | change-risk via story count (STB-02) | `.stories.tsx` stub (STB-03) | a11y per story (STB-02) |
|
|
32
|
-
| Chromatic | — | — | change-risk scoping (CHR-02) | — | visual delta narration (CHR-01) |
|
|
33
|
-
| Graphify | — | — | dependency scoping (GRF-03) | — | orphan detection (GRF-04) |
|
|
34
|
-
| Pinterest | probe only | visual reference search via `pinterest_search`; fallback → Refero → awesome-design-md | — | — | — |
|
|
35
|
-
| Claude Design | bundle probe → `claude_design: available` | synthesizer handoff mode — parses bundle → D-XX decisions; discussant `--from-handoff` confirms | — (skipped in handoff) | — (skipped in handoff) | Handoff Faithfulness section; bidirectional write-back via figma-writer `implementation-status` mode |
|
|
30
|
+
| Connection | scan | discover | plan | design | verify | canvas | generator |
|
|
31
|
+
|-----------|------|----------|------|--------|--------|--------|-----------|
|
|
32
|
+
| Figma | token augmentation via `get_variable_defs` (CONN-03) | decisions pre-populate via `get_variable_defs` (CONN-04) | — | write tokens/annotations/Code Connect via `use_figma` (FWR-01..04) | — | — | — |
|
|
33
|
+
| Refero | — | reference search via `mcp__refero__search`; fallback → awesome-design-md (CONN-05) | — | — | — | — | — |
|
|
34
|
+
| Preview | — | — | — | — | screenshots for `? VISUAL` checks (VIS-02) | — | — |
|
|
35
|
+
| Storybook | — | component inventory (STB-01) | change-risk via story count (STB-02) | `.stories.tsx` stub (STB-03) | a11y per story (STB-02) | — | — |
|
|
36
|
+
| Chromatic | — | — | change-risk scoping (CHR-02) | — | visual delta narration (CHR-01) | — | — |
|
|
37
|
+
| Graphify | — | — | dependency scoping (GRF-03) | — | orphan detection (GRF-04) | — | — |
|
|
38
|
+
| Pinterest | probe only | visual reference search via `pinterest_search`; fallback → Refero → awesome-design-md | — | — | — | — | — |
|
|
39
|
+
| Claude Design | bundle probe → `claude_design: available` | synthesizer handoff mode — parses bundle → D-XX decisions; discussant `--from-handoff` confirms | — (skipped in handoff) | — (skipped in handoff) | Handoff Faithfulness section; bidirectional write-back via figma-writer `implementation-status` mode | — | — |
|
|
40
|
+
| paper.design | — | canvas read: `get_selection`, `get_jsx`, `get_computed_styles` | — | paper-writer: annotate/tokenize/roundtrip | `get_screenshot` for `? VISUAL` | ✓ | — |
|
|
41
|
+
| pencil.dev | `.pen` discovery | `.pen` as canonical design source | — | pencil-writer: annotate/roundtrip | spec-vs-impl diff | ✓ | — |
|
|
42
|
+
| 21st.dev | — | prior-art gate: marketplace search before greenfield build | — | component-generator (21st impl) | — | — | ✓ |
|
|
43
|
+
| Magic Patterns | — | — | — | component-generator (magic-patterns impl) | preview_url → `? VISUAL` check | — | ✓ |
|
|
36
44
|
|
|
37
45
|
**Column definitions:**
|
|
38
46
|
|
|
@@ -41,6 +49,8 @@ Each cell describes what the connection contributes at that pipeline stage, or `
|
|
|
41
49
|
- **plan** — what the connection contributes to planning artifacts
|
|
42
50
|
- **design** — what the connection provides during design execution
|
|
43
51
|
- **verify** — what the connection checks or surfaces during verification
|
|
52
|
+
- **canvas** — whether the connection provides bidirectional canvas read+write (see `reference/ai-native-tool-interface.md`)
|
|
53
|
+
- **generator** — whether the connection provides AI component generation (see `reference/ai-native-tool-interface.md`)
|
|
44
54
|
|
|
45
55
|
---
|
|
46
56
|
|
|
@@ -202,4 +212,24 @@ To add a new connection to the pipeline:
|
|
|
202
212
|
|
|
203
213
|
- `connections/` is infrastructure scaffolding introduced in Phase 1. Stage integration (wiring detection and graceful degradation into each stage) is Phase 2 work.
|
|
204
214
|
- Phase 8 added five new active connections. Linear and GitHub remain planned for a future phase.
|
|
205
|
-
-
|
|
215
|
+
- Phase 14 added four AI-native design tool connections (paper.design, pencil.dev, 21st.dev, Magic Patterns) and the canvas/generator capability columns.
|
|
216
|
+
- The capability matrix columns map to the five pipeline stages: `scan | discover | plan | design | verify`, plus `canvas` and `generator` sub-categories.
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
## Future AI-Native Tools (Backlog)
|
|
221
|
+
|
|
222
|
+
Candidate tools to integrate using the contract in `reference/ai-native-tool-interface.md`.
|
|
223
|
+
|
|
224
|
+
| Tool | Sub-category | Priority |
|
|
225
|
+
|------|-------------|----------|
|
|
226
|
+
| Subframe | canvas | high |
|
|
227
|
+
| v0.dev | generator | high |
|
|
228
|
+
| Galileo AI | generator | medium |
|
|
229
|
+
| Builder.io Visual Copilot | canvas + generator | medium |
|
|
230
|
+
| Locofy | generator | low |
|
|
231
|
+
| Anima | canvas | low |
|
|
232
|
+
| Plasmic | generator | medium |
|
|
233
|
+
| TeleportHQ | generator | low |
|
|
234
|
+
|
|
235
|
+
To add any of these: follow the steps in `reference/ai-native-tool-interface.md §Extending with Future Tools`.
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Magic Patterns — Connection Specification
|
|
2
|
+
|
|
3
|
+
This file is the connection specification for Magic Patterns within the get-design-done pipeline. Magic Patterns is a component-generator tool — it generates DS-aware UI components from natural-language descriptions. It integrates via the Magic Patterns Claude connector (no manual setup when enabled) or via a direct API key. See `connections/connections.md` for the full connection index and capability matrix.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Setup
|
|
8
|
+
|
|
9
|
+
### Prerequisites
|
|
10
|
+
|
|
11
|
+
**Path A — Claude connector (preferred):**
|
|
12
|
+
- Magic Patterns Claude connector enabled in your Claude environment
|
|
13
|
+
- No additional setup required
|
|
14
|
+
|
|
15
|
+
**Path B — API key fallback:**
|
|
16
|
+
- A Magic Patterns account and API key at [magicpatterns.com](https://magicpatterns.com)
|
|
17
|
+
- `MAGIC_PATTERNS_API_KEY` environment variable set
|
|
18
|
+
- MCP server install:
|
|
19
|
+
```bash
|
|
20
|
+
claude mcp add magic-patterns --transport http https://mcp.magicpatterns.com/sse \
|
|
21
|
+
-e MAGIC_PATTERNS_API_KEY=$MAGIC_PATTERNS_API_KEY
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Verification
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
ToolSearch({ query: "mcp__magic_patterns", max_results: 5 })
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Non-empty results including `magic_patterns_generate` → Claude connector available (Path A).
|
|
31
|
+
Empty → install Path B and restart Claude Code session.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Probe Pattern
|
|
36
|
+
|
|
37
|
+
Magic Patterns uses a two-path probe. Check Claude connector first; fall back to API key path.
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
ToolSearch({ query: "mcp__magic_patterns", max_results: 5 })
|
|
41
|
+
→ Non-empty → magic-patterns: available (Claude connector)
|
|
42
|
+
→ Empty → check MAGIC_PATTERNS_API_KEY env var
|
|
43
|
+
set → magic-patterns: available (API key path)
|
|
44
|
+
unset → magic-patterns: not_configured
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Write result to STATE.md `<connections>`: `magic-patterns: <status>`
|
|
48
|
+
|
|
49
|
+
Fallback: when `not_configured`, the design stage skips Magic Patterns and falls back to 21st.dev (if available) or manual component build.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Magic Patterns Tools
|
|
54
|
+
|
|
55
|
+
| Tool | Stage | Purpose |
|
|
56
|
+
|------|-------|---------|
|
|
57
|
+
| `magic_patterns_generate` | design | Generate component from description; returns `{ code, preview_url, component_id }` |
|
|
58
|
+
| `magic_patterns_annotate` | design | Post DESIGN-DEBT findings back to a component by ID |
|
|
59
|
+
| `magic_patterns_regenerate` | design | Roundtrip: regenerate with updated description |
|
|
60
|
+
|
|
61
|
+
### `magic_patterns_generate` parameters
|
|
62
|
+
|
|
63
|
+
| Parameter | Values | Notes |
|
|
64
|
+
|-----------|--------|-------|
|
|
65
|
+
| `description` | string | Natural-language component spec |
|
|
66
|
+
| `design_system` | `"shadcn" \| "tailwind" \| "mantine" \| "chakra"` | Auto-detected from project in explore stage |
|
|
67
|
+
| `quality_mode` | `"fast" \| "best"` | `fast` for explore iterations; `best` for final design stage output |
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Pipeline Integration
|
|
72
|
+
|
|
73
|
+
| Stage | What Magic Patterns provides |
|
|
74
|
+
|-------|------------------------------|
|
|
75
|
+
| explore | DS detection → STATE.md `<design_system>` block for generator targeting |
|
|
76
|
+
| design | `magic_patterns_generate(description, design_system, quality_mode: "best")` → component source + `preview_url` |
|
|
77
|
+
| verify | `preview_url` from generate response → feeds Phase 8 Preview `? VISUAL` check |
|
|
78
|
+
| design | `magic_patterns_annotate(component_id, feedback)` → roundtrip mode; post DESIGN-DEBT notes back |
|
|
79
|
+
|
|
80
|
+
### Design-System Auto-Detection
|
|
81
|
+
|
|
82
|
+
Before invoking `magic_patterns_generate`, the explore stage detects the project's active design system (see `agents/design-context-builder.md` Step 0C):
|
|
83
|
+
|
|
84
|
+
1. Check `gdd.config.json` (if present): read `designSystem` field → use directly if set.
|
|
85
|
+
2. Scan `package.json` dependencies:
|
|
86
|
+
- `@shadcn/ui` or `shadcn` present → `"shadcn"`
|
|
87
|
+
- `@mantine/core` or `@mantine/hooks` present → `"mantine"`
|
|
88
|
+
- `@chakra-ui/react` present → `"chakra"`
|
|
89
|
+
- `tailwindcss` present → `"tailwind"`
|
|
90
|
+
3. Default: `"tailwind"`
|
|
91
|
+
|
|
92
|
+
Write result to STATE.md `<design_system>` block.
|
|
93
|
+
|
|
94
|
+
### Preview Integration
|
|
95
|
+
|
|
96
|
+
`magic_patterns_generate` returns `preview_url`. The design-component-generator agent writes this URL to STATE.md `<generator>` block. The verify stage's `? VISUAL` check reads `preview_url` from STATE.md and opens it in Phase 8 Preview for visual comparison.
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Fallback Behavior
|
|
101
|
+
|
|
102
|
+
When `magic-patterns: not_configured`:
|
|
103
|
+
- Print: `Magic Patterns not configured — component generator skipped.`
|
|
104
|
+
- Falls back to 21st.dev if `21st-dev: available`.
|
|
105
|
+
- If both not configured, design stage proceeds with manual component build.
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# paper.design MCP — Connection Specification
|
|
2
|
+
|
|
3
|
+
This file is the connection specification for paper.design within the get-design-done pipeline. paper.design is a canvas tool — it treats the design canvas as both source AND destination, enabling a full canvas→code→verify→canvas round-trip. See `connections/connections.md` for the full connection index and capability matrix.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Setup
|
|
8
|
+
|
|
9
|
+
### Prerequisites
|
|
10
|
+
- A paper.design account
|
|
11
|
+
- paper.design MCP server registered in your Claude Code session
|
|
12
|
+
|
|
13
|
+
### Install command (Claude Code)
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
claude mcp add paper-design --transport http https://mcp.paper.design/sse
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
After running this command, restart the Claude Code session.
|
|
20
|
+
|
|
21
|
+
### Verification
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
ToolSearch({ query: "mcp__paper", max_results: 5 })
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Expect non-empty results including `mcp__paper-design__get_selection` or similar. If empty, re-run the install command above and restart the Claude Code session.
|
|
28
|
+
|
|
29
|
+
### Budget
|
|
30
|
+
|
|
31
|
+
paper.design **free tier**: 100 MCP calls/week. Pro tier: 1M calls/week. The pipeline tracks `budget_used` in STATE.md `<connections>` and warns at 90 calls.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Probe Pattern
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
ToolSearch({ query: "mcp__paper", max_results: 5 })
|
|
39
|
+
→ Empty → paper-design: not_configured (skip all paper.design steps)
|
|
40
|
+
→ Non-empty → proceed to live call
|
|
41
|
+
|
|
42
|
+
call mcp__paper-design__get_selection
|
|
43
|
+
→ Success → paper-design: available
|
|
44
|
+
→ Error → paper-design: unavailable
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Write result to STATE.md `<connections>`: `paper-design: <status>`
|
|
48
|
+
|
|
49
|
+
Also write initial budget state:
|
|
50
|
+
```xml
|
|
51
|
+
<connections>
|
|
52
|
+
paper-design: available | budget_used: 0 | budget_limit: 100
|
|
53
|
+
</connections>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## paper.design MCP Tools
|
|
59
|
+
|
|
60
|
+
| Tool | Stage | Purpose |
|
|
61
|
+
|------|-------|---------|
|
|
62
|
+
| `mcp__paper-design__get_selection` | explore | JSON of selected canvas elements (id, type, name, bounds) |
|
|
63
|
+
| `mcp__paper-design__get_jsx` | explore | React JSX string of selected component tree |
|
|
64
|
+
| `mcp__paper-design__get_computed_styles` | explore | CSS computed styles for current selection |
|
|
65
|
+
| `mcp__paper-design__get_screenshot` | verify | Base64 PNG screenshot of selected canvas element |
|
|
66
|
+
| `mcp__paper-design__add_comment` | design | Add annotation comment to a canvas node |
|
|
67
|
+
| `mcp__paper-design__update_styles` | design | Update CSS properties of a canvas node |
|
|
68
|
+
| `mcp__paper-design__set_text_content` | design | Write text content to a canvas text layer |
|
|
69
|
+
| `mcp__paper-design__write_html` | design | Write HTML snippet to a canvas layer |
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Pipeline Integration
|
|
74
|
+
|
|
75
|
+
| Stage | What paper.design provides |
|
|
76
|
+
|-------|---------------------------|
|
|
77
|
+
| explore | Canvas read: `get_selection` (node list), `get_jsx` (React component tree), `get_computed_styles` (CSS values) → merged into DESIGN-CONTEXT.md |
|
|
78
|
+
| design | `design-paper-writer` agent: annotate / tokenize / roundtrip modes via write tools |
|
|
79
|
+
| verify | `get_screenshot` for components flagged `? VISUAL` — element-scoped (complements route-scoped Preview screenshots) |
|
|
80
|
+
|
|
81
|
+
### Canvas Read (Explore Stage)
|
|
82
|
+
|
|
83
|
+
The explore stage context-builder reads the paper.design canvas via:
|
|
84
|
+
|
|
85
|
+
1. `mcp__paper-design__get_selection` — get selected element IDs and names
|
|
86
|
+
2. `mcp__paper-design__get_jsx` — get full React component tree of selection
|
|
87
|
+
3. `mcp__paper-design__get_computed_styles` — get computed CSS values
|
|
88
|
+
|
|
89
|
+
Results are merged into DESIGN-CONTEXT.md as a `<canvas_sources>` block alongside Figma variables, Refero refs, and other sources.
|
|
90
|
+
|
|
91
|
+
### Write-Back (Design Stage)
|
|
92
|
+
|
|
93
|
+
The `design-paper-writer` agent handles write-back in three modes:
|
|
94
|
+
- **annotate** — add design-decision comments to canvas nodes (`add_comment`)
|
|
95
|
+
- **tokenize** — sync CSS token values to paper.design node styles (`update_styles`)
|
|
96
|
+
- **roundtrip** — write implementation status back as text/HTML layers (`set_text_content`, `write_html`)
|
|
97
|
+
|
|
98
|
+
All writes require user confirmation via proposal→confirm flow. See `agents/design-paper-writer.md`.
|
|
99
|
+
|
|
100
|
+
### Screenshot Verification (Verify Stage)
|
|
101
|
+
|
|
102
|
+
`mcp__paper-design__get_screenshot(node_id)` captures a PNG of a specific canvas element.
|
|
103
|
+
|
|
104
|
+
- Canvas-element-scoped (NOT route-scoped like Phase 8 Preview)
|
|
105
|
+
- Both are complementary: paper.design → canvas component view; Preview → rendered browser route
|
|
106
|
+
- Screenshots saved to `.design/screenshots/paper-<component>-<date>.png`
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Budget Tracking
|
|
111
|
+
|
|
112
|
+
After every write tool call, increment `budget_used` in STATE.md:
|
|
113
|
+
|
|
114
|
+
```xml
|
|
115
|
+
<connections>
|
|
116
|
+
paper-design: available | budget_used: 12 | budget_limit: 100
|
|
117
|
+
</connections>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
Warn when `budget_used >= 90`: `Warning: paper.design budget at 90/100 calls this week.`
|
|
121
|
+
|
|
122
|
+
Read tools (`get_selection`, `get_jsx`, `get_computed_styles`, `get_screenshot`) also consume budget — track them as well.
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## Fallback Behavior
|
|
127
|
+
|
|
128
|
+
When `paper-design: not_configured`:
|
|
129
|
+
- Skip all paper.design steps. Print: `paper.design not configured — canvas integration skipped.`
|
|
130
|
+
- Explore stage proceeds with code-only context (grep + Figma + Storybook if available).
|
|
131
|
+
- Verify stage uses Preview screenshots only (no canvas-element screenshots).
|
|
132
|
+
- Design stage does not offer paper-writer.
|
|
133
|
+
|
|
134
|
+
When `paper-design: unavailable`:
|
|
135
|
+
- Update STATE.md to `paper-design: unavailable`.
|
|
136
|
+
- Print: `paper.design unavailable — check MCP connection and try again.`
|
|
137
|
+
- Degrade as above.
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# pencil.dev — Connection Specification
|
|
2
|
+
|
|
3
|
+
This file is the connection specification for pencil.dev within the get-design-done pipeline. pencil.dev uses git-tracked `.pen` files as its source of truth — no MCP server is required. See `connections/connections.md` for the full connection index and capability matrix.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Setup
|
|
8
|
+
|
|
9
|
+
### Prerequisites
|
|
10
|
+
- pencil.dev VS Code or Cursor extension installed from the marketplace
|
|
11
|
+
- One or more `.pen` files in the project (typically at project root or in `src/`)
|
|
12
|
+
|
|
13
|
+
### Verification
|
|
14
|
+
|
|
15
|
+
Run in the project directory:
|
|
16
|
+
```bash
|
|
17
|
+
find . -name "*.pen" -not -path "*/node_modules/*" | head -5
|
|
18
|
+
```
|
|
19
|
+
One or more results = pencil.dev is in use.
|
|
20
|
+
|
|
21
|
+
No MCP server install needed — the pipeline reads and writes `.pen` files directly via standard file tools.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Probe Pattern
|
|
26
|
+
|
|
27
|
+
pencil.dev does not use MCP tools. Probe is file-based.
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
PEN_FILES=$(find . -name "*.pen" -not -path "*/node_modules/*" 2>/dev/null)
|
|
31
|
+
if [ -n "$PEN_FILES" ]; then
|
|
32
|
+
echo "pencil-dev: available"
|
|
33
|
+
else
|
|
34
|
+
echo "pencil-dev: not_configured"
|
|
35
|
+
fi
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Write result to STATE.md `<connections>`: `pencil-dev: available` or `pencil-dev: not_configured`.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## .pen File Format
|
|
43
|
+
|
|
44
|
+
`.pen` files are YAML-front-matter component specs:
|
|
45
|
+
|
|
46
|
+
```yaml
|
|
47
|
+
---
|
|
48
|
+
component: Button
|
|
49
|
+
variant: primary
|
|
50
|
+
state: default
|
|
51
|
+
design-tokens:
|
|
52
|
+
bg: brand-primary-500
|
|
53
|
+
text: white
|
|
54
|
+
radius: 6px
|
|
55
|
+
padding: "8px 16px"
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
Notes: Primary CTA button. Use for the main action in any modal or form.
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
- `component` — component name (must match the implementation filename)
|
|
62
|
+
- `variant` — variant label (matches Storybook story name where applicable)
|
|
63
|
+
- `state` — `default | hover | focus | disabled | error`
|
|
64
|
+
- `design-tokens` — key/value map of token names to values (CSS variables or literal values)
|
|
65
|
+
- Body prose — optional implementation notes
|
|
66
|
+
|
|
67
|
+
`.pen` files are **git-tracked source of truth**. Commits to `.pen` files must be atomic — spec and implementation changes committed together when possible.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Pipeline Integration
|
|
72
|
+
|
|
73
|
+
| Stage | What pencil.dev provides |
|
|
74
|
+
|-------|--------------------------|
|
|
75
|
+
| explore | `.pen` file discovery; synthesizer merges `.pen` declarations with code grep results |
|
|
76
|
+
| verify | Spec-vs-implementation diff: `.pen` declared token values vs. actual token values in code |
|
|
77
|
+
| design | `design-pencil-writer` agent: annotate + roundtrip modes; atomic git commits on `.pen` writes |
|
|
78
|
+
|
|
79
|
+
**Architectural advantage:** Both the design spec (`.pen` file) and implementation (source code) are version-controlled. Pre-merge diff verification is uniquely strong compared to tools where the design lives outside git.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Fallback Behavior
|
|
84
|
+
|
|
85
|
+
When `pencil-dev: not_configured`:
|
|
86
|
+
- All pencil.dev steps are skipped silently.
|
|
87
|
+
- A one-line diagnostic is printed: `pencil.dev not configured — no .pen files found.`
|
|
88
|
+
- Pipeline continues normally.
|
package/hooks/budget-enforcer.js
CHANGED
|
@@ -32,6 +32,7 @@ const { spawn } = require('child_process');
|
|
|
32
32
|
const BUDGET_PATH = path.join(process.cwd(), '.design', 'budget.json');
|
|
33
33
|
const MANIFEST_PATH = path.join(process.cwd(), '.design', 'cache-manifest.json');
|
|
34
34
|
const TELEMETRY_PATH = path.join(process.cwd(), '.design', 'telemetry', 'costs.jsonl');
|
|
35
|
+
const PHASE_TOTALS_PATH = path.join(process.cwd(), '.design', 'telemetry', 'phase-totals.json');
|
|
35
36
|
const STATE_PATH = path.join(process.cwd(), '.design', 'STATE.md');
|
|
36
37
|
|
|
37
38
|
// ---- budget.json loader with defaults per D-12 ----
|
|
@@ -49,8 +50,18 @@ function loadBudget() {
|
|
|
49
50
|
catch { return defaults; }
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
// ---- cumulative phase spend
|
|
53
|
+
// ---- cumulative phase spend (WR-02) ----
|
|
54
|
+
// Reads from the lightweight phase-totals.json written by aggregate-agent-metrics.js
|
|
55
|
+
// instead of replaying the full costs.jsonl on every hook invocation.
|
|
56
|
+
// Falls back to 0 when the file doesn't exist yet (early in a session).
|
|
53
57
|
function currentPhaseSpend(phase) {
|
|
58
|
+
if (fs.existsSync(PHASE_TOTALS_PATH)) {
|
|
59
|
+
try {
|
|
60
|
+
const data = JSON.parse(fs.readFileSync(PHASE_TOTALS_PATH, 'utf8'));
|
|
61
|
+
return Number(data.totals?.[phase] || 0);
|
|
62
|
+
} catch { /* fall through */ }
|
|
63
|
+
}
|
|
64
|
+
// Fallback: replay JSONL when phase-totals.json not yet written (first spawn of session).
|
|
54
65
|
if (!fs.existsSync(TELEMETRY_PATH)) return 0;
|
|
55
66
|
const lines = fs.readFileSync(TELEMETRY_PATH, 'utf8').split(/\r?\n/).filter(Boolean);
|
|
56
67
|
let sum = 0;
|
|
@@ -118,7 +129,7 @@ function spawnAggregator() {
|
|
|
118
129
|
cwd: process.cwd(),
|
|
119
130
|
detached: true,
|
|
120
131
|
stdio: 'ignore',
|
|
121
|
-
env: process.env,
|
|
132
|
+
env: { PATH: process.env.PATH }, // IN-02: minimal env; aggregator needs no secrets
|
|
122
133
|
});
|
|
123
134
|
child.unref();
|
|
124
135
|
} catch {
|
|
@@ -6,16 +6,11 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
const readline = require('readline');
|
|
9
|
+
const path = require('path');
|
|
10
|
+
const { INJECTION_PATTERNS: RAW_PATTERNS } = require(path.join(__dirname, '..', 'scripts', 'injection-patterns.cjs'));
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/disregard\s+(all\s+)?(previous|prior|above)\s+instructions?/i,
|
|
13
|
-
/you\s+are\s+now\s+a\s+different/i,
|
|
14
|
-
/system\s*:\s*you\s+are/i,
|
|
15
|
-
/<\s*\/?\s*(system|assistant|human)\s*>/i,
|
|
16
|
-
/\[INST\]/i,
|
|
17
|
-
/###\s*instruction/i,
|
|
18
|
-
];
|
|
12
|
+
// The hook needs bare RegExp objects; extract them from the shared {name,re} entries.
|
|
13
|
+
const INJECTION_PATTERNS = RAW_PATTERNS.map(p => p.re);
|
|
19
14
|
|
|
20
15
|
async function main() {
|
|
21
16
|
const rl = readline.createInterface({ input: process.stdin });
|
package/hooks/update-check.sh
CHANGED
|
@@ -165,6 +165,14 @@ if [ "${BASH_SOURCE[0]}" = "$0" ]; then
|
|
|
165
165
|
BODY_EXCERPT="$(printf '%s' "${RAW}" | extract_body)"
|
|
166
166
|
# Strip control chars defensively (T-13.3-03)
|
|
167
167
|
BODY_EXCERPT="$(printf '%s' "${BODY_EXCERPT}" | tr -d '\000-\010\013\014\016-\037')"
|
|
168
|
+
# Strip double-quotes so the JSON round-trip sed read-back cannot be injected via a
|
|
169
|
+
# crafted release body. Body is display-only — losing quotes is acceptable.
|
|
170
|
+
BODY_EXCERPT="$(printf '%s' "${BODY_EXCERPT}" | tr -d '"')"
|
|
171
|
+
# Validate LATEST_TAG is a safe semver string before trusting it (CR-02).
|
|
172
|
+
if ! printf '%s' "${LATEST_TAG}" | grep -qE '^v?[0-9]+\.[0-9]+(\.[0-9]+)*$'; then
|
|
173
|
+
log "LATEST_TAG '${LATEST_TAG}' failed semver safety check — aborting cache write"
|
|
174
|
+
LATEST_TAG=""
|
|
175
|
+
fi
|
|
168
176
|
if [ -n "${LATEST_TAG}" ]; then
|
|
169
177
|
read -r DELTA_STATE DELTA_KIND <<EOF
|
|
170
178
|
$(classify_delta "${DISPLAY_CURRENT}" "${LATEST_TAG}")
|
|
@@ -195,6 +203,11 @@ EOF
|
|
|
195
203
|
|
|
196
204
|
C_LATEST="$(grep -E '"latest_tag"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"latest_tag"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')"
|
|
197
205
|
C_DELTA="$(grep -E '"delta"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"delta"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')"
|
|
206
|
+
# Allowlist-gate C_DELTA before it reaches any shell context (WR-04).
|
|
207
|
+
case "${C_DELTA:-}" in
|
|
208
|
+
major|minor|patch|off-cadence|none) : ;;
|
|
209
|
+
*) C_DELTA="unknown" ;;
|
|
210
|
+
esac
|
|
198
211
|
C_NEWER="$(grep -E '"is_newer"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"is_newer"[[:space:]]*:[[:space:]]*(true|false).*/\1/')"
|
|
199
212
|
C_BODY="$(grep -E '"changelog_excerpt"' "${CACHE}" 2>/dev/null | head -n1 | sed -E 's/.*"changelog_excerpt"[[:space:]]*:[[:space:]]*"(.*)".*/\1/' | sed -E 's/\\n/\n/g')"
|
|
200
213
|
|
package/package.json
CHANGED