83.3K+Baixar
Ir para o guia de uso
frontend-designpor Anthropic

Frontend Design Skill.

Uma skill para Claude Code e Codex focada em design de interfaces distintivas: tipografia, cor e layout escolhidos com propósito.

  • Web & UI
  • Websites
  • Redesign de UI
  • Typography
Baixar OpenDesignVer guia de uso
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 De briefing para interface

Uma Tarefa de Design Frontend, do Briefing à Interface.

Dê ao Claude Code ou Codex o produto, o público e o conteúdo; a skill frontend-design toma as decisões visuais.

Exemplo de briefingFluxo de trabalho ilustrativo · não é uma execução registrada

Uma Página Inicial para uma Ferramenta de Orçamentos

Ajude designers freelancers a entender como criar orçamentos, acordar mudanças de escopo e obter aprovação do cliente.

Ativos de marcaPreçosTextos de FAQ
Ver o prompt completo ↗

O que o Skill orienta

  1. 01
    Encontre a direção visual

    Uma paleta, hierarquia de tipos e layout vinculados ao produto.

  2. 02
    Revisar o plano

    Verifique a direção em relação ao briefing antes de construir.

  3. 03
    Construa e refine

    Uma interface responsiva com ações claras e estados acessíveis.

02 Encontre o ideal para você

Quando Usar a Skill frontend-design

Use o skill frontend-design quando as decisões visuais fizerem parte do trabalho — uma nova página construída no Claude Code ou Codex, ou um redesign de uma interface que parece padronizada.

Boa Combinação

  • Uma nova página ou site a partir de um briefingLanding pages, sites de produto, portfólios, pequenos aplicativos — qualquer coisa em que a primeira pergunta seja "como isso deve ficar?"
  • Um redesign visual de uma interface existenteVocê tem uma UI funcional que parece genérica e quer uma direção enraizada no assunto do produto.
  • Corrigindo tipografia e hierarquiaEscala de texto, comprimento de linha, peso e espaçamento definidos com intenção, não com padrões de framework.
  • Briefings que vêm com conteúdo realA skill constrói com o texto e o assunto reais do briefing; quanto mais material real você fornecer, mais específico será o resultado.

Conheça os Limites

  • Você já tem um design systemForneça suas regras e componentes. A skill deve seguir seu briefing e trabalhar dentro das escolhas visuais que permanecem abertas.
  • O trabalho é lógica, dados ou backendO foco dela é design visual. Lógica de aplicação, APIs e testes funcionais precisam de seu próprio trabalho de implementação.
  • Você quer uma biblioteca de componentes ou templatesEla fornece instruções de design, não uma biblioteca de componentes ou template de página prontos.
  • Você precisa de uma revisão de uma UI finalizadaSua autocrítica é voltada ao seu próprio plano. Para auditoria da interface de outra pessoa, veja as skills relacionadas abaixo.

O Que Fornecer

  • Assunto do produtoO que o produto é e a indústria em que ele está inserido. Se você deixar isso de fora, a skill vai propor um e pedir sua confirmação.
  • Usuários-alvoPara quem a página é feita. Isso direciona o registro visual mais do que qualquer outra coisa.
  • Objetivo da páginaO único trabalho que a página precisa fazer, e a ação primária.
  • Conteúdo realTítulos, textos, preços, respostas de FAQ. Texto placeholder produz design com cara de placeholder.
  • Ativos de marca e restriçõesLogo, paleta, fontes e qualquer coisa já decidida. As próprias palavras do briefing sempre vencem.

03 Projete com intenção

O Que a Skill Traz ao Design de UI

