micro-ui-illustration

Vector Illustration Toolbox

Combine user ideas with reference design images, progressively focus through clarification, and then implement using the drawing tools here. The following Micro-UI style constraints apply by default; user-specified directions and project standards take precedence.

Micro-UI Default Style and Composition

These rules restore the style boundaries of the previous version, applying to newly drawn Micro-UI artwork; they are not limitations of general SVG technology.

• Real Control Slices: The main subject must have a recognizable tool or control structure. Do not simply assemble interfaces from repetitive gray bars, blank cards, and meaningless icons; first extract the object's identity characteristics from the reference.
• Zero-Stroke Subjects: Large shapes are delineated by solid color planes, occlusion, and soft shadows. Icon strokes, ruler guide lines, and very faint environmental indicators may use lines; icon size and stroke should follow the target project specifications.
• Default Layered Composition: Organize space as "base support plate → midground control slice → foreground focal point"; an environmental layer is optional. Paper, documents, and reports may use a base plate; if the control itself forms a complete entity, an additional base plate can be omitted. All layers should serve the theme; do not add attachments just to fill layers.
• Single-Layer Atoms and No Recursion: If the subject is already composed of multiple submodules, submodules should remain complete solid-color entities, without nesting third-level micro-controls, pseudo-charts, or small symbols. Structural hierarchy is calculated by visual function, not by the number of nested <g> elements in SVG.
• Minimum Component 16px: At the target display size, the width and height of independent color blocks must be at least 16px; exceptions include necessary icon strokes, ruler guide lines, and status micro-indicator dots (diameter not exceeding 3px). Do not bypass this rule by increasing the export resolution. If the small size cannot accommodate, reduce components or simplify the expression.
• Restrained Detail: Single containers default to no more than three main components; do not draw dense pseudo-text, or use empty, tall containers for small amounts of content. Use text only when expressing identity, status, or action.
• Token Color Scheme: Source code references centrally defined color roles, then maps them to project tokens; do not scatter hexadecimal or other color literals. Independent SVGs can resolve roles to real colors during export, preserving the mapping source to ensure display remains possible outside the host.

Select relevant materials from Reference Images and Analysis Records based on the current object; read Construction and Complete Examples when lighting parameters or code examples are needed. Style rules are enforced by default; if an exception is truly necessary, the AI judges based on references and display size, explaining the exception object, reason, and visual check result, without repeatedly seeking permission for ordinary drawing choices.

Learning User Reference Process

When the user provides a reference image and wants to borrow its characteristics, follow these steps for analysis and recording:

1. Receive Intent: The user sends a reference image and explains the characteristics they want to borrow (e.g., "borrow the thickness feel of the folder opening" or "borrow the area ratio of this blue-green color scheme").
2. Analyze Key Points: The AI looks at the image and breaks it down from five aspects:
   • Shape: How the control is sliced, its outline contour and corner radius.
   • Color: Area contrast between the light base plate, functional main color, and highlight focus.
   • Hierarchy: Front-to-back occlusion, offsets, and white space.
   • Composition: The subject's center of gravity and eye flow within the canvas.
   • Lighting: Micro-shadow offset, spread, and opacity.
3. Save and Record:
   • Store the image in the assets/reference-images/ directory.
   • Append the analysis conclusions to references/visual-reference-map.md, clearly stating which characteristics can be borrowed and which are specific business content of the original image (do not copy verbatim).
4. Changing Style and No-Image Cases:
   • When the user explicitly requests a style change, adjust parameters according to the new requirements, avoiding conflicts between old and new rules.
   • When no reference image is available, draw according to existing rules and examples; do not require the user to provide an image.
5. Concept Explanation:
   • "Learning" here means analyzing the reference image and recording the key points for use during drawing; it is not model training and does not claim that the model has permanently learned the style.

Progressively Focusing the Image Through Clarification

When the direction of a new image is not yet clear, the AI actively guides the user to gradually express their ideas, without generating an image directly upon receiving a topic keyword. First consolidate the purpose, scene, references, preferences, and constraints already provided by the user, clarifying only the gaps that will affect current design judgment; confirmed information is carried forward without repeated inquiry.

