@12ui/design 0.2.24 → 0.2.26

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 (78) hide show
  1. package/README.md +24 -25
  2. package/SKILL.md +6 -12
  3. package/dist/branch-dispatch-loop.d.ts.map +1 -1
  4. package/dist/branch-dispatch-loop.js +5 -0
  5. package/dist/branch-dispatch-loop.js.map +1 -1
  6. package/dist/branch-status.d.ts.map +1 -1
  7. package/dist/branch-status.js +3 -1
  8. package/dist/branch-status.js.map +1 -1
  9. package/dist/branch-winner.d.ts.map +1 -1
  10. package/dist/branch-winner.js +5 -2
  11. package/dist/branch-winner.js.map +1 -1
  12. package/dist/cli-branch-command.d.ts.map +1 -1
  13. package/dist/cli-branch-command.js +3 -2
  14. package/dist/cli-branch-command.js.map +1 -1
  15. package/dist/cli-capabilities.d.ts +20 -0
  16. package/dist/cli-capabilities.d.ts.map +1 -1
  17. package/dist/cli-capabilities.js +24 -0
  18. package/dist/cli-capabilities.js.map +1 -1
  19. package/dist/cli-corpus-evidence.d.ts.map +1 -1
  20. package/dist/cli-corpus-evidence.js +7 -1
  21. package/dist/cli-corpus-evidence.js.map +1 -1
  22. package/dist/cli-corpus-reference-downloads.js.map +1 -1
  23. package/dist/cli-corpus-types.d.ts +2 -1
  24. package/dist/cli-corpus-types.d.ts.map +1 -1
  25. package/dist/cli-create-command.d.ts +2 -2
  26. package/dist/cli-create-command.d.ts.map +1 -1
  27. package/dist/cli-create-command.js +5 -4
  28. package/dist/cli-create-command.js.map +1 -1
  29. package/dist/cli-select-command.d.ts.map +1 -1
  30. package/dist/cli-select-command.js +3 -1
  31. package/dist/cli-select-command.js.map +1 -1
  32. package/dist/cli-usage.d.ts +0 -24
  33. package/dist/cli-usage.d.ts.map +1 -1
  34. package/dist/cli-usage.js +29 -7
  35. package/dist/cli-usage.js.map +1 -1
  36. package/dist/concept-input.d.ts +26 -1
  37. package/dist/concept-input.d.ts.map +1 -1
  38. package/dist/concept-input.js +28 -1
  39. package/dist/concept-input.js.map +1 -1
  40. package/dist/corpus-client.d.ts +42 -1
  41. package/dist/corpus-client.d.ts.map +1 -1
  42. package/dist/corpus-client.js +15 -0
  43. package/dist/corpus-client.js.map +1 -1
  44. package/dist/index.d.ts +2 -2
  45. package/dist/index.d.ts.map +1 -1
  46. package/dist/index.js +1 -1
  47. package/dist/index.js.map +1 -1
  48. package/dist/legacy-skill-catalog.d.ts +2 -2
  49. package/dist/legacy-skill-catalog.d.ts.map +1 -1
  50. package/dist/legacy-skill-catalog.js +51 -4
  51. package/dist/legacy-skill-catalog.js.map +1 -1
  52. package/dist/responsive-quality.d.ts +65 -14
  53. package/dist/responsive-quality.d.ts.map +1 -1
  54. package/dist/responsive-quality.js +58 -50
  55. package/dist/responsive-quality.js.map +1 -1
  56. package/dist/skill-installer.d.ts +6 -1
  57. package/dist/skill-installer.d.ts.map +1 -1
  58. package/dist/skill-installer.js +6 -23
  59. package/dist/skill-installer.js.map +1 -1
  60. package/open-design.json +2 -14
  61. package/package.json +2 -2
  62. package/skills/design/SKILL.md +91 -40
  63. package/skills/design-branch/SKILL.md +0 -51
  64. package/skills/design-branch/agents/openai.yaml +0 -8
  65. package/skills/design-branch/assets/large-logo.svg +0 -7
  66. package/skills/design-branch/assets/small-400px.png +0 -0
  67. package/skills/design-convert/SKILL.md +0 -65
  68. package/skills/design-convert/agents/openai.yaml +0 -8
  69. package/skills/design-convert/assets/large-logo.svg +0 -3
  70. package/skills/design-convert/assets/small-400px.png +0 -0
  71. package/skills/design-draft/SKILL.md +0 -41
  72. package/skills/design-draft/agents/openai.yaml +0 -8
  73. package/skills/design-draft/assets/large-logo.svg +0 -3
  74. package/skills/design-draft/assets/small-400px.png +0 -0
  75. package/skills/design-search/SKILL.md +0 -42
  76. package/skills/design-search/agents/openai.yaml +0 -8
  77. package/skills/design-search/assets/large-logo.svg +0 -3
  78. package/skills/design-search/assets/small-400px.png +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@12ui/design",
3
- "version": "0.2.24",
3
+ "version": "0.2.26",
4
4
  "type": "module",
5
5
  "description": "The canonical 12ui CLI, SDK, MCP server, and visual interface design skills",
6
6
  "main": "dist/index.js",
