← All craftbooks

Coherent Icon Pack

Media: imagesevalv1.0.0released 2026-06-05workflow: build-loop

Produce a coherent set of UI icons that look like they belong to one family — consistent grid, stroke weight, corner radius, optical sizing, and metaphor language — from a named list of concepts. Lock the style system (grid, stroke, padding, keyline shapes) BEFORE drawing any icon, because icon-set quality is almost entirely about consistency: a pack of individually-nice icons with mismatched strokes looks broken. Then generate every icon to the system and assemble a previewable sheet. Covers icon sets, UI icons, SVG icon libraries, glyph packs, and design systems.

Steps

Entry step: style-scope. Each step names the specialist role it wants; the full working prompt is expandable.

  1. Style scopevisual-designerentry

    lock grid, stroke, radius, padding, and the icon list

    Show working prompt
    1) Lock the icon system parameters: canvas/grid size (e.g. 24x24), uniform stroke weight (e.g. 2px), corner radius, end-cap style (round/square), and the safe padding/keyline so every glyph occupies the same optical area. 2) Decide outline vs filled and the metaphor language (e.g. minimal line icons). 3) Enumerate the EXACT icon list to produce (name each, e.g. home, search, settings, user, bell, trash) — aim for at least 6. 4) Write an acceptance-criteria checklist: 'all icons share the same grid and stroke weight', 'all use the same cap/join style', 'each icon is a valid standalone SVG', 'metaphors are conventional and recognizable', 'at least 6 icons produced'. 5) Record the system + list + checklist via write_task_note AND to notes/style-scope.md. No drawing yet.
  2. Generate iconsimage-generator

    draw every icon to the locked system

    Show working prompt
    1) Read style-scope.md. 2) Author each icon as a standalone SVG on the locked grid (e.g. 24x24 viewBox) with the EXACT stroke weight, cap, and join from the system — set these as shared attributes, not per-path guesses. 3) Keep every glyph within the safe padding so they sit at matching optical weight. 4) Use conventional, instantly-recognizable metaphors. 5) Save each into assets/ as <name>.svg (matching the scoped list). 6) After drawing, eyeball them side by side and fix any that have a heavier stroke or odd padding. Good looks like: laid out in a row, they read as ONE family. Produce all named icons; do not skip any.
  3. Assemble the sheetdeveloper

    preview grid + usage snippet

    Show working prompt
    1) Build a single index.html that lays every icon out in a uniform grid with its name label, rendered at the intended size and again at a small size (16px) to expose alignment drift. 2) Render each icon on both light and dark backgrounds to confirm the stroke color is themeable. 3) Include a one-line usage note (how to drop an SVG inline) and restate the grid/stroke spec. 4) Reference the real assets/*.svg files. 5) On a loop-back, fix only named gaps. 6) write_task_note the sheet path and icon count. Good looks like: a tidy preview where any inconsistency is obvious.
  4. Evaluatereviewer

    Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.

    Show working prompt
    1) Confirm assets/ holds at least 6 valid SVG files matching the scoped names (PASS/FAIL). 2) Open index.html and inspect the grid at both sizes: do all icons share stroke weight, cap style, and optical padding (PASS/FAIL — this is the make-or-break criterion)? 3) Check each metaphor is conventional and recognizable. 4) Confirm icons render on light and dark backgrounds. 5) Write PASS/FAIL per criterion. Inconsistent stroke/grid → loop back to generate; presentation issues → assemble.
    
    Then route — this is the whole point of the loop:
    
    - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`.
    - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "assemble" })` to loop back. The builder fixes exactly those gaps.
    
    Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in.
  5. Finishdeveloper

    All acceptance criteria met. Stamp a short summary and report DONE.

    Show working prompt
    Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.

Triggers

Phrases that suggest this craftbook to a crew.

Source

View this craftbook on GitHub · MIT license