You may offer a few specific options to help the user express preferences, then gradually go deeper based on the user's choices and explanations. Each round should focus on one key decision, asking short, specific questions, offering a few directions that have practical differences, explaining what kind of image each direction would create, and giving a recommendation. The next round should build on what the user just confirmed, further focusing on the scene, subject, or composition that is still unclear, without repeating generic options. Allow the user to freely describe, combine, or reject these directions; do not constrain the user to a set of options. Do not throw the entire requirements questionnaire at once, nor delegate professional composition work to the user.

Based on missing information, proceed step by step according to the following guidelines; skip sections already clarified by the user:

1. Focus on the Content to Express: From the purpose and theme, uncover what the user most wants the viewer to understand; clarify the object, action, state, or relationship. Turn broad functional terms into specific scenes, and ask the user to confirm with a clear one-sentence intent of the image.
2. Focus on the Visual Direction: Combined with material analysis, show relevant references, point out borrowable shape, color, space, or texture aspects, and ask the user about specific likes and dislikes. Distinguish style basis from scene composition; do not default to copying the layout just because a user likes a reference.
3. Focus on the Image Composition: Through dialogue, gradually understand the user's ideas about the subject, object relationships, focal point, and overall feeling; combine with references to give specific suggestions, helping the user clarify trade-offs.

Continue clarifying only the aspects that are still unclear; do not mechanically go through the entire Q&A checklist. After the idea is focused, briefly restate the confirmed intent and main composition in words, and wait for the user to explicitly say "can start", "can move", or equivalent authorization before beginning to draw. Once authorization is given and the direction is clear, execute directly without repeated confirmation. Subsequent details are controlled by the user; make adjustments based on the user's modification requests without setting up mockup review or feedback refinement stages. For local modifications, only clarify ambiguous targets, do not restart the entire process.

From Reference to Shape and Composition

First identify the recognition structure of the object in the user's experience: not only the outline and parts, but also key proportions, arrangement order, and connection relationships. Text and generic rounded rectangles cannot replace these features. Choose a complete object or partial slice based on the purpose; prioritize simplification through framing and omission; when exaggerating, retain the structural relationships that make the object credible; do not default to drawing a functional name as a process.

Select relevant references based on the current object and the shape problem to solve; actually open the images. When understanding implementation is needed, read the corresponding SVG and view the rendering. Do not require traversing the material library. Analysis should pinpoint "which specific relationship makes the reference work, and how to use it this time", such as scale contrast, support, or occlusion, rather than just listing effects like rounded corners and soft shadows. Style basis is not equivalent to copying the scene layout; when an image has no source code, the implementation method is an unverified speculation.

Based on this, decide what to keep, what to delete, and what can be exaggerated; then use large shapes to arrange the subject, auxiliary objects, and white space. First judge whether the object is credible and whether the primary-secondary relationship is established; then add details and materials. If rescue is only possible through explanatory text or shadows, return to shape. The judgment is made by the AI, without adding user confirmation checkpoints. For how specific effects translate to paths, coordinates, and filters, see Converting References to Drawing Methods.

Variants should change the subject relationship, perspective, or composition; only changing lines, textures, and colors is a material variation of the same composition and cannot be called a new scene. Do not write the object combination of the current theme as a fixed template for subsequent works.

Objects in the same space share projection, thickness, and lighting basis; icons and text within the plane are first laid out in local coordinates, then mapped overall with the surface; draw rear entities first, then front entities. Adjacent outlines must be clearly separated or clearly occluded; avoid tangents, narrow gaps, and icons showing halfway. Unified geometry is handled by building tools; whether the subject is appropriate is still judged by reference analysis and actual size rendering.

Verification Check and Local Revisions

Internal Check Steps: Render → Actually Look at the Image → Find Problems → Re-inspect. After completing a drawing or modification, use scripts/render.mjs to output 1× and 3× PNGs from SVG or display pages; actually open both images, check against the "Visual Acceptance Before Delivery" items below, and record specific issues. 1× checks subject recognition, composition, proportion, and white space; 3× checks rounded corners, occlusion, seams, cropping, and shadows. The export pixel multiple does not replace the target display size; when the target size differs from the SVG's inherent size, specify it via --width, --height.

Perform at least one initial inspection and one post-repair re-inspection; if no issues are found in the initial inspection, conduct a second independent review without deliberately seeking modifications. After each repair, re-render and open the image to confirm the specific problem is resolved. If there are unresolvable issues or the environment cannot render, state this clearly; do not claim visual acceptance has passed. This process is an internal quality check by the AI and does not add a user mockup review or feedback refinement stage.