@@ -28,7 +28,7 @@
28
28
  "dependencies": {
29
29
  "@just-every/ensemble": "0.2.274",
30
30
  "@modelcontextprotocol/sdk": "^1.29.0",
31
- "sharp": "^0.34.5"
31
+ "sharp": "^0.35.3"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/node": "^22.19.17",
@@ -1,65 +1,116 @@
1
1
  ---
2
2
  name: design
3
- description: "Required for non-trivial UI creation and redesign (web, app,
4
- mobile): explores distinctive, corpus-grounded visual directions as images,
5
- then converts the chosen one into production-ready code."
3
+ description: "Required for any non-trivial UI work (web, app, mobile): drafts
4
+ distinctive corpus-grounded design candidates as images, expands one approved
5
+ design into every screen of a page, site, or app, converts a finished PNG,
6
+ JPEG, or WebP into production HTML, app code, PDF, PSD, PPTX, Sketch, SVG, or
7
+ raster output, and searches the 12ui design corpus for reference imagery."
6
8
  ---
7
9
 
8
10
  # Design
9
11
 
10
- ## Setup
12
+ If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design` once.
11
13
 
12
- If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design` once. This installs the CLI and verifies this skill's account scopes.
14
+ Code-generating models converge on a narrow band of visual defaults and cannot
15
+ see that convergence from inside it. Corpus-grounded generation explores
16
+ genuinely different directions, and converting the chosen image preserves one
17
+ with near-pixel fidelity — faster and truer than coding it by hand.
13
18
 
14
- Code-generating models converge on a narrow band of visual defaults the
15
- same fonts, palettes, and layouts across unrelated products and a model
16
- cannot see its own convergence from inside it. This skill escapes that:
17
- corpus-grounded image generation explores genuinely different visual
18
- directions, and converting the chosen image preserves it with near-pixel
19
- fidelity, faster and truer than recreating it by hand. Once you have a
20
- single screen then `12ui branch` extends it into a full page or app with
21
- consistent, professional quality design. That is why the flow below beats
22
- designing directly in code, even when coding the interface yourself feels
23
- quicker.
19
+ Start where you already are: a finished design image goes to §3, a rough concept
20
+ to §1, reference imagery as the deliverable to §5. Each command prints the next,
21
+ and `12ui <command> --help` prints every flag and its choices read it rather
22
+ than guess.
24
23
 
25
- ## 1. Explore — four directions
26
-
27
- Already holding the finished design? Build it, do not redraw it: see
28
- `design-convert`. Only to redraw an existing interface:
29
- `12ui draft --redesign-source <png> --mode exploratory|reskin`.
24
+ ## 1. Explore
30
25
 
31
26
  12ui draft --query "<product, audience, surface, goal, personality>"
32
27
 
33
- Creates the run directory and prints its path pass it to every later
34
- command. Searches the corpus for four diverse references and generates one
35
- one-viewport candidate steered by each, returning immediately.
28
+ Four diverse corpus references, one candidate steered by each. Creates the run
29
+ directory and prints its path pass it to every later command. Already holding
30
+ the finished design? Build it, do not redraw it: §3. Only to redraw an existing
31
+ interface, add `--redesign-source`. For more slots, or a direction or reference
32
+ each:
33
+
34
+ 12ui create claim --concept "<product, audience, surface, goal, personality; 1200 chars max>" \
35
+ --candidates '[{"slot":"a","direction":"<short>","referenceId":"gen-<corpus-id>"}]'
36
+ 12ui create dispatch <run-id>
37
+ 12ui create download <run-id> --out-dir <directory>
38
+
39
+ Directions must be meaningfully different: four paraphrases of one idea buy four
40
+ of the same design. A run holds 1-96 candidates in slots `a`-`cr`, and one
41
+ returning `failed` is a settled, paid outcome, not a transient error.
36
42
 
37
43
  ## 2. Select
38
44
 
39
45
  12ui select <run-dir> --winner B --reason "<rationale>"
40
46
 
41
- If the run indicates a recommended candidate, prefer it; overriding it
42
- requires a stated reason.
47
+ Prefer the recommended candidate; overriding it needs a stated reason.
48
+
49
+ ## 3. Convert
50
+
51
+ 12ui convert <source-image> --export html
52
+ 12ui convert <source-image> --output layerdoc
53
+
54
+ The first converts and exports the responsive page in one command, billing $1.00
55
+ past the free daily allowance. The second stops at the structured document: ask
56
+ for it when that is the deliverable, and do not buy an export nobody asked for.
57
+
58
+ Derive further formats from that conversion instead of converting again:
59
+
60
+ 12ui export <conversion-id> --output html_fixed,svg,pdf --out-dir <dir> \
61
+ --idempotency-key <stable-key>
62
+
63
+ All but `html` are free, deterministic, and parallel; reusing a key replays
64
+ finished work rather than buying it twice. `--help` lists every output; the code
65
+ outputs take a profile of this shape (`--app-profile` for native):
66
+
67
+ --web-profile '{"version":1,"framework":"react","styling":"tailwind","language":"typescript","packaging":"page"}'
68
+
69
+ Ordered viewports of one continuous page are ONE package conversion — separate
70
+ conversions lose page order and stitching. Take the manifest from the tool and
71
+ read the rules it prints:
72
+
73
+ 12ui convert package --template > package.json
74
+ 12ui convert package --manifest package.json --out-dir <dir>
75
+
76
+ ## 4. Branch
77
+
78
+ Whenever the deliverable is more than one viewport — a full page, a multi-route
79
+ site, an app with several states — expand the approved design rather than
80
+ re-deriving it per screen. A single fold is a plain convert (§3).
81
+
82
+ 12ui branch execute <run-dir> --scope page|site --convert html \
83
+ --concept "<what the rest of the surface must cover; 1200 chars max>"
43
84
 
