skills.rest
lilpacy
lilpacyCOMMUNITY
Explore all skills by this author →
Website𝕏@0xpacyGitHub

implement-design

Translate Figma designs into production code with design tokens.

1|1|Updated Apr 18, 2018
Search Tags:#frontend#figma#mcp#design-system#pixel-perfect#design-to-code
One-click install
npx skills add https://github.com/lilpacy/dotfiles --skill implement-design-lilpacy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-design
Source: https://github.com/lilpacy/dotfiles/tree/main/claude/skills/implement-design
Command: npx skills add https://github.com/lilpacy/dotfiles --skill implement-design-lilpacy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

このスキルは、Figmaのデザインを生産可能なコードへ正確に翻訳し、デザインと実装の乖離を最小化します。Figma MCPサーバーとデザイントークンを活用して、1:1の視覚整合性を実現します。

Core Features & Use Cases

  • Figma-to-code パイプライン: デザイン仕様から再利用可能な UI コンポーネントへ変換し、1:1の視覚整合性を維持
  • MCP統合: Figma MCPサーバーと連携してデザインコンテキストとアセットを取得
  • Design-system整合: Figmaのトークンをプロジェクトのデザイントークンにマッピングし、既存コンポーネントを再利用
  • コード品質とアクセシビリティ: 型安全、テスト、 WCAG準拠を意識した実装

Quick Start

  • 提供された Figma URL を次の形式で入力する: https://figma.com/design/:fileKey/:fileName?node-id=1-2
  • MCP サーバーが接続されていることを確認する
  • 以下のワークフローを実行する:
    1. get_design_context(fileKey=":fileKey", nodeId="1-2")
    2. get_screenshot(fileKey=":fileKey", nodeId="1-2")
    3. プロジェクトのデザインシステムに準拠するよう設計をコード化
    4. スクリーンショットと実装を比較しビジュアル整合性を検証