Merge remote-tracking branch 'origin/main'
# Conflicts: # .claude-plugin/marketplace.json # .gitignore # acidaos/skills/devops/SKILL.md # acidaos/skills/docs/SKILL.md # acidaos/skills/rust-dev/SKILL.md # acidaos/skills/spoke-dev/SKILL.md # automacao/agents/automation-lead.md # automacao/agents/mcp-protocol-developer.md # automacao/agents/n8n-automation-expert.md # automacao/skills/moloni-api/SKILL.md # automacao/skills/n8n/SKILL.md # core-tools/skills/_core/SKILL.md # core-tools/skills/agent-context-injector/SKILL.md # core-tools/skills/component-generator/SKILL.md # core-tools/skills/db-maintenance-manager/SKILL.md # core-tools/skills/infrastructure-manager/SKILL.md # core-tools/skills/metrics/SKILL.md # core-tools/skills/plugin-curator/SKILL.md # core-tools/skills/plugin-manager/SKILL.md # core-tools/skills/plugin-manager/profiles.json # core-tools/skills/quality-validator/SKILL.md # core-tools/skills/relationship-manager/SKILL.md # crm-ops/.claude-plugin/plugin.json # crm-ops/CHANGELOG.md # crm-ops/agents/budget-proposal-specialist.md # crm-ops/agents/lead-approach-strategist.md # crm-ops/agents/lead-qualifier.md # crm-ops/agents/sales-manager.md # crm-ops/agents/support-specialist.md # crm-ops/skills/auto-expense/SKILL.md # crm-ops/skills/billing-check/SKILL.md # crm-ops/skills/crm-admin/SKILL.md # crm-ops/skills/crm/SKILL.md # crm-ops/skills/desk/SKILL.md # crm-ops/skills/estrategia-marca/SKILL.md # crm-ops/skills/estrategia-marca/references/metodologia-acida.md # crm-ops/skills/estrategia-marca/references/template-documento.md # crm-ops/skills/expense/SKILL.md # crm-ops/skills/invoice/SKILL.md # crm-ops/skills/orcamento/SKILL-light.md # crm-ops/skills/orcamento/SKILL.md # crm-ops/skills/proposal-deck/SKILL.md # crm-ops/skills/proposta-visual/SKILL.md # crm-ops/skills/ticket-manage/SKILL.md # crm-ops/skills/ticket-triage/SKILL.md # crm-ops/skills/ticket/SKILL.md # design-media/agents/design-critic.md # design-media/agents/design-generator.md # design-media/agents/design-lead.md # design-media/agents/design-prompt-architect.md # design-media/agents/design-researcher.md # design-media/agents/ui-designer.md # design-media/agents/video-production-specialist.md # design-media/agents/web-designer.md # design-media/skills/brand-guidelines/SKILL.md # design-media/skills/brand-guidelines/references/descomplicar-theme.md # design-media/skills/cinematic-site/SKILL.md # design-media/skills/clone-style/SKILL.md # design-media/skills/design-b2b/SKILL.md # design-media/skills/design-ecommerce/SKILL.md # design-media/skills/design-saude/SKILL.md # design-media/skills/design-solar/SKILL.md # design-media/skills/design/SKILL.md # design-media/skills/design/references/premium-proposals.md # dev-tools/agents/database-design-specialist.md # dev-tools/agents/dev-helper.md # dev-tools/agents/development-lead.md # dev-tools/agents/javascript-fullstack-specialist.md # dev-tools/agents/nextjs-specialist.md # dev-tools/agents/php-fullstack-engineer.md # dev-tools/skills/benchmark/SKILL.md # dev-tools/skills/canary/SKILL.md # dev-tools/skills/chrome/SKILL.md # dev-tools/skills/db-design/SKILL.md # dev-tools/skills/dep-audit/SKILL.md # dev-tools/skills/diagrama/SKILL.md # dev-tools/skills/docx/SKILL-light.md # dev-tools/skills/docx/SKILL.md # dev-tools/skills/docx/scripts/__init__.py # dev-tools/skills/docx/scripts/office/pack.py # dev-tools/skills/docx/scripts/office/unpack.py # dev-tools/skills/docx/scripts/office/validate.py # dev-tools/skills/nextjs/SKILL.md # dev-tools/skills/pdf/SKILL-light.md # dev-tools/skills/pdf/SKILL.md # dev-tools/skills/php-dev/SKILL.md # dev-tools/skills/prompt-refine/SKILL.md # dev-tools/skills/react-patterns/SKILL.md # dev-tools/skills/skill-creator/SKILL.md # dev-tools/skills/skill-creator/references/descomplicar-standards.md # dev-tools/skills/webapp-testing/SKILL.md # dev-tools/skills/webapp-testing/scripts/with_server.py # dev-tools/skills/xlsx/SKILL.md # dev-tools/skills/xlsx/scripts/office/pack.py # dev-tools/skills/xlsx/scripts/office/unpack.py # dev-tools/skills/xlsx/scripts/office/validate.py # dev-tools/skills/youtube-extract/SKILL.md # gestao/.claude-plugin/plugin.json # gestao/agents/analytics-insights-agent.md # gestao/agents/compliance-auditor.md # gestao/agents/project-manager.md # gestao/agents/reflect-agent.md # gestao/agents/software-project-planner.md # gestao/agents/time-management-agent.md # gestao/agents/wiki-knowledge-agent.md # gestao/skills/aiktop-tasks/SKILL.md # gestao/skills/archive/SKILL.md # gestao/skills/calendar-manager/SKILL.md # gestao/skills/cleanup-downloads/SKILL.md # gestao/skills/clip-agent/SKILL.md # gestao/skills/clip-health/SKILL.md # gestao/skills/clip-instructions/SKILL.md # gestao/skills/clip-issue/SKILL.md # gestao/skills/clip-org/SKILL.md # gestao/skills/clip-routine/SKILL.md # gestao/skills/clip-skill/SKILL.md # gestao/skills/clip-vision/SKILL.md # gestao/skills/clip/SKILL.md # gestao/skills/daily-digest/SKILL.md # gestao/skills/deep-research/SKILL.md # gestao/skills/delegate/SKILL.md # gestao/skills/doc-coauthoring/SKILL.md # gestao/skills/dual-review/SKILL.md # gestao/skills/hub-compile/SKILL.md # gestao/skills/hub-search/SKILL.md # gestao/skills/imap-triage/SKILL.md # gestao/skills/index-update/SKILL.md # gestao/skills/knowledge/SKILL.md # gestao/skills/knowledge/docs/workflow.md # gestao/skills/knowledge/references/routing-guide.md # gestao/skills/mindmap/SKILL.md # gestao/skills/monday-briefing/SKILL.md # gestao/skills/notebooklm/SKILL.md # gestao/skills/office-hours/SKILL.md # gestao/skills/onboarding/SKILL.md # gestao/skills/proc-creator/SKILL.md # gestao/skills/reflect/SKILL.md # gestao/skills/report-templates/SKILL.md # gestao/skills/report/SKILL.md # gestao/skills/research-pipeline/SKILL.md # gestao/skills/review-corrections/SKILL.md # gestao/skills/spec-coauthor/SKILL.md # gestao/skills/task-state/SKILL.md # gestao/skills/tasks-overview/SKILL.md # gestao/skills/time/SKILL.md # gestao/skills/today/SETUP_MCPS.md # gestao/skills/today/SKILL.md # gestao/skills/today/prompts/execute.md # gestao/skills/today/templates/daily-report.md # gestao/skills/validate-component/SKILL.md # gestao/skills/worklog/SKILL.md # infraestrutura/.claude-plugin/plugin.json # infraestrutura/agents/backup-specialist.md # infraestrutura/agents/cwp-server-manager.md # infraestrutura/agents/easypanel-specialist.md # infraestrutura/agents/infrastructure-orchestrator.md # infraestrutura/agents/proxmox-specialist.md # infraestrutura/agents/security-compliance-specialist.md # infraestrutura/skills/authentik/SKILL.md # infraestrutura/skills/backup-strategies/SKILL.md # infraestrutura/skills/backup-strategies/references/scripts.md # infraestrutura/skills/cwp/SKILL.md # infraestrutura/skills/easypanel-api/SKILL.md # infraestrutura/skills/easypanel-cicd/SKILL.md # infraestrutura/skills/easypanel-deploy/SKILL.md # infraestrutura/skills/easypanel-init/SKILL.md # infraestrutura/skills/easypanel-monitor/SKILL.md # infraestrutura/skills/easypanel-rollback/SKILL.md # infraestrutura/skills/easypanel-troubleshoot/SKILL.md # infraestrutura/skills/easypanel-validate/SKILL.md # infraestrutura/skills/gateway-check/SKILL.md # infraestrutura/skills/infra-check/SKILL.md # infraestrutura/skills/mcp-dev/SKILL.md # infraestrutura/skills/mcp-dev/references/best-practices.md # infraestrutura/skills/mcp-dev/references/evaluation-guide.md # infraestrutura/skills/mcp-dev/references/templates.md # infraestrutura/skills/pbs-config/SKILL.md # infraestrutura/skills/proxmox-cluster/SKILL.md # infraestrutura/skills/proxmox-ha/SKILL.md # infraestrutura/skills/proxmox-setup/SKILL.md # infraestrutura/skills/security-audit/SKILL.md # infraestrutura/skills/security-check/SKILL.md # infraestrutura/skills/server-health/SKILL.md # infraestrutura/skills/vm-migration/SKILL.md # marketing/.claude-plugin/plugin.json # marketing/CHANGELOG.md # marketing/agents/content-manager.md # marketing/agents/copywriter.md # marketing/agents/marketing-planning-expert.md # marketing/agents/ppc-specialist.md # marketing/agents/seo-specialist.md # marketing/agents/social-media-manager.md # marketing/agents/video-production-specialist.md # marketing/agents/youtube-specialist.md # marketing/skills/ads/SKILL.md # marketing/skills/content-marketing-pt/SKILL.md # marketing/skills/lead-approach/SKILL.md # marketing/skills/marketing-strategy/SKILL.md # marketing/skills/seo-audit/SKILL.md # marketing/skills/seo-audit/references/ferramentas-api.md # marketing/skills/seo-audit/references/template-relatorio-auditoria.md # marketing/skills/seo-content-optimization/SKILL.md # marketing/skills/seo-content-optimization/references/structured-data.md # marketing/skills/seo-report/SKILL.md # marketing/skills/seo-report/references/implementacao-tecnica.md # marketing/skills/seo-report/references/template-relatorio.md # marketing/skills/social-media/SKILL.md # marketing/skills/trend-signal/SKILL.md # marketing/skills/video/SKILL.md # marketing/skills/video/rules/3d.md # marketing/skills/video/rules/animations.md # marketing/skills/video/rules/assets.md # marketing/skills/video/rules/audio.md # marketing/skills/video/rules/calculate-metadata.md # marketing/skills/video/rules/can-decode.md # marketing/skills/video/rules/charts.md # marketing/skills/video/rules/compositions.md # marketing/skills/video/rules/display-captions.md # marketing/skills/video/rules/extract-frames.md # marketing/skills/video/rules/fonts.md # marketing/skills/video/rules/get-audio-duration.md # marketing/skills/video/rules/get-video-dimensions.md # marketing/skills/video/rules/get-video-duration.md # marketing/skills/video/rules/gifs.md # marketing/skills/video/rules/images.md # marketing/skills/video/rules/import-srt-captions.md # marketing/skills/video/rules/lottie.md # marketing/skills/video/rules/maps.md # marketing/skills/video/rules/measuring-dom-nodes.md # marketing/skills/video/rules/measuring-text.md # marketing/skills/video/rules/parameters.md # marketing/skills/video/rules/sequencing.md # marketing/skills/video/rules/tailwind.md # marketing/skills/video/rules/text-animations.md # marketing/skills/video/rules/timing.md # marketing/skills/video/rules/transcribe-captions.md # marketing/skills/video/rules/transitions.md # marketing/skills/video/rules/trimming.md # marketing/skills/video/rules/videos.md # marketing/skills/youtube/SKILL.md # metabase/agents/metabase-analyst.md # metabase/skills/dashboard/SKILL.md # metabase/skills/metabase/SKILL.md # metabase/skills/query/SKILL.md # negocio/agents/ecommerce-architect.md # negocio/agents/finance-manager.md # negocio/agents/research-analyst.md # negocio/agents/saas-architect.md # negocio/skills/ecommerce/SKILL.md # negocio/skills/interview/SKILL.md # negocio/skills/product/SKILL.md # negocio/skills/research/SKILL.md # negocio/skills/saas/SKILL.md # perfex-dev/agents/perfex-crm-module-developer.md # perfex-dev/skills/perfex-controllers/SKILL.md # perfex-dev/skills/perfex-database/SKILL.md # perfex-dev/skills/perfex-forms/SKILL.md # perfex-dev/skills/perfex-hooks/SKILL.md # perfex-dev/skills/perfex-menus/SKILL.md # perfex-dev/skills/perfex-migrations/SKILL.md # perfex-dev/skills/perfex-module-basics/SKILL.md # perfex-dev/skills/perfex-permissions/SKILL.md # perfex-dev/skills/perfex-security/SKILL.md # perfex-dev/skills/perfex-views/SKILL.md # project-manager/.claude-plugin/plugin.json # project-manager/agents/scrum-master.md # project-manager/agents/spec-writer.md # project-manager/hooks/spec-gate.sh # project-manager/skills/brainstorm/SKILL.md # project-manager/skills/discover/SKILL.md # project-manager/skills/scope/SKILL.md # project-manager/skills/spec/SKILL.md # project-manager/skills/sprint/SKILL.md # project-manager/skills/status/SKILL.md # wordpress/.claude-plugin/plugin.json # wordpress/agents/elementor-specialist.md # wordpress/agents/woocommerce-specialist.md # wordpress/agents/wordpress-performance-specialist.md # wordpress/agents/wordpress-plugin-developer.md # wordpress/skills/branda-menu/SKILL.md # wordpress/skills/crocoblock/SKILL.md # wordpress/skills/elementor/SKILL.md # wordpress/skills/jetengine/SKILL.md # wordpress/skills/rank-math/SKILL.md # wordpress/skills/rank-math/references/commands.md # wordpress/skills/seo-post/SKILL.md # wordpress/skills/woocommerce-cli/SKILL.md # wordpress/skills/woocommerce/SKILL.md # wordpress/skills/wp-cli/SKILL.md # wordpress/skills/wp-cli/references/commands.md # wordpress/skills/wp-cli/scripts/wp-auto.sh # wordpress/skills/wp-dev/SKILL.md # wordpress/skills/wp-hardening/SKILL.md # wordpress/skills/wp-performance/SKILL.md # wordpress/skills/wp-translate/SKILL.md # wordpress/skills/wp-update/SKILL.md
This commit is contained in:
@@ -10,6 +10,8 @@ category: design
|
||||
model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- design-engine
|
||||
recommended_mcps:
|
||||
@@ -20,7 +22,6 @@ skills:
|
||||
- _core
|
||||
- ui-ux-pro-max
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Design Critic - Avaliacao de Qualidade
|
||||
|
||||
@@ -10,6 +10,8 @@ category: design
|
||||
model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- design-engine
|
||||
- presenton
|
||||
@@ -24,7 +26,6 @@ skills:
|
||||
- pptx-generator
|
||||
- remotion-video
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Design Generator - Execucao
|
||||
|
||||
@@ -10,6 +10,8 @@ category: design
|
||||
model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- design-engine
|
||||
- presenton
|
||||
@@ -26,7 +28,6 @@ skills:
|
||||
- ui-ux-pro-max
|
||||
- pptx-generator
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Design Lead - Orquestrador de Design
|
||||
|
||||
@@ -10,6 +10,8 @@ category: design
|
||||
model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- design-engine
|
||||
- presenton
|
||||
@@ -23,7 +25,6 @@ skills:
|
||||
- ui-ux-pro-max
|
||||
- pptx-generator
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Design Prompt Architect - Routing e Prompts
|
||||
|
||||
@@ -10,6 +10,8 @@ category: design
|
||||
model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- figma
|
||||
- stitch
|
||||
@@ -22,7 +24,6 @@ skills:
|
||||
- _core
|
||||
- ui-ux-pro-max
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Design Researcher - Investigador Visual
|
||||
|
||||
@@ -11,6 +11,8 @@ model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Dependencies
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- desk-crm-v3
|
||||
- design-systems
|
||||
@@ -26,7 +28,6 @@ skills:
|
||||
- frontend-design
|
||||
- pptx-generator
|
||||
desk_task: 1518
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# UI Designer Descomplicar
|
||||
@@ -130,4 +131,94 @@ Designer de interfaces responsavel por criar designs visuais apelativos, manter
|
||||
- **magic** - AI-powered UI component generation (tipo v0.dev)
|
||||
- **design-systems** - Knowledge base W3C standards, WCAG, design system best pract
|
||||
- **elevenlabs** - Text-to-speech, voice cloning, audio transcription
|
||||
- **vimeo** - Video management - upload, metadata, transcr
|
||||
- **vimeo** - Video management - upload, metadata, transcripts, analytics
|
||||
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, gsc, lighthouse, mcp-time, mem0, puppeteer, tavily, replicate
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
## Your Available Skills
|
||||
|
||||
### Primary Skills (Your Domain)
|
||||
✓ **/ui-ux-pro-max** - UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts,
|
||||
- Invoke: `/ui-ux-pro-max`
|
||||
|
||||
✓ **/frontend-design** - Create distinctive, production-grade frontend interfaces with high design qualit
|
||||
- Invoke: `/frontend-design`
|
||||
|
||||
✓ **/pptx-generator** - Generate and edit presentation slides as PPTX files. Also create LinkedIn carous
|
||||
- Invoke: `/pptx-generator`
|
||||
|
||||
### Recommended for design
|
||||
- **/brand-voice-generator** - Generate tone-of-voice and brand-system files for use with t
|
||||
- **/video** - Criar vídeos programáticos com Remotion e React. Gera intros
|
||||
- **/remotion-video** - Create and edit Remotion videos with domain-specific knowled
|
||||
|
||||
### Core Skills (All Agents)
|
||||
- **/reflect** - Auto-reflexão e melhoria contínua do sistema. Analisa sessõe
|
||||
- **/worklog** - Registo automático de trabalho - tarefas, problemas, soluçõe
|
||||
- **/_core** - Padrões fundamentais Descomplicar® - Sacred Rules, Excellenc
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /content-marketing-pt, /seo-content-optimization, /social-media, /ui-ux-pro-max-repo, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /research, /youtube, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
**Example:** `Skill("skill-name")` invokes the skill.
|
||||
## Your Team & Responsibilities
|
||||
|
||||
You are part of **11 SDKs** (TaskForce teams):
|
||||
|
||||
### TaskForce Ad Manager
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Claude Agents
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
**Your responsibilities in this TaskForce:**
|
||||
### TaskForce E-commerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Elementor
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Graphic Design
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Next.js
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Product Manager
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce React
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Redes Sociais
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce SaaS
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce WooCommerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
**Collaboration:**
|
||||
- Work with other agents in your TaskForce teams
|
||||
- Share knowledge and context across team members
|
||||
- Leverage team-specific skills and MCPs
|
||||
- Contribute to team goals and deliverables
|
||||
|
||||
|
||||
@@ -31,7 +31,6 @@ compliance:
|
||||
created: '2025-01-13'
|
||||
updated: '2026-02-04'
|
||||
author: Descomplicar®
|
||||
layer: wiki
|
||||
---
|
||||
# Video Production Specialist Descomplicar
|
||||
|
||||
@@ -129,7 +128,7 @@ mcp__notebooklm__notebook_query notebook_id:"081ca512-8279-4850-b2b9-dff09026748
|
||||
- **replicate** - AI models - imagem, vídeo, áudio, LLMs
|
||||
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, wikijs, gsc, lighthouse, mcp-time, mem0, puppeteer, mcp-mermaid, mcp-echarts, powerpoint, penpot, pixabay, pexels, tavily, magic, design-systems
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, gsc, lighthouse, mcp-time, mem0, puppeteer, mcp-mermaid, mcp-echarts, powerpoint, penpot, pixabay, pexels, tavily, magic, design-systems
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
@@ -139,4 +138,28 @@ desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-
|
||||
✓ **/content-marketing-pt** - Criação de conteúdo marketing em Português Europeu. Tom de voz, copywriting, est
|
||||
- Invoke: `/content-marketing-pt`
|
||||
|
||||
✓ **/video** - Criar vídeos programáticos com Remotion e React. Gera intros, promos
|
||||
✓ **/video** - Criar vídeos programáticos com Remotion e React. Gera intros, promos, social med
|
||||
- Invoke: `/video`
|
||||
|
||||
✓ **/youtube** - Extrair transcrições e metadados do YouTube + Estratégia crescimento canal. Supo
|
||||
- Invoke: `/youtube`
|
||||
|
||||
### Recommended for content
|
||||
- **/social-media** - Gestão e estratégia de redes sociais - Instagram, LinkedIn,
|
||||
- **/remotion-video** - Create and edit Remotion videos with domain-specific knowled
|
||||
- **/seo-content-optimization** - Optimização SEO técnico e conteúdo - meta tags, structured d
|
||||
- **/research** - Pesquisa profunda e análise competitiva - SWOT, Porter's Fiv
|
||||
|
||||
### Core Skills (All Agents)
|
||||
- **/reflect** - Auto-reflexão e melhoria contínua do sistema. Analisa sessõe
|
||||
- **/worklog** - Registo automático de trabalho - tarefas, problemas, soluçõe
|
||||
- **/_core** - Padrões fundamentais Descomplicar® - Sacred Rules, Excellenc
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /ui-ux-pro-max-repo, /brand-voice-generator, /frontend-design, /pptx-generator, /ui-ux-pro-max, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
**Example:** `Skill("skill-name")` invokes the skill.
|
||||
|
||||
|
||||
@@ -11,6 +11,8 @@ model: sonnet
|
||||
tools: Read, Write, Edit, Glob, Grep, ToolSearch
|
||||
|
||||
# Dependencies
|
||||
# Nota: MCPs como desk-crm-v3, moloni, easypanel, lighthouse, authentik, spaceship e youtube
|
||||
# estão desligados por omissão — pedir activação via /mcp (regra 57) antes de os usar.
|
||||
primary_mcps:
|
||||
- desk-crm-v3
|
||||
- design-systems
|
||||
@@ -26,7 +28,6 @@ skills:
|
||||
- frontend-design
|
||||
- pptx-generator
|
||||
desk_task: 1519
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Web Designer Descomplicar
|
||||
@@ -127,4 +128,83 @@ Designer web responsavel por criar layouts visualmente impactantes e funcionais,
|
||||
- **powerpoint** - Criar apresentações PowerPoint
|
||||
- **mcp-echarts** - Gerar gráficos Apache ECharts
|
||||
- **mcp-mermaid** - Gerar diagramas Mermaid (flowcharts, sequência, etc.)
|
||||
- **pixabay** - Pesqu
|
||||
- **pixabay** - Pesquisa imagens e vídeos stock gratuitos
|
||||
- **pexels** - Pesquisa imagens stock de alta qualidade
|
||||
- **magic** - AI-powered UI component generation (tipo v0.dev)
|
||||
- **design-systems** - Knowledge base W3C standards, WCAG, design system best pract
|
||||
- **elevenlabs** - Text-to-speech, voice cloning, audio transcription
|
||||
- **vimeo** - Video management - upload, metadata, transcripts, analytics
|
||||
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, gsc, lighthouse, mcp-time, mem0, puppeteer, tavily, replicate
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
## Your Available Skills
|
||||
|
||||
### Primary Skills (Your Domain)
|
||||
✓ **/ui-ux-pro-max** - UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts,
|
||||
- Invoke: `/ui-ux-pro-max`
|
||||
|
||||
✓ **/frontend-design** - Create distinctive, production-grade frontend interfaces with high design qualit
|
||||
- Invoke: `/frontend-design`
|
||||
|
||||
✓ **/pptx-generator** - Generate and edit presentation slides as PPTX files. Also create LinkedIn carous
|
||||
- Invoke: `/pptx-generator`
|
||||
|
||||
### Recommended for design
|
||||
- **/brand-voice-generator** - Generate tone-of-voice and brand-system files for use with t
|
||||
- **/video** - Criar vídeos programáticos com Remotion e React. Gera intros
|
||||
- **/remotion-video** - Create and edit Remotion videos with domain-specific knowled
|
||||
|
||||
### Core Skills (All Agents)
|
||||
- **/reflect** - Auto-reflexão e melhoria contínua do sistema. Analisa sessõe
|
||||
- **/worklog** - Registo automático de trabalho - tarefas, problemas, soluçõe
|
||||
- **/_core** - Padrões fundamentais Descomplicar® - Sacred Rules, Excellenc
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /content-marketing-pt, /seo-content-optimization, /social-media, /ui-ux-pro-max-repo, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /research, /youtube, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
**Example:** `Skill("skill-name")` invokes the skill.
|
||||
## Your Team & Responsibilities
|
||||
|
||||
You are part of **7 SDKs** (TaskForce teams):
|
||||
|
||||
### TaskForce Claude Agents
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
**Your responsibilities in this TaskForce:**
|
||||
### TaskForce E-commerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Elementor
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Graphic Design
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce Next.js
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce React
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
### TaskForce WooCommerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
**Collaboration:**
|
||||
- Work with other agents in your TaskForce teams
|
||||
- Share knowledge and context across team members
|
||||
- Leverage team-specific skills and MCPs
|
||||
- Contribute to team goals and deliverables
|
||||
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
# DRAFT — Método Design Pro (camada de processo sobre Open Design)
|
||||
|
||||
**Estado:** Rascunho — origem: síntese Gemini de vídeos de páginas de alta qualidade (2026-07-22), adaptado ao stack Descomplicar.
|
||||
**Aplica-se a:** websites/landing pages, propostas comerciais, decks PPTX, banners, vídeo — qualquer artefacto de design.
|
||||
|
||||
## 0. Quem define o enquadramento (lição do teste WhatSMS, 22-07-2026)
|
||||
|
||||
O **enquadramento — proposta de valor, posicionamento, o que se está a vender — pertence ao dono
|
||||
do produto**. Nunca se deriva de análise do agente nem de diagnóstico de subagente.
|
||||
|
||||
No primeiro teste real deste método, o briefing enquadrou o WhatSMS como "responder a mensagens
|
||||
fora de horas" e pediu mock-ups de conversa. Resultado: uma landing page de bot de WhatsApp, quando
|
||||
o produto é um sistema de automação de contacto multicanal. O design estava competente; o
|
||||
enquadramento destruía o posicionamento.
|
||||
|
||||
Regras que daí resultam:
|
||||
|
||||
- **Perguntar o posicionamento, não os acessórios.** Cor e tipografia têm defaults; a proposta de
|
||||
valor não tem. Perguntar sobre a segunda, nunca presumi-la.
|
||||
- **"Está robótico" é um pedido de tom.** Não é licença para reescrever posicionamento nem deitar
|
||||
fora copy existente. Preservar por omissão; mudar só o que foi pedido.
|
||||
- **Um diagnóstico que chama "AI slop" ao copy** pode estar a apontar estilo, não substância.
|
||||
Nunca converter em mandato para substituir tudo.
|
||||
- **Briefing longo escrito sozinho é sinal de alarme, não de rigor.** Quanto mais completo, mais
|
||||
eficazmente impede o motor de fazer as perguntas certas ao dono do produto. O Open Design
|
||||
pergunta — deixá-lo perguntar em vez de pré-responder tudo.
|
||||
|
||||
---
|
||||
|
||||
## 1. Contrato de Entrada (Zero Rascunhos Genéricos)
|
||||
|
||||
O pilar 1 (objectivo/posicionamento) **recolhe-se com o dono do produto**, nunca se deduz — ver secção 0.
|
||||
|
||||
Proibido gerar qualquer artefacto sem os 4 pilares explícitos ou deduzidos e confirmados:
|
||||
|
||||
1. **Objectivo comercial** — o que o utilizador/cliente deve sentir ou fazer no fim.
|
||||
2. **Layout narrativo** — ordem exacta das secções/slides e comportamento de transição (scrollytelling em web; arco narrativo em decks/propostas).
|
||||
3. **Personalidade da marca** — tom de voz, paleta intencional, espaçamento generoso (editorial feel). Fonte: design system no OD (Descomplicar ou cliente).
|
||||
4. **Público-alvo** — perfil exacto que justifica a conversão.
|
||||
|
||||
Sem os 4 pilares → perguntar/deduzir e validar. Nunca template pré-feito como resposta.
|
||||
|
||||
## 2. Fluxo em 4 fases (mapeado às skills OD)
|
||||
|
||||
| Fase | O quê | Skills OD |
|
||||
|---|---|---|
|
||||
| **F1 Arquitectura** | Grelha estrutural, tipografia, hierarquia de blocos (wireframe visual) | `design-consultation`, `design-brief`, design system |
|
||||
| **F2 Direcção artística** | Implementação com micro-interacções, profundidade, impacto no início. Web: Next.js/TS + Tailwind + Framer Motion | `creative-director`, `high-end-visual-design`, `frontend-design`, `gsap-*`/`emilkowalski-motion` |
|
||||
| **F3 Variantes (Regra do Hero)** | Secção crítica → 3-5 abordagens estruturais distintas (split / centered minimal / inset frame) para selecção antes de avançar | runs paralelos no OD, `design-shotgun` local; **Google Stitch** (`stitch-loop`, `stitch-design-taste`) para ideação rápida de variantes UI a partir de prompt/sketch/screenshot, com export Figma |
|
||||
| **F4 Auditoria adversarial** | Validação crítica antes de entrega: consistência visual, tipos TS, acessibilidade, bundle, fluidez de animação, anti-AI-slop | `design-review`, `impeccable-design-polish`, `pptx-html-fidelity-audit` (decks) |
|
||||
|
||||
## 3. Regra de Ouro da Modificação
|
||||
|
||||
- **Macro** (estrutura, layout, fluxo de páginas/secções) → resolvido e validado primeiro, ao nível global.
|
||||
- **Micro** (espaçamentos, CTAs, detalhes) → só depois do macro aprovado. Nunca misturar os dois níveis na mesma iteração.
|
||||
|
||||
## 4. Pipeline Template-First (Envato & afins)
|
||||
|
||||
Um template profissional pode substituir F1+F2 — entra como ponto de partida, nunca como entrega directa.
|
||||
|
||||
### 4.1 Duas categorias de fonte
|
||||
|
||||
**A. Templates com código/ficheiros (adaptáveis):**
|
||||
- Envato/ThemeForest (HTML, Next.js, Elementor kits, PPTX, vídeo) — licença cobre projectos de cliente
|
||||
- UI8, Craftwork (UI kits), Relume (biblioteca Figma de secções), Framer/Webflow templates
|
||||
|
||||
**B. Galerias de inspiração (extracção de DNA, nunca cópia):**
|
||||
- Dribbble, Pageflows, Recent.design, Landingfolio, Screensdesign
|
||||
- Mobbin (fluxos de apps reais), Awwwards, Godly, Land-book, Lapa Ninja, SaaSFrame
|
||||
|
||||
### 4.2 Fluxo de adaptação (categoria A)
|
||||
|
||||
1. **Seleccionar** — escolher template alinhado com o layout narrativo do Contrato de Entrada (não o contrário).
|
||||
2. **Extrair** — estrutura, grelha, tokens do template (`brand-extract`, `image-to-code`, `web-clone`, análise directa dos ficheiros).
|
||||
3. **Retheme** — aplicar o design system do cliente/Descomplicar sobre a estrutura (`theme-factory`, `redesign-existing-projects`). Zero cores/fontes do template sobram.
|
||||
4. **Recontentar** — copy e conteúdo reais segundo os 4 pilares; remover secções que não servem o objectivo comercial (cortar > acrescentar).
|
||||
5. **F4 Auditoria** — igual ao fluxo normal; atenção extra a resíduos do template (placeholders, lorem ipsum, links demo, créditos).
|
||||
|
||||
### 4.3 Fluxo de referência (categoria B)
|
||||
|
||||
1. Capturar screenshots/URLs das referências escolhidas.
|
||||
2. Extrair DNA: paleta, tipografia, grelha, ritmo de secções, padrões de interacção (`design-researcher` / visão OD).
|
||||
3. DNA alimenta F1/F2 como direcção de arte — o artefacto é gerado de raiz com o nosso design system.
|
||||
|
||||
### 4.4 Biblioteca local de templates
|
||||
|
||||
- Templates descarregados (Envato) arquivados em pasta própria com metadados (fonte, licença, tags de uso) — candidata: `Hub/04-Recursos/Design/templates/` — para reutilização entre projectos.
|
||||
- Cada adaptação bem-sucedida regista o par template→resultado para acelerar selecções futuras.
|
||||
|
||||
## 5. Directrizes operacionais do agente no Open Design
|
||||
|
||||
Regras de execução para qualquer agente (Claude Code, Gemini CLI) a operar como motor no OD. As que repetem as secções 1–3 não se duplicam — referem-se.
|
||||
|
||||
1. **Contrato de Entrada** (secção 1) — os 4 pilares antes de qualquer geração.
|
||||
2. **`DESIGN.md` é o contrato da marca** — todas as decisões visuais (tipografia, paleta, espaçamento, componentes) vêm do `DESIGN.md` activo do projecto OD, nunca de adivinhação. A skill define *o quê*; o `DESIGN.md` define *como fica*. Manter o `DESIGN.md` sincronizado com o design system (Descomplicar ou cliente).
|
||||
3. **Declarar a skill/formato certo** — indicar explicitamente o tipo de saída (`web-prototype`, `dashboard`, `mobile-app`, `deck`) para activar a directriz OD correcta.
|
||||
4. **Macro → micro** (secção 3, Regra de Ouro).
|
||||
5. **Variantes antes de fechar** (secção 2, F3) — 3 a 5 variações radicalmente diferentes da secção crítica, resto igual; escolher direcção, só depois refinar.
|
||||
6. **Referências visuais concretas** — screenshots via menção `@` no chat OD ou ficheiros no projecto; nunca só descrição textual quando existe referência (liga à secção 4.3).
|
||||
7. **Ecossistema no mesmo projecto OD** — landing + dashboard + app do mesmo cliente vivem no mesmo projecto, para herdar `DESIGN.md`, paleta e tipografia sem deriva (handoff contínuo).
|
||||
8. **Componentes externos adaptados, não recriados** — gráficos animados, tabelas complexas: importar de bibliotecas (ex: 21st.dev, shadcn/ui) e adaptar ao design system, em vez de gerar do zero.
|
||||
9. **Acesso directo via MCP** — usar `mcp__open-design__*` (get_artifact, write_file, search_files, start_run) para trabalhar sobre o código vivo do projecto; nunca depender de exports estáticos/zips. Passar `project` explícito (contexto activo expira ~5 min).
|
||||
10. **Código final limpo e exportável** — HTML/CSS/JS determinístico, responsivo em iframe isolado, pronto para a equipa importar para React/Next.js/Vue sem limpeza. Nada de placeholders, estilos inline órfãos ou dependências fantasma. (Web em produção segue depois PROC-DEV-STANDARD no dev container.)
|
||||
|
||||
## 6. Integração futura (após aprovação do SPEC v3.0.0)
|
||||
|
||||
- Este método torna-se o corpo da skill `design` (router) — gate de contrato + orquestração das 4 fases.
|
||||
- Para websites, avaliar skill dedicada `create-pro-website` (Next.js/TS/Tailwind/Framer Motion) que empacota o output OD no nosso stack (dev container, regra 48).
|
||||
- Quality gate: nenhuma entrega sem F4 com score ≥7/10 (design-critic) e zero findings bloqueantes do design-review.
|
||||
@@ -0,0 +1,71 @@
|
||||
# SPEC — Migração do plugin design-media para Open Design (OD)
|
||||
|
||||
**Versão alvo:** design-media v3.0.0
|
||||
**Data:** 2026-07-22
|
||||
**Estado:** Rascunho — aguarda aprovação
|
||||
**Decisor:** Emanuel
|
||||
|
||||
## 1. Objectivo
|
||||
|
||||
O Open Design (MCP `open-design`, daemon local) passa a ser o **motor único** de design do plugin design-media. Os motores actuais (design-engine Fibo/Gemini, Presenton, Stitch, Penpot, python-pptx directo, Remotion local) deixam de ser invocados directamente — tudo passa por projectos OD, skills OD e design systems OD.
|
||||
|
||||
## 2. Porquê
|
||||
|
||||
- O OD já tem nativamente o que o plugin reimplementa: `brand-guidelines`, `brandkit`, `brand-extract`, `theme-factory`, `pptx-generator`, `pptx`, `slides`, `remotion`, `ui-ux-pro-max`, `imagegen`, `venice-*`/`fal-*` (imagem/vídeo/áudio).
|
||||
- 143 design systems instalados como plugins (`design-system-*`) + suporte a design systems custom por projecto (o projecto "Banners WiP Descomplicar" já usa `designSystemId: descomplicar`).
|
||||
- Permite **adaptar entre modelos disponíveis no OD** e **criar design systems por cliente** — requisito directo do Emanuel.
|
||||
|
||||
## 3. Âmbito
|
||||
|
||||
### 3.1 Design systems geridos no OD (novo pilar)
|
||||
|
||||
- Formalizar o design system **`descomplicar`** no OD a partir dos tokens actuais (`skills/brand-guidelines/references/descomplicar-theme.md` YAML + `color-palettes.md`).
|
||||
- Fluxo **novo cliente**: skill OD `brand-extract` (site do cliente) → `theme-factory`/`brand-guidelines` → design system custom no OD, nome = slug do cliente.
|
||||
- Os brand packs em `Hub/04-Recursos/Design/brands/*.json` são migrados/sincronizados para design systems OD (o JSON local mantém-se como fonte exportável, mas o OD é a fonte operacional).
|
||||
- Os 4 design systems sectoriais (b2b, ecommerce, saude, solar) passam a design systems OD; as skills locais `design-{b2b,ecommerce,saude,solar}` são reduzidas a referência/routing.
|
||||
|
||||
### 3.2 Skills adaptadas (wrappers finos sobre OD)
|
||||
|
||||
| Skill local | Passa a |
|
||||
|---|---|
|
||||
| `design` | Router: cria/reutiliza projecto OD, aplica design system, escolhe skill OD (`imagegen`, `slides`, `poster-hero`, etc.), `start_run` → `get_run` → entrega |
|
||||
| `brand-guidelines` | Gestão de design systems no OD (criar/actualizar/listar Descomplicar + clientes); mantém a norma escrita (tom, ®) |
|
||||
| `pptx-generator` | Wrapper das skills OD `pptx-generator`/`pptx`/`slides` com design system aplicado; python-pptx mantido só para leitura/QA de ficheiros existentes |
|
||||
| `remotion-video` | Wrapper da skill OD `remotion` (+ `venice-video`/`fal-*` quando fizer sentido) |
|
||||
| `clone-style` | Substituída pela skill OD `brand-extract` (wrapper) |
|
||||
| `cinematic-site` | Usa skills OD de web (`web-clone`, `frontend-design`) via projecto OD |
|
||||
| `ui-ux-pro-max`, `design-b2b/ecommerce/saude/solar` | Referência local mantida; apontam para design systems OD |
|
||||
|
||||
### 3.3 Agents actualizados
|
||||
|
||||
- `design-lead`, `design-prompt-architect`, `design-generator`: MCPs alvo passam a `mcp__open-design__*`; remoção de referências a Penpot/Presenton/Stitch/design-engine como motores.
|
||||
- `design-critic`, `design-researcher`, `ui-designer`, `web-designer`, `video-production-specialist`: actualizar referências de ferramentas; lógica mantém-se.
|
||||
|
||||
### 3.4 Fora de âmbito
|
||||
|
||||
- Alterar o OD em si (daemon, skills OD).
|
||||
- Migrar histórico de projectos antigos Presenton/Stitch.
|
||||
- Desligar os MCPs antigos da máquina (fica para limpeza posterior, decisão separada).
|
||||
|
||||
## 4. Critérios de aceitação
|
||||
|
||||
1. `/design` gera um artefacto real num projecto OD com design system `descomplicar` aplicado (prova: run `succeeded` + artefacto).
|
||||
2. Design system `descomplicar` existe no OD com os tokens oficiais (cores/fontes verificadas contra `descomplicar-theme.md`).
|
||||
3. Fluxo de cliente demonstrado: criar design system custom para 1 cliente de teste via `brand-extract`.
|
||||
4. `pptx-generator` produz um deck via OD com brand Descomplicar.
|
||||
5. `remotion-video` produz/inicia um vídeo via skill OD `remotion`.
|
||||
6. Zero referências activas a Penpot/Presenton/Stitch/design-engine como motores nas skills/agents adaptados.
|
||||
7. CHANGELOG.md + versão 3.0.0 + commit atómico.
|
||||
|
||||
## 5. Riscos
|
||||
|
||||
- **Paridade de export**: garantir que o OD exporta PPTX/PNG/PDF nos formatos que os fluxos actuais (propostas, LinkedIn) exigem — validar cedo (crit. 4).
|
||||
- **Contexto activo OD expira ~5 min**: wrappers devem passar `project` explícito, nunca depender do contexto activo.
|
||||
- **Outputs grandes do MCP** (`list_plugins` ~270KB): wrappers devem usar filtros/ids directos, nunca listagens completas no contexto (regra 62).
|
||||
|
||||
## 6. Faseamento
|
||||
|
||||
- **F1** — Design system `descomplicar` no OD + skill `brand-guidelines` adaptada.
|
||||
- **F2** — `design` (router) + agents lead/architect/generator.
|
||||
- **F3** — `pptx-generator` + `remotion-video` + `clone-style`→`brand-extract`.
|
||||
- **F4** — Sectoriais + cinematic-site + fluxo cliente de teste + QA final + CHANGELOG/commit.
|
||||
@@ -1,67 +1,113 @@
|
||||
---
|
||||
name: brand-guidelines
|
||||
description: Guia de identidade visual Descomplicar® — cores, tipografia, logotipo, tom de comunicacao e aplicacao por contexto (slides, docs, web, emails). Usar quando "brand descomplicar", "marca descomplicar", "cores descomplicar", "identidade visual", "branding", "paleta de cores", "guia de marca", ou qualquer material que necessite conformidade visual com a marca.
|
||||
layer: wiki
|
||||
description: Gestão de identidade visual multi-marca (Descomplicar® e clientes) — design systems no Open Design, cores, tipografia, logótipo, tom e aplicação por contexto. O DESIGN.md de cada marca no Open Design é a fonte de verdade. Usar quando "brand", "marca", "identidade visual", "branding", "paleta de cores", "guia de marca", "design system cliente", "criar marca", ou qualquer material que necessite conformidade visual.
|
||||
---
|
||||
|
||||
# /brand-guidelines - Identidade Visual Descomplicar®
|
||||
# /brand-guidelines — Gestão de Identidade Visual Multi-Marca
|
||||
|
||||
Referencia normativa da marca Descomplicar®. Aplicar em todos os materiais de comunicacao,
|
||||
design e desenvolvimento.
|
||||
Esta skill serve **qualquer marca** — a Descomplicar® e cada cliente. A Descomplicar é apenas
|
||||
a marca por omissão quando nenhuma outra é indicada.
|
||||
|
||||
## Fonte de verdade: o Open Design
|
||||
|
||||
Cada marca tem o seu design system no Open Design, um por pasta:
|
||||
|
||||
```
|
||||
~/workspace/open-design/design-systems/<marca>/DESIGN.md
|
||||
```
|
||||
|
||||
- `descomplicar/` — a nossa marca (espelhada em detalhe abaixo)
|
||||
- `<slug-do-cliente>/` — uma pasta por cliente
|
||||
|
||||
O `DESIGN.md` da marca activa é **normativo**.
|
||||
|
||||
**Regras de precedência:**
|
||||
- Em caso de divergência entre qualquer documento e o `DESIGN.md` da marca, **o `DESIGN.md` ganha sempre**.
|
||||
- Nunca inventar cores, fontes ou tokens de nenhuma marca. Ler o `DESIGN.md` antes de produzir.
|
||||
- Alterações à identidade fazem-se no `DESIGN.md` e só depois se propagam.
|
||||
|
||||
> Versões anteriores desta skill documentavam uma paleta azul/laranja (`#1a365d`, `#dd6b20`) com Open Sans
|
||||
> para a Descomplicar. Estava **errada** — não corresponde ao site nem ao design system. Corrigida em 22-07-2026.
|
||||
|
||||
---
|
||||
|
||||
## Trabalhar com a marca de um cliente
|
||||
|
||||
**1. Verificar se já existe** — procurar a pasta do cliente em `design-systems/`. Se existir, ler o
|
||||
`DESIGN.md` e usá-lo. Nunca criar um segundo design system para a mesma marca.
|
||||
|
||||
**2. Criar quando não existe** — extrair a identidade a partir de material real do cliente
|
||||
(site, manual de marca, ficheiros fornecidos) com as skills do Open Design `brand-extract`
|
||||
e `theme-factory`. O resultado é revisto com o cliente antes de se tornar normativo.
|
||||
Nunca inventar a identidade de um cliente a partir do nada.
|
||||
|
||||
**3. Aplicar num projecto** — indicar a marca ao criar o projecto no Open Design
|
||||
(`create_project` com `designSystem: "<slug>"`) para que todos os artefactos herdem
|
||||
cor, tipografia e componentes sem deriva.
|
||||
|
||||
**4. Manter separado** — um projecto do Open Design serve uma marca só. Ecossistemas do
|
||||
mesmo cliente (landing, dashboard, app) vivem no mesmo projecto para herdarem o mesmo
|
||||
`DESIGN.md`; marcas diferentes nunca partilham projecto.
|
||||
|
||||
**Estrutura mínima de um `DESIGN.md`** (o da Descomplicar serve de modelo):
|
||||
tema e atmosfera, cor, tipografia, espaçamento e grelha, layout e composição,
|
||||
componentes, movimento, voz e tom, anti-padrões.
|
||||
|
||||
---
|
||||
|
||||
## Marca por omissão: Descomplicar®
|
||||
|
||||
O resto deste documento espelha o `DESIGN.md` da Descomplicar, para leitura rápida fora do
|
||||
Open Design. Para clientes, ler sempre o `DESIGN.md` respectivo — os valores abaixo **não se
|
||||
aplicam** a marcas de clientes.
|
||||
|
||||
---
|
||||
|
||||
## Identidade da Marca
|
||||
|
||||
**Nome oficial:** Descomplicar®
|
||||
**Slogan:** Crescimento Digital
|
||||
**Website:** descomplicar.pt
|
||||
**Tom:** Profissional mas acessivel, tecnologico sem ser frio
|
||||
**Valores:** Simplicidade, transparencia, resultados mensuraveis
|
||||
**Categoria:** agência de aceleração digital portuguesa — artigos, podcast semanal e automações de IA
|
||||
**Atmosfera:** editorial profissional com acentos dourados; confiança técnica sem arrogância, clareza imediata sem frieza corporativa
|
||||
**Acabamento:** plano e limpo, sem gradientes decorativos — a hierarquia faz o trabalho visual
|
||||
|
||||
> A marca registada (®) e obrigatoria na primeira ocorrencia em qualquer documento ou comunicacao.
|
||||
> Nas ocorrencias seguintes, pode usar-se apenas "Descomplicar".
|
||||
> A marca registada (®) é obrigatória na primeira ocorrência em qualquer documento ou comunicação.
|
||||
> Nas ocorrências seguintes, pode usar-se apenas "Descomplicar".
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Principal
|
||||
## Paleta de Cores
|
||||
|
||||
| Nome | Hex | RGB | Uso |
|
||||
|------|-----|-----|-----|
|
||||
| Azul Escuro | `#1a365d` | 26, 54, 93 | Texto principal, fundos escuros, cabecalhos |
|
||||
| Azul Medio | `#2b6cb0` | 43, 108, 176 | Links, acentos, botoes secundarios |
|
||||
| Laranja | `#dd6b20` | 221, 107, 32 | CTA, destaques, elementos de accao |
|
||||
| Branco | `#ffffff` | 255, 255, 255 | Fundos claros, texto sobre escuro |
|
||||
| Cinza Claro | `#f7fafc` | 247, 250, 252 | Fundos secundarios, secoes alternadas |
|
||||
| Cinza Texto | `#4a5568` | 74, 85, 104 | Texto de corpo, descricoes |
|
||||
| Token | Hex | Uso |
|
||||
|-------|-----|-----|
|
||||
| Primary (Dourado) | `#cc8d00` | CTAs, faixas de destaque, ícones, bordas activas, badges |
|
||||
| Primary Light | `#f2d9a2` | Fundos secundários, hover suave, tags — **nunca para texto** |
|
||||
| Surface | `#ffffff` | Fundo de página, cards, modais |
|
||||
| Text | `#000000` | Headlines, corpo principal, labels importantes |
|
||||
| Text Muted | `#6e6e6e` | Subtítulos, metadados, placeholders |
|
||||
| Border | `#e5e5e5` | Divisórias, bordas de card, separadores |
|
||||
| Surface Alt | `#f8f8f8` | Secções alternadas, blocos de código |
|
||||
| Danger | `#dc2626` | Erros, alertas críticos |
|
||||
| Success | `#16a34a` | Confirmações, estados de sucesso |
|
||||
|
||||
Paleta completa com variacoes de contexto: `references/color-palettes.md`
|
||||
|
||||
---
|
||||
|
||||
## CSS Variables (Web)
|
||||
**Regras de uso:**
|
||||
- O dourado (`#cc8d00`) é o **único acento cromático** — usar com parcimónia e intenção.
|
||||
- Nunca mais de 3 cores simultâneas no mesmo visual.
|
||||
- Fundos grandes sempre em Surface (`#ffffff`) ou Surface Alt (`#f8f8f8`).
|
||||
- CTA principal: fundo dourado com texto preto.
|
||||
- A secção de maior destaque usa fundo preto, texto branco e acento dourado.
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Cores principais */
|
||||
--color-primary: #1a365d;
|
||||
--color-secondary: #2b6cb0;
|
||||
--color-accent: #dd6b20;
|
||||
|
||||
/* Neutros */
|
||||
--color-white: #ffffff;
|
||||
--color-bg-light: #f7fafc;
|
||||
--color-text-body: #4a5568;
|
||||
--color-text-heading: #1a365d;
|
||||
|
||||
/* Estados */
|
||||
--color-primary-hover: #2a4a7f;
|
||||
--color-secondary-hover: #2c5282;
|
||||
--color-accent-hover: #c05621;
|
||||
|
||||
/* Bordas e divisores */
|
||||
--color-border: #e2e8f0;
|
||||
--color-border-light: #edf2f7;
|
||||
--color-primary: #cc8d00;
|
||||
--color-primary-light: #f2d9a2;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-alt: #f8f8f8;
|
||||
--color-text: #000000;
|
||||
--color-text-muted: #6e6e6e;
|
||||
--color-border: #e5e5e5;
|
||||
--color-danger: #dc2626;
|
||||
--color-success: #16a34a;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -69,92 +115,192 @@ Paleta completa com variacoes de contexto: `references/color-palettes.md`
|
||||
|
||||
## Tipografia
|
||||
|
||||
### Hierarquia
|
||||
| Papel | Família | Pesos |
|
||||
|-------|---------|-------|
|
||||
| Display | Montserrat, Poppins, system-ui, sans-serif | 700, 800 |
|
||||
| Corpo | Inter, Open Sans, system-ui, sans-serif | 400, 500, 600 |
|
||||
| Mono | JetBrains Mono, IBM Plex Mono, monospace | 400 |
|
||||
|
||||
| Elemento | Familia | Peso | Tamanho base |
|
||||
|----------|---------|------|--------------|
|
||||
| H1 / Titulo principal | Montserrat | Extra Bold (800) | 48px / 3rem |
|
||||
| H2 / Titulo secao | Montserrat | Bold (700) | 36px / 2.25rem |
|
||||
| H3 / Subtitulo | Montserrat | Semi Bold (600) | 24px / 1.5rem |
|
||||
| H4 / Label | Montserrat | Semi Bold (600) | 18px / 1.125rem |
|
||||
| Corpo / Paragrafo | Open Sans | Regular (400) | 16px / 1rem |
|
||||
| Destaque / Lead | Open Sans | Semi Bold (600) | 18px / 1.125rem |
|
||||
| Legenda / Caption | Open Sans | Regular (400) | 14px / 0.875rem |
|
||||
| Codigo | JetBrains Mono | Regular (400) | 14px / 0.875rem |
|
||||
### Escala
|
||||
|
||||
### CSS Tipografia
|
||||
| Token | Tamanho | Peso | Line-height | Uso |
|
||||
|-------|---------|------|-------------|-----|
|
||||
| `text-5xl` | 48px | 800 | 1.1 | Hero headline |
|
||||
| `text-4xl` | 36px | 700 | 1.15 | Título de página (H1) |
|
||||
| `text-3xl` | 30px | 700 | 1.2 | Título de secção (H2) |
|
||||
| `text-2xl` | 24px | 700 | 1.3 | Subsecção (H3) |
|
||||
| `text-xl` | 20px | 600 | 1.4 | Título de card, H4 |
|
||||
| `text-lg` | 18px | 500 | 1.5 | Parágrafo de entrada |
|
||||
| `text-base` | 16px | 400 | 1.6 | Corpo |
|
||||
| `text-sm` | 14px | 400 | 1.5 | Legendas, labels, UI |
|
||||
| `text-xs` | 12px | 500 | 1.4 | Tags, badges, micro-copy |
|
||||
|
||||
**Regras:**
|
||||
- Montserrat exclusivamente para títulos — nunca em parágrafos longos.
|
||||
- Inter para tudo o que é lido em detalhe.
|
||||
- `letter-spacing: 0.02em` em labels e badges em maiúsculas.
|
||||
- Sem itálico decorativo — usar peso e tamanho para hierarquia.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-heading: 'Montserrat', 'Arial Black', sans-serif;
|
||||
--font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-code: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
||||
|
||||
--line-height-heading: 1.2;
|
||||
--line-height-body: 1.6;
|
||||
--letter-spacing-heading: -0.025em;
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
|
||||
```
|
||||
|
||||
### Fallbacks de Sistema
|
||||
---
|
||||
|
||||
- **Montserrat** indisponivel: `'Arial Black', 'Impact', sans-serif`
|
||||
- **Open Sans** indisponivel: `'Helvetica Neue', Arial, sans-serif`
|
||||
- **JetBrains Mono** indisponivel: `'Fira Code', 'Courier New', monospace`
|
||||
## Espaçamento, Grelha e Raios
|
||||
|
||||
Escala base de 4px: `space-1` 4px, `space-2` 8px, `space-3` 12px, `space-4` 16px, `space-6` 24px, `space-8` 32px, `space-12` 48px, `space-16` 64px, `space-24` 96px.
|
||||
|
||||
**Grelha:** 12 colunas, gutter 24px, conteúdo centrado com max-width 1280px (960px em artigos, 760px em texto corrido com line-height 1.7).
|
||||
**Breakpoints:** mobile ≤768px, tablet 769–1024px, desktop >1024px.
|
||||
**Padding lateral:** 16px mobile, 32px tablet, 48px desktop.
|
||||
**Raios:** `sm` 4px (inputs, badges), `md` 8px (cards, botões), `lg` 12px (modais), `full` 9999px (pills, avatares).
|
||||
|
||||
---
|
||||
|
||||
## Componentes
|
||||
|
||||
**Botão** — Primary: fundo `#cc8d00`, texto `#000000`, Montserrat SemiBold, raio 8px. Secondary: transparente, borda 2px dourada, texto dourado. Ghost: transparente, texto preto, sublinhado no hover. Alturas: sm 32px, md 40px, lg 48px.
|
||||
|
||||
**Badge** — Default: fundo `#f8f8f8`, texto `#6e6e6e`, maiúsculas, 12px, tracking alargado. Primary: fundo `#f2d9a2`, texto `#7a5500`.
|
||||
|
||||
**Card** — Fundo branco, borda 1px `#e5e5e5`, raio 8px, padding 24px, imagem 16:9 no topo. Sombra no hover: `0 4px 16px rgba(0,0,0,0.1)`.
|
||||
|
||||
**Input** — Borda 1px `#e5e5e5`, raio 8px, padding 12px 16px. Focus: borda 2px dourada, sem outline. Erro: borda 2px `#dc2626` com mensagem abaixo. Label em Inter SemiBold 14px maiúsculas.
|
||||
|
||||
**Navbar** — Fundo preto, logótipo à esquerda, links brancos, CTA dourado à direita, sticky com `backdrop-filter: blur(8px)`.
|
||||
|
||||
**Rodapé** — Fundo preto, texto branco/cinza, links com hover dourado, 3 colunas (marca, navegação, contacto) e copyright em `text-xs`.
|
||||
|
||||
---
|
||||
|
||||
## Movimento
|
||||
|
||||
O movimento **confirma acções, nunca decora**.
|
||||
|
||||
- 150ms em micro-interacções (hover, focus); 250ms em transições de estado.
|
||||
- `ease-out` nas entradas, `ease-in-out` nas transições bidireccionais.
|
||||
- Cards no hover: `translateY(-2px)` mais sombra, 200ms.
|
||||
- Transições de página: fade simples 200ms.
|
||||
- Estados de carregamento: skeleton em `#f8f8f8` com shimmer subtil.
|
||||
- Sem parallax, sem animações de entrada elaboradas, sem auto-play.
|
||||
|
||||
---
|
||||
|
||||
## Logótipo
|
||||
|
||||
### Regras de Uso
|
||||
|
||||
| Regra | Descricao |
|
||||
| Regra | Descrição |
|
||||
|-------|-----------|
|
||||
| Espaco minimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
|
||||
| Tamanho minimo | 120px de largura em digital; 30mm em impressao |
|
||||
| Fundo permitido | Branco `#ffffff`, Azul Escuro `#1a365d`, Cinza Claro `#f7fafc` |
|
||||
| Fundo proibido | Qualquer fundo com baixo contraste, fotografias sem overlay |
|
||||
| Distorcao | Nunca esticar, rodar ou alterar proporcoes |
|
||||
| Cores proibidas | Nunca alterar as cores do logótipo original |
|
||||
| Texto junto | Nunca sobrepor texto ao logótipo |
|
||||
| Espaço mínimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
|
||||
| Tamanho mínimo | 120px de largura em digital; 30mm em impressão |
|
||||
| Fundos permitidos | Branco `#ffffff`, preto `#000000`, cinza claro `#f8f8f8` |
|
||||
| Fundos proibidos | Baixo contraste, fotografias sem overlay |
|
||||
| Proibido | Esticar, rodar, alterar proporções, alterar cores, sobrepor texto |
|
||||
|
||||
### Variantes Disponiveis
|
||||
**Variantes:** principal (horizontal), compacta, monocromática escura, monocromática clara, ícone isolado (favicon, avatar).
|
||||
|
||||
| Variante | Quando usar |
|
||||
|----------|-------------|
|
||||
| Principal (horizontal) | Uso geral, cabecalhos, documentos |
|
||||
| Compacta (icone + nome vertical) | Espacos reduzidos, avatares |
|
||||
| Monocromatica escura | Documentos a preto e branco, impressao simples |
|
||||
| Monocromatica clara | Sobre fundos escuros, rodapes |
|
||||
| Icone isolado | Favicon, app icon, redes sociais (foto de perfil) |
|
||||
|
||||
### Ficheiros Logótipo
|
||||
|
||||
```
|
||||
Hub/04-Recursos/Design/brands/descomplicar/
|
||||
logo-principal.svg
|
||||
logo-compacto.svg
|
||||
logo-mono-escuro.svg
|
||||
logo-mono-claro.svg
|
||||
favicon.png
|
||||
favicon.svg
|
||||
```
|
||||
**Ficheiros:** `Hub/04-Recursos/Design/brands/descomplicar/`
|
||||
|
||||
---
|
||||
|
||||
## Aplicacao por Contexto
|
||||
## Aplicação por Contexto
|
||||
|
||||
### Apresentacoes e Slides
|
||||
**Apresentações e slides** — Capa e secções de destaque com fundo preto, título Montserrat ExtraBold branco, acento dourado. Slides de conteúdo com fundo branco ou `#f8f8f8`, corpo em Inter `#000000`, destaques e números em dourado.
|
||||
|
||||
```
|
||||
Fundo slides: #1a365d (escuro) ou #ffffff (claro)
|
||||
Titulo slide: Montserrat Extra Bold, #ffffff (sobre escuro) / #1a365d (sobre claro)
|
||||
Corpo texto: Open Sans Regular, #ffffff ou #4a5568
|
||||
Destaques/CTA: #dd6b20
|
||||
Divisores: #2b6cb0
|
||||
Slide titulo (capa): fundo #1a365d, logótipo variante clara
|
||||
**Documentos e propostas** — Cabeçalho preto com logótipo claro; corpo branco com texto preto; títulos de secção em Montserrat; callouts com fundo `#f8f8f8` e borda esquerda dourada; rodapé `#f8f8f8` com borda superior `#e5e5e5`.
|
||||
|
||||
**Web e landing pages** — Hero claro ou escuro conforme a variante escolhida; CTA primário dourado com texto preto; secções alternadas em `#f8f8f8`; cards brancos com borda `#e5e5e5`.
|
||||
|
||||
**Emails e newsletter** — Pré-header preto, corpo branco com texto preto, cabeçalhos Montserrat, botão CTA dourado com texto preto e raio 8px, rodapé `#f8f8f8`.
|
||||
|
||||
**Redes sociais** — Fundo preto ou branco, elemento de marca em dourado, texto sem emojis.
|
||||
|
||||
---
|
||||
|
||||
## Tom de Comunicação
|
||||
|
||||
**Tom:** profissional mas acessível, directo, orientado à acção, confiante sem arrogância.
|
||||
|
||||
**Princípios de copy:**
|
||||
- PT-PT estrito — "utilizador" não "usuário", "transferir" não "baixar", "ecrã" não "tela", "equipa" não "time".
|
||||
- Frases curtas, verbo no início nos CTAs: "Saber mais", "Ver guia", "Falar connosco".
|
||||
- Títulos assertivos, sem interrogações desnecessárias.
|
||||
- Dados concretos: "400+ artigos", não "muitos artigos".
|
||||
- Sem emojis e sem exclamações excessivas em qualquer contexto de marca.
|
||||
|
||||
**Headlines** — Directas e específicas: "SEO para PMEs que funciona" em vez de "Descubra como o SEO pode transformar o seu negócio".
|
||||
|
||||
**CTAs correctos:** "Ver todos os guias", "Pedir auditoria gratuita", "Subscrever newsletter".
|
||||
**CTAs incorrectos:** "Clique aqui!", "Saiba Mais!!!", qualquer CTA com emoji.
|
||||
|
||||
---
|
||||
|
||||
## Iconografia e Imagens
|
||||
|
||||
**Ícones:** lineares, peso 1.5–2px, cantos ligeiramente arredondados. Lucide, Heroicons ou Phosphor. Tamanhos 16/20/24/32px. Cor herdada do contexto ou dourada.
|
||||
|
||||
**Fotografia:** profissional e luminosa, pessoas reais em contexto. Overlay preto (20–40%) quando houver texto por cima. **Proibidas** stock photos genéricas — pessoas a sorrir para portáteis, apertos de mão corporativos.
|
||||
|
||||
**Ilustrações e gráficos:** flat, linhas limpas, paleta restrita à marca; destaques a dourado.
|
||||
|
||||
---
|
||||
|
||||
## Acessibilidade
|
||||
|
||||
| Par de cores | Rácio | Nível |
|
||||
|--------------|-------|-------|
|
||||
| Preto sobre branco | 21:1 | AAA |
|
||||
| Preto sobre dourado `#cc8d00` | ~7.4:1 | AAA |
|
||||
| Dourado `#cc8d00` sobre preto | ~7.4:1 | AAA |
|
||||
| Text Muted `#6e6e6e` sobre branco | ~5.1:1 | AA |
|
||||
| **Branco sobre dourado** | **~2.9:1** | **falha — proibido** |
|
||||
|
||||
Texto de corpo requer no mínimo AA (4.5:1). Todos os botões precisam de estados hover, focus e disabled explícitos.
|
||||
|
||||
---
|
||||
|
||||
## Anti-padrões (proibido)
|
||||
|
||||
- Gradientes multicolor ou agressivos em elementos de marca
|
||||
- Mais de 3 cores simultâneas num visual
|
||||
- Stock photos genéricas
|
||||
- Emojis em qualquer contexto de marca
|
||||
- Tipografia decorativa além de Montserrat e Inter
|
||||
- Sombras pesadas ou neumorfismo
|
||||
- Animações que distraem (rotações, bounces, pulse contínuo)
|
||||
- Texto branco sobre dourado — contraste insuficiente
|
||||
- Primary Light (`#f2d9a2`) como cor de texto
|
||||
- Layouts com mais de 4 colunas de conteúdo editorial
|
||||
- Botões sem estados hover, focus e disabled
|
||||
- Português do Brasil — sempre PT-PT com acentuação completa
|
||||
|
||||
---
|
||||
|
||||
## Checklist de Conformidade
|
||||
|
||||
- [ ] `DESIGN.md` do Open Design consultado antes de produzir
|
||||
- [ ] Apenas cores da paleta oficial; dourado como único acento
|
||||
- [ ] Montserrat nos títulos, Inter no corpo
|
||||
- [ ] Logótipo com espaço de respiro e fundo permitido
|
||||
- [ ] Marca registada (®) na primeira ocorrência
|
||||
- [ ] Contraste mínimo AA; nunca branco sobre dourado
|
||||
- [ ] Espaçamento em múltiplos de 4px
|
||||
- [ ] PT-PT sem brasileirismos e sem emojis
|
||||
- [ ] Nenhum anti-padrão presente
|
||||
|
||||
---
|
||||
|
||||
**Versão**: 2.0.0 | **Data**: 22-07-2026 | **Autor**: Descomplicar®
|
||||
*Fonte normativa: `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`*
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
|
||||
|
||||
```jsonl
|
||||
{"date":"2026-07-22","issue":"Skill documentava paleta azul/laranja (#1a365d, #dd6b20) e Open Sans, divergente do design system e do site real","fix":"Reescrita para espelhar o DESIGN.md do Open Design (dourado #cc8d00 sobre preto/branco, Montserrat + Inter) e declarar precedencia da fonte de verdade","source":"user"}
|
||||
```
|
||||
|
||||
Modelo: `/design presentation --brand descomplicar`
|
||||
|
||||
##
|
||||
*Adicionar nova linha após cada erro corrigido.*
|
||||
|
||||
@@ -1,155 +1,123 @@
|
||||
---
|
||||
name: "Descomplicar Digital"
|
||||
description: "Professional technology consulting theme with warm accents"
|
||||
version: "1.0.0"
|
||||
updated: "2026-03-10"
|
||||
layer: wiki
|
||||
name: "Descomplicar"
|
||||
description: "Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design"
|
||||
version: "2.0.0"
|
||||
updated: "2026-07-22"
|
||||
source: "~/workspace/open-design/design-systems/descomplicar/DESIGN.md"
|
||||
---
|
||||
|
||||
# Tema Descomplicar Digital
|
||||
# Tokens — Descomplicar®
|
||||
|
||||
Tema oficial Descomplicar® para uso em apresentações, relatórios, designs e qualquer material de comunicação.
|
||||
> **Fonte de verdade:** `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`
|
||||
> Este ficheiro é um espelho para consumo automático (geradores, templates, scripts).
|
||||
> Se divergir do `DESIGN.md`, o `DESIGN.md` ganha e este ficheiro deve ser corrigido.
|
||||
>
|
||||
> **Para marcas de clientes**, não usar estes valores — ler o `DESIGN.md` da marca respectiva
|
||||
> em `design-systems/<slug-do-cliente>/`.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores
|
||||
## Cores
|
||||
|
||||
```yaml
|
||||
colors:
|
||||
primary: "#1a365d" # Azul escuro — headers, fundos principais
|
||||
secondary: "#2b6cb0" # Azul médio — links, sub-headers
|
||||
accent: "#dd6b20" # Laranja — CTAs, destaques, números
|
||||
background: "#ffffff" # Branco — fundo principal
|
||||
surface: "#f7fafc" # Cinza muito claro — secções alternadas
|
||||
text_primary: "#2d3748" # Cinza escuro — texto corpo
|
||||
text_secondary: "#4a5568" # Cinza médio — subtítulos, legendas
|
||||
border: "#e2e8f0" # Cinza claro — bordas, separadores
|
||||
success: "#38a169" # Verde — confirmações
|
||||
warning: "#d69e2e" # Amarelo — avisos
|
||||
error: "#e53e3e" # Vermelho — erros
|
||||
primary: "#cc8d00" # Dourado — CTAs, destaques, ícones, bordas activas
|
||||
primary_light: "#f2d9a2" # Fundos secundários, hover suave, tags (nunca texto)
|
||||
surface: "#ffffff" # Fundo de página, cards, modais
|
||||
surface_alt: "#f8f8f8" # Secções alternadas, blocos de código
|
||||
text: "#000000" # Headlines, corpo principal
|
||||
text_muted: "#6e6e6e" # Subtítulos, metadados, placeholders
|
||||
border: "#e5e5e5" # Divisórias, bordas de card
|
||||
danger: "#dc2626" # Erros, alertas críticos
|
||||
success: "#16a34a" # Confirmações
|
||||
```
|
||||
|
||||
### Referência Visual
|
||||
|
||||
| Token | Hex | Uso |
|
||||
|-------|-----|-----|
|
||||
| `primary` | `#1a365d` | Headers H1/H2, fundos de navegação, capa de apresentação |
|
||||
| `secondary` | `#2b6cb0` | Links, H3/H4, badges, ícones activos |
|
||||
| `accent` | `#dd6b20` | Botões CTA, números em destaque, linhas de separação principais |
|
||||
| `background` | `#ffffff` | Fundo padrão de slides e páginas |
|
||||
| `surface` | `#f7fafc` | Slides alternados, tabelas linha par, painéis laterais |
|
||||
| `text_primary` | `#2d3748` | Corpo de texto, parágrafos, listas |
|
||||
| `text_secondary` | `#4a5568` | Subtítulos, legendas, texto auxiliar |
|
||||
| `border` | `#e2e8f0` | Bordas de tabela, separadores horizontais, cards |
|
||||
| `success` | `#38a169` | Confirmações, métricas positivas, status "concluído" |
|
||||
| `warning` | `#d69e2e` | Avisos, métricas de atenção, status "em risco" |
|
||||
| `error` | `#e53e3e` | Erros, métricas negativas, status "crítico" |
|
||||
|
||||
---
|
||||
**Regras:** dourado é o único acento cromático; máximo 3 cores por visual; fundos grandes em
|
||||
`surface` ou `surface_alt`; CTA com fundo dourado e texto preto; nunca texto branco sobre dourado.
|
||||
|
||||
## Tipografia
|
||||
|
||||
```yaml
|
||||
fonts:
|
||||
heading: "Montserrat"
|
||||
heading_weight: "700, 800"
|
||||
heading_fallback: "Arial, sans-serif"
|
||||
body: "Open Sans"
|
||||
body_weight: "400, 600"
|
||||
body_fallback: "Helvetica, sans-serif"
|
||||
code: "JetBrains Mono"
|
||||
code_fallback: "Consolas, monospace"
|
||||
display: "Montserrat"
|
||||
display_fallback: "Poppins, system-ui, sans-serif"
|
||||
display_weights: [700, 800]
|
||||
body: "Inter"
|
||||
body_fallback: "Open Sans, system-ui, sans-serif"
|
||||
body_weights: [400, 500, 600]
|
||||
mono: "JetBrains Mono"
|
||||
mono_fallback: "IBM Plex Mono, monospace"
|
||||
mono_weights: [400]
|
||||
|
||||
scale:
|
||||
text_5xl: { size: 48, weight: 800, line_height: 1.1 } # Hero headline
|
||||
text_4xl: { size: 36, weight: 700, line_height: 1.15 } # H1
|
||||
text_3xl: { size: 30, weight: 700, line_height: 1.2 } # H2
|
||||
text_2xl: { size: 24, weight: 700, line_height: 1.3 } # H3
|
||||
text_xl: { size: 20, weight: 600, line_height: 1.4 } # H4, título de card
|
||||
text_lg: { size: 18, weight: 500, line_height: 1.5 } # Parágrafo de entrada
|
||||
text_base:{ size: 16, weight: 400, line_height: 1.6 } # Corpo
|
||||
text_sm: { size: 14, weight: 400, line_height: 1.5 } # Legendas, UI
|
||||
text_xs: { size: 12, weight: 500, line_height: 1.4 } # Tags, badges
|
||||
```
|
||||
|
||||
### Hierarquia Tipográfica
|
||||
|
||||
| Nível | Fonte | Peso | Tamanho (slides) | Tamanho (docs) |
|
||||
|-------|-------|------|-----------------|----------------|
|
||||
| H1 — Título principal | Montserrat | 800 | 40-48px | 32px |
|
||||
| H2 — Título secção | Montserrat | 700 | 28-36px | 24px |
|
||||
| H3 — Subtítulo | Montserrat | 700 | 22-26px | 20px |
|
||||
| H4 — Label | Open Sans | 600 | 18-20px | 16px |
|
||||
| Corpo | Open Sans | 400 | 16-18px | 14-16px |
|
||||
| Caption | Open Sans | 400 | 12-14px | 12px |
|
||||
| Código | JetBrains Mono | 400 | 14-16px | 13px |
|
||||
|
||||
### Google Fonts — Import
|
||||
|
||||
```css
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&family=JetBrains+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Regras de Uso
|
||||
## Espaçamento, grelha e raios
|
||||
|
||||
```yaml
|
||||
usage_notes:
|
||||
- Usar laranja com moderação (apenas CTAs e destaques-chave)
|
||||
- Azul escuro para headers e elementos de navegação
|
||||
- Fundos alternados branco/cinza para secções longas
|
||||
- Nunca usar mais de 3 cores numa slide
|
||||
- Manter contraste WCAG AA em todos os textos
|
||||
spacing: # base 4px
|
||||
space_1: 4
|
||||
space_2: 8
|
||||
space_3: 12
|
||||
space_4: 16
|
||||
space_6: 24
|
||||
space_8: 32
|
||||
space_12: 48
|
||||
space_16: 64
|
||||
space_24: 96
|
||||
|
||||
grid:
|
||||
columns: 12
|
||||
gutter: 24
|
||||
max_width: 1280 # conteúdo geral
|
||||
max_width_article: 960 # artigos
|
||||
max_width_prose: 760 # texto corrido (line-height 1.7)
|
||||
padding_x: { mobile: 16, tablet: 32, desktop: 48 }
|
||||
|
||||
breakpoints:
|
||||
mobile: "<=768"
|
||||
tablet: "769-1024"
|
||||
desktop: ">1024"
|
||||
|
||||
radius:
|
||||
sm: 4 # inputs, badges
|
||||
md: 8 # cards, botões
|
||||
lg: 12 # modais
|
||||
full: 9999 # pills, avatares
|
||||
```
|
||||
|
||||
### Regras Expandidas
|
||||
## Movimento
|
||||
|
||||
**Cores**
|
||||
- O laranja (`accent`) é reservado para no máximo 1-2 elementos por slide/página
|
||||
- Nunca usar `primary` e `accent` em simultâneo em texto — garante legibilidade
|
||||
- Fundo `surface` em slides alternados cria ritmo visual sem poluição
|
||||
- Combinação permitida em texto: `primary` fundo + `background` texto, ou `background` fundo + `primary` texto
|
||||
|
||||
**Tipografia**
|
||||
- Nunca misturar Montserrat com outra fonte de títulos no mesmo documento
|
||||
- Open Sans é a única fonte de corpo permitida
|
||||
- Código inline e blocos de código: sempre JetBrains Mono
|
||||
- Não usar itálico em títulos — usar peso (bold) para ênfase
|
||||
|
||||
**Contraste WCAG AA**
|
||||
- `text_primary` (#2d3748) sobre `background` (#ffffff): rácio 12.6:1 — aprovado
|
||||
- `text_secondary` (#4a5568) sobre `background` (#ffffff): rácio 7.4:1 — aprovado
|
||||
- `accent` (#dd6b20) sobre `background` (#ffffff): rácio 3.8:1 — aprovado para texto grande (>18px bold)
|
||||
- `background` (#ffffff) sobre `primary` (#1a365d): rácio 12.6:1 — aprovado
|
||||
|
||||
---
|
||||
|
||||
## Aplicação em Slides
|
||||
|
||||
### Layout Tipo Capa
|
||||
|
||||
```
|
||||
[Fundo: primary #1a365d]
|
||||
[Logo Descomplicar — branco, topo esquerdo]
|
||||
[H1: Montserrat 800, branco]
|
||||
[H2: Montserrat 700, accent #dd6b20]
|
||||
[Rodapé: Open Sans 400, text_secondary, separador border]
|
||||
```yaml
|
||||
motion:
|
||||
micro: 150 # hover, focus (ms)
|
||||
transition: 250 # mudanças de estado (ms)
|
||||
page_fade: 200 # transições de página (ms)
|
||||
easing_in: "ease-out"
|
||||
easing_both: "ease-in-out"
|
||||
card_hover: "translateY(-2px) + sombra 0 4px 16px rgba(0,0,0,0.1)"
|
||||
proibido: ["parallax", "auto-play", "animações de entrada elaboradas"]
|
||||
```
|
||||
|
||||
### Layout Tipo Conteúdo
|
||||
## Acessibilidade
|
||||
|
||||
```yaml
|
||||
contrast:
|
||||
preto_sobre_branco: 21.0 # AAA
|
||||
preto_sobre_dourado: 7.4 # AAA
|
||||
dourado_sobre_preto: 7.4 # AAA
|
||||
muted_sobre_branco: 5.1 # AA
|
||||
branco_sobre_dourado: 2.9 # FALHA — proibido
|
||||
minimo_corpo: 4.5 # AA
|
||||
```
|
||||
[Fundo: background #ffffff]
|
||||
[Header barra: primary #1a365d, 8px altura]
|
||||
[H2: primary #1a365d, Montserrat 700]
|
||||
[Corpo: text_primary #2d3748, Open Sans 400]
|
||||
[Sidebar ou destaque: surface #f7fafc]
|
||||
[CTA ou número chave: accent #dd6b20, Montserrat 800]
|
||||
```
|
||||
|
||||
### Layout Tipo Dados / Métricas
|
||||
|
||||
```
|
||||
[Fundo alternado: surface #f7fafc]
|
||||
[Número grande: accent #dd6b20, Montserrat 800, 60-80px]
|
||||
[Label: text_secondary #4a5568, Open Sans 600, 14px]
|
||||
[Ícone: secondary #2b6cb0]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Aplicação em HTML (Desk CRM / Relatórios)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--c
|
||||
@@ -0,0 +1,89 @@
|
||||
# Gestão de Design Systems Multi-Marca no Open Design
|
||||
|
||||
Referência operacional para criar e manter a identidade visual de **qualquer marca** — a
|
||||
Descomplicar® e cada cliente — dentro do Open Design.
|
||||
|
||||
> Substituiu `color-palettes.md` em 22-07-2026. Esse ficheiro continha escalas de cor derivadas
|
||||
> de uma paleta incorrecta (azul/laranja) que nunca foi a identidade da Descomplicar.
|
||||
> Escalas de cor não se inventam aqui — vivem no `DESIGN.md` de cada marca.
|
||||
|
||||
---
|
||||
|
||||
## Onde vivem
|
||||
|
||||
```
|
||||
~/workspace/open-design/design-systems/
|
||||
descomplicar/DESIGN.md # a nossa marca
|
||||
<slug-cliente>/DESIGN.md # uma pasta por cliente
|
||||
```
|
||||
|
||||
O Open Design traz ainda mais de 140 design systems de referência instalados como plugins
|
||||
(`design-system-apple`, `design-system-swiss`, `design-system-bento`, …). Servem de **referência
|
||||
e ponto de partida** — nunca se entrega material de cliente com a identidade de outra marca.
|
||||
|
||||
---
|
||||
|
||||
## Criar o design system de um cliente
|
||||
|
||||
**1. Verificar duplicados** — procurar a pasta do cliente em `design-systems/`. Se já existir,
|
||||
usar essa. Nunca criar um segundo design system para a mesma marca.
|
||||
|
||||
**2. Recolher material real** — site do cliente, manual de marca, logótipos, materiais impressos.
|
||||
Sem material não há extracção: a identidade de um cliente **nunca se inventa**.
|
||||
|
||||
**3. Extrair** — skill `brand-extract` do Open Design sobre o site ou os ficheiros fornecidos.
|
||||
Devolve cor, tipografia e padrões observados.
|
||||
|
||||
**4. Estruturar** — skill `theme-factory` ou redacção directa do `DESIGN.md`, seguindo a mesma
|
||||
estrutura do da Descomplicar:
|
||||
|
||||
| Secção | Conteúdo |
|
||||
|--------|----------|
|
||||
| 1. Tema e atmosfera | Categoria, estilo visual, postura cromática, mood, acabamento |
|
||||
| 2. Cor | Tokens com hex e uso; regras de aplicação |
|
||||
| 3. Tipografia | Famílias, pesos, escala com tamanho/peso/line-height |
|
||||
| 4. Espaçamento e grelha | Escala base, colunas, gutter, max-width, breakpoints, raios |
|
||||
| 5. Layout e composição | Hierarquia, padrões de layout frequentes |
|
||||
| 6. Componentes | Botões, badges, cards, inputs, navbar, rodapé |
|
||||
| 7. Movimento | Durações, easing, o que é proibido |
|
||||
| 8. Voz e marca | Tom, princípios de copy, exemplos certos e errados |
|
||||
| 9. Anti-padrões | Lista explícita do que nunca fazer |
|
||||
|
||||
**5. Validar com o cliente** antes de tornar normativo. Um `DESIGN.md` por aprovar não deve
|
||||
gerar material final.
|
||||
|
||||
**6. Registar** — anotar a marca e a origem do material no projecto ou tarefa correspondente.
|
||||
|
||||
---
|
||||
|
||||
## Aplicar numa produção
|
||||
|
||||
```
|
||||
create_project(name: "<projecto>", designSystem: "<slug-da-marca>")
|
||||
```
|
||||
|
||||
- Um projecto do Open Design serve **uma marca só**.
|
||||
- Ecossistemas do mesmo cliente (landing, dashboard, app, deck) ficam **no mesmo projecto**,
|
||||
para herdarem o mesmo `DESIGN.md` sem deriva entre artefactos.
|
||||
- Marcas diferentes nunca partilham projecto.
|
||||
|
||||
---
|
||||
|
||||
## Manter
|
||||
|
||||
- Alterações de identidade fazem-se **no `DESIGN.md`** e só depois se propagam para espelhos
|
||||
(skill `brand-guidelines`, `descomplicar-theme.md`, materiais no Hub).
|
||||
- Ao detectar divergência entre um espelho e o `DESIGN.md`, corrigir o espelho — nunca o inverso.
|
||||
- Rebranding de cliente: actualizar o `DESIGN.md` e regenerar os artefactos afectados, em vez de
|
||||
corrigir peça a peça.
|
||||
|
||||
---
|
||||
|
||||
## Acessibilidade — verificação obrigatória
|
||||
|
||||
Independentemente da marca, validar antes de entregar:
|
||||
|
||||
- Texto de corpo com contraste mínimo AA (4.5:1); títulos grandes 3:1.
|
||||
- Nenhum par de cores da marca usado abaixo do mínimo, mesmo que o cliente o use hoje —
|
||||
quando o material de origem falha contraste, sinalizar ao cliente em vez de replicar o erro.
|
||||
- Estados hover, focus e disabled explícitos em todos os elementos interactivos.
|
||||
@@ -5,7 +5,6 @@ description: "Constroi websites cinematograficos a partir de um site existente.
|
||||
version: "1.0.0"
|
||||
created: 2026-04-07
|
||||
tools: [Bash, Read, Write, mcp__claude-in-chrome__read_page, mcp__claude-in-chrome__tabs_create_mcp, mcp__chrome-devtools__take_screenshot]
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# Skill: /cinematic-site
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
name: clone-style
|
||||
description: Clona o estilo visual de um site ou apresentação extraindo design tokens (cores, tipografia, espaçamento, raios, sombras) e gerando JSON compatível com Stitch, design-engine e pptx-generator. Usar quando "clonar estilo", "clone style", "extrair design", "copiar visual", "tokens design", "clone web", "clone slides", "design tokens".
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /clone-style — Extrair Design Tokens de Sites e Slides
|
||||
@@ -117,4 +116,163 @@ Recebe `tokens.json` e aplica numa das 3 ferramentas:
|
||||
|
||||
**Limitação importante:** Stitch só aceita um conjunto restrito de tokens (ver schema `mcp__stitch__create_design_system`):
|
||||
- 1 `customColor` (seed) + opcionais `overridePrimaryColor`/`overrideSecondaryColor`/`overrideTertiaryColor`/`overrideNeutralColor`
|
||||
-
|
||||
- `headlineFont` / `bodyFont` / `labelFont` de **enum fixo** (29 Google Fonts: INTER, ROBOTO, MANROPE, GEIST, etc.)
|
||||
- `roundness`: ROUND_4 / ROUND_8 / ROUND_12 / ROUND_FULL
|
||||
- `colorMode`: LIGHT / DARK
|
||||
- `designMd`: markdown livre para tudo o que não cabe nos campos acima
|
||||
|
||||
**Mapeamento Stitch:**
|
||||
|
||||
```
|
||||
tokens.colors.dominant → customColor (seed)
|
||||
tokens.colors.top[1..3] → overridePrimary/Secondary/Tertiary
|
||||
tokens.colors.neutral → overrideNeutralColor
|
||||
|
||||
tokens.fonts.headline.family
|
||||
→ match com enum Stitch (fuzzy: "Helvetica" → INTER, "Söhne" → INTER, etc.)
|
||||
→ headlineFont
|
||||
|
||||
tokens.fonts.body.family
|
||||
→ match enum → bodyFont
|
||||
|
||||
tokens.borderRadius.dominant
|
||||
→ 4px → ROUND_4
|
||||
→ 8-10px → ROUND_8
|
||||
→ 12-14px → ROUND_12
|
||||
→ ≥16px ou full → ROUND_FULL
|
||||
|
||||
tokens.background.dark? → colorMode: DARK, else LIGHT
|
||||
|
||||
# Tudo o resto vai para designMd:
|
||||
designMd: |
|
||||
## Estilo extraído de <fonte>
|
||||
|
||||
### Tipografia adicional
|
||||
- Display: <font> <size> <weight>
|
||||
- Caption: <font> <size> <weight>
|
||||
|
||||
### Espaçamento
|
||||
Grid base: <Npx>
|
||||
Escala: 4, 8, 16, 24, 32, 48, 64
|
||||
|
||||
### Sombras
|
||||
- sm: <box-shadow>
|
||||
- md: <box-shadow>
|
||||
- lg: <box-shadow>
|
||||
|
||||
### Tom visual
|
||||
<descrição em prosa: minimalista, denso, colorido, monocromático, etc.>
|
||||
```
|
||||
|
||||
Depois chama `mcp__stitch__create_design_system` com este payload.
|
||||
|
||||
### B) design-engine (brand pack)
|
||||
|
||||
Cria um JSON brand pack em `/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/<nome>.json` com formato:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "<nome>",
|
||||
"source": "cloned from <url|pptx>",
|
||||
"extracted_at": "2026-04-07",
|
||||
"colors": { "primary": "#...", "secondary": "#...", "neutral": "#...", "accent": "#..." },
|
||||
"fonts": { "headline": "Inter", "body": "Inter" },
|
||||
"borderRadius": "8px",
|
||||
"tone": "minimalista, profissional, denso"
|
||||
}
|
||||
```
|
||||
|
||||
Depois `mcp__design-engine__brand_load(<nome>)` para usar em `generate_image`.
|
||||
|
||||
### C) pptx-generator (slides)
|
||||
|
||||
Aplica os tokens via XML manipulation no template Descomplicar (ver `/pptx-generator`). Substitui:
|
||||
- Cores accent1-6 do `theme1.xml` pelos extraídos
|
||||
- Fontes major/minor pelas extraídas
|
||||
- Mantém layouts/positioning do template Descomplicar (não copia layouts da fonte original — só estilo)
|
||||
|
||||
---
|
||||
|
||||
## Mapeamento de fontes (fuzzy → Stitch enum)
|
||||
|
||||
Quando `tokens.fonts.headline.family` não está no enum Stitch, mapear:
|
||||
|
||||
| Família detectada | Stitch enum |
|
||||
|---|---|
|
||||
| Helvetica, Helvetica Neue, Arial, sans-serif genérico | INTER |
|
||||
| Söhne, Inter, system-ui | INTER |
|
||||
| Roboto, Roboto Flex | (não existe — usar INTER) |
|
||||
| SF Pro, -apple-system | INTER |
|
||||
| GT Walsheim, Geist, Mona Sans | GEIST |
|
||||
| Manrope | MANROPE |
|
||||
| Plus Jakarta, Jakarta | PLUS_JAKARTA_SANS |
|
||||
| DM Sans | DM_SANS |
|
||||
| IBM Plex Sans | IBM_PLEX_SANS |
|
||||
| Sora | SORA |
|
||||
| Times, serif genérico | NEWSREADER |
|
||||
| Garamond, EB Garamond | EB_GARAMOND |
|
||||
| Playfair, Domine | DOMINE |
|
||||
|
||||
Se nenhum match óbvio, **default INTER** (mais neutro). Adicionar nota em `designMd` com a fonte original detectada.
|
||||
|
||||
---
|
||||
|
||||
## Anti-patterns
|
||||
|
||||
| Não fazer | Razão |
|
||||
|---|---|
|
||||
| Tentar reproduzir layout pixel a pixel | Impossível e gera "AI slop" |
|
||||
| Usar `cssstats.com` ou scrapers HTML estáticos | Falham em sites JS-rendered (Next.js, React, etc.) |
|
||||
| Importar HTML inteiro como Stitch screen | Stitch não importa HTML; gera de prompt+tokens |
|
||||
| Aplicar Stitch design-system sem `customColor` válido | Validation error — `customColor` é obrigatório |
|
||||
| Esquecer de usar `designMd` para tokens fora do enum | Perde-se 50% da informação extraída |
|
||||
|
||||
---
|
||||
|
||||
## Validação (critérios para "OK")
|
||||
|
||||
Antes de declarar a clonagem completa:
|
||||
1. ✅ `tokens.json` existe e tem `colors`, `fonts`, `borderRadius` no mínimo
|
||||
2. ✅ Pelo menos 1 screenshot guardado
|
||||
3. ✅ Mapeamento Stitch produz `customColor` válido (hex format)
|
||||
4. ✅ Pelo menos 1 fonte mapeada para enum Stitch
|
||||
5. ✅ `designMd` tem ≥3 secções (tipografia, espaçamento, tom)
|
||||
6. ✅ Se modo `apply`: validação visual pelo utilizador antes de marcar "concluído"
|
||||
|
||||
---
|
||||
|
||||
## Exemplos práticos
|
||||
|
||||
### Clonar Linear
|
||||
|
||||
```
|
||||
/clone-style web https://linear.app
|
||||
```
|
||||
Esperado: paleta dominante azul/roxo, fontes Inter ou similar, raios 6-8px, dark mode default.
|
||||
|
||||
### Clonar template cliente
|
||||
|
||||
```
|
||||
/clone-style slides ~/Downloads/cliente-deck.pptx
|
||||
```
|
||||
Esperado: cores accent do tema PPTX, fontes major/minor, proposta de paleta unificada.
|
||||
|
||||
### Aplicar a novo projecto Stitch
|
||||
|
||||
```
|
||||
/clone-style apply ~/.claude-work/clone-style/linear-app-20260407/tokens.json
|
||||
```
|
||||
Cria design system Stitch + brand pack design-engine.
|
||||
|
||||
---
|
||||
|
||||
## Referências internas
|
||||
|
||||
- `references/extract-web-tokens.js` — script JS de extracção CSS computado
|
||||
- `references/extract-pptx-theme.py` — script Python para parsear theme1.xml
|
||||
- `~/.claude-work/clone-style/` — cache de extracções (timestamped)
|
||||
|
||||
---
|
||||
|
||||
**Versão:** 1.0.0 | **Data:** 2026-04-07 | **Autor:** Descomplicar (sessão 5)
|
||||
**Origem:** Necessidade real — clonagem de estilos em propostas comerciais. Substitui tentativas falhadas com Penpot, scrapers HTML, screenshots+AI, Figma import.
|
||||
|
||||
@@ -5,7 +5,6 @@ description: >
|
||||
Propostas visuais, landing pages, apresentações e materiais para decisores PT.
|
||||
Usar quando: proposta comercial, landing page serviço B2B, apresentação cliente,
|
||||
one-pager, ou qualquer material visual para audiência empresarial portuguesa.
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /design-b2b — Design System Serviços B2B
|
||||
|
||||
@@ -5,7 +5,6 @@ description: >
|
||||
Optimização conversão, layouts loja, UX checkout e elementos de confiança.
|
||||
Usar quando: criar ou optimizar loja WooCommerce, página produto, carrinho,
|
||||
checkout, ou qualquer elemento visual de e-commerce para mercado português.
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /design-ecommerce — Design System E-commerce
|
||||
|
||||
@@ -5,7 +5,6 @@ description: >
|
||||
Paleta, tipografia, CTAs e layouts optimizados para contexto clínico PT.
|
||||
Usar quando: criar landing page de clínica, página de serviços médicos,
|
||||
agendamento online, ou qualquer material visual para clientes saúde.
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /design-saude — Design System Saúde
|
||||
|
||||
@@ -5,7 +5,6 @@ description: >
|
||||
Paleta, calculadoras, propostas visuais e layouts para sector energias renováveis PT.
|
||||
Usar quando: landing page solar, proposta instalação FV, calculadora poupança,
|
||||
ou material visual para clientes energia solar.
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /design-solar — Design System Solar/FV
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
name: design
|
||||
description: Motor de design profissional multi-marca. Gera apresentações, infográficos, logos, social media, web pages e identidade visual.
|
||||
layer: wiki
|
||||
---
|
||||
|
||||
# /design - Motor de Design Profissional
|
||||
@@ -144,4 +143,28 @@ Formato: `{nome}.json` com cores, fontes, logos, voz, estilo.
|
||||
| Instagram Post | 1:1 | 1080x1080 |
|
||||
| Instagram Story | 9:16 | 1080x1920 |
|
||||
| LinkedIn Post | ~2:1 | 1200x628 |
|
||||
| YouTube Thumbnail | 1
|
||||
| YouTube Thumbnail | 16:9 | 1280x720 |
|
||||
| OG Image | ~2:1 | 1200x630 |
|
||||
| Facebook Cover | ~3:1 | 820x312 |
|
||||
|
||||
## Qualidade
|
||||
|
||||
Todos os outputs passam pelo design-critic com score minimo 7/10 em 5 dimensoes:
|
||||
fidelidade, concisao visual, legibilidade, profissionalismo, brand compliance.
|
||||
|
||||
---
|
||||
|
||||
**Versao**: 2.1.0 | **Data**: 2026-04-07 | **Autor**: Descomplicar
|
||||
**v2.1.0:** Penpot removido como motor activo (substituído por Stitch para web/ui e design-engine para imagens/social/infográficos). Workflow simplificado.
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
|
||||
*Adicionar nova linha após cada erro corrigido.*
|
||||
|
||||
@@ -243,7 +243,7 @@ def criar_pricing(c: canvas.Canvas, planos: list[dict]):
|
||||
| Controlo | Pixel-perfect | Aproximado |
|
||||
| Fontes custom | Suporte completo | Limitado |
|
||||
| Melhor para | Proposta final PDF | Template editável pelo cliente |
|
||||
| Ambiente | Servidor dev (`/root/Dev`) | Servidor dev ou local |
|
||||
| Ambiente | Desktop local (`/media/ealmeida/Dados/Dev`) | Desktop local |
|
||||
|
||||
**Recomendação:** usar reportlab para proposta final; pptxgenjs se o cliente precisar de editar.
|
||||
|
||||
@@ -254,8 +254,8 @@ pip install reportlab Pillow
|
||||
# Registar fontes Nexa
|
||||
from reportlab.pdfbase import pdfmetrics
|
||||
from reportlab.pdfbase.ttfonts import TTFont
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Bold", "/root/Dev/assets/fonts/Nexa-Bold.ttf"))
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Light", "/root/Dev/assets/fonts/Nexa-Light.ttf"))
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Bold", "/media/ealmeida/Dados/Dev/assets/fonts/Nexa-Bold.ttf"))
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Light", "/media/ealmeida/Dados/Dev/assets/fonts/Nexa-Light.ttf"))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
+1
@@ -0,0 +1 @@
|
||||
/home/ealmeida/.claude/skills/second-brain-repo/.claude/skills/pptx-generator
|
||||
+1
@@ -0,0 +1 @@
|
||||
/home/ealmeida/.claude/skills/second-brain-repo/.claude/skills/remotion
|
||||
+1
@@ -0,0 +1 @@
|
||||
/home/ealmeida/.claude/skills/ui-ux-pro-max-repo/.claude/skills/ui-ux-pro-max
|
||||
Reference in New Issue
Block a user