Claude Fable 5 & Mythos — Guia de Design e Recursos de Código para Inspiração de Projetos

Pesquisa compilada para Pablo Murad | Junho 2026

Visão Geral: O que são Fable 5 e Mythos?

Claude Fable 5 é o primeiro modelo público da classe Mythos da Anthropic, lançado em 9 de junho de 2026. Ele utiliza o mesmo modelo subjacente do Claude Mythos 5, mas com guardrails ativados que bloqueiam respostas em áreas de alto risco (cibersegurança, bioquímica etc.) — nesses casos, o sistema faz fallback para Claude Opus 4.8. Tanto Fable 5 quanto Mythos 5 compartilham o mesmo preço de $10/$50 por milhão de tokens.[^1]

O Claude Mythos (codinome interno "Capybara") é descrito pela Anthropic como um "salto qualitativo" sobre modelos anteriores em engenharia de software, raciocínio formal e cibersegurança. Por razões de segurança, o Mythos Preview está disponível apenas para parceiros via Project Glasswing (AWS, Apple, Google, Microsoft, Cisco, CrowdStrike, NVIDIA etc.). O Fable 5 é a versão de acesso geral.[^2][^3][^4]

Capacidades de Design com Fable 5

O Fable 5 se destaca em design e geração de UI por várias razões:

• Self-verification visual: escreve seus próprios testes de código e usa visão computacional para verificar se os outputs correspondem ao design original, permitindo revisão de trabalho concluído em vez de supervisão passo a passo[^5]
• Screenshot-to-code de produção: em testes, o modelo reconstruiu um app Autodesk Enterprise inteiro a partir de uma única imagem, mantendo fidelidade ao design system da Autodesk[^6]
• One-shot UI/UX: capaz de gerar landing pages award-worthy, galerias Three.js, hero sections redesenhados e scrollers GSAP/Three.js em uma única prompt[^7]
• CSS glass/liquid UI: reportes virais mostram o Mythos gerando glass liquid UI complexo apenas com CSS puro — utilizando backdrop-filter, background-blend-mode: luminosity e gradiente via mask compositing[^8]

Onde Encontrar Código Real Gerado por Claude

1. Plataformas de Galeria Pública

Os artefatos públicos do Claude são acessíveis via URLs do formato claude.ai/public/artifacts/[id] — todos executáveis diretamente no browser, sem configuração.[^9]

2. Repositórios Especializados em Design

rohitg00/awesome-claude-design ⭐ [Mais completo para design]

github.com/rohitg00/awesome-claude-design

Este repositório é o recurso mais rico disponível atualmente para design com Claude. Contém:[^10]

• DESIGN.md por família estética (ver seção abaixo)
• Receitas de remix (combinação entre dois sistemas de design)
• Packs de prompts com exemplos de output
• Kit anti-slop para evitar estética genérica
• Teardowns em vídeo da comunidade
• Showcase de builds reais (Mercury, Datadog, Brilliant)

VoltAgent/awesome-claude-design ⭐ [68 arquivos DESIGN.md prontos]

github.com/VoltAgent/awesome-claude-design

Coleção de 68 arquivos DESIGN.md prontos para uso — basta fazer upload no Claude Design (claude.ai/design) para gerar um sistema de design completo em um único shot. O repositório cobre marcas como Linear, Stripe, Vercel, Figma, Airbnb, Tesla, Ferrari, Spotify e muito mais.[^11][^12]

jcmrs/claude-visual-style-guide

github.com/jcmrs/claude-visual-style-guide

Guia de estilo visual completo otimizado para geração de artefatos Claude, com design tokens, componentes (baseados em shadcn/ui), layouts responsivos e dark mode. Cobre Claude Code, Desktop, Web, iOS e Android.[^13]

O Protocolo DESIGN.md — O Segredo dos Outputs de Qualidade

O DESIGN.md é um arquivo markdown de texto simples que descreve a linguagem visual de uma marca em um formato que agentes de IA conseguem interpretar e executar. O conceito foi introduzido pelo Google Stitch e expandido pela comunidade.[^11]

Ao fazer upload de um DESIGN.md no Claude Design, o modelo gera automaticamente:

• README.md com contexto da marca, voz e fundamentos visuais
• colors_and_type.css com variáveis CSS, escala tipográfica e classes utilitárias
• Substitutos Google Fonts para fontes proprietárias
• Cards de preview para cores, tipo, espaçamento, componentes
• Um UI kit funcional (index.html + componentes)
• SKILL.md portátil para reutilização em projetos futuros[^11]

As 9 Seções de um DESIGN.md

Famílias Estéticas — Catálogo Completo

A maior vantagem do ecossistema atual é que o design é organizado por caráter visual, não por indústria. Isso é exatamente o que você precisa para inspiração de projetos.[^14]

