本文へ移動
cccskills
無料GitHub で公開

design-handoff

Design handoff: Figma design to tech spec + ClickUp/Jira ticket + component code stub. Full cross-tool handoff workflow.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcaneスター 3(GitHub 3 + cccskills 0)
連携ツールJiraFigma

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Design Handoff Workflow

Figma → spec doc → ticket (ClickUp/Jira) → component code stub → links bidireccionales.

/design-handoff <figma_url> [--target clickup|jira] [--stack react|vue|flutter]

Paso a Paso

1. Inspeccionar Figma

Usar figma skill: GET node data → extraer dimensions, layout, states, interactions, tokens usados, assets a exportar.

2. Generar Spec

Documento estructurado con: purpose (1-2 oraciones), anatomy (pseudo-component tree), variants table (variant/description/props), states table (state/description/trigger — default/hover/active/loading/error/empty), design tokens (colors/typography/spacing/radius/shadow), measurements table (element/dimension), interactions (click/hover/keyboard), responsive breakpoints (desktop ≥1024, tablet 768-1023, mobile <768), accessibility (focus visible, ARIA, keyboard nav, contrast 4.5:1, text alternatives), assets to export (file + output dir).

3. Crear Ticket

ClickUp: createTask con list_id, name [Component] Implementar X, spec embebido en description, tags: frontend/component/design-ready.

Jira: POST issue con project key, summary, ADF description, Task type, labels.

4. Generar Code Stub

React+TS stub: component file (interface con props de variants/states, JSX con semantic HTML, CSS module imports) + CSS module file (tokens como CSS vars). Stub compilable — no pseudo-code.

Assets: export desde Figma al directorio del repo.

5. Linkear Todo

En ticket: link a spec doc + Figma + PR reference cuando exista.

Config

.claude/config/design-handoff.yml: default_target, default_list_id, stack, components_dir, assets_dir, designers mapping (figma_email → clickup_id/jira_email).

Reglas

  • Spec embebido en ticket — el dev no abre 3 tabs
  • Assets exportados al repo inmediatamente
  • Code stub compilable (npm run build funciona)
  • Link bidireccional: spec ↔ Figma ↔ ticket ↔ code

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

日本語の概要は準備中です。原文の説明を表示しています。

SebastianLuser/claude-code-arcane32026年10月27日 更新

SebastianLuser のスキルをすべて見る

このスキルの問題を報告する