create-svg-from-prompt
This Claude Code skill generates scalable vector graphics (SVG) from text descriptions by using Google Gemini to create an image and then converting it to SVG format using autotrace. Use it when you need vector-based versions of user-requested images or scenes that can scale without quality loss.
git clone --depth 1 https://github.com/aiskillstore/marketplace /tmp/create-svg-from-prompt && cp -r /tmp/create-svg-from-prompt/skills/0x6a77/create-svg-from-prompt ~/.claude/skills/create-svg-from-promptSKILL.md
## Setup
if `autotrace` is not available in the environment, then install it with the following command:
```bash
sudo apt update
sudo apt install git build-essential intltool imagemagick libmagickcore-dev pstoedit libpstoedit-dev autopoint
git clone https://github.com/autotrace/autotrace.git
cd autotrace
./autogen.sh
LD_LIBRARY_PATH=/usr/local/lib ./configure --prefix=/usr
make
sudo make install
```
## Core Workflow
When the user prompts the model to generate an SVG of and image or scene:
### User wants an SVG of an image or scene
To generate an SVG of an image or scene use Google Gemini and autotrace:
```bash
curl -s -X POST "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent" -H "x-goog-api-key: <GEMINI_API_KEY>" -H "Content-Type: application/json" -d '{ "contents": [{ "parts": [ {"text": "<IMAGE_PROMPT>"}]}]}' | grep -o '"data": "[^"]*"' | cut -d'"' -f4 | base64 --decode | autotrace -output-format svg -despeckle-level 10 -despeckle-tightness 2.0 -output-file <OUTPUT_FILE>.svg
```
**Arguments from prompt:**
- `<GEMINI_API_KEY>`: The Gemini API key gotten from the environment variable "GEMINI_API_KEY"
- `<IMAGE_PROMPT>`: The user's initial prompt modified to change phrases like "Generate an svg" to "Generate an image." Do not modify the rest of the prompt or add any extra instructions or descriptions.
- `<OUTPUT_FILE>`: An 8-30 character filename based on the image the user wantsLet Codex use Google Antigravity CLI (agy) for repository exploration, bounded feature work, and project-scale implementation. Use when a Codex task benefits from delegated repository work while Codex retains diff review, verification, repair, and delivery assurance.
Use when replying. Refresh current date and time.
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
Design systems, plan implementations, review architecture decisions - Use when you need to plan a complex feature, design system architecture, or make high-level technical decisions.
Use when automating iOS Simulator interactions, capturing screenshots/video, or inspecting accessibility via AXe CLI.
Use when working with Canton Network participants, DAML smart contracts, Splice applications, or debugging LF version and package ID issues.
>
HSK4級レベルから流暢さを目指す学習者向け。中国語表現の使用場面・自然さを分析し、作文を「ネイティブらしい流暢な表現」に改善。bilibili等のコンテンツ理解とネイティブとの会話をサポート。実際の用例をWeb検索で提示