44
- ## 3. Execute
85
+ `--scope page` grows that screen into the rest of its page, `--scope site` adds
86
+ sibling routes and app states, and `--convert html` converts each page as one
87
+ ordered package. The starting design is viewport 1 already — the candidate
88
+ `12ui select` recorded, or `--winner-run <run-id> --winner-slot <slot>` in a
89
+ fresh directory.
45
90
 
46
- For a single fold, view, or state:
91
+ 12ui next <run-dir>
47
92
 
48
- 12ui convert <run-dir>/candidates/B.png --export html
93
+ Execute returns immediately; `next` reports progress and the next command,
94
+ `--wait` blocks instead of polling, and `12ui branch resume` continues an
95
+ interrupted run, replaying already-settled screens for free. Wait for it rather
96
+ than building the same pages by hand in the meantime — they are already being
97
+ produced and paid for. Screens land in `<run-dir>/branch/screens/` and per-page
98
+ HTML in `<run-dir>/branch/pages/`.
49
99
 
50
- For a full page or a multi-page site or app — the winner is viewport 1 of
51
- the first page; it needs no separate conversion:
100
+ ## 5. Search
52
101
 
53
- 12ui branch execute <run-dir> \
54
- --concept "<what the rest of the surface must cover>" \
55
- --scope page|site --convert html
102
+ 12ui corpus inspire --query "<product, audience, surface, goal, personality>" \
103
+ --out-dir .12ui/<slug>/references
56
104
 
57
- The server plans the screens; the command dispatches, downloads, and
58
- converts one package per page, into `<run-dir>/branch/pages/`.
59
- Wait for it rather than building the same pages by hand in the meantime
60
- they are already being produced and paid for.
105
+ The corpus is already explored, ranked, and diversified, so this returns real
106
+ references rather than another model's guess. Preserve the returned order; the
107
+ ranking is the product, and `manifest.json` is the completion record. `--mode`
108
+ trades query adherence against exploration (`balanced` is the default),
109
+ `--reference-image` ranks against an existing interface, and
110
+ `12ui corpus resume --out-dir <dir>` continues an interrupted search.
61
111
 
62
- ## 4. Integrate
112
+ ## 6. Integrate
63
113
 
