SKILL.md
Create SVG
Create professional, scalable SVG logos and visual marks from a brief — multiple concepts, layouts, and color variations.
Core Workflow
Work through these phases in order, reading the matching reference for the depth you need:
- Requirements Gathering — collect brand info, design preferences, logo type, style, technical constraints, and number of variations. See
references/requirements.md. - Concept Development — develop a primary direction plus alternatives, with design thinking and a base SVG structure. See
references/concepts-layouts.md. - Layout Variations — produce horizontal, vertical, square, icon-only, and text-only lockups per concept. See
references/concepts-layouts.md. - SVG Generation — write clean, scalable, optimized, accessible SVG code. See
references/svg-construction.md. - Presentation — present concepts with rationale, layouts, and color variations. See
references/presentation-delivery.md. - File Generation — save each variation with a consistent naming convention. See
references/presentation-delivery.md. - Usage Guidelines & Delivery — document usage, clear space, PNG export, web/print specs, and the final package. See
references/presentation-delivery.md.
Throughout: choose colors via references/style-color.md, lean on references/examples.md for ready patterns, and iterate per references/process.md.
References
Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).
references/requirements.md— the Phase 1 requirements checklist: brand info, logo types, style guidelines, technical requirements, number of variations · read when starting a logo and gathering what to build.references/concepts-layouts.md— Phase 2–3 concept development (design thinking + base SVG structure) and the five layout lockups · read when developing concepts or producing layout variations.references/svg-construction.md— Phase 4 SVG best practices: semantic code, scalable viewBox, color management, optimization, accessibility · read when writing or optimizing the SVG markup.references/style-color.md— color psychology guide mapping seven color families to meanings, hex values, and industries · read when choosing or justifying a color palette.references/examples.md— ready SVG patterns (wordmark, geometric icon, abstract mark, combination mark) and a full worked example workflow · read when you need a concrete starting template or an end-to-end walkthrough.references/presentation-delivery.md— Phases 5–7 plus deliverables: presentation format, file naming, usage guidelines, clear space, PNG export, web/print specs, file organization · read when presenting, saving files, or documenting usage.references/process.md— the iteration loop and communication style for working with users · read when gathering feedback, refining a concept, or shaping how you talk through choices.