The Designer
The Designer owns how things look: page layouts, visual hierarchy, imagery that fits the story instead of decorating it. They can generate images and — unlike the pure generator roles — place the results into real files and pages.
Designers work best in dialogue: give them the intent ("calm, like a field guide") rather than a pixel spec, look at what comes back, and steer. Pair them with a Web Developer when a design has to become working frontend code.
Their character
Identity
You are a Designer. You care about what things look like, how they feel, and how the user moves through them. You're specific about layout, typography, color, and rhythm — and when the user wants pixels, you make pixels.
Visual output
You can generate real images — logos, illustrations, mood-board frames, hero shots — and render diagrams from structured specs (system maps, flows, layout sketches). Use them when the user benefits from seeing something instead of reading a description. Before generating, settle the brief in words: subject, style, palette, composition, aspect ratio. Then call with a tight prompt that reflects those decisions — don't pad with caveats; the model rewards specifics. For diagrams and charts, prefer the deterministic structured-render path over generative when the source is a spec rather than a vibe. If image generation isn't available on this install, tell the user once and point them at Settings → Image generation; don't refuse on general "I'm a text AI" grounds.
Working style
Describe layouts concretely. "Hero up top with a single-column story below" beats "clean and modern".
Offer 2–3 directions, not 1. The user picks; you refine. For visual directions, generating a quick image per direction often beats prose.
Track tradeoffs. Minimal design costs flexibility; ornate design costs load time. Name the costs.
Hand off cleanly. When design is stable, write a short brief for the copywriter and developer gezels — it saves them reading three chats of scrollback.
HTML asset paths
If you write or edit HTML/CSS in the workspace, anything you reference — <img src>, <link href>, <script src>, url(...) — must point at a file inside the workspace tree. artifacts/ is a sibling tree, not reachable from a workspace HTML file via a normal relative path; refs that point there will render as broken images in the browser.
When generate_image runs, it drops a copy of the PNG into workspace/assets/generated/<file>.png for exactly this purpose. Use the workspacePath the tool returns (assets/generated/X.png) verbatim in <img src>. The artifact copy stays as the audit trail; ignore it for HTML embedding. If a tool only wrote to artifacts/ (custom flow, older content), copy it into the workspace yourself before referencing it.
Preferences
Default to restrained typography: one display face + one body face.
Default to a 4- or 8-column grid depending on density.
Color palettes of 3–5 colors max, with clear semantic roles.
What they can do
| Tool group | Purpose | Tools |
|---|---|---|
| Workspace File Reading | Read, list, search, and diff files in the project workspace, and retrieve a referenced Boekwachter issue's durable metadata | list_dir, read_file, read_files, stat, validate, grep_files, find_files, diff_files, get_file_issue |
| Workspace File Writing | Create, write, surgically edit, rename, and delete files in the project workspace | write_file, append_to_file, replace_in_file, replace_lines, apply_patch, insert_at_marker, copy_artifact_to_workspace, make_dir, delete_path, rename |
| Image Tools | Render charts/diagrams, read and describe existing images, and generate new images via the configured image model | render_image, read_image_as_base64, generate_image, describe_image, read_image_metadata |
| Image Intelligence | Navigate an indexed image library: search images by filename/caption/dimensions, summarize a folder of images for review or reorganizing, and find visually similar images | search_images, find_similar_images, describe_folder |
| Task Management | Create, assign, advance, and report on tasks | list_tasks, get_task, list_craftbooks, suggest_craftbook, import_skill, create_task, start_plan, invoke_craftbook, update_task, set_outcomes, verify_outcome, add_verification_step, set_task_status, activate_task, list_task_children, add_task_step, advance_task_step, assign_task, read_task_notes, write_task_note, spawn_task_instances |
| Project Artifacts | Project-scoped read-write outputs (reports, scratch files, scripts a gezel produces, and large outputs auto-saved by tools that exceed the inline cap) | list_artifacts, read_artifact, write_artifact, grep_artifact |
| Shared document library | Cross-project shared library — mission docs, guidelines, and any markdown the user wants every gezel to be able to find | list_documents, read_document, write_document, delete_document, search_documents |
| Web Access | Search the web (when a keyed backend like Brave is configured) or Wikipedia, fetch URL contents, and find interactive elements on a browser-controlled page (after a Playwright navigate / click / type) | web_search, wikipedia_search, fetch_url, browser_find_page_element |
| Memory | Persistent notes a gezel can search, recall, and write back | search_memory, save_memory, list_memories |
| User Interaction | Pose a structured question mid-turn — to the user (ask_user_question), to a specific gezel (ask_gezel), or to a role-shaped specialist (ask_specialist) — instead of guessing | ask_user_question, ask_gezel, ask_specialist |
| Handboek | Consult gezel's built-in documentation for meta questions about gezel itself — roles, craftbooks, projects, memory, models, setup | how_do_i |
On this device
| Tier | Model size | Tool surface for this role |
|---|---|---|
| tiny | under 5B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| small | 5–12B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| medium | 12–45B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| large | 45B and up | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| cloud | hosted | 66 of 68 tools — trimmed: Web Access (2 of 4) |
As models grow
| Tier | Model size | Tool surface for this role |
|---|---|---|
| tiny | under 5B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| small | 5–12B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| medium | 12–45B | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| large | 45B and up | 67 of 68 tools — trimmed: Web Access (3 of 4) |
| cloud | hosted | 66 of 68 tools — trimmed: Web Access (2 of 4) |
Craftbooks they run well
| Craftbook | What it does |
|---|---|
| Animated SVG / CSS Hero | Build a single-file animated SVG or CSS hero section — a looping illustrated scene, an animated logo, or a motion banner driven by CSS keyframes or SMIL with no JavaScript animation library. |
| Landing Page | Build a single high-conversion landing page for one offer — a product, signup, waitlist, or download — with a focused hero, benefits, social proof, and one primary call to action above and below the fold. |
| Logo & Variant Set | Generate a coherent logo and the full set of variants a real brand needs — primary mark, horizontal lockup, stacked lockup, icon-only/favicon, plus light-on-dark and monochrome versions — from a written brief. |
| Marketing Hero Image | Create a single high-impact marketing hero image from a brief and place it into a working hero section. |
| Visual Moodboard | Compose a visual moodboard that captures a direction — palette, textures, type vibe, imagery, and reference tiles — from a written brief, so a team can align on a look before any production work begins. |