skills.rest
ogallotti
ogallottiCOMMUNITY
Explore all skills by this author →
GitHub

gerar-layout

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
One-click install
npx skills add https://github.com/ogallotti/metodo-zero --skill gerar-layout
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

image-to-code

Convert visual design assets into responsive frontend code with visual QA.

Official
Advanced
yonetim258852yonetim258852

image-to-code

Translate visual design images into modular HTML, CSS, and JavaScript code.

Community
Advanced
ajsai47ajsai47
11

design-consultation

Create a complete design system and generate DESIGN.md files.

Community
Advanced
soo-kate-yeonsoo-kate-yeon

moai-design-tools

Fetch Figma design specs and export Pencil designs as React and Tailwind CSS code.

Community
Advanced