1. Editorial Minimalismo

Neutros calmos, tipografia serif ou narrow-grotesque, line-height generoso, acento único. Ideal para leitura, páginas de preços, documentação.[^14]

Exemplo de DESIGN.md disponível: design-md/editorial/linear.md e design-md/editorial/vercel.md[^14]

2. Terminal-Core

Monospace em tudo, fósforo-verde ou âmbar sobre quase-preto, bordas duras, metáforas CLI.[^14]

Disponível: design-md/terminal/ollama.md, design-md/terminal/warp.md, design-md/terminal/opencode.md[^14]

3. Warm Editorial (estética do próprio Claude/Anthropic)

Terracota, creme, argila. Corpo em serif, acolhedor, humano. A marca do Claude se encaixa aqui.[^15]

--bg-primary: #f4f3ee   /* creme, página */
--bg-secondary: #eeede6  /* lift sutil de superfície */
--bg-inverse: #191817    /* quase-preto, seções inversas */
--text-primary: #191817  /* tinta */
--text-secondary: #5a554e /* cinza quente */
--accent: #c96442        /* terracota */
--accent-hover: #b55738
--accent-soft: #e89268   /* callouts, ilustrações */

Regras de tipografia: Styrene + Tiempos. Escala modular 1.25: 13/15/17/21/26/32/40/50/62.[^15]

Disponível: design-md/warm/claude.md, design-md/warm/mercury.md[^14]

4. Data-Dense Pro

Gráficos como protagonistas. Espaçamento apertado, paleta categórica saturada, números de largura fixa, dashboards dark-first.[^14]

Disponível: design-md/data-dense/clickhouse.md, design-md/data-dense/posthog.md, design-md/data-dense/datadog.md[^14]

5. Cinematic Dark (destaque — ideal para projetos criativos)

Gradientes de grau cinematográfico, tipografia oversized, motion-forward, hero de mídia pesada. Construído para produtos de IA e ferramentas criativas.[^14]

Disponível: design-md/cinematic/runway.md, design-md/cinematic/tavus.md, design-md/cinematic/nvidia.md, design-md/cinematic/bmw.md, design-md/cinematic/ferrari.md, design-md/cinematic/lamborghini.md, design-md/cinematic/renault.md[^14]

6. Playful Color

Alta saturação, acentos ilustrados, cantos arredondados, formas decorativas. Amigável ao consumidor.[^14]

Disponível: design-md/playful/figma.md, design-md/playful/canva.md, design-md/playful/toss.md[^14]

7. Glass / Soft-Futurism (tendência 2026 — Fable 5 excels aqui)

Desfoque gelado (frosted blur), translucência em camadas, gradientes suaves, adjacente à Apple. Sensação premium ao consumidor.[^14]

CSS da classe .liquid-glass usada pelo Fable 5/Mythos:

.liquid-glass {
  background: rgba(0, 0, 0, 0.4);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  /* pseudo-borda via mask compositing */
}

Fonte: Demo viral de Ann Nguyen reportada durante o lançamento do Fable 5[^16][^8]

Disponível: design-md/glass/arc.md, design-md/glass/apple.md[^14]

8. Neon Brutalist

Bordas duras, mistura de tipos deliberadamente "feia", numerais oversized, matiz único saturado. Peças de declaração.[^14]

Disponível: design-md/brutalist/the-verge.md[^14]

9. Cult / Indie Picks (recomendação especial para o seu perfil)

Marcas que o catálogo da Fortune 500 não cobre — SaaS indie, ferramentas cult, revistas, museus, estúdios de jogos.[^14]

Receitas de Remix — Combinando Sistemas

Uma única marca fica genérica rápido. A grande sacada do ecossistema atual é misturar tokens de famílias diferentes para criar looks únicos:[^14]

Claude Design — Ferramenta Oficial da Anthropic

Lançado em 17 de abril de 2026 como research preview, o Claude Design (claude.ai/design) é uma workspace de design conversacional movida pelo Claude Opus 4.7.[^17][^18]

Superfícies disponíveis:

• Protótipos: a partir de texto, screenshot, arquivo Figma .fig, URL de repositório ou site ao vivo
• Design systems: tokens e componentes persistentes por projeto via DESIGN.md
• Colateral: pitch decks, páginas de marketing, carrosséis, vídeos de marca[^17]

Opções de export:

• Canva
• PDF
• PPTX
• HTML standalone
• Handoff para Claude Code[^18][^19][^20]

Atenção ao consumo: a ferramenta tem quota semanal separada do chat regular. Alguns usuários relataram esgotar 95% da quota em 2 prompts. Use o arquivo DESIGN.md para inicializar o sistema uma vez e depois itere via comentários inline para economizar tokens.[^14]

