[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-f70354e8-665e-4557-adb4-bef0efba07c6":3,"$f4qJkVSFRAXyKiJrqBxFE8qWrmwhpxPWwXO2fX8f6t28":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"f70354e8-665e-4557-adb4-bef0efba07c6","product-design","苹果级产品设计——视觉系统、UX流程、无障碍性、自有视觉语言、设计令牌、原型设计和交接。涵盖Figma、设计系统、字体、色彩、间距、动态设计和认知设计原则。","cat_design_ui","mod_design","sickn33,design","---\nname: product-design\ndescription: \"Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.\"\nrisk: none\nsource: community\ndate_added: '2026-03-06'\nauthor: renat\ntags:\n- design\n- ux\n- design-systems\n- accessibility\n- figma\ntools:\n- claude-code\n- antigravity\n- cursor\n- gemini-cli\n- codex-cli\n---\n\n# PRODUCT DESIGN — Nivel Apple\n\n## Overview\n\nDesign de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo. Ativar para: criar design system, definir visual language, revisar UX, acessibilidade, tokens de design, branding de produto, UI critique.\n\n## When to Use This Skill\n\n- When you need specialized assistance with this domain\n\n## Do Not Use This Skill When\n\n- The task is unrelated to product design\n- A simpler, more specific tool can handle the request\n- The user needs general-purpose assistance without domain expertise\n\n## How It Works\n\n> \"Design is not just what it looks like and feels like. Design is how it works.\"\n> — Steve Jobs\n\n---\n\n## Os 10 Principios De Jony Ive \u002F Apple\n\n1. **Simplicidade radical** — remova tudo que nao e essencial\n2. **Honestidade material** — cada elemento existe por uma razao\n3. **Menos e mais** — restraint e uma decisao de design\n4. **Coerencia sistemica** — tudo faz parte de um sistema unico\n5. **Detalhes importam** — o usuario sente, mesmo sem notar\n6. **Funcao define forma** — a estetica serve ao proposito\n7. **Durabilidade** — design que envelhece bem\n8. **Acessibilidade como padrao** — nao como adicional\n9. **Continuidade entre telas** — experiencia unificada\n10. **Surpresa deleitosa** — o inesperado que encanta\n\n## Design Cognitivo\n\n- **Carga cognitiva zero** — o usuario nunca deve pensar\n- **Affordances claras** — o que e clicavel parece clicavel\n- **Feedback imediato** — toda acao tem resposta visual\n- **Erros previnem-se** — design que impossibilita erros\n\n---\n\n## Estrutura De Um Design System De Elite\n\n```\ndesign-system\u002F\n├── tokens\u002F\n│   ├── colors.json       # paleta completa com semantica\n│   ├── typography.json   # escala tipografica\n│   ├── spacing.json      # grid e espacamento\n│   ├── shadows.json      # elevacao e profundidade\n│   ├── motion.json       # duracao e easing\n│   └── radius.json       # bordas arredondadas\n├── components\u002F\n│   ├── atoms\u002F            # Button, Input, Icon, Badge\n│   ├── molecules\u002F        # Card, Form, NavItem\n│   └── organisms\u002F        # Header, Sidebar, Modal\n├── patterns\u002F\n│   ├── onboarding.md     # primeiro acesso\n│   ├── empty-states.md   # estados vazios\n│   ├── loading.md        # estados de carregamento\n│   └── errors.md         # tratamento de erros\n└── guidelines\u002F\n    ├── voice-tone.md     # voz e tom\n    ├── imagery.md        # fotografia e ilustracao\n    └── accessibility.md  # WCAG 2.1 AA\n```\n\n## Design Tokens — Exemplo Auri\n\n```json\n{\n  \"color\": {\n    \"brand\": {\n      \"primary\": \"#6C63FF\",\n      \"primary-dark\": \"#5A52E0\",\n      \"accent\": \"#FF6B6B\",\n      \"surface\": \"#F8F7FF\"\n    },\n    \"semantic\": {\n      \"success\": \"#22C55E\",\n      \"warning\": \"#F59E0B\",\n      \"error\": \"#EF4444\",\n      \"info\": \"#3B82F6\"\n    },\n    \"neutral\": {\n      \"900\": \"#111827\",\n      \"800\": \"#1F2937\",\n      \"600\": \"#4B5563\",\n      \"400\": \"#9CA3AF\",\n      \"200\": \"#E5E7EB\",\n      \"50\":  \"#F9FAFB\"\n    }\n  },\n  \"typography\": {\n    \"display\": { \"size\": \"48px\", \"weight\": \"700\", \"line\": \"1.1\" },\n    \"h1\": { \"size\": \"36px\", \"weight\": \"700\", \"line\": \"1.2\" },\n    \"h2\": { \"size\": \"28px\", \"weight\": \"600\", \"line\": \"1.3\" },\n    \"body\": { \"size\": \"16px\", \"weight\": \"400\", \"line\": \"1.6\" },\n    \"small\": { \"size\": \"14px\", \"weight\": \"400\", \"line\": \"1.5\" }\n  },\n  \"spacing\": {\n    \"xs\": \"4px\", \"sm\": \"8px\", \"md\": \"16px\",\n    \"lg\": \"24px\", \"xl\": \"32px\", \"2xl\": \"48px\", \"3xl\": \"64px\"\n  },\n  \"radius\": {\n    \"sm\": \"4px\", \"md\": \"8px\", \"lg\": \"12px\",\n    \"xl\": \"16px\", \"full\": \"9999px\"\n  },\n  \"shadow\": {\n    \"sm\": \"0 1px 3px rgba(0,0,0,0.12)\",\n    \"md\": \"0 4px 12px rgba(0,0,0,0.15)\",\n    \"lg\": \"0 8px 24px rgba(0,0,0,0.18)\",\n    \"xl\": \"0 20px 60px rgba(0,0,0,0.22)\"\n  },\n  \"motion\": {\n    \"fast\": \"150ms ease-out\",\n    \"normal\": \"250ms ease-in-out\",\n    \"slow\": \"400ms cubic-bezier(0.34, 1.56, 0.64, 1)\"\n  }\n}\n```\n\n---\n\n## Estrutura De Um Ux Flow\n\n```\n1. Entry Point (como o usuario chega)\n2. Context (o que o usuario sabe\u002Fquer)\n3. Action (o que o usuario faz)\n4. Feedback (resposta imediata do sistema)\n5. Outcome (o que o usuario conseguiu)\n6. Next Step (o que vem depois naturalmente)\n```\n\n## Onboarding De Elite (Primeiros 5 Minutos)\n\n```\nTela 1: Promessa — \"O que voce vai conseguir\"\n  - Uma frase impactante\n  - Uma imagem que mostra o resultado\n  - CTA: \"Comecar\" (nao \"Criar conta\")\n\nTela 2: Acao imediata — primeiro valor antes de cadastro\n  - Deixe o usuario experimentar algo real\n  - Formulario minimo (email apenas)\n  - Progresso visivel (1 de 3)\n\nTela 3: Personalizacao — \"Me conte sobre voce\"\n  - Max 3 perguntas\n  - Visual, nao texto\n  - Pula disponivel sempre\n\nTela 4: Momento Aha — primeiro sucesso real\n  - O usuario faz algo que funciona\n  - Celebracao genuina (nao excessiva)\n  - \"Voce acabou de [acao de valor]\"\n```\n\n## Empty States Que Encantam\n\n```\nNao mostre: \"Nenhum item encontrado\"\nMostre:\n  - Ilustracao contextual\n  - Mensagem de oportunidade: \"Ainda nao ha [X]. Crie o primeiro!\"\n  - CTA primario\n  - Talvez: dica de como comecar\n```\n\n---\n\n## Principios Unicos Para Voice Ui\n\n1. **Zero carga visual** — o usuario nao ve nada (apenas ouve)\n2. **Reversibilidade facil** — \"desfazer\" e sempre possivel\n3. **Confirmacao opcional** — so para acoes irreversiveis\n4. **Variedade de resposta** — nunca a mesma frase duas vezes\n5. **Silencio e ok** — pausa de 2s antes de perguntar se precisa de ajuda\n\n## Estrutura De Resposta De Voz\n\n```\n[Hook opcional] + [Resposta core] + [Acao ou pergunta]\n\nRuim: \"Desculpe, nao entendi o que voce disse. Pode repetir?\"\nBom:  \"Nao captei bem. Pode repetir de outro jeito?\"\n\nRuim: \"Claro! Posso ajudar com isso. A resposta para sua pergunta e...\"\nBom:  \"A resposta e: [resposta direta]\"\n```\n\n## Scripts De Interacao Auri\n\n```\nPrimeiro uso:\n\"Oi! Sou a Auri. Pode me perguntar qualquer coisa — de decisoes de negocio\na ideias criativas. Como posso ajudar hoje?\"\n\nRetorno (usuario ja conhecido):\n\"Bem-vindo de volta! Onde paramos foi em [topico]. Quer continuar?\"\n\nNao entendeu:\n\"Nao peguei bem. Tenta de outro jeito?\"\n\nEncerramento:\n\"Qualquer coisa, e so chamar. Ate logo!\"\n```\n\n---\n\n## Framework De Critica Construtiva\n\n```\n1. OBSERVACAO: O que eu vejo (sem julgamento)\n   \"Noto que o botao principal esta no canto inferior direito\"\n\n2. PRINCIPIO: Qual principio esta sendo testado\n   \"Hierarquia visual e posicionamento de CTA primario\"\n\n3. IMPACTO: O que isso causa ao usuario\n   \"Usuarios que usam o polegar precisam esticar para alcanca-lo\"\n\n4. ALTERNATIVA: Sugestao construtiva\n   \"Considerar posicionar acima do fold, centralizado\"\n\n5. TRADE-OFF: O que se perde\u002Fganha\n   \"Mais acessivel, mas perde area para conteudo\"\n```\n\n## Checklist De Critica De Ui\n\n- [ ] Hierarquia visual clara (o olho sabe para onde ir)\n- [ ] Contraste adequado (WCAG AA: 4.5:1 para texto)\n- [ ] Tamanho de toque minimo (44x44px em mobile)\n- [ ] Consistencia com design system\n- [ ] Estados interativos definidos (hover\u002Factive\u002Fdisabled\u002Ffocus)\n- [ ] Responsividade (mobile-first)\n- [ ] Loading states e empty states\n- [ ] Tratamento de erros com mensagem util\n- [ ] Acessibilidade (labels, roles ARIA, keyboard nav)\n- [ ] Performance percebida (skeleton screens, optimistic UI)\n\n---\n\n## Conceito Visual\n\nA Auri e **inteligencia com calor humano**. Nao e um robo — e uma presenca.\nA identidade visual deve comunicar: sofisticacao acessivel.\n\n## Paleta Principal\n\n```\nRoxo Auri:     #6C63FF  — identidade, inteligencia, inovacao\nRosa Auri:     #FF6B9D  — calor, empatia, humanidade\nBranco Puro:   #FFFFFF  — clareza, espaco, respiro\nGrafite Suave: #1A1A2E  — autoridade, profundidade, noite\n```\n\n## Tipografia\n\n```\nDisplay\u002FTitulos: Inter (ou SF Pro para Apple) — Bold 700\nCorpo de texto:  Inter Regular 400 — linha 1.6\nMono\u002FCodigo:     JetBrains Mono — para elementos tecnicos\n```\n\n## Logo Conceito\n\n```\nForma: Onda de audio estilizada formando a letra \"A\"\nCor: Gradiente roxo → rosa (esquerda para direita)\nEspaco negativo: Sugestao de microfone ou ear\nVersao dark\u002Flight: Ambas definidas\nTamanho minimo: 24px (icone), 120px (lockup completo)\n```\n\n---\n\n## Stack De Design\n\n| Ferramenta | Uso |\n|-----------|-----|\n| Figma | Design de UI, prototipagem, handoff |\n| FigJam | User journeys, workshops, ideacao |\n| Zeroheight | Documentacao do design system |\n| Lottie | Animacoes (exportadas do After Effects\u002FFigma) |\n| Mobbin | Referencia de patterns de UI |\n| Screenlane | Inspiracao de UI real |\n\n## Processo De Design Sprint (5 Dias)\n\n```\nSegunda: Entender — pesquisa, user interviews, definir o problema\nTerca:   Divergir — crazy 8s, sketches individuais, lightning demos\nQuarta:  Decidir — vote, storyboard, decisao final\nQuinta:  Prototipar — prototipo de alta fidelidade no Figma\nSexta:   Testar — 5 usuarios, insights, iterar\n```\n\n---\n\n## 8. Comandos\n\n| Comando | Acao |\n|---------|------|\n| `\u002Fdesign-critique` | Critica estruturada de um design |\n| `\u002Fdesign-tokens` | Gera tokens para um projeto |\n| `\u002Fux-flow` | Mapeia fluxo de experiencia |\n| `\u002Fvoice-ux` | Design de interacao por voz |\n| `\u002Fonboarding` | Cria fluxo de onboarding |\n| `\u002Fdesign-system` | Estrutura design system completo |\n| `\u002Faccessibility` | Auditoria de acessibilidade |\n| `\u002Fvisual-identity` | Define identidade visual de produto |\n\n## Best Practices\n\n- Provide clear, specific context about your project and requirements\n- Review all suggestions before applying them to production code\n- Combine with other complementary skills for comprehensive analysis\n\n## Common Pitfalls\n\n- Using this skill for tasks outside its domain expertise\n- Applying recommendations without understanding your specific context\n- Not providing enough project context for accurate analysis\n\n## Related Skills\n\n- `analytics-product` - Complementary skill for enhanced analysis\n- `growth-engine` - Complementary skill for enhanced analysis\n- `monetization` - Complementary skill for enhanced analysis\n- `product-inventor` - Complementary skill for enhanced analysis\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,147,1272,"2026-05-16 13:34:56",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"8c2aee0f-2b2b-4630-a4af-045557514c7e","1.0.0","product-design.zip",5080,"uploads\u002Fskills\u002Ff70354e8-665e-4557-adb4-bef0efba07c6\u002Fproduct-design.zip","d8c98b7b098ccc7c3288bacb9e64813efc32759c5e77c4fd9a0ca597d50e42de","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":11081}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]