drawing-from-references4.9 KB
View saved version →
---
name: drawing-from-references
description: Use whenever an SVG Lab design needs a drawn illustration, such as a person, animal, object, scene, spot or empty-state drawing, including screens the user wants drawn with no images. Covers planning one illustration per subject, the reference search, the 3 generated versions, drawing it as SVG with draw_svg beside the reference, placing it and exporting. Not on ChatGPT Free, where the screens use stock photos.
---
# Illustrations in SVG Lab Draw
- 1. Plan. After add_artboard has made the screens, plan_illustrations lists every illustration: one subject each, what it shows (from what its screen says) and the screen it goes on. In a ui project every screen gets its own drawing: one illustration per screen at least, and a drawing is never shared or copied onto another screen; a character that appears on several screens gets its own illustration on each of them. In a marketing project (decks, posters, documents) plan only the pages whose message a picture carries, and one illustration may go on several pages. Its reply gives one brief per illustration (sub_agents).
- 2. Make them the way the user chose in new_project's questions; never ask again. SVG Lab's AI: generate_illustration {illustration, prompt} for each planned illustration, up to 4 at a time, each prompt the whole brief (subject and what it does, setting, the same style words in every brief, the project's palette as hex, no background, no text); it returns at once, every later reply lists the finished pictures, so go on with step 3 and set each one in step 4. Drawn by hand: one sub-agent per illustration, as follows. Each illustration is its own drawing task, the way a user asks for one drawing. In ChatGPT Work mode start a fresh sub-agent for each illustration (collaboration.spawn_agent with fork_turns "none", up to 6 at once) and give it its brief from sub_agents, word for word. Each sub-agent does that illustration's whole job: find_references, 3 images from its image generation, set_reference_image, the drawing and draw_svg, and replies with its group_id. Where there is no sub-agent tool, follow each brief yourself, one illustration at a time. On ChatGPT Free, or when you cannot tell the user's ChatGPT plan, nothing is drawn by hand: its image generation makes only a few images a day and each drawing needs 3. There the illustrations come from SVG Lab's AI (generate_illustration) when the user chose illustrations; with photos only, the screens use stock photos (search_photos, then place_image or photo_card) and plan_illustrations stays empty. If image generation is refused or rate-limited on any plan, do not stop and do not wait: put a stock photo in each slot still waiting for a drawing (search_photos, place_image) and tell the user in one line why.
- What every brief holds. The 3 generated images: the same subject, pose and structure as the picked candidate, new details and colours, made as 3 separate images. Each image shows only this one illustration, alone on a plain background. Never put two subjects, two illustrations or two versions in one image. These images are references and never go into the design, so a brief that says no images allows them. The drawing is the owner's kind of request: "Here is an image: <picked image file>. Draw an SVG illustration of it, exactly like the image: the same shapes, proportions, positions, colours and details, part for part. Write the SVG code yourself, by hand. No auto-tracing of any kind (no potrace, vtracer, imagetracer, edge or contour detection, colour quantising, or any script or library that turns the image's pixels into paths) and no image generation: I only need SVG from you. Use viewBox \"0 0 <width> <height>\". Before you answer, render your SVG, look at it beside the image at full size and fix every visible difference. Save it as <illustration>.svg and reply with its path and a list of anything that still visibly differs ([] if nothing)." The drawing is SVG written by hand, an exact drawing of the picked image: no image generation, no new image from the picked image, and no auto-tracing of any kind (no potrace, vtracer, imagetracer, edge or contour detection, colour quantising, or any script or library that reads the image's pixels and turns them into paths). Traced SVG is refused. draw_svg's differences is your own note of what still visibly differs from the picked image.
- 3. Screens or pages, meanwhile. While the sub-agents work, build the screens or pages yourself (create_layout and the interface tools), each with room for its illustration.
- 4. Set each drawing on its screen or page. When a sub-agent replies with its group_id, fit_to_box {shape_ids: [group_id], artboard: <screen>, x, y, width, height} puts the drawing into its slot, whole and in its own proportions. Each drawing goes on its own screen only. Text and buttons stay above it; nothing covers it. A picture drawn straight onto a screen with shapes is refused.
References stay out of the user's work.
setup1.84 KB
View saved version →
---
name: setup
description: Use when the user runs setup for SVG Lab or asks how to get started. Checks the SVG Lab account, says where designs are saved, asks what to design and starts the first design with the live view.
---
# Set up SVG Lab
1. Call account_status with {}. If the account has no access to the SVG Lab MCP, say so plainly, give the plans link the reply carries, and stop there. Do not recommend or push a plan. If the reply has heads_up, tell the user that first.
2. Tell the user in two short sentences how it works: SVG Lab designs in their own SVG Lab editor on SVG Lab's servers, and every design is saved to My Projects in their SVG Lab account, where they can open it at svglab.app and edit it by hand.
3. If the plugin was installed during a task, carry on with that task. Otherwise ask one question: what do they want to design (app screens, a website, a logo or icons, an illustration)?
4. Every design starts with new_project. Its first reply lists the questions to ask, as docs guide plan-with-the-user describes, and a line about ChatGPT's permission prompt: ask them all in one message, each with a recommended answer, then call new_project again with the answers. The screens are built with SVG Lab's tools, never as a picture from your own image generation.
5. Imagery follows the user's ChatGPT plan, which you know. On ChatGPT Free, offer stock photos only and recommend them: no drawn illustrations, because ChatGPT Free makes only a few images a day. On other plans, ask whether the screens use photos, drawn illustrations or a mix, with a recommendation.
6. new_project's reply carries live_view: give the user the live view link so they watch the design being made.
7. For every drawn illustration, follow the drawing-from-references skill.
8. At the end, say what was made, anything not finished and why, the project link, and the credits left.
