メニュー
Generate logos, icons, illustrations and other vector graphics from natural language descriptions. Supports style directives (flat monochrome/gradient/stroke/rounded/minimal/tech). For design mockups, brand logos, UI icons, info illustrations.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/openlark/skills --skill text-to-svgコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Crawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns. Output a structured design specification document for UI generation. Suitable for competitive design analysis, UI restoration, design system reverse engineering, style migration, and similar scenarios.
Agent Skills standard reference guide. Covers SKILL.md specification format, progressive loading, skill discovery and activation, authoring best practices, quality evaluation, description optimization, and more.
Loop Engineering AI programming paradigm guide. Covers the core concepts of transitioning from single prompt calls to autonomous loop systems, key components, loop patterns, configuration examples, and anti-patterns.
SOC 職業分類に基づく
SKILL.md を表示中
| name | text-to-svg |
| description | Generate logos, icons, illustrations and other vector graphics from natural language descriptions. Supports style directives (flat monochrome/gradient/stroke/rounded/minimal/tech). For design mockups, brand logos, UI icons, info illustrations. |
Convert natural language descriptions into runnable SVG vector graphic code.
.svg<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="100%" height="100%">
<!-- content -->
</svg>
viewBox, prefer square viewports (e.g., 100 100 or 400 400)xmlns namespace<circle/> <path/>#2C3E50 or named colors<rect x="20" y="20" width="60" height="60" rx="8" fill="#3498DB"/>
rx/ry for rounded corners<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#667EEA"/>
<stop offset="100%" stop-color="#764BA2"/>
</linearGradient>
<radialGradient id="g2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FF6B6B"/>
<stop offset="100%" stop-color="#C0392B"/>
</radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#g1)"/>
<circle cx="50" cy="50" r="40" fill="none" stroke="#2C3E50" stroke-width="3" stroke-linecap="round"/>
<path d="M20 20 L60 60" stroke="#E74C3C" stroke-width="4" stroke-linejoin="round"/>
<path d="M10 50 Q 30 10, 50 50 T 90 50" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>
<rect x="10" y="10" width="80" height="80" rx="4" fill="#0a1628" stroke="#00d4ff" stroke-width="1"/>
<circle cx="50" cy="50" r="20" fill="none" stroke="#00d4ff" stroke-width="1" stroke-dasharray="3,3"/>
<defs>
<linearGradient id="shine" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff" stop-opacity=".3"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<rect x="20" y="20" width="60" height="60" rx="12" fill="#E74C3C"/>
<rect x="20" y="20" width="60" height="30" rx="12" fill="url(#shine)"/>
<!-- Brand Blues -->
#3498DB #2980B9 #2C3E50 #1ABC9C
<!-- Warm Oranges -->
#E67E22 #F39C12 #D35400 #E74C3C
<!-- Natural Greens -->
#2ECC71 #27AE60 #16A085 #1ABC9C
<!-- Elegant Purples -->
#9B59B6 #8E44AD #6C3483 #5B2C6F
<!-- Neutrals -->
#2C3E50 #34495E #7F8C8D #BDC3C7 #ECF0F1
<!-- Gradient Combos -->
#667EEA→#764BA2 #F093FB→#F5576C #4FACFE→#00F2FE
#43E97B→#38F9D7 #FA709A→#FEE140 #A18CD1→#FBC2EB
| Element | Tag | Key Attributes |
|---|---|---|
| Rectangle | <rect> | x y width height rx ry |
| Circle | <circle> | cx cy r |
| Ellipse | <ellipse> | cx cy rx ry |
| Line | <line> | x1 y1 x2 y2 |
| Polygon | <polygon> | points="x,y x,y ..." |
| Path | <path> | d="M...L...Q...C...Z" |
| Text | <text> | x y font-family font-size text-anchor |
| Group | <g> | Wrap elements for unified transforms/styles |
M x,y — move to
L x,y — line to
H x — horizontal line
V y — vertical line
Q cx,cy x,y — quadratic bezier
C c1x,c1y c2x,c2y x,y — cubic bezier
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y — arc
Z — close path
| File | Content |
|---|---|
| references/templates.md | Logo/icon/illustration/UI component templates |
| references/examples.md | Complete SVG examples in different styles |