S Skillteca
Receber por email
Explorar Categorias Coleções Newsletter
← Voltar para o catálogo

figma-design-qa

Design e Frontend Autor: mohitagw15856

Executa uma lista de verificação de QA pré-entrega em designs do Figma, cobrindo higiene do arquivo, uso de componentes, acessibilidade e prontidão para entrega. Use para validar designs antes da engenharia, produzindo um relatório estruturado de aprovação/reprovação.

991estrelas
Atualizado há 4 meses
Ver no GitHub ↗ Licença: MIT

Como adicionar

/plugin marketplace add mohitagw15856/pm-claude-skills

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/figma-design-qa/svg)](https://www.skillteca.com.br/skills/figma-design-qa)
#ai

Skills relacionadas

Ver todas de Design e Frontend →

frontend-design

153.1k 2

Cria interfaces frontend distintas e de nível de produção com alta qualidade de design, gerando código criativo e polido e design de UI que evita a estética genérica de IA. Use para construir componentes web, páginas e aplicações, ou para estilizar/embelezar UIs web.

Design e Frontend #ai #css por anthropics

mcp-builder

153.1k

Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem que LLMs interajam com serviços externos por meio de ferramentas bem projetadas. Use ao construir servidores MCP para integrar APIs ou serviços externos, seja em Python (FastMCP) ou Node/TypeScript (MCP SDK).

Design e Frontend #api #llm por anthropics

webapp-testing

153.1k

Kit de ferramentas para interagir e testar aplicações web locais usando Playwright. Suporta a verificação de funcionalidades de frontend, depuração de comportamento da UI, captura de screenshots do navegador e visualização de logs do navegador.

Design e Frontend #test por anthropics

web-artifacts-builder

153.1k

Conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, não para artefatos HTML/JSX simples de arquivo único.

Design e Frontend #ai #css por anthropics

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Figma Design QA Skill

Runs a systematic pre-handoff QA check on a Figma design — catching issues that cause engineering back-and-forth before they become expensive.

Required Inputs

Ask the user for these if not provided:

  • Feature or screen being QA-d (describe what has been designed)
  • Platform (iOS / Android / Web)
  • Design system (custom / Material / HIG / None)
  • Handoff tool (Figma Inspect / Zeplin / Storybook / Direct link)
  • QA depth (quick 15 min / standard 30 min / thorough 60 min)

Output Structure

QA Report: [Feature] | [Date] | [Platform] Overall status: Ready / Minor fixes needed / Not ready

Section 1: File Hygiene

  • All layers named semantically (no "Rectangle 12")
  • No unused/hidden layers in final frames
  • Components from library (not detached copies)
  • All text uses text styles (not manual font settings)
  • All colours use styles or variables (not hex overrides)
  • Frames named to match screen map
  • No leftover prototype wires to wrong frames

Section 2: Component Usage

  • All buttons use library component
  • All inputs use library component
  • All icons from approved icon library
  • No custom components that should be in library
  • Variants used correctly (right size, state, type)

Section 3: Content and Copy

  • No placeholder text (Lorem ipsum) in final designs
  • All copy reviewed and approved
  • Realistic content used (not "User Name")
  • Long text edge cases tested
  • Error messages are human-readable
  • Empty states have copy and CTA

Section 4: States and Coverage

  • Default, Loading, Empty, Error, Success states
  • Interactive elements have hover/active (web)
  • Disabled states designed where applicable

Section 5: Accessibility

  • All text meets WCAG AA contrast (4.5:1 body, 3:1 large)
  • UI components meet 3:1 contrast against background
  • Touch targets minimum 44x44pt iOS / 48x48dp Android
  • Focus states for keyboard/switch navigation (web)
  • Information not conveyed by colour alone
  • Icons have text labels or accessible names annotated

Section 6: Handoff Readiness

  • Dev annotations on non-obvious interactions
  • Spacing uses Auto Layout (not absolute positioning)
  • Images/assets exported at correct resolutions
  • Design matches approved requirements
  • Link to prototype included

Issues Found

For each fail: [Issue] — Blocking / Fix before handoff / Fix in next iteration

  • What: [Specific layer/screen/element]
  • Fix: [Exact action needed]
  • Owner: [Designer/PM/Both]

Handoff Decision

Status, signed off by, date.

Quality Checks

  • [ ] All 6 sections completed
  • [ ] Every fail has a specific description and fix action
  • [ ] Blocking issues separated from minor ones
  • [ ] Handoff decision is explicit

Example Trigger Phrases

  • "QA this Figma design before handoff"
  • "Run a pre-handoff check on [feature] design"
  • "Is this Figma design ready for engineering?"
  • "Do a design QA on [screen/feature]"
  • "What needs fixing before we hand this off?"
Compartilhar X LinkedIn