Menu
Author and update SVG visual assets using project branding identity
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | design-assets |
| description | Author and update SVG visual assets using project branding identity |
| version | 1.0 |
| author | designer |
| audience | designer |
| workflow | branding |
Create or update docs/assets/logo.svg and docs/assets/banner.svg from the project's branding identity in docs/branding.md.
docs/assets/ is empty after project setupRead docs/branding.md. Extract: project name, tagline, primary/accent colors, tone of voice. If colors are absent, run skill design-colors first.
All SVGs must follow these constraints (W3C SVG 2 spec — CSS properties take precedence over presentation attributes; inline <style> required for cascade control):
viewBox="0 0 W H" always set; no fixed width/height on <svg> root--color-primary, --color-accent with fallback hexfont-family: system-ui, -apple-system, sans-serif (no external imports)<image> refs; raster only if base64-inlinedrole="img" and aria-label="<description>" on every <svg> (WCAG 1.1.1 — non-text content requires text alternative)viewBox="0 0 1200 300". Three zones:
viewBox="0 0 100 100" (square). One recognizable shape readable at 16px. No text in the mark; create a separate lockup if text is needed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" role="img" aria-label="<project-name> banner">
<style>
:root { --color-primary: #XXXXXX; --color-accent: #XXXXXX; }
.bg { fill: var(--color-primary); }
.title { fill: #ffffff; font-family: system-ui, -apple-system, sans-serif; font-size: 56px; font-weight: 700; }
.sub { fill: var(--color-accent); font-family: system-ui, -apple-system, sans-serif; font-size: 22px; }
</style>
<rect class="bg" width="1200" height="300"/>
<!-- content -->
</svg>
git add docs/assets/
git commit -m "design(assets): <create|update> <banner|logo>"
docs/branding.md read before writing any SVGdocs/branding.md; skill design-colors run if absentviewBox set; no fixed width/height on <svg> rootrole="img" and aria-label presentdocs/assets/Step 2 — Architecture and domain design, one feature at a time
Step 1 — discover requirements through stakeholder interviews and write Gherkin acceptance criteria
Generate and update architecture diagrams, living glossary, and system overview from existing project docs
Enforce code quality using ruff, pytest coverage, and static type checking
Create pull requests with conventional commits, proper formatting, and branch workflow
Flow protocol — design and operate state machine workflows with FLOW.md + WORK.md