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

generating-components

Design e Frontend Autor: fusengine

Phase 3: Map design-system.md to 7 Gemini XML blocks (aesthetics, style_reference, typography, color_system, spacing, states, forbidden), call create_frontend, add component variants (Glass/Outline/Flat via CVA).

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

Como adicionar

/plugin marketplace add fusengine/agents

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/generating-components/svg)](https://www.skillteca.com.br/skills/generating-components)

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

Phase 3: GENERATING COMPONENTS — Build UI with Gemini Design

When

After Phases 0-2 are complete. design-system.md, tokens, and copy-guide.md must exist.

Input (from Phases 0-2)

  • design-system.md with OKLCH palette, typography, motion personality.
  • CSS-precise observations from Phase 1 Playwright browsing (oklch values, clamp sizes, grid ratios).
  • copy-guide.md from Phase 2 (voice, CTAs, microcopy).

Steps

  1. Pre-generation checklist — Verify: design-system.md exists, OKLCH tokens defined, typography pair set, motion profile set, visual-technique-matrix consulted.
  2. Browse inspiration — mcp__playwright__browser_navigate + mcp__playwright__browser_take_screenshot on sector-matching sites (see ../1-designing-systems/references/design-inspiration.md and ../1-designing-systems/references/design-inspiration-urls.md). New project: 4 sites. New page: 2 sites. New component: 1 site.
  3. Search 21st.dev — mcp__magic__21st_magic_component_inspiration for component patterns.
  4. Read premium patterns — Read references/premium-patterns/PATTERNS.md, pick 2-3 patterns matching your sector, then read their description.md. Copy the "Gemini Context Prompt" section from each.
  5. Prepare 7 XML blocks for Gemini: <aesthetics>, <typography>, <color_system>, <spacing>, <layout>, <states>, <forbidden>.
  6. Generate — mcp__gemini-design__create_frontend with design-system.md tokens + premium pattern context prompts combined. In the context parameter, ALWAYS include the copied Gemini Context Prompts + "Visual depth required: hero >= 75vh, 3-level shadows, alternating section backgrounds, glassmorphism nav, typography contrast 3:1 H1 vs body. NO flat design."
  7. Add variants per references/component-variants-ref.md — size, state, color variants.
  8. Compose layouts using references/layouts/ (pages, navigation, patterns) and references/component-composition-ref.md.
  9. Iterate — mcp__gemini-design__modify_frontend per references/gemini-feedback-loop.md.

Output

  • HTML/CSS components generated via Gemini, matching design-system.md identity.
  • Variants (size, state, color) defined. Page layouts composed.
  • Components ready for animation in Phase 4.

Next → Phase 4: ADDING ANIMATIONS

4-adding-animations/SKILL.md — Add motion, interactions, and visual effects.

References

| File | Purpose | |------|---------| | references/gemini-design-workflow.md | Gemini MCP workflow | | references/gemini-tool-signatures.md | Gemini tool API signatures | | references/gemini-feedback-loop.md | Iterative refinement process | | references/premium-patterns/PATTERNS.md | 10 premium design patterns with CSS specs + Gemini prompts | | ../1-designing-systems/references/design-inspiration.md | Browsing methodology (Phase 1) | | ../1-designing-systems/references/design-inspiration-urls.md | Sector-specific URLs (Phase 1) | | references/component-variants-ref.md | Variant patterns | | references/component-composition-ref.md | Composition patterns | | references/layouts/ | Page layouts, navigation, patterns | | references/templates/ | Component templates (hero, pricing, etc.) | | references/21st-dev.md | 21st.dev component library | | references/shadcn.md | shadcn/ui integration |

Compartilhar X LinkedIn