agentmods.dev

pipeline

pipeline is a command for Claude Code from sodam-ai/SoDam-Design-Kit. It costs 31 tokens per session (2,390 once invoked), scanned A, original, Apache-2.0.

A design-to-code workflow that reads screens from Figma, connects them to reusable interface components, creates shadcn/ui code, and checks the result.

In plain words
What is it for?
Use it to turn a Figma node into a shadcn/ui component, reuse components already mapped in a project, create missing components, and run validation checks.
Why use it?
It reduces the manual work of turning a Figma design into code and helps catch incomplete or incorrect results before the work is marked done.

Command for Claude Code

Written for Claude Code: ${CLAUDE_PLUGIN_ROOT} variable. Also seen: mentions Claude Code.

Runs only inside its plugin — its command needs a path that Claude Code sets for a plugin’s own hooks and for nothing else. Install the plugin, not this.

Part of the sodam-design-kit plugin — 1 skill, 5 commands, 1 hook shipped together

not rated 9repo +3 yesterday A scan 31 tokens original Apache-2.0

Good fit Use it to turn a Figma node into a shadcn/ui component, reuse components already mapped in a project, create missing components, and run validation checks.

Compare 6 commands from other repositories ↓
View source ↗ sodam-ai/SoDam-Design-Kit
Install

Getting it into your agent

This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.

Claude Code
/plugin marketplace add sodam-ai/SoDam-Design-Kit
Claude Code
/plugin install sodam-design-kit

Made for: Claude Code.

Or install sodam-design-kit, the plugin that ships this one along with the rest of its 1 skill, 5 commands, 1 hook.

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 pipeline

