bladeofgod

Plan Figma — Design skill for Claude Code

Design community

将一个或多个 Figma 设计拆成符合架构的任务卡，不做实现.

How to install Plan Figma

Installs to ~/.claude/commands/bladeofgod-flutter-ai-harness-plan-figma.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/bladeofgod/flutter-ai-harness/HEAD/.claude/commands/plan-figma.md -o ~/.claude/commands/bladeofgod-flutter-ai-harness-plan-figma.md

Restart Claude Code, or start a new session, for it to be picked up.

What Plan Figma does

description: 将一个或多个 Figma 设计拆成符合架构的任务卡，不做实现 argument-hint: "... [feature=feature_name] [额外约束]"

把 Figma 设计转换为结构化规划输入，并按仓库任务卡约定形成可执行计划。不实现代码，也不修改设计稿。本命令不是 Figma 任务卡的唯一生产方式。

设计输入标准化

确认至少提供一个 Figma URL 或 node-id。
加载 figma-to-flutter 和 flutter-layouts Skill。
读取 CLAUDE.md、docs/architecture.md、设计 Token、现有组件、Route、API 和附近测试。
使用项目 .mcp.json 中的 figma 本地 MCP 读取每个节点；连接不可用时报告 Figma Desktop、Dev Mode 或 Server 前置条件并停止。
提取层级、Auto Layout、尺寸、间距、字体、颜色、组件 Variant、交

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Plannotator — Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integrat 3.3k ★