Quatro coisas que a skill frontend-design instrui Claude Code ou Codex a fazer, e no que cada uma transforma sua entrada.

  1. Uma Direção Visual Fundamentada no Assunto

    O agente descobre o que o produto é, a quem ele serve e como é o mundo dele antes de escolher qualquer coisa. Um brinquedo para crianças de oito anos e um dashboard para analistas não devem compartilhar um visual.

    Você fornece
    assunto do produto, público
    Você recebe
    uma direção que você pode aceitar ou redirecionar antes de o código ser escrito

  2. Tipografia, Cor e Layout Escolhidos com Propósito

    Uma ou duas tipografias com uma escala real, uma paleta de 4–6 cores nomeadas em hex, e um conceito de layout com regras de alinhamento. Dispositivos estruturais — linhas, numeração, rótulos — são usados apenas quando carregam informação.

    Você fornece
    ativos de marca, restrições
    Você recebe
    um sistema de tokens compacto do qual a página é construída

  3. Um Plano, Revisado em Relação ao Briefing, Antes da Construção

    O skill funciona em duas etapas. Ele cria um rascunho do plano e depois verifica cada parte em relação à pergunta "eu produziria isso para qualquer página similar?" e revisa o que parece padrão — declarando o que mudou e por quê. O código vem depois disso.

    Você fornece
    o briefing
    Você recebe
    um plano escrito e uma breve autoavaliação que você pode ler na transcrição

  4. Qualidade Básica Sem Ser Solicitado

    Responsivo até mobile, foco de teclado visível, reduced motion respeitado, cor acessível e textos escritos do ponto de vista do usuário em linguagem simples e ativa.

    Você fornece
    seus requisitos de acessibilidade
    Você recebe
    orientação para uso em mobile e teclado

04 Coloque em prática

Instale frontend-design no Claude Code ou Codex

Um comando npx skills add, depois um briefing no seu agente e uma checklist para o primeiro resultado.

Adicione frontend-design ao Claude Code, Codex ou Seu Agente

Execute o comando no seu projeto, siga a seleção de agente do instalador e depois confirme que seu agente consegue descobrir frontend-design.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Origem do comando: entrada do skills.sh para frontend-design. Siga o instalador e confirme que o skill aparece no seu agente.

Dê ao Skill uma Primeira Tarefa de Design de UI

Adapte este briefing com os detalhes do seu produto, anexe os ativos de marca e a cópia a que ele se refere, e execute-o no Claude Code ou Codex.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Verifique o Primeiro Resultado

Uma boa primeira execução é fácil de reconhecer. Antes de aceitar a página, procure por isso na transcrição e na saída:

  • O plano veio antes do código, com valores de paleta nomeados e funções tipográficas.
  • A autoavaliação nomeia pelo menos um padrão que foi substituído e por quê.
  • Sua cópia, preços e ativos de marca reais aparecem inalterados.
  • Um elemento é memorável; o resto da página permanece discreto.
  • A página funciona a 390px, a navegação por Tab mostra um anel de foco visível e o motion respeita a configuração do sistema operacional.
  • Se algo parecer genérico, diga qual parte — a skill foi escrita para receber essa crítica e revisar.

Usando OpenDesign? frontend-design vem dentro do OpenDesign: abra Plugins → Skills, selecione-a na barra superior, e seu SKILL.md é composto no prompt com seu DESIGN.md. Claude Code, Codex, Cursor ou OpenCode fazem o trabalho.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Arquivo da skill
skills/frontend-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 34040c9
License
Apache-2.0 De skills/frontend-design/LICENSE.txt; SKILL.md diz "Complete terms in LICENSE.txt". A raiz do repositório não declara uma licença separada.
Estrelas do repositório
176.183 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório anthropics/skills, que contém muitas skills. Não é uma classificação ou contagem de uso para frontend-design.
Verificado pelo OpenDesign
14/09/2026 Arquivo fonte, caminho, texto da licença e contagem de estrelas foram verificados. Incluída no OpenDesign principal (verificado em 28/08/2026); uma execução real no OpenDesign ainda não foi registrada nesta página.
A Descrição da Própria Skill
"Orientação para design visual distinto e intencional ao construir nova UI ou remodelar uma existente. Ajuda com direção estética, tipografia e a fazer escolhas que não pareçam templates padrão."

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Leia o arquivo completo no GitHub.

Frontend Design

Dê ao seu agente um briefing que valha a pena projetar.

A skill frontend-design vem dentro do OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o exemplo de prompt e leia o plano antes do código.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design