64
- The exported HTML is the page: build the surface around its document
65
- copy, routes, state, interactions — rather than replacing it.
114
+ The exported HTML is the page: keep its document, structure, and bindings and
115
+ build around it — routing, copy, state, interactions — rather than re-authoring
116
+ the markup around mined assets.
@@ -1,51 +0,0 @@
1
- ---
2
- name: design-branch
3
- description: "Required whenever the deliverable is more than one viewport — a
4
- full page, a multi-route site, or an app with several states: expands one
5
- approved design into every planned screen and converts each page as one
6
- ordered package. Not for a single above-the-fold screen."
7
- ---
8
-
9
- # Design branch
10
-
11
- ## Setup
12
-
13
- If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design-branch` once. This installs the CLI and verifies this skill's account scopes.
14
-
15
- One approved screen fixes the visual system; branching extends it across the
16
- rest of the surface with consistent, professional quality instead of
17
- re-deriving the design once per screen. The server plans the screens and
18
- their dependencies; one command executes the whole plan and keeps every paid
19
- screen addressable, so a retry never repeats paid work. Use it whenever the
20
- deliverable is more than one viewport; a single fold is a plain convert.
21
-
22
- ## 1. Execute
23
-
24
- 12ui branch execute <run-dir> \
25
- --concept "<product, audience, what the rest of the surface must cover>" \
26
- --scope page|site --convert html
27
-
28
- The run directory is the one `12ui draft` printed; the starting design is
29
- the candidate `12ui select` recorded there. `--scope page` grows that screen
30
- into viewports 2..n of its own page; `--scope site` adds sibling routes and
31
- app states as well. `--convert html` converts each finished page as one
32
- ordered package; omitting it stops at downloaded PNGs. A run with no draft
33
- behind it takes a fresh directory and names its own starting design — the
34
- command refuses with both spellings if none is given. Either way the starting
35
- design is viewport 1 of the first page; it needs no separate conversion.
36
-
37
- ## 2. Follow
38
-
39
- 12ui next <run-dir>
40
-
41
- Execute returns immediately; `12ui next` reports progress and the one command
42
- to run next, and `--wait` blocks instead of polling.
43
- `12ui branch resume <run-dir>` continues an interrupted run, replaying
44
- already-settled screens for free.
45
-
46
- ## 3. Collect
47
-
48
- Screens land in `<run-dir>/branch/screens/<slot>.png` and per-page HTML in
49
- `<run-dir>/branch/pages/<page-id>.html`, materialized when the run reaches a
50
- terminal state. Each exported page is the page: build the surface around its
51
- document rather than replacing it.
@@ -1,8 +0,0 @@
1
- interface:
2
- display_name: "Design Branch"
3
- short_description: "Expand one approved design into a whole site using 12ui design branch"
4
- icon_small: "./assets/small-400px.png"
5
- icon_large: "./assets/large-logo.svg"
6
- default_prompt: "Use $design-branch to expand this homepage into a site."
7
- policy:
8
- allow_implicit_invocation: true
@@ -1,7 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" role="img" aria-label="design-branch logo">
2
- <path d="M 366.13 592.44 L 716.78 247.44 L 657.87 187.56 L 307.22 532.56 Z" stroke="none" fill="#000"/>
3
- <path d="M 307.22 491.44 L 657.87 836.44 L 716.78 776.56 L 366.13 431.56 Z" stroke="none" fill="#000"/>
4
- <path d="M 96 366 L 388 366 L 388 658 L 96 658 Z" stroke="none" fill="#000"/>
5
- <path d="M 636 122 L 928 122 L 928 414 L 636 414 Z" stroke="none" fill="#000"/>
6
- <path d="M 636 610 L 928 610 L 928 902 L 636 902 Z" stroke="none" fill="#000"/>
7
- </svg>
@@ -1,65 +0,0 @@
1
- ---
2
- name: design-convert
3
- description: "Required to turn a finished PNG, JPEG, or WebP design into
4
- production output: converts it once into a structured LayerDoc, then derives
5
- responsive HTML, web or native app code, PDF, PSD, PPTX, Sketch, SVG, PNG,
6
- JPEG, or WebP from that one conversion."
7
- ---
8
-
9
- # Design convert
10
-
11
- ## Setup
12
-
13
- If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design-convert` once. This installs the CLI and verifies this skill's account scopes.
14
-
15
- Convert one finished image once, keep its base LayerDoc conversion, and
16
- derive every required format from that structured source — near-pixel
17
- fidelity, faster and truer than recreating the design by hand.
18
-
19
- ## 1. Convert
20
-
21
- 12ui convert <source-image> --export html
22
-
23
- Converts the image to a LayerDoc and exports responsive HTML alongside it in
24
- one blocking command, which is faster than converting and then exporting.
25
- The result carries the conversion under `id` and the export under `export.id`.
26
-
27
- ## 2. Export more formats
28
-
29
- 12ui export <conversion-id> --output html_fixed,svg,pdf \
30
- --out-dir <dir> --idempotency-key <stable-key>
31
-
32
- Derives further formats from the finished conversion without repeating
33
- extraction, and independent exports run in parallel. Outputs: `html`,
34
- `html_fixed`, `svg`, `png`, `jpg`, `webp`, `pdf`, `psd`, `pptx`, `sketch`,
35
- `web_project`, `app_project`. Reusing the same key replays a finished export
36
- instead of buying it again. Project outputs take a profile matching the
37
- target project:
38
-
39
- --web-profile '{"version":1,"framework":"react","styling":"tailwind","language":"typescript","packaging":"page"}'
40
- --app-profile '{"version":1,"framework":"expo","styling":"native","language":"typescript","packaging":"screen"}'
41
-
42
- ## 3. One page, one package
43
-
44
- Ordered viewports of one continuous page are one package conversion, not one
45
- convert per image — separate conversions lose page order and stitching:
46
-
47
- 12ui convert package --manifest <package.json> --out-dir <dir>
48
-
49
- The manifest names each page and its ordered viewport images, with paths
50
- relative to the manifest; independent routes are separate page entries:
51
-
52
- { "version": 1, "output": "html", "pages": [
53
- { "id": "home", "viewports": [
54
- { "id": "a", "image": "screens/a.png" },
55
- { "id": "b", "image": "screens/b.png" } ] } ] }
56
-
57
- Writes `<out-dir>/<page-id>.html` per page plus `package.result.json`. A
58
- viewport may carry `"sourceConversionId": "<id>"` to reuse an already
59
- succeeded conversion of the same bytes for free.
60
-
61
- ## 4. Integrate
62
-
63
- The exported HTML is the page: keep its document, structure, and bindings,
64
- and build the surface around it — routing, real copy, state, interactions —
65
- rather than mining it for assets and re-authoring the markup around them.
@@ -1,8 +0,0 @@
1
- interface:
2
- display_name: "Design Convert"
3
- short_description: "Quickly turn any image into functioning code using 12ui design convert"
4
- icon_small: "./assets/small-400px.png"
5
- icon_large: "./assets/large-logo.svg"
6
- default_prompt: "Use $design-convert to turn this screenshot our homepage."
7
- policy:
8
- allow_implicit_invocation: true
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" role="img" aria-label="design-convert logo">
2
- <path d="M 212.618 118.553 C 212.320 119.329, 269.828 177.414, 354.308 261.665 C 480.995 388.008, 596.565 503.592, 703.850 611.250 C 723.445 630.912, 740.198 647, 741.081 647 C 741.963 647, 760.357 629.113, 781.957 607.250 C 817.796 570.974, 830 557.760, 830 555.229 C 830 554.721, 830.900 553.268, 832 552 C 833.100 550.732, 834 548.889, 834 547.906 C 834 546.923, 834.395 545.874, 834.877 545.576 C 835.359 545.278, 836.990 541.154, 838.500 536.411 C 841.095 528.261, 841.219 527.012, 840.764 513.644 C 840.407 503.161, 839.859 498.723, 838.647 496.500 C 837.748 494.850, 837.010 492.783, 837.006 491.907 C 837.003 491.031, 835.881 488.331, 834.513 485.907 C 833.145 483.483, 831.460 480.375, 830.770 479 C 830.079 477.625, 829.171 476.050, 828.752 475.500 C 828.333 474.950, 826.080 471.993, 823.745 468.929 C 821.410 465.865, 759.798 403.540, 686.830 330.429 C 613.861 257.318, 542.534 185.800, 528.325 171.500 C 500.634 143.633, 495.476 138.814, 490.674 136.331 C 488.982 135.457, 486.981 134.124, 486.227 133.370 C 485.474 132.617, 484.362 132, 483.757 132 C 483.152 132, 481.947 131.415, 481.079 130.701 C 480.210 129.987, 477.025 128.358, 474 127.082 C 470.975 125.806, 467.375 124.199, 466 123.510 C 464.625 122.822, 461.700 121.944, 459.500 121.559 C 457.300 121.175, 453.475 120.143, 451 119.265 C 446.992 117.844, 433.742 117.647, 329.810 117.458 C 234.541 117.285, 213.027 117.486, 212.618 118.553 M 181.462 282.250 C 181.201 282.938, 181.103 389.438, 181.244 518.917 C 181.458 715.805, 181.722 754.407, 182.854 754.785 C 183.638 755.046, 192.280 747.084, 203.388 735.868 C 213.937 725.216, 263.953 674.802, 314.534 623.838 C 365.115 572.874, 409.833 527.793, 413.907 523.657 L 421.314 516.137 352.555 447.819 C 314.737 410.243, 261.517 357.337, 234.288 330.250 C 207.059 303.163, 184.141 281, 183.359 281 C 182.577 281, 181.724 281.563, 181.462 282.250 M 489.345 612.758 C 434.810 667.616, 346.160 756.752, 292.345 810.838 C 238.530 864.924, 194.110 909.865, 193.634 910.707 C 193.068 911.708, 193.241 912.543, 194.134 913.117 C 194.905 913.613, 250.122 913.887, 321 913.748 C 440.477 913.512, 446.836 913.409, 453.500 911.611 C 461.074 909.566, 466.774 907.611, 471.500 905.434 C 473.150 904.675, 475.625 903.588, 477 903.019 C 482.056 900.929, 490.662 895.645, 496.614 890.976 C 499.976 888.339, 554.089 834.894, 616.864 772.211 C 694.684 694.504, 731 657.584, 731 656.177 C 731 655.042, 730.212 653.501, 729.250 652.753 C 727.654 651.513, 690.616 614.192, 619.494 542.160 C 596.040 518.406, 590.318 512.968, 588.816 513.008 C 588.642 513.013, 543.880 557.901, 489.345 612.758" stroke="none" fill="#000" fill-rule="evenodd"/>
3
- </svg>
@@ -1,41 +0,0 @@
1
- ---
2
- name: design-draft
3
- description: "Required to draft candidate interface designs through the
4
- hosted create API when a run needs more slots or per-slot control than
5
- `12ui draft` exposes: claims an idempotent run from a written brief,
6
- generates one candidate per slot, and downloads the images."
7
- ---
8
-
9
- # Design draft
10
-
11
- ## Setup
12
-
13
- If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design-draft` once. This installs the CLI and verifies this skill's account scopes.
14
-
15
- Buy one small set of candidate designs and keep every one addressable. Use
16
- this when the run needs more than the four candidates `12ui draft` produces
17
- in one step, a corpus reference or direction per slot, or tighter control
18
- over what each slot explores.
19
-
20
- 12ui create claim --concept "<product, audience, surface, goal, personality>" \
21
- --candidates '[{"slot":"a","direction":"<short direction>"},
22
- {"slot":"b","direction":"<short direction>",
23
- "referenceId":"gen-<corpus-id>"}]'
24
- 12ui create dispatch <run-id>
25
- 12ui create download <run-id> --out-dir <directory>
26
-
27
- Each command prints the next; `12ui next <run-id>` reports what is still
28
- generating, and `--wait` blocks until every slot settles.
29
-
30
- The judgement is the brief and the slots. One aspect covers the whole run —
31
- `landscape` (1536x1024), `portrait` (1024x1536), `square` (1024x1024) — and
32
- directions must be meaningfully different from each other, since four
33
- paraphrases of one idea buy four of the same design. A slot takes at most one
34
- reference: `referenceId` names a corpus reference, or `"useReferenceImage":
35
- true` conditions it on the run-level `--reference-image`, whose
36
- `preserve-structure` mode keeps that image's layout. A run holds 1-96
37
- candidates in slots `a`-`cr` and expires seven days after the claim.
38
-
39
- A candidate that comes back `failed` is a settled, paid outcome rather than a
40
- transient error. A winning candidate seeds a branch run as
41
- `--winner-run <run-id> --winner-slot <slot>` without re-uploading its bytes.
@@ -1,8 +0,0 @@
1
- interface:
2
- display_name: "Design Draft"
3
- short_description: "Draft candidate design directions from a brief with 12ui design draft"
4
- icon_small: "./assets/small-400px.png"
5
- icon_large: "./assets/large-logo.svg"
6
- default_prompt: "Use $design-draft to draft four homepage directions."
7
- policy:
8
- allow_implicit_invocation: true
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" role="img" aria-label="design-create logo">
2
- <path d="M 600 110 C 600 335.72, 716.28 452, 942 452 C 716.28 452, 600 568.28, 600 794 C 600 568.28, 483.72 452, 258 452 C 483.72 452, 600 335.72, 600 110 Z M 232 628 C 232 745.48, 292.52 806, 410 806 C 292.52 806, 232 866.52, 232 984 C 232 866.52, 171.48 806, 54 806 C 171.48 806, 232 745.48, 232 628 Z" stroke="none" fill="#000"/>
3
- </svg>
@@ -1,42 +0,0 @@
1
- ---
2
- name: design-search
3
- description: "Required when reference imagery is the deliverable: searches
4
- the 12ui design corpus from a rough UI, web, or mobile concept and downloads
5
- a ranked, diverse set of reference images with strong visual quality, sound
6
- UX, and personality."
7
- ---
8
-
9
- # Design search
10
-
11
- ## Setup
12
-
13
- If the `12ui` CLI is not present, run `npx -y @12ui/design skill install --skill design-search` once. This installs the CLI and verifies this skill's account scopes.
14
-
15
- The corpus has already explored, ranked, and diversified the design space,
16
- so retrieval returns real reference images in a considered order rather than
17
- another model's guess. Use it when the references themselves are the
18
- deliverable — surveying a space, gathering comparators, or conditioning work
19
- you drive yourself. `12ui draft` already runs this retrieval when drafting.
20
-
21
- ## 1. Search
22
-
23
- 12ui corpus inspire \
24
- --query "<product, audience, surface, goal, personality>" \
25
- --out-dir .12ui/<slug>/references
26
-
27
- Downloads the full images into the output directory and writes
28
- `manifest.json` — the completion record with the ranked order, reference IDs,
29
- and hashes. Preserve the returned order; the ranking is the product.
30
-
31
- `--mode direct|balanced|adventurer` trades literal query adherence against
32
- exploration; `balanced` is the default. For a redesign,
33
- `--reference-image <existing-interface.png>` conditions the ranking on the
34
- current interface: its bytes are embedded once for retrieval, are not
35
- persisted, and it is not one of the returned references.
36
-
37
- ## 2. Resume
38
-
39
- 12ui corpus resume --out-dir <references-dir>
40
-
41
- Continues an interrupted search in the same directory, reusing everything
42
- already settled instead of repeating the retrieval.
@@ -1,8 +0,0 @@
1
- interface:
2
- display_name: "Design Search"
3
- short_description: "Instantly find reference screenshots from the 12ui design corpus"
4
- icon_small: "./assets/small-400px.png"
5
- icon_large: "./assets/large-logo.svg"
6
- default_prompt: "Run a $design-search to find homepage concepts."
7
- policy:
8
- allow_implicit_invocation: true
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" role="img" aria-label="design-search logo">
2
- <path d="M 409.500 119.671 C 394.686 120.262, 366.664 125.155, 350.500 129.975 C 331.931 135.511, 328.971 136.500, 324.669 138.611 C 323.112 139.375, 321.156 140, 320.323 140 C 319.490 140, 317.614 140.644, 316.154 141.431 C 314.694 142.219, 311.250 143.851, 308.500 145.058 C 301.781 148.009, 282.470 157.699, 277.500 160.614 C 275.300 161.904, 272.825 163.276, 272 163.662 C 271.175 164.049, 269.375 165.132, 268 166.070 C 266.625 167.008, 262.800 169.506, 259.500 171.621 C 256.200 173.736, 253.050 175.816, 252.500 176.243 C 251.950 176.670, 247.902 179.754, 243.505 183.097 C 239.108 186.439, 235.283 189.474, 235.005 189.841 C 234.727 190.208, 231.350 193.037, 227.500 196.129 C 219.093 202.879, 201.476 220.636, 192.904 231 C 189.492 235.125, 186.407 238.725, 186.047 239 C 184.854 239.912, 174.380 253.473, 173.689 255 C 173.316 255.825, 171.190 258.975, 168.965 262 C 166.740 265.025, 164.481 268.400, 163.945 269.500 C 163.409 270.600, 162.076 272.850, 160.983 274.500 C 159.890 276.150, 158.303 278.850, 157.457 280.500 C 156.611 282.150, 154.833 285.300, 153.507 287.500 C 152.181 289.700, 150.816 292.175, 150.476 293 C 150.135 293.825, 149.435 295.175, 148.921 296 C 148.408 296.825, 147.729 298.175, 147.413 299 C 147.097 299.825, 145.935 302.525, 144.831 305 C 143.728 307.475, 142.134 311.075, 141.290 313 C 140.446 314.925, 139.135 317.774, 138.378 319.331 C 137.620 320.888, 136.985 322.688, 136.966 323.331 C 136.947 323.974, 136.063 326.300, 135 328.500 C 133.937 330.700, 133.053 333.187, 133.034 334.027 C 133.015 334.868, 132.387 336.443, 131.637 337.527 C 130.888 338.612, 130.039 340.850, 129.752 342.500 C 129.464 344.150, 128.749 346.850, 128.164 348.500 C 125.302 356.561, 123 364.898, 123 367.198 C 123 368.605, 122.325 371.371, 121.500 373.346 C 120.675 375.320, 120 378.431, 120 380.258 C 120 382.085, 119.304 386.252, 118.454 389.517 C 117.603 392.783, 116.485 400.415, 115.968 406.477 C 115.452 412.540, 114.528 421.775, 113.916 427 C 112.688 437.480, 113.255 467.576, 114.924 480.500 C 115.492 484.900, 116.419 492.100, 116.985 496.500 C 119.097 512.935, 120.779 521.349, 125.178 537.500 C 129.064 551.764, 130.237 555.567, 131.602 558.331 C 132.371 559.888, 133 561.920, 133 562.846 C 133 563.772, 133.900 566.209, 135 568.261 C 136.100 570.314, 137 572.633, 137 573.415 C 137 574.198, 137.620 576.112, 138.378 577.669 C 139.725 580.438, 140.565 582.325, 144.974 592.500 C 146.166 595.250, 147.525 598.175, 147.993 599 C 148.462 599.825, 150.956 604.550, 153.536 609.500 C 156.116 614.450, 159.830 620.975, 161.789 624 C 173.813 642.568, 182.273 654.924, 184.940 657.812 C 186.623 659.633, 188 661.546, 188 662.062 C 188 662.578, 188.358 663, 188.795 663 C 189.231 663, 191.369 665.343, 193.545 668.206 C 200.173 676.930, 226.894 703.002, 238.699 712.264 C 244.823 717.069, 250.299 721, 250.867 721 C 251.436 721, 252.260 721.563, 252.700 722.250 C 253.544 723.569, 259.531 728, 260.470 728 C 260.773 728, 263.261 729.575, 266 731.500 C 268.739 733.425, 271.170 735, 271.402 735 C 271.635 735, 274.049 736.463, 276.767 738.250 C 281.767 741.538, 298.320 750.027, 307.500 754.010 C 310.250 755.204, 313.400 756.596, 314.500 757.105 C 315.600 757.614, 317.850 758.448, 319.500 758.958 C 321.150 759.469, 324.300 760.566, 326.500 761.396 C 338.785 766.033, 347.705 769, 349.358 769 C 350.388 769, 353.317 769.648, 355.866 770.441 C 360.756 771.962, 367.577 773.432, 377.500 775.103 C 380.800 775.659, 386.997 776.764, 391.270 777.557 C 400.769 779.321, 420.567 779.510, 421.595 777.847 C 421.986 777.213, 422.353 733.533, 422.409 680.781 C 422.499 596.105, 422.332 584.706, 420.989 583.490 C 420.152 582.733, 416.325 581.640, 412.484 581.063 C 397.776 578.851, 378.214 571.248, 366.760 563.292 C 364.153 561.482, 361.666 560, 361.232 560 C 360.799 560, 359.724 559.212, 358.843 558.250 C 357.962 557.288, 355.725 555.392, 353.871 554.038 C 347.950 549.714, 333.644 534.711, 329.250 528.218 C 326.913 524.763, 325 521.746, 325 521.513 C 325 521.280, 323.838 519.381, 322.417 517.294 C 320.997 515.207, 318.715 511.025, 317.347 508 C 315.979 504.975, 313.991 500.651, 312.929 498.390 C 311.868 496.130, 311 493.513, 311 492.575 C 311 491.636, 310.482 489.900, 309.848 488.716 C 308.595 486.375, 306.317 475.323, 304.958 465 C 303.894 456.910, 303.879 434.195, 304.934 427.500 C 306.860 415.275, 314.192 391.408, 316.832 388.768 C 317.474 388.126, 318 386.845, 318 385.922 C 318 385, 318.658 383.699, 319.461 383.032 C 320.265 382.365, 321.223 380.873, 321.590 379.716 C 321.957 378.559, 323.836 375.338, 325.765 372.556 C 337.650 355.424, 353.264 340.355, 368.500 331.313 C 372.272 329.074, 386.646 322, 387.422 322 C 387.849 322, 389.616 321.328, 391.349 320.507 C 396.031 318.288, 404.603 315.992, 412.500 314.841 C 416.350 314.280, 420.167 313.179, 420.981 312.394 C 422.267 311.155, 422.484 298.418, 422.628 215.963 C 422.786 124.818, 422.719 120.920, 420.962 119.980 C 419.955 119.441, 418.539 119.088, 417.816 119.196 C 417.092 119.304, 413.350 119.517, 409.500 119.671 M 452.942 120.217 C 451.038 120.922, 451 122.793, 451 216.019 L 451 311.102 454.426 312.534 C 456.311 313.321, 460.473 314.257, 463.676 314.614 C 466.879 314.972, 471.017 315.879, 472.872 316.632 C 474.727 317.384, 477.202 318.015, 478.372 318.034 C 479.542 318.053, 482.300 318.937, 484.500 320 C 486.700 321.063, 489.232 321.947, 490.128 321.966 C 491.023 321.985, 492.315 322.675, 493 323.500 C 493.685 324.325, 495.035 325, 496 325 C 496.965 325, 498.315 325.675, 499 326.500 C 499.685 327.325, 500.706 328, 501.269 328 C 502.826 328, 512.661 334.682, 520.500 341.065 C 529.035 348.015, 544.158 363.852, 546.428 368.216 C 546.795 368.922, 548.194 371.300, 549.536 373.500 C 550.878 375.700, 552.476 378.738, 553.086 380.250 C 553.696 381.762, 554.602 383, 555.098 383 C 555.594 383, 556 383.580, 556 384.289 C 556 384.997, 556.900 387.342, 558 389.500 C 559.100 391.658, 560 394.128, 560 394.989 C 560 395.850, 560.638 397.466, 561.417 398.579 C 562.197 399.692, 563.156 402.379, 563.548 404.551 C 563.940 406.723, 564.628 408.967, 565.077 409.539 C 565.527 410.110, 566.363 413.485, 566.935 417.039 C 567.508 420.592, 568.432 425.072, 568.988 426.993 C 570.612 432.602, 570.254 463.281, 568.475 470.936 C 566.200 480.724, 563.032 491.157, 561.424 494.154 C 560.641 495.614, 560 497.501, 560 498.347 C 560 499.193, 559.065 501.471, 557.922 503.408 C 556.645 505.572, 556.091 507.712, 556.486 508.957 C 557.022 510.645, 656.048 610.175, 659.019 612.012 C 659.553 612.342, 668.491 621.024, 678.883 631.306 C 689.275 641.588, 698.247 650, 698.821 650 C 700.009 650, 704.596 644.503, 711.341 635 C 722.299 619.560, 732.792 600.132, 743.477 575.500 C 747.155 567.021, 748.003 564.829, 748.034 563.716 C 748.053 563.047, 748.937 560.700, 750 558.500 C 751.063 556.300, 751.947 553.683, 751.966 552.684 C 751.985 551.686, 752.484 549.963, 753.077 548.857 C 754.683 545.855, 759.016 530.124, 761.163 519.500 C 761.719 516.750, 762.773 512.025, 763.506 509 C 764.238 505.975, 765.381 499, 766.045 493.500 C 766.710 488, 767.623 480.575, 768.075 477 C 769.246 467.745, 769.129 423.832, 767.912 415.500 C 767.350 411.650, 766.299 404, 765.577 398.500 C 764.855 393, 763.790 386.475, 763.209 384 C 762.629 381.525, 761.194 375.225, 760.021 370 C 757.846 360.314, 755.621 351.876, 753.826 346.500 C 753.275 344.850, 752.436 342.150, 751.961 340.500 C 750.232 334.491, 746.818 325.476, 745.920 324.550 C 745.414 324.027, 745 322.788, 745 321.796 C 745 320.804, 744.100 318.314, 743 316.261 C 741.900 314.209, 741 311.791, 741 310.887 C 741 309.984, 740.325 308.685, 739.500 308 C 738.675 307.315, 738 306.116, 738 305.335 C 738 304.554, 736.371 300.896, 734.379 297.207 C 724.927 279.697, 723.627 277.396, 722.359 275.921 C 721.611 275.053, 721 274.063, 721 273.721 C 721 273.110, 718.617 269.344, 710.733 257.500 C 701.667 243.878, 689.522 229.526, 673 212.908 C 656.147 195.958, 637.827 180.662, 623.500 171.580 C 620.200 169.488, 616.375 167.008, 615 166.070 C 613.625 165.132, 611.825 164.047, 611 163.658 C 610.175 163.270, 606.350 161.201, 602.500 159.061 C 594.447 154.586, 581.762 148.227, 574.500 145.025 C 571.750 143.812, 568.600 142.423, 567.500 141.937 C 563.962 140.375, 556.612 137.890, 552.539 136.879 C 550.361 136.338, 548.111 135.521, 547.539 135.063 C 546.968 134.605, 544.475 133.772, 542 133.210 C 539.525 132.649, 536.150 131.736, 534.500 131.181 C 524.420 127.792, 503.564 123, 498.894 123 C 497.113 123, 492.021 122.348, 487.578 121.551 C 478.686 119.955, 456.010 119.082, 452.942 120.217 M 535.766 535.234 C 533.438 538.788, 520.252 551.356, 513.500 556.457 C 510.200 558.950, 506.967 561.433, 506.315 561.973 C 502.980 564.742, 484.849 574, 482.762 574 C 482.013 574, 480.973 574.406, 480.450 574.903 C 479.245 576.049, 468.464 578.941, 460 580.388 C 456.425 581, 452.938 581.864, 452.250 582.309 C 451.275 582.940, 451 595.368, 451 638.878 L 451 694.638 460.250 703.557 C 465.337 708.462, 503.025 745.622, 544 786.135 C 584.975 826.647, 628.560 869.740, 640.855 881.897 C 653.151 894.054, 663.726 903.988, 664.355 903.974 C 664.985 903.960, 720.625 904.040, 788 904.153 C 906.606 904.351, 910.511 904.298, 910.857 902.502 C 911.113 901.176, 904.786 894.357, 888.652 878.573 C 876.243 866.433, 793.148 783.825, 703.997 695 C 596.999 588.393, 541.122 533.397, 539.601 533.198 C 538.072 532.997, 536.783 533.681, 535.766 535.234" stroke="none" fill="#000" fill-rule="evenodd"/>
3
- </svg>