agentmods.dev

t-figma-impl

t-figma-impl is a skill for Claude Code, Codex from timzaak/web-dev-skills. It costs 29 tokens per session (807 once invoked), scanned A, original, Apache-2.0.

A workflow for rebuilding a complete Figma interface in an existing frontend file using prepared assets and measurable checks. Figma is a design tool, and the workflow compares the implementation with the design using screenshots and identified interface elements.

In plain words
What is it for?
Use it to reconstruct and code a full Figma screen, reuse an asset manifest, add measurable probes to interface elements, run visual acceptance checks, and refine the result against the design.
Why use it?
It gives the implementation a defined process for understanding layout, spacing, assets, responsive behavior, and visual differences. It also routes unclear project setup or mismatched design sessions for resolution before coding continues.

Skill for Claude CodeCodex

Installs and runs on its own, but its text points at files inside its plugin — anything it tells you to read at a ${CLAUDE_PLUGIN_ROOT} path is only there once the plugin is installed. Installing the plugin gets both.

Part of the t-tools plugin — 28 skills, 31 agents shipped together

not rated 69 changed today A scan 29 tokens original Apache-2.0
View the source file timzaak/web-dev-skills
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/timzaak/web-dev-skills/t-figma-impl
Any agent
npx skills add timzaak/web-dev-skills --skill t-figma-impl
Clone the repo
git clone --depth 1 https://github.com/timzaak/web-dev-skills

Made for: Claude Code, Codex.

Or install t-tools, the plugin that ships this one along with the rest of its 28 skills, 31 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for t-figma-impl

README.md
[![agentmods](https://agentmods.dev/badge/skills/timzaak/web-dev-skills/t-figma-impl.svg)](https://agentmods.dev/skills/timzaak/web-dev-skills/t-figma-impl)
Your own site
<a href="https://agentmods.dev/skills/timzaak/web-dev-skills/t-figma-impl"><img src="https://agentmods.dev/badge/skills/timzaak/web-dev-skills/t-figma-impl.svg" alt="Measured on agentmods" height="20"></a>
Per session 29 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 807 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00029 $0.00807
Opus 5 $0.00015 $0.00404
Sonnet 5 $0.00006 $0.00161
Haiku 4.5 $0.00003 $0.00081

Measured today against content hash ee57a7a5346f, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

t-figma-impl scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/t-figma-impl/SKILL.md · 47 lines

What it actually says

Figma 整页实现

运行时边界：${CLAUDE_PLUGIN_ROOT}/protocols/runtime-boundaries.md（判断产物写入位置或项目事实与插件默认冲突时读） 共享契约：${CLAUDE_PLUGIN_ROOT}/protocols/figma-workflow-contract.md（写 context/spec、判读 delta 分级或晋升长期规则前读） 二次重建：${CLAUDE_PLUGIN_ROOT}/guides/figma/reconstruction.md（写 spec revision 1 或修订 MCP 结构前读） 验收方法：${CLAUDE_PLUGIN_ROOT}/guides/figma/measurement.md（生成探针、委派 accept 或判读 delta 报告前读）

负责完整 UI 稿的结构重建、代码实现和有界验收；不重新承担素材下载和转换。

前置和上下文

校验 URL 与 target-file，通过 ${CLAUDE_PLUGIN_ROOT}/scripts/figma-session.py resolve 找 active session，并按共享契约的 Session Resolve 表执行。impl 只复用 fileKey/mainNodeId 与主稿 URL 一致且 assets 阶段已完成的 session；missing 或 mismatch 时停止并提示先运行 t-figma-assets 或回到匹配主稿，不得自行归档或创建 session。assets-manifest.json 不存在则停止；空数组合法。

读取项目约束、目标文件及邻近模块、现有 token/组件/动效/响应式模式、docs/figma-rules.md、session candidates 和 assets manifest，生成固定章节的 context.md。栈、dev server、Playwright 目录或资产引用方式无法确定时停止询问。

二次重建与实现

  1. 对照 source metadata、design context、baseline screenshot 和已有代码识别视觉块、stacking、裁切、绝对定位、合成素材及 viewport。
  2. 写可修正 spec.json revision 1；MCP 结构不准确的修正必须带 reason/evidence。每个可测语义元素生成唯一 data-figma probe。
  3. 按 subagent dispatch 契约注入并委派 figma-impl。agent 只引用 manifest，复用 context 的组件/token/动效，并执行目标栈验证。
  4. 启动或确认 context 声明的 dev server，注入并委派只读 figma-accept。有阻塞 delta 且未到 5 轮时，把结构化失败交回 impl；若视觉证据证明 spec 分组错误，先增加 revision 再修实现。
  5. 收敛后晋升符合契约的规则候选，合并改写 docs/figma-rules.md，最多 10 条；否则候选留在 session。

结束状态

  • 全部门禁通过：stage=accepted，报告 CONVERGED。
  • 达 5 轮：stage 保持 implemented，报告 EXHAUSTED。
  • 验证或必要探测失败：不进入 accept，不宣称完成。
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed ee57a7a5346f
  2. 5d ago First seen · 47 lines · 29 tokens per session scan A 6c1d9e76f9f6

Subscribe to this mod's changes

t-figma-impl is a skill published in the GitHub repository timzaak/web-dev-skills (69 stars, last pushed today), licensed Apache-2.0. It adds 29 tokens to every session and 807 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UXFrontendai-codingskills
Related

Other skills, from other repositories

chinese-git-workflow

国内 Git 平台配置参考——Gitee、Coding.net、极狐 GitLab、CNB 的 SSH/HTTPS/凭据/CI 接入差异与镜像同步配置。仅在用户显式 /chinese-git-workflow 时调用，不要根据上下文自动触发。.

jnMetaCode/superpowers-zh · 69 tokens

chinese-commit-conventions

中文 commit 与 changelog 配置参考——Conventional Commits 中文适配、commitlint/husky/commitizen 中文模板、conventional-changelog 中文配置。仅在用户显式 /chinese-commit-conventions 时调用，不要根据上下文自动触发。.

jnMetaCode/superpowers-zh · 65 tokens

chinese-documentation

中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用，不要根据上下文自动触发。.

jnMetaCode/superpowers-zh · 62 tokens

chinese-code-review

中文 review 沟通参考——话术模板、分级标注（必须修复/建议修改/仅供参考）、国内团队常见反模式应对。仅在用户显式 /chinese-code-review 时调用，不要根据上下文自动触发。.

jnMetaCode/superpowers-zh · 62 tokens

systematic-debugging

Skill "systematic-debugging" from jnMetaCode/superpowers-zh, covering 系统化调试, 概述, 铁律, 何时使用 and 四个阶段.

jnMetaCode/superpowers-zh · 24 tokens

dispatching-parallel-agents

当面对 2 个以上可以独立进行、无共享状态或顺序依赖的任务时使用.

jnMetaCode/superpowers-zh · 30 tokens