Initial release: agency_v3_1-skills-suite v1.0
- 12 AgentSkills generate da agency_v3_1 framework - 17 references centralizzate - Script INSTALL.sh per installazione automatica - README.md con documentazione completa Skills incluse: - agency-orchestrator (coordinamento + QA) - agency-strategy (positioning, messaging) - agency-research (competitive intelligence) - agency-creative-director (direzione visiva) - agency-design-system (tokens, components) - agency-ux-copy (sitemap, copy) - agency-seo (SEO tecnico) - agency-social (social strategy) - agency-youtube (YouTube strategy) - agency-visual-generator (asset visuali) - agency-analytics (report KPI) - agency-publisher (publish gate-based) Generated by framework-translator v2.0 Approved by: MarcoB (2026-03-09)
This commit is contained in:
AgentePotente
commit
6ac766172c
47 changed files with 4165 additions and 0 deletions
250
agency-design-system/SKILL.md
Normal file
250
agency-design-system/SKILL.md
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
---
|
||||
name: agency-design-system
|
||||
description: Creare design system coerente con tokens, components e page layouts. Usare quando: (1) nuovo progetto needs UI system, (2) standardizzare design, (3) creare component library. Output: Design tokens, components library, page layouts, design system doc.
|
||||
---
|
||||
|
||||
# Agency Visual Designer — Design System
|
||||
|
||||
Traduce la direzione creativa in un design system coerente e riutilizzabile.
|
||||
|
||||
## Quando Usare
|
||||
|
||||
- **Nuovo progetto:** Costruire UI system da zero
|
||||
- **Design system refresh:** Aggiornare tokens/components
|
||||
- **Multi-page project:** Standardizzare layout
|
||||
- **Handoff a developer:** Documentare componenti
|
||||
|
||||
---
|
||||
|
||||
## Input
|
||||
|
||||
| Input | Tipo | Validazione |
|
||||
|-------|------|-------------|
|
||||
| `client_path` | string | Percorso client |
|
||||
| `creative_direction` | object | Da creative director |
|
||||
| `design_principles` | array | Principi guida |
|
||||
| `brand_assets` | object | Loghi, colori brand (se esistenti) |
|
||||
|
||||
---
|
||||
|
||||
## Processo
|
||||
|
||||
### Fase 1: Design Tokens
|
||||
|
||||
**Obiettivo:** Definire variabili di design di base.
|
||||
|
||||
**Azioni:**
|
||||
|
||||
1. **Typography:**
|
||||
- Font family (primary, secondary)
|
||||
- Font sizes (H1-H6, body, caption)
|
||||
- Font weights
|
||||
- Line heights
|
||||
|
||||
2. **Spacing:**
|
||||
- Scala modulare (es. 4/8/16/24/32/48/64)
|
||||
- Section padding (desktop/mobile)
|
||||
|
||||
3. **Colors:**
|
||||
- Primary (brand)
|
||||
- Secondary (accents)
|
||||
- Neutrals (text, backgrounds)
|
||||
- Semantic (success, warning, error)
|
||||
|
||||
4. **Breakpoints:**
|
||||
- Mobile (<768px)
|
||||
- Tablet (768-1024px)
|
||||
- Desktop (>1024px)
|
||||
|
||||
**Template:**
|
||||
|
||||
```markdown
|
||||
# Design Tokens
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Families
|
||||
- Primary: {font}
|
||||
- Secondary: {font}
|
||||
|
||||
### Font Sizes
|
||||
- H1: 48px / 3rem
|
||||
- H2: 36px / 2.25rem
|
||||
- H3: 24px / 1.5rem
|
||||
- Body: 16px / 1rem
|
||||
- Caption: 14px / 0.875rem
|
||||
|
||||
## Spacing
|
||||
- 4px, 8px, 16px, 24px, 32px, 48px, 64px
|
||||
|
||||
## Colors
|
||||
- Primary: {hex}
|
||||
- Secondary: {hex}
|
||||
- Text: {hex}
|
||||
- Background: {hex}
|
||||
|
||||
## Breakpoints
|
||||
- Mobile: <768px
|
||||
- Tablet: 768-1024px
|
||||
- Desktop: >1024px
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- `clients/{client}/design/tokens.md`
|
||||
|
||||
---
|
||||
|
||||
### Fase 2: UI Components
|
||||
|
||||
**Obiettivo:** Creare library componenti riutilizzabili.
|
||||
|
||||
**Azioni:**
|
||||
|
||||
1. Identifica componenti necessari:
|
||||
- Buttons (primary, secondary, tertiary)
|
||||
- Cards (service, testimonial, feature)
|
||||
- Forms (input, textarea, select)
|
||||
- Navigation (header, footer, mobile menu)
|
||||
- Content blocks (hero, features, FAQ, CTA)
|
||||
|
||||
2. Per ogni componente, documenta:
|
||||
- Nome
|
||||
- Scopo
|
||||
- Varianti (se applicabile)
|
||||
- States (hover, active, disabled)
|
||||
- Accessibility notes
|
||||
|
||||
**Template:**
|
||||
|
||||
```markdown
|
||||
## Button
|
||||
|
||||
**Scopo:** CTA e azioni primarie
|
||||
|
||||
### Varianti
|
||||
- Primary (filled)
|
||||
- Secondary (outline)
|
||||
- Tertiary (text-only)
|
||||
|
||||
### States
|
||||
- Default
|
||||
- Hover
|
||||
- Active
|
||||
- Disabled
|
||||
|
||||
### Accessibility
|
||||
- Min height 44px
|
||||
- Contrast ratio 4.5:1
|
||||
- Focus visible
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- `clients/{client}/design/components.md`
|
||||
|
||||
---
|
||||
|
||||
### Fase 3: Page Layouts
|
||||
|
||||
**Obiettivo:** Definire strutture pagina tipo.
|
||||
|
||||
**Azioni:**
|
||||
|
||||
1. Identifica page type necessari:
|
||||
- Homepage
|
||||
- Service page
|
||||
- About page
|
||||
- Contact page
|
||||
- Case study page
|
||||
- Blog post
|
||||
|
||||
2. Per ogni layout, documenta:
|
||||
- Sezione header (hero)
|
||||
- Sezioni content (ordine)
|
||||
- Sezione footer
|
||||
- Pattern usati (da references)
|
||||
|
||||
**Template:**
|
||||
|
||||
```markdown
|
||||
## Homepage Layout
|
||||
|
||||
1. **Hero section**
|
||||
- Headline
|
||||
- Sub copy
|
||||
- CTA primaria
|
||||
- Proof chips
|
||||
|
||||
2. **Logo wall** (trust)
|
||||
|
||||
3. **Services overview** (card grid)
|
||||
|
||||
4. **Case study teaser** (split layout)
|
||||
|
||||
5. **Testimonial** (hero testimonial)
|
||||
|
||||
6. **CTA finale + footer**
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- `clients/{client}/design/page_layouts.md`
|
||||
|
||||
---
|
||||
|
||||
### Fase 4: Design System Documentation
|
||||
|
||||
**Obiettivo:** Consolidare tutto in documento unico.
|
||||
|
||||
**Azioni:**
|
||||
|
||||
1. Crea documento che include:
|
||||
- Introduzione (scopo del design system)
|
||||
- Design principles (da creative director)
|
||||
- Tokens
|
||||
- Components
|
||||
- Layouts
|
||||
- Usage guidelines
|
||||
|
||||
2. Includi esempi visivi (se possibile)
|
||||
|
||||
**Output:**
|
||||
- `clients/{client}/design/design_system.md`
|
||||
|
||||
---
|
||||
|
||||
## Output
|
||||
|
||||
| File | Formato | Descrizione |
|
||||
|------|---------|-------------|
|
||||
| `clients/{client}/design/tokens.md` | Markdown | Design tokens |
|
||||
| `clients/{client}/design/components.md` | Markdown | Component library |
|
||||
| `clients/{client}/design/page_layouts.md` | Markdown | Page layouts |
|
||||
| `clients/{client}/design/design_system.md` | Markdown | Design system completo |
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- [layout_systems.md](../../references/layout_systems.md) — Grid e spacing
|
||||
- [navigation_patterns.md](../../references/navigation_patterns.md) — IA patterns
|
||||
- [design_patterns.md](../../references/design_patterns.md) — UI patterns
|
||||
- [qa_visual.md](../../references/qa_visual.md) — QA checklist
|
||||
|
||||
---
|
||||
|
||||
## Note
|
||||
|
||||
**Edge Cases:**
|
||||
|
||||
- **Brand esistente:** Adatta tokens ai colori/font esistenti
|
||||
- **Progetto piccolo:** Semplifica (tokens essenziali + 5-6 components base)
|
||||
- **Nessun designer:** Usa pattern standard da references
|
||||
|
||||
**Limitazioni:**
|
||||
|
||||
- Componenti complessi richiedono tool di design (Figma, Sketch)
|
||||
- Design system completo richiede iterazione con feedback
|
||||
- Handoff a developer richiede specifiche tecniche aggiuntive
|
||||
|
||||
---
|
||||
|
||||
_Skill generata da framework-translator_
|
||||
1
agency-design-system/references
Symbolic link
1
agency-design-system/references
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../references
|
||||
Loading…
Add table
Add a link
Reference in a new issue