gerar-layout

Name: gerar-layout
Availability: InStock
Author: ogallotti

Generates a complete layout.md specification from approved copy and design assets.

1|Updated Apr 6, 2026

Search Tags:#layout #specification #handoff #design-system #art-direction #library-effects #copy-to-design

Ready to run

npx skills add https://github.com/ogallotti/metodo-zero --skill gerar-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gerar-layout
Source: https://github.com/ogallotti/metodo-zero/tree/main/plugins/metodo-zero/skills/gerar-layout
Command: npx skills add https://github.com/ogallotti/metodo-zero --skill gerar-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill generates a complete, unambiguous layout specification (layout.md) for every section of the landing page, derived from the approved copy and visual design, ensuring developers can reproduce pixel-perfect results without interpretation.

Core Features & Use Cases

Transforms copy and design into a detailed section-by-section layout specification, referencing exact library effects and design tokens.
Documents DNA Visual, media treatment, typography, spacing, and animation details for each section to support the 'desenvolver' workflow.
Provides a structured specification suitable for QA and handoff to production across multiple pages and variants.

Quick Start

Generate the complete layout specification by applying this skill to the approved copy and design assets.

Frequently Asked Questions about gerar-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a layout specification for production handoff from approved copy?▼

To create a layout specification for production handoff, you process approved copy and design assets to generate a section-by-section layout.md document. This spec references exact library effects, design tokens, and visual guidelines, ensuring pixel-accurate handoff.

What is a design handoff specification and what does it need to include?▼

A design handoff specification is an execution-ready document detailing every page section. It includes per-section typography, spacing, media treatment, animation details, exact library effects, and valid file paths so developers can reproduce results without interpretation.

How do I document design tokens and library effects for a multi-page landing layout?▼

You document design tokens and library effects by mapping them directly to each section of the approved copy. The specification references exact visual guidelines, DNA Visual rules, and per-section details to support the development workflow across multiple variants.

Does the layout specification cover animation and media treatment for every section?▼

Yes, the layout specification comprehensively covers animation and media treatment for every section. It documents DNA Visual guidelines, exact library effects, and design tokens alongside typography and spacing to ensure a complete, execution-ready handoff.

Can I generate QA-ready layout specs for multiple page variants from copy and design assets?▼

Yes, you can generate QA-ready layout specs for multiple page variants. The skill processes approved copy and visual design assets into a structured specification with precise per-section details, tokens, and valid file paths suitable for production handoff.

Why do developers need an exhaustive layout spec instead of just design files?▼

Developers need an exhaustive layout spec to reproduce pixel-perfect results without interpretation. It transforms copy and design into an unambiguous specification referencing exact library effects, design tokens, and visual guidelines, eliminating guesswork during the development step.