Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews.
Install Code Writing
$ npx skills add pavel-molyanov/molyanov-ai-dev --skill code-writing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev code-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/code-writing .claude/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .claude/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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/code-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 code-writing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev code-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/code-writing .agents/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .agents/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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 code-writing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev code-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/code-writing .cursor/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .cursor/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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/code-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 code-writing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pavel-molyanov/molyanov-ai-dev code-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/code-writing .gemini/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .gemini/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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 code-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 code-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/code-writing .github/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .github/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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 code-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 code-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/code-writing .opencode/skills/code-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 "code-writing" agent skill from https://github.com/pavel-molyanov/molyanov-ai-dev/tree/main/skills/code-writing into .opencode/skills/code-writing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-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
code-writing- GitHub stars
- 297
- Token cost
- ~1.4k tokens
- SKILL.md length
- 707 words
- Files
- 1
- Skills in repo
- 13
- Repo updated
- First seen
- Licence
- MIT
At a glance
Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews.
- Works in 5 steps: Extract the requested behavior and what… → Read repository instructions, affected… → For non-trivial work, read every source… → …
- Code needs to be written — from a short ad-hoc edit to a full user-spec
- SKILL.md covers Understand the Change, Implement and Verify and Run Fresh Reviews
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Code Writing is an agent skill from pavel-molyanov/molyanov-ai-dev. Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews. Use whenever code needs to be written — from a short ad-hoc edit to a full user-spec. Use when: "напиши код", "закодь", "реализуй", "write code", "implement" Do NOT use for pure layout from Figma, Claude Design, screenshots, or an existing visual style ("сверстай", "подвинь блок", responsive) — use layout-writing instead. Direct mixed layout + business-logic work uses both layout-writing and…
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & 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
- Code needs to be written — from a short ad-hoc edit to a full user-spec
- Implement Do NOT use for pure layout from Figma
- An existing visual style (сверстай
- Responsive) — use layout-writing instead
Example prompts
- “write code”
- “implement”
- “Use the code-writing skill to guide code implementation through proportional context reading, focused changes, verification, and fresh reviews”
- “/code-writing”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Extract the requested behavior and what done means from the request or user-spec. Resolve
- Read repository instructions, affected code, its usages, and only the project documentation
- For non-trivial work, read every source file that will change, find affected contracts and
- Discuss the approach before editing only when evidence exposes a substantive fork, risk, or
- Treat a new idea, risk, edge case, or opportunity discovered during implementation or review
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
No scripts in the folder and no shell commands in SKILL.md.
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
Code Writing loads about 1.4k tokens when it runs. Until then it costs about 148 tokens; SKILL.md has 707 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); files beside SKILL.md are not scanned.
SKILL.md
The full file from pavel-molyanov/molyanov-ai-dev at commit b5db526, republished under its MIT licence (© pavel-molyanov). 707 words, ~1,416 tokens.
Download SKILL.mdSave it as
.claude/skills/code-writing/SKILL.md (or your agent's skills folder).- name
- code-writing
- description
- Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews. Use whenever code needs to be written — from a short ad-hoc edit to a full user-spec. Use when: "напиши код", "закодь", "реализуй", "write code", "implement" Do NOT use for pure layout from Figma, Claude Design, screenshots, or an existing visual style ("сверстай", "подвинь блок", responsive) — use layout-writing instead. Direct mixed layout + business-logic work uses both layout-writing and code-writing. For creating a user-spec → user-spec-planning skill.
Code Writing
Understand the Change
- Extract the requested behavior and what done means from the request or user-spec. Resolve ambiguity from repository evidence; ask only when a substantive choice changes the result or scope.
- Read repository instructions, affected code, its usages, and only the project documentation needed to change it safely. A localized edit needs local context; cross-cutting work needs its contracts, architecture, and relevant patterns.
- For non-trivial work, read every source file that will change, find affected contracts and reusable code, and establish the smallest useful baseline check. Inspect generated, lock, snapshot, or other mechanical artifacts through their generator, relevant diff, and deterministic validation rather than an unhelpful full read.
- Discuss the approach before editing only when evidence exposes a substantive fork, risk, or scope decision. Otherwise choose the smallest safe implementation that follows project or framework conventions.
- Treat a new idea, risk, edge case, or opportunity discovered during implementation or review as a proposal, not authorization. A rare or unagreed scenario is a user decision even when its correction looks local. Correct autonomously only an authorized local defect in agreed normal behavior; ask before adding behavior, state, entities, contracts, dependencies, architecture, or material complexity.
Implement and Verify
- Implement only the requested behavior. Reuse existing capabilities before adding abstractions or dependencies. Do not add speculative validation, fallbacks, configuration, optimization, or future flexibility without a current requirement or realistic project condition.
- Validate untrusted input at its boundary, keep secrets out of source, preserve useful error information, and handle failures where the program can recover or add context.
- Let straightforward code explain itself. Comment only when code cannot communicate the reason for a business rule, safety invariant, external constraint, compatibility workaround, deliberate tradeoff, or required ordering.
- When the change can alter observable behavior, apply
test-masterto select and run the protecting tests. If it has no test subject, state that instead of creating artificial assertions. - Run the smallest supported lint, format, type, build, render, and user-requested checks that cover the change. Use a project-wide command only when it is the available entrypoint or the change is cross-cutting. Separate unrelated baseline failures from regressions.
Show full SKILL.md (345 more words)Show less
Run Fresh Reviews
Run no more than two review waves. One wave launches the complete reviewer set selected for the implementation in parallel against the same revision. Use that same complete set in both waves. Include reviewers required by other active skills in these same waves instead of starting a separate wave sequence.
After every completed implementation, include a fresh code-reviewer without a model override.
Its review scope matches the change: a localized edit gets focused connected context; a broad
change gets all affected contracts and architecture.
Also launch in parallel when applicable:
security-auditorwhen a security boundary changed or the user requested a security review.
test-master owns the additional test-reviewer invocation when meaningful test code changed.
Include that reviewer in every wave for this implementation.
Give each reviewer the user request or user-spec, applicable repository instructions, validation evidence, every touched source file with relevant callers and dependencies, deleted or renamed file evidence, and generator/diff/validation evidence for mechanical artifacts.
Review findings are diagnoses, not a work queue. Check the evidence and exact correction. Apply
only an authorized local correction to agreed normal behavior. If the scenario is rare or
unagreed, or the correction adds behavior, state, entities, contracts, dependencies, 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. Reject unsupported findings with
evidence and report unrelated findings without expanding the task.
After wave 1, correct only authorized local defects in agreed normal behavior that do not require a user decision, then rerun affected direct checks. If those corrections changed the reviewed result, launch wave 2 with the same complete reviewer set. Stop after a clean wave or when no authorized correction changes the result.
After wave 2, do not launch another reviewer automatically. Correct remaining local defects only in agreed normal behavior and only when they do not require a user decision, rerun the applicable direct checks, and hand off any remaining findings or required decisions about scope, behavior, approach, or material complexity. Briefly explain rejected rare findings in the handoff.
© 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
Just SKILL.md in skills/code-writing of pavel-molyanov/molyanov-ai-dev.
Open the folder on GitHubat commit b5db526
Compare with similar skills
Code 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 |
|---|---|---|---|---|---|---|
| Code Writing this skillpavel-molyanov/molyanov-ai-dev | 297 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design System Rules Generatorwarpdotdev/warp | 65k | 3 repos | ~4.6k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Code Connect Componentswarpdotdev/warp | 65k | 2 repos | ~4.2k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
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.
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
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.
Layout Writing
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.
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.
Related
Works with
Categories
Questions about Code Writing
What does Code Writing do?
Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews. Code Writing is an agent skill from pavel-molyanov/molyanov-ai-dev. Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews.
When should I use Code Writing?
Code Writing fits situations like: code needs to be written — from a short ad-hoc edit to a full user-spec; implement Do NOT use for pure layout from Figma; an existing visual style (сверстай; responsive) — use layout-writing instead.
How do I install Code Writing in Claude Code?
Run `npx skills add pavel-molyanov/molyanov-ai-dev --skill code-writing -a claude-code`. Or copy the skill folder (skills/code-writing in pavel-molyanov/molyanov-ai-dev) into .claude/skills/code-writing in your project. Claude Code loads it when a task matches its description.
How do I install Code Writing in Codex?
Run `npx skills add pavel-molyanov/molyanov-ai-dev --skill code-writing -a codex`. Or copy the skill folder (skills/code-writing in pavel-molyanov/molyanov-ai-dev) into .agents/skills/code-writing in your project. Codex loads it when a task matches its description.
Can I use Code 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 code-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/code-writing, .gemini/skills/code-writing, .github/skills/code-writing and .opencode/skills/code-writing in your project.
What does Code Writing need to run?
SKILL.md names no scripts, command-line tools or credentials: Code Writing is instructions for the agent only.
Does Code 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 Code 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. Review the folder before installing.
What licence does Code Writing use?
Code 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 Code Writing use?
About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Code Writing?
Skills that share tags, products or a category with Code Writing: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Design System Rules Generator (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 Code 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.