Refero Design
referodesign/refero_skill
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…
Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification.
Install Layout Writing
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writing --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/layout-writing .claude/skills/layout-writing && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .claude/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/layout-writing .agents/skills/layout-writing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .agents/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/layout-writing .cursor/skills/layout-writing && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .cursor/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pavel-molyanov/molyanov-ai-dev.git --path skills/layout-writing--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/layout-writing .gemini/skills/layout-writing && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .gemini/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/layout-writing .github/skills/layout-writing && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .github/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev layout-writing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pavel-molyanov/molyanov-ai-dev.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/layout-writing .opencode/skills/layout-writing && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "layout-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/layout-writing into .opencode/skills/layout-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "layout-writing", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
layout-writing- GitHub stars
- 297
- Token cost
- ~1.4k tokens
- SKILL.md length
- 727 words
- Files
- 9 (incl. scripts, references)
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification.
- Works in 4 steps: Read repository guidance, the affected… → Classify the scope → With an exact source, apply reproduce.md… → …
- : сверстай по Figma
- SKILL.md covers Scope and Source, Implement and Capture Evidence and Review and Hand Off
- Runs JavaScript scripts from its folder
What it does
Layout Writing is an agent skill from pavel-molyanov/molyanov-ai-dev. Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification. Use when: "сверстай по Figma", "поправь вёрстку", "подвинь блок", "перенеси из Claude Design", "сделай адаптив", "добавь в том же стиле", "implement layout", "match Figma", "fix responsive layout". Use alongside code-writing for mixed layout and business-logic tasks; use code-writing alone for logic-only work. Blank-slate visual design is outside…
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `references/design-decisions.md` and `references/reproduce.md`).
It sits in Frontend & Design, covering UI design and Responsive design. It works with Figma. The repository describes itself as: Intent-driven AI-First development methodology for Claude Code and Codex — Project Knowledge, user-spec planning, focused execution, and evidence-gated reviews. The licence is MIT.
When your agent uses it
- : сверстай по Figma
- Поправь вёрстку
- Перенеси из Claude Design
- Добавь в том же стиле
Example prompts
- “сверстай по Figma”
- “перенеси из Claude Design”
- “implement layout”
- “/layout-writing”
Requirements
- Node.js
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Read repository guidance, the affected component and styles, tokens, fonts, images, nearby
- Classify the scope
- With an exact source, apply reproduce.md — source acquisition,
- Ask only for blockers that project or source evidence cannot resolve: the relevant frame when
What it can do on your machine
Read from SKILL.md and the folder at commit b5db526. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 6 files in scripts/ (JavaScript), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Layout Writing loads about 1.4k tokens when it runs, and up to ~3.7k if it reads all its reference files. Until then it costs about 136 tokens; SKILL.md has 727 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from pavel-molyanov/molyanov-ai-dev at commit b5db526, republished under its MIT licence (© pavel-molyanov). 727 words, ~1,446 tokens.
Download SKILL.mdSave it as
.claude/skills/layout-writing/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- layout-writing
- description
- Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification. Use when: "сверстай по Figma", "поправь вёрстку", "подвинь блок", "перенеси из Claude Design", "сделай адаптив", "добавь в том же стиле", "implement layout", "match Figma", "fix responsive layout". Use alongside code-writing for mixed layout and business-logic tasks; use code-writing alone for logic-only work. Blank-slate visual design is outside this skill.
Layout Writing
Deliver a layout that matches its exact source where one exists, fills only genuinely unspecified decisions from project evidence, and works at relevant widths in the existing codebase.
Scope and Source
- Read repository guidance, the affected component and styles, tokens, fonts, images, nearby components, and the relevant run or build command.
- Classify the scope:
selected area— verify the changed element, component, or section with its nearest context;whole page— build an ordered inventory of every major visual block from source metadata, node IDs, a DOM outline, or complete source-image segments, then verify every item.
- With an exact source, apply reproduce.md — source acquisition, native-size evidence, and comparison. Without an exact source, apply design-decisions.md — project-first decisions for unspecified values. For a partial source, apply each reference only to the area it governs.
- Ask only for blockers that project or source evidence cannot resolve: the relevant frame when a Figma link names only a file, substitution of a required missing font or asset, or expansion beyond the requested scope.
Treat a new requirement, state, edge case, or improvement discovered during implementation or review as a proposal, not authorization. If it changes the agreed presentation, behavior, scope, approach, or material complexity, explain it and get the user's decision first. Correct autonomously only a local mismatch in agreed normal presentation. Treat a rare or source-undefined viewport, content state, or interaction state as a user decision even when its correction looks local.
layout-writing owns markup structure, styles, responsive behavior, typography, asset placement,
and visual verification. code-writing owns data flow, state, APIs, validation, and business
behavior; use both for mixed work.
Implement and Capture Evidence
- Reuse suitable project components, tokens, primitives, fonts, images, and the asset pipeline. Implement the smallest change that satisfies the request; exact-source values override general design taste, while unspecified decisions follow project evidence.
- Build a deduplicated viewport list for
capture.mjsand pass it explicitly with--viewports:360,430,768, and1440widths for baseline responsive coverage;- every established exact-source or user-screenshot viewport;
- widths immediately before and after affected CSS breakpoints. Use the owning source height when known; otherwise choose one stable representative height and reuse it across captures and reruns.
- Before capturing, create one temporary evidence root outside the repository. Give every
capture or overlay invocation a new child
--outpath because the scripts reject existing targets and prior evidence must remain unchanged. - At every chosen width, render the selected area or every whole-page inventory block with its
nearest relevant context and affected states. Apply the native-size comparison procedure from
reproduce.mdwherever an exact source exists; otherwise inspect composition, wrapping, clipping, crop, states, and horizontal overflow. - Correct confirmed mismatches and repeat only affected blocks and widths with new output paths. Run the smallest project check that proves the changed route still compiles or renders.
Show full SKILL.md (255 more words)Show less
Review and Hand Off
Run no more than two review waves. After every implementation, run wave 1 with one fresh
layout-reviewer without a model override. Pass the request, scope, changed files, applicable
repository instructions and project-pattern evidence, source mode and responsibility boundary,
all checked widths, site images for every checked block and state, source and difference images
where applicable, and the complete inventory and evidence set for a whole page or segmented tall
block. Include reviewers required by other active skills in these same waves instead of starting a
separate wave sequence.
Review findings are diagnoses, not a work queue. Check the evidence and exact correction. Apply
only an authorized local correction to agreed normal presentation. If the scenario is rare or
unagreed, or the correction adds behavior, state, markup states, component contracts, architecture,
or material complexity, reject it with a short reason or ask the user before editing.
user_decision_required: false does not replace this check. After an authorized correction changes
the reviewed result, recapture affected evidence and run wave 2 with a fresh layout-reviewer.
Stop after a clean wave or when no authorized correction changes the result; do not start a wave
only for a finding that awaits the user's decision.
After wave 2, do not launch another reviewer automatically. Correct remaining local mismatches inside the agreed presentation, recapture and inspect the affected widths and states, and report any remaining findings or required user decisions.
Hand off with the change summary, checks run, widths and blocks actually verified, finding dispositions, and known evidence limitations.
© pavel-molyanov, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (scripts, references) in skills/layout-writing of pavel-molyanov/molyanov-ai-dev.
- SKILL.md
- references/design-decisions.md
- references/reproduce.md
- scripts/capture.mjs
- scripts/capture.test.mjs
- scripts/overlay.mjs
- scripts/overlay.test.mjs
- scripts/visual-tools.mjs
- scripts/visual-tools.test.mjs
Open the folder on GitHubat commit b5db526
Compare with similar skills
Layout Writing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Layout Writing this skillpavel-molyanov/molyanov-ai-dev | 297 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Refero Designreferodesign/refero_skill | 299 | — | ~5.3k | Automated safety check: Pass | MIT | |
| Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill | 138 | — | ~3k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Cc DesignZeroZ-lab/cc-design | 827 | — | ~2.2k | Automated safety check: Notes | None |
Similar skills
Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
Visual Style
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
More from pavel-molyanov/molyanov-ai-dev
All 13 skills in this repoDocumentation Writing
pavel-molyanov/molyanov-ai-dev
Creates and maintains project documentation in .claude/skills/project-knowledge/: interview, initial Project Knowledge, audit, edit, consistency, and feature finalization.
User Spec Planning
pavel-molyanov/molyanov-ai-dev
Creates user-spec.md through adaptive interview, codebase research, and three-lane validation.
Infrastructure Setup
pavel-molyanov/molyanov-ai-dev
Provides project infrastructure conventions and review criteria for local setup, Docker, Git hooks, CI/CD, service delivery, release artifacts, monitoring, backups, and operations.
Skill Master
pavel-molyanov/molyanov-ai-dev
Guides skill creation and updates with specialized knowledge and workflows.
Project Initialization
pavel-molyanov/molyanov-ai-dev
Initializes a project from the standard dual-runtime template, preserves existing files, configures Git hooks, and creates or connects a private GitHub repository with main and dev branches.
Methodology
pavel-molyanov/molyanov-ai-dev
Explains the current AI-First development methodology: skill routing, Project Knowledge, user-spec planning and execution, evidence-gated reviews, feature finalization, and the Claude/Codex dual…
Related
Works with
Categories
Questions about Layout Writing
What does Layout Writing do?
Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification. Layout Writing is an agent skill from pavel-molyanov/molyanov-ai-dev. Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification.
When should I use Layout Writing?
Layout Writing fits situations like: : сверстай по Figma; Поправь вёрстку; Перенеси из Claude Design; Добавь в том же стиле.
How do I install Layout Writing in Claude Code?
Run `npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a claude-code`. Or copy the skill folder (skills/layout-writing in pavel-molyanov/molyanov-ai-dev) into .claude/skills/layout-writing in your project. Claude Code loads it when a task matches its description.
How do I install Layout Writing in Codex?
Run `npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a codex`. Or copy the skill folder (skills/layout-writing in pavel-molyanov/molyanov-ai-dev) into .agents/skills/layout-writing in your project. Codex loads it when a task matches its description.
Can I use Layout Writing in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pavel-molyanov/molyanov-ai-dev --skill layout-writing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/layout-writing, .gemini/skills/layout-writing, .github/skills/layout-writing and .opencode/skills/layout-writing in your project.
What does Layout Writing need to run?
Going by SKILL.md and its folder, Layout Writing needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Layout Writing access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Layout Writing safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Layout Writing use?
Layout Writing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Layout Writing use?
About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.
What are the alternatives to Layout Writing?
Skills that share tags, products or a category with Layout Writing: Refero Design (referodesign/refero_skill, 299 stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 138 stars), UI Styling (Ohh-889/skyroc, 795 stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Layout Writing?
pavel-molyanov (a GitHub user) maintains it in pavel-molyanov/molyanov-ai-dev, which has 297 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on August 23, 2026.
Source: pavel-molyanov/molyanov-ai-dev on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.