Recursos da Comunidade e Anti-Slop

O Problema do "AI Slop" e Como Evitar

Sem orientação explícita, o Claude tende a gerar a mesma estética genérica. Os fingerprints a evitar são bem documentados:[^14]

Prompt anti-slop oficial da Anthropic (adicionar ao system prompt ou CLAUDE.md):[^21][^14]

NEVER use generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (purple gradients on white or dark backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

DO use:
- Unique fonts chosen for the brand, not defaults
- Cohesive colors and themes grounded in the product's story
- Animations for effects and micro-interactions
- Context-specific character in every component

Skills e Plugins de Design para Claude Code

Skills instaláveis via SkillKit para trabalho de UI com Claude:[^22][^14]

Instalação via SkillKit:

npx skillkit install design-shotgun
npx skills add Leonxlnx/taste-skill
npx skills add ainergiz/design-inspirations --skill glassmorphism --agent claude-code

Cookbook Oficial — Prompts para Estética Frontend

A Anthropic publicou um cookbook oficial com técnicas para obter designs mais distintos do Claude:[^21]

Três estratégias fundamentais:

1. Guiar dimensões específicas de design — direcionar a atenção para tipografia, cor, motion e fundos individualmente
2. Referenciar inspirações de design — sugerir fontes como temas de IDE ou estéticas culturais sem ser excessivamente prescritivo
3. Chamar atenção para os defaults a evitar — dizer explicitamente ao Claude para evitar sua tendência a escolhas genéricas

O prompt completo está disponível em: platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics[^21]

Ferramentas de Extração de DESIGN.md

Para extrair um DESIGN.md de qualquer site existente:[^14]

Prompt para extrair DESIGN.md de qualquer site:[^23]

You are a senior design systems architect.
Analyze the brand at {URL}
and produce a DESIGN.md file that captures its visual language for
coding agents to replicate.

Inspect:
1. Computed CSS of body, h1, primary button, primary link
2. Hero section tokens (color, type, spacing)
3. Font stack and licensing notes
4. Distinctive visual signatures (radii, shadows, motion, grid)

Output MUST include all 9 canonical sections:
- Visual Theme & Atmosphere
- Color Palette & Roles (CSS variables)
- Typography Rules (scale + stack)
- Component Stylings (button, card, input, nav)
- Layout Principles (grid, max-width, spacing scale)
- Depth & Elevation
- Do's and Don'ts
- Responsive Behavior
- Agent Prompt Guide

Workflow Recomendado para Pablo Murad

Dado o perfil de desenvolvedor web criativo com expertise em GLSL, static sites e design experimental, o fluxo ideal é:

1. Explorar a galeria claudeartifacts.club e madewithclaude.com por categoria "Creative" e "Web Design"[^24][^9]
2. Escolher uma família estética compatível com o projeto — para sites pessoais/blog: Warm Editorial ou Cult/Indie; para projetos shader/creativecoding: Cinematic Dark[^14]
3. Baixar o DESIGN.md correspondente do repositório rohitg00/awesome-claude-design ou VoltAgent/awesome-claude-design[^10][^11]
4. Carregar no Claude Design (claude.ai/design) ou passar como contexto para Claude Code + adicionar o anti-slop prompt[^14]
5. Exportar via PDF, HTML ou PPTX para documentação e referência futura[^19][^18]
6. Iterar via comentários inline em vez de novos prompts, para economizar quota semanal[^14]

Recursos Adicionais de Código e Inspiração

Sites de Showcase Específicos

• simonwillison.net/2024/Oct/21/claude-artifacts/ — Simon Willison documentou tudo que construiu com Claude Artifacts em uma semana, com prompts completos[^25]
• miriamschwab.me/creating-impressive-html-graphics-with-claude/ — Tutorial prático sobre geração de gráficos HTML/CSS com Claude, incluindo workflow para WordPress e exportação como imagem[^26]
• wowhow.cloud/product/portfolio-landing-page-generator-claude-artifacts — 10 prompts Claude que geram landing pages completas e bonitas: developer portfolio, startup landing, restaurante, fotografia, agência, SaaS pricing, blog, evento, e-commerce, ONG[^27]
• dev.to/hira_jabeen_ccaa191c13070/ultimate-claude-artifacts-guide-45k3 — Guia definitivo de Claude Artifacts do DEV Community, inclui tabela de tipos com dicas[^28]

Explorações de Fable 5 para Design — Highlights Virais

• Fable 5 "one-shot" clone de Minecraft — gerou versão com múltiplos biomas, ciclos dia/noite, ores e sistema de cavernas em ~20 minutos com código de 8.000 linhas[^29]
• Simulador de bloco urbano multi-agente com detecção em tempo real, trajetórias e ciclos dia/noite[^29]
• Website de produto 3D interativo — criador usou Magnific MCP para gerar imagens de produto no Claude Code, converteu para modelos 3D, entregou ao Fable 5 para desenvolvimento de página interativa[^29]
• McKinsey-style reports + 3D renderings na mesma sessão[^8]
• Apple Glass liquid UI com CSS puro — gerado pelo Mythos usando apenas propriedades CSS nativas[^8]

Comparativo: Fable 5 vs. Outros Modelos para Design

Relatório compilado com fontes de junho de 2026. Claude Fable 5 disponível via API (claude-fable-5) e claude.ai. Claude Design disponível em claude.ai/design para assinantes Pro, Max, Team e Enterprise.

References

1. Claude Fable 5: Mythos-Class AI Guide - Lushbinary - Claude Fable 5 is Anthropic's first publicly available Mythos-class model, announced June 9, 2026. I...

2. Claude Mythos (Capybara) - AI Models - Overchat AI - Chat with Claude Mythos, Anthropic's next-gen Capybara-tier AI. A step change beyond Opus 4.6 in cod...

3. Anthropic's New Claude Mythos Changes Everything (Really BAD) - Claude Mythos just released, but in the worst way possible. (IM PI*SSED) All Resources and Coaching...

4. Claude Mythos Prompt Guide — What We Know So Far (Updated ... - Claude Mythos broke out of its sandbox during testing. It finds real vulnerabilities in real softwar...

5. Claude Fable 5 - AI Model Catalog | Microsoft Foundry Models - Claude Fable 5 is our most intelligent Fable model and the best generally available model for coding...

6. I Tested Claude Fable 5. 4 Wild Tests 🤯 Mythos-class model. - Claude Fable 5 just dropped, and it might be the best vision model yet. I gave Anthropic's new Mytho...

7. Claude Fable 5 UI/UX One-Shots - 5 Tests - YouTube - ... Design Portfolio 1:51 - Test 2 - Threejs Gallery 3:07 - Test 3 - Hero Section Redesign 4:19 - Te...

8. Claude Fable Delivers Pixel-Perfect McKinsey Reports And ... - The model also generated McKinsey-style reports and 3D renderings.

9. Claude Artifacts Hub - 1000+ AI-Created Code Components ... - Explore Claude AI's Artifacts collection. Featuring 1000+ high-quality React components, HTML applic...

10. awesome-claude-design - IDE Extensions on GitHub | SkillsLLM - Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signa...

11. VoltAgent/awesome-claude-design - GitHub - Awesome Claude Design: 68 ready-to-use design system inspirations in DESIGN.md format. Drop one in, ...

12. Awesome Claude Code: 11 Curated Lists Worth Bookmarking - An awesome-list for Claude Code is a curated, community-maintained directory of skills, hooks, slash...

13. jcmrs/claude-visual-style-guide - Personal Visual Style Guide for Claude Artifacts & Applications - jcmrs/claude-visual-style-guide

14. DESIGN.md prompt ikut “aesthetic families” untuk Claude Design - Saya cipta awesome-claude-design menggunakan Claude code: DESIGN.md prompt ikut “aesthetic families”...

15. awesome-claude-design/design-md/warm/claude.md at main - Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signa...

16. Viktor Oddy (@viktoroddy) on X

17. Claude Design and the New Design-to-Code Loop | MyClaw.ai

18. Claude (language model) - Wikipedia

19. Claude is a designer now - Welcome back! Friday's Claude Design launch has already been bookmarked 80,000 times, tanked Figma's...

20. Introducing Claude Design by Anthropic Labs - Introducing Claude Design by Anthropic Labs

21. Prompting for frontend aesthetics | Claude Cookbook - Guide to prompting Claude for distinctive, polished frontend designs avoiding generic aesthetics.

22. UI/UX Pro Max Skill - ClaudeKit Documentation - UI/UX design intelligence with searchable database of 50 styles, 21 palettes, 50 font pairings, 20 c...

23. awesome-claude-design/prompts/brand-to-design-md.md at main - Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signa...

24. Claude Artifacts - Discover the best and most awesome Claude Artifacts. Share and remix creative, useful artifacts crea...

25. Everything I built with Claude Artifacts this week - Here's most of what I've used Claude Artifacts for in the past seven days. I've provided prompts or ...

26. How To Screenshot Html... - Claude can generate diagrams, charts, comparison cards, and interactive widgets — all as HTML. Here'...

27. Portfolio & Landing Page Generator — 10 Claude Artifact Prompts

28. Ultimate claude artifacts-guide - DEV Community - The Ultimate Guide to Building Claude Artifacts From Zero to Production-Grade...

29. Viral Claude Fable 5 Showcase Taking the Internet by Storm May Be ... - You might have fallen victim to a scam.