When CSS role variables are involved, pass in the JSON mapping generated by the project via --vars; variables that are missing and have no valid fallback must be resolved, do not substitute colors yourself. Project mapping and exported images are saved in the task directory; do not write project color values into the skill. For commands, dependencies, and screenshot ranges for display pages, see Rendering and Viewing.

View the final image side-by-side with the selected reference; compare contour, proportion, corner radius, color area, shadows, and detail density to assess whether the visual language is harmonious.

After rendering, point out specific visual problems, then modify based on the problems; check object recognition, proportion, occlusion, alignment, and boundaries; do not replace visual judgment with file validity or successful export.

Before modifying, first locate the target object and its scope as indicated by the user, then make local adjustments using the existing vector structure. After modification, compare before and after images to confirm that the approved shape and layout are preserved.

Visual Acceptance Before Delivery

Check according to the following items after rendering; if problems are found, fix them first before delivery. File parsability or successful export does not count as visual acceptance.

• Key proportions, arrangement, and connections match the real-life experience of the object; after omission or exaggeration, the identification structure is still preserved, rather than relying solely on a title or a few symbols to guess the theme.
• The default base plate, midground, and foreground have clear primary and secondary sizes and occlusion; if the base plate is omitted, the subject itself has a complete contour.
• Container height is proportional to content; the foreground should not steal the center of gravity due to excessive blank space.
• Composite submodules have no recursive micro-controls; at the target display size, independent color blocks meet the 16px requirement; necessary lines and micro dots have been identified as exceptions.
• Adjacent forms are clearly separated or occluded; no tangents, narrow gaps, or accidental interleaving; text and icons are not accidentally obscured by the foreground.
• Projections distinguish hierarchy but are not muddy black; color area coordinates with the reference; all colors are traceable to role configurations or project tokens.
• Compared side-by-side with the selected reference: check whether the borrowed scale, contour, space, or texture relationship is established in the final image, not just whether the same type of effect is used; view at both original size and actual display size; describe specific corrections; do not fabricate scores or user approval.

Example Collection Process

After completion and checking, actively ask once; proceed with collection only after the user explicitly agrees.

1. Question Rule:
   • After the illustration is finished and the internal check is done, the AI actively asks once: "Satisfied with this illustration? Would you like to include it in the example library for future reference?"
   • If the user is still making modification requests, fix the image first; do not repeat the question.
   • If the user refuses, does not respond, or only says "satisfied" without explicit agreement to collect, do not execute collection.
   • Do not automatically collect every generated result.
2. Collection Execution:
   • Check files: Both editable .svg source and rendered .png preview must be present; check for duplicate names; do not overwrite existing files.
   • Run the collection script: scripts/collect-example.mjs;
   • Automatically update references/example-guide.md, recording the theme name, construction characteristics, and suitable scenarios.

Composable SVG Drawing Methods

SVG Building Tools explains the usage of the local scripts/build-kit.mjs: contours, unified camera, solid extrusion, surface mapping, bounding boxes, and color role export. Select based on the image's needs; not every image requires 3D effects.

Tool Index

Desired Effect	Tools and Examples
Straight line contours, arcs, organic curves	Paths and Curves
Merging, punching, local clipping, transparent transitions	Shape Combinations and Masks
Translation, rotation, scaling, skewing, planar projection	Coordinates and Transforms
Color fields, gradients, shadows, repeating textures	Fill and Materials
Text width, label size, line boxes, and boundaries	Text and Layout Tools
Browser preview, local re-rendering, image comparison	Rendering and Viewing
Safe example collection and index updates	Example Collection Guide

Editable Examples and Materials

When observing references, combine the actual opened image and corresponding SVG; map local effects to implementation methods, then consider how to use them for the current theme. For specific observation angles and examples, see Converting References to Drawing Methods.

• Building and Code Examples: Usage boundaries for object scale, lighting, color roles, and historical cases.
• Theme Templates: Five Typography images, plus SVG and PNG of a search filter image.
• Original Example Library: SVG and PNG of bookmarks, calendars, uploads, and mobile content.
• Style Materials: Available appearance references.
• Reference Images and Analysis Records: User reference analysis and feature index.

Parameters in examples are implementations of specific works and can be modified. What to draw, which techniques to combine, how to communicate, and how to deliver are determined by the current task.