README.md
[![agentmods](https://agentmods.dev/badge/commands/sodam-ai/sodam-design-kit/pipeline/github.svg)](https://agentmods.dev/commands/sodam-ai/sodam-design-kit/pipeline)
Your own site
<a href="https://agentmods.dev/commands/sodam-ai/sodam-design-kit/pipeline"><img src="https://agentmods.dev/badge/commands/sodam-ai/sodam-design-kit/pipeline/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for pipeline

Your own site · 80×15
<a href="https://agentmods.dev/commands/sodam-ai/sodam-design-kit/pipeline"><img src="https://agentmods.dev/badge/commands/sodam-ai/sodam-design-kit/pipeline.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 31 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,390 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00031 $0.02390
Opus 5 $0.00015 $0.01195
Sonnet 5 $0.00006 $0.00478
Haiku 4.5 $0.00003 $0.00239

Measured 11d ago against content hash 3f31e79a163c, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

pipeline 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 11d ago.

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.

commands/pipeline.md · 42 lines

How it starts

The opening of the file, as written. The whole thing — 42 lines — stays where its author put it; the contents beside it link to each section on GitHub.

/sodam-design-kit:pipeline

재사용(매핑) 경로 — 2026-07-20 실측 완료: component-map.json에 이미 매핑된 컴포넌트를 재사용하는 경로는 실제 Figma 데이터로 왕복 검증 완료(PASS, 판정서 기록됨). 신규 컴포넌트 생성(매핑 없는 노드) 경로도 2026-07-27 구현 완료 — 합성 컴포넌트로 등록→프리뷰→검증 전체 왕복 PASS 실측 확인(아래 절차 참조).

목적

Figma 노드 1개를 컴포넌트 단위로 shadcn/ui 코드에 연결하고, 검증 게이트를 통과해야만 완료로 표시합니다.

절차 — 재사용 경로 (에이전트가 수행)

Figma MCP 도구(get_metadata/get_design_context)는 이 킷의 Node 스크립트가 아니라 에이전트(Claude Code)만 호출 가능합니다. 그래서 이 명령은 스크립트 1개가 아니라 에이전트가 아래 순서로 도구를 조합해 실행합니다.

  1. [에이전트] 먼저 component-map.json부터 확인 (2026-08-04 실측 발견·수정 — 결정 기록): 요청받은 Figma 노드 ID(사용자가 Figma 링크 없이 노드 ID만 줬어도 됨)가 <project>/.design-kit/component-map.json의 figmaNodeId로 이미 등록돼 있고 codePath도 채워져 있으면, 이게 바로 "재사용 경로"다 — 1·2번(Figma 읽기·매핑 기록)을 완전히 건너뛰고 바로 3번(코드 생성)으로 간다. Figma 링크를 요구하거나 get_metadata/get_design_context를 호출하지 마라. (실측 발견: 이 0번 단계가 없으면 에이전트가 매핑이 있어도 1번을 문자 그대로 따라가 Figma 파일 URL을 요구하며 멈춘다 — "재사용 경로 = Figma 호출 0회"라는 이 문서·04_PROJECT_SPEC.md ALWAYS DO "캐시 우선" 원칙과 정면으로 어긋나는 실제 사고가 실사용 새 세션에서 재현됐다. 이 0단계를 다시 지우지 말 것.)
  2. [에이전트] (0번에서 매핑을 못 찾았을 때만) Figma 읽기 — 반드시 페이지/노드 직접 링크로: 사용자가 준 링크(node-id 포함)로 get_metadata(구조 확인)·get_design_context(코드+토큰) 호출. 파일 전체 열거(nodeId 생략) 금지 — 무료 Starter 플랜 3페이지 제한에 걸림(실측 확인, .PRD/04_PROJECT_SPEC.md 연결/동기화 스펙 5). 링크가 없는데 매핑도 없다면, 진행하지 말고 사용자에게 Figma 링크를 요청한다.
  3. [에이전트] (1번을 거쳤을 때만) component-map.json에 매핑 기록: 읽은 노드의 figmaNodeId·figmaName을 기존 항목에 채우거나(재사용) 신규 항목 추가.
  4. [스크립트] 코드 생성: node "${CLAUDE_PLUGIN_ROOT}/scripts/pipeline-codegen.mjs" --project <경로> --figmaNodeId <ID> — component-map에서 매핑된 컴포넌트를 찾아 /design-kit-preview/{컴포넌트} 라우트에 연결(preview-route.mjs 재사용). Figma를 호출하지 않음 — 무료 6회 예산 보호.
  5. [스크립트] 검증 + 판정서 기록 (한 명령): node "${CLAUDE_PLUGIN_ROOT}/scripts/verify-runner.mjs" --project <경로> --route /design-kit-preview/{컴포넌트} --screenshotDir <경로> --target "<대상 설명, 예: Figma node 421:3524 (Button) -> src/components/ui/button.tsx>" --generatedFiles <생성/수정 파일, 콤마 구분> — dev server 자동 기동 → Playwright 렌더 → axe-core → 3뷰포트 → .design-kit/runs/·reports/에 판정서까지 자동 기록(--target을 주면 발동, 결과 JSON에 runId·reportPath 포함). 접착 스크립트를 직접 짜지 말 것 — 이 옵션이 추가되기 전엔 report-writer.mjs에 CLI가 없어 에이전트가 매번 임시 스크립트를 작성해야 했던 실측 결함이 있었음(2026-07-20 수정).
  6. FAIL이면 3번부터 재시도 (최대 maxAutoRetry회, 2연속 FAIL만 확정) — 재시도도 3번(코드 생성)부터 시작하고 1번(Figma 읽기)로 돌아가지 않음. component-map에 이미 매핑이 있으므로 재시도에 Figma 호출이 필요 없음(04 ALWAYS DO 캐시 우선 원칙을 구조로 강제). [에이전트] 실패 사유 주입(2026-07-27 신설): 판정서(reportPath)의 "위반 상세" 섹션 또는 verify-runner가 돌려준 JSON의 axeViolations(규칙 id·설명·대상 선택자)를 읽어 다음 코드 생성 시도에 그대로 반영한다(예: "img.hero에 alt 속성 추가"). 이 상세가 없던 시절엔 "critical 1건"만 보고 무엇을 고쳐야 할지 알 수 없었다 — 이제는 실제 근거가 있으니 같은 실패를 반복하지 않도록 구체적으로 고칠 것.
  7. PASS 판정서 없이 "완료" 보고 금지 — hooks/verify-gate.mjs가 기계적으로 차단.

Read the full file on GitHub · 42 lines

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. 11d ago First seen · 42 lines · 31 tokens per session scan A 3f31e79a163c

Subscribe to this mod's changes

pipeline is a command published in the GitHub repository sodam-ai/SoDam-Design-Kit (9 stars, last pushed yesterday), licensed Apache-2.0. It adds 31 tokens to every session and 2,390 once invoked, about $0.0002 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-31.

Claude CodeDesign and UXFrontendaccessibilityclaude-code-pluginfigmafigma-to-codenextjs
Related

Other commands, from other repositories

design-template

Generate a production-ready web page from a curated template category. Pick a category (landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, or onboarding) and get a fully-built, customized HTML/CSS template — brand colors, copy, and responsive layout included.

Adityaraj0421/naksha-studio · 64 tokens

accessibility-specialist

Use when a screen might fail WCAG. Unlabeled inputs, no keyboard path, contrast below AA, missing landmarks, broken heading order, screen reader gaps, or a request for an a11y review or EU Accessibility Act check.

imsaif/design-with-claude · 48 tokens

color-specialist

Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.

imsaif/design-with-claude · 35 tokens

conversational-ui-designer

Use when designing a chat or assistant interface. Message layout, bot personality, streaming and typing states, rich message cards, error recovery, or voice input.

imsaif/design-with-claude · 31 tokens

form-designer

Use when a form is losing people. Too many fields, validation that interrupts typing, unclear required fields, a multi-step flow with no sense of progress, or inputs with no labels.

imsaif/design-with-claude · 37 tokens

healthcare-ux-specialist

Use when designing clinical or patient-facing interfaces. Clinical workflows, displaying sensitive patient data, HIPAA considerations in the UI, and medical terminology patients do not speak.

imsaif/design-with-claude · 32 tokens