Frontend UI Standards
MaxHan7/frontend-ui-standards-skill
A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.
适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。
Install Figma To Flutter
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutter --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/figma-to-flutter .claude/skills/figma-to-flutter && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .claude/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutterType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutter --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/figma-to-flutter .agents/skills/figma-to-flutter && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .agents/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutter --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/figma-to-flutter .cursor/skills/figma-to-flutter && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .cursor/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/bladeofgod/flutter-ai-harness.git --path .claude/skills/figma-to-flutter--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutter --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/figma-to-flutter .gemini/skills/figma-to-flutter && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .gemini/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutterInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/figma-to-flutter .github/skills/figma-to-flutter && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .github/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install bladeofgod/flutter-ai-harness figma-to-flutter --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bladeofgod/flutter-ai-harness.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/figma-to-flutter .opencode/skills/figma-to-flutter && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-flutter" agent skill from https://github.com/bladeofgod/flutter-ai-harness/tree/main/.claude/skills/figma-to-flutter into .opencode/skills/figma-to-flutter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-flutter", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
figma-to-flutter- GitHub stars
- 116
- Token cost
- ~270 tokens
- SKILL.md length
- 66 words
- Files
- 1
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- MIT
At a glance
适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。
- Works in 4 steps: 使用项目 figma 本地 MCP… → 记录层级、约束、Auto… → 新增视觉值前检查 app_ui 现有 Token 和组件。 → …
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers 编码前, 映射, Asset and 验证
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Figma To Flutter is an agent skill from bladeofgod/flutter-ai-harness. 适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。
Its SKILL.md is about 270 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Mobile, covering Cross-platform mobile apps, Design tokens and Design to code. It works with Figma and Flutter. The repository describes itself as: An AI-native engineering harness for production Flutter and hybrid mobile app repositories. The licence is MIT.
When your agent uses it
- Tasks that involve Cross-platform mobile apps
- Tasks that involve Design tokens
- Tasks that involve Design to code
Example prompts
- “/figma-to-flutter”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- 使用项目 figma 本地 MCP 读取准确节点及其父级上下文；不得用截图替代可获取的结构化设计上下文。
- 记录层级、约束、Auto Layout、间距、字体、Fill、Stroke、Radius、Shadow、Variant、交互和 Asset。
- 新增视觉值前检查 app_ui 现有 Token 和组件。
- 区分 Figma 事实、工程推断和待决产品行为。
What it can do on your machine
Read from SKILL.md and the folder at commit 9f1a1ca. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Figma To Flutter loads about 270 tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 66 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from bladeofgod/flutter-ai-harness at commit 9f1a1ca, republished under its MIT licence (© bladeofgod). 66 words, ~270 tokens.
Download SKILL.mdSave it as
.claude/skills/figma-to-flutter/SKILL.md (or your agent's skills folder).- name
- figma-to-flutter
- description
- 适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。
- paths
- app/packages/app_features/lib/**/pages/**, app/packages/app_features/lib/**/widgets/**, app/packages/app_ui/lib/**, docs/figma/**
Figma 到 Flutter
编码前
- 使用项目
figma本地 MCP 读取准确节点及其父级上下文；不得用截图替代可获取的结构化设计上下文。 - 记录层级、约束、Auto Layout、间距、字体、Fill、Stroke、Radius、Shadow、Variant、交互和 Asset。
- 新增视觉值前检查
app_ui现有 Token 和组件。 - 区分 Figma 事实、工程推断和待决产品行为。
映射
- 纵向/横向 Auto Layout → 带明确约束的
Column/Row。 - Fill Container → 只有父级有界时才使用
Expanded。 - Hug Contents → 子节点自然尺寸；长列表避免昂贵 Intrinsic Layout。
- Overlay → 有稳定边界的
Stack/Positioned。 - 重复 Variant → 一个带显式状态参数的代码组件。
- Figma Style/Variable → 现有代码 Token；只有可复用语义决策才新增 Token。
Asset
只有授权和导出 Scale 明确时才使用导出的 Raster/Vector。标准控件优先使用仓库 Icon Library，不得用无关 Icon 近似产品专属资源。
验证
在代表性移动端尺寸、文字缩放、加载/空/错误状态、键盘 Insets 和长内容下验证。可使用截图或视觉自动化，但行为测试与像素对比保持分离。
不得使用依赖单一 Viewport 的绝对定位，也不得根据屏幕宽度连续缩放字体。
© bladeofgod, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/figma-to-flutter of bladeofgod/flutter-ai-harness.
Open the folder on GitHubat commit 9f1a1ca
Compare with similar skills
Figma To Flutter next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma To Flutter this skillbladeofgod/flutter-ai-harness | 116 | — | ~270 | Automated safety check: Pass | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Jetpack Compose and Multiplatform Expertrcosteira79/android-skills | 153 | — | ~2.6k | Automated safety check: Pass | MIT | |
| UI PackageVeryGoodOpenSource/vgv-ai-flutter-plugin | 170 | — | ~2.2k | Automated safety check: Warn | MIT | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Jetpack Compose and Multiplatform Expert
rcosteira79/android-skills
Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.
UI Package
VeryGoodOpenSource/vgv-ai-flutter-plugin
Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Apple Design
vrcm-team/VRCM
Cross-platform UI/UX design reviewer grounded in Apple's Human Interface Guidelines (122 pages pulled from developer.apple.com, including 57 component pages) plus a design-craft lens for…
More from bladeofgod/flutter-ai-harness
All 11 skills in this repoGetx Patterns
bladeofgod/flutter-ai-harness
适用：代码使用 GetxController、GetxService、Rx、Obx、GetBuilder、Get.find、Bindings 或 Worker。不适用：GetX 路由、Dialog、Snackbar，或 Controller 内隐式查找 API。触发词：GetX、Obx、.obs、Rx、Get.find、GetxService、Worker、Binding。
UI Behavior Spec
bladeofgod/flutter-ai-harness
适用：根据已批准任务、产品规则、原型或 Figma 输入生成、审计或执行 Version 1 UI 行为 Spec。不适用：替代产品决策、实现 UI、操作系统原生界面或探索未定义流程。触发词：UI Spec、行为契约、plan-spec、spec-writer、spec-auditor、app-operator、Marionette 验收。
Flutter Debug Runtime
bladeofgod/flutter-ai-harness
适用：在 App Operator 或 Marionette 验证前，为 Android/iOS 构建、安装并启动 Flutter Debug App，获取 VM Service URI。不适用：Release 构建、签名配置、系统权限自动化、账号登录或测试数据准备。触发词：flutter run、Debug App、设备安装、VM Service URI、App Operator 前置环境。
Dart Coding Standards
bladeofgod/flutter-ai-harness
适用：编写或审查 Dart/Flutter 生产代码，尤其是 Controller、Service、Stream、异步任务和依赖注入。不适用：Kotlin、Swift 或生成代码规范。触发词：Dart、Controller、Service、StreamSubscription、unawaited、dynamic、DI、重构。
Go Router
bladeofgod/flutter-ai-harness
适用：新增 Route、Redirect、ShellRoute/StatefulShellRoute、DeepLink、路由参数、Observer 或 Route 级 Controller 装配。不适用：GetX 导航或没有明确兼容边界的任意 Navigator Stack。触发词：GoRouter、GoRoute、redirect、deep link、shell…
Kotlin Android Standards
bladeofgod/flutter-ai-harness
适用：编写或审查 Android Kotlin Native Module、Bridge Adapter、Host 接线、Manifest、Gradle 和原生 UI。不适用：Swift/iOS、Dart Client 或 Wire Contract 设计。触发词：Kotlin、Android、Gradle、Manifest、Coroutine、Flow、CameraX、Activity。
Related
Categories
Questions about Figma To Flutter
What does Figma To Flutter do?
适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。. Figma To Flutter is an agent skill from bladeofgod/flutter-ai-harness.
When should I use Figma To Flutter?
Figma To Flutter fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Design tokens; tasks that involve Design to code.
How do I install Figma To Flutter in Claude Code?
Run `npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a claude-code`. Or copy the skill folder (.claude/skills/figma-to-flutter in bladeofgod/flutter-ai-harness) into .claude/skills/figma-to-flutter in your project. Claude Code loads it when a task matches its description.
How do I install Figma To Flutter in Codex?
Run `npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a codex`. Or copy the skill folder (.claude/skills/figma-to-flutter in bladeofgod/flutter-ai-harness) into .agents/skills/figma-to-flutter in your project. Codex loads it when a task matches its description.
Can I use Figma To Flutter in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bladeofgod/flutter-ai-harness --skill figma-to-flutter -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-to-flutter, .gemini/skills/figma-to-flutter, .github/skills/figma-to-flutter and .opencode/skills/figma-to-flutter in your project.
What does Figma To Flutter need to run?
SKILL.md names no scripts, command-line tools or credentials: Figma To Flutter is instructions for the agent only.
Does Figma To Flutter access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma To Flutter safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Figma To Flutter use?
Figma To Flutter is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Figma To Flutter use?
About 270 tokens (SKILL.md is roughly 1.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Figma To Flutter?
Skills that share tags, products or a category with Figma To Flutter: Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars), Jetpack Compose and Multiplatform Expert (rcosteira79/android-skills, 153 stars), UI Package (VeryGoodOpenSource/vgv-ai-flutter-plugin, 170 stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma To Flutter?
bladeofgod (a GitHub user) maintains it in bladeofgod/flutter-ai-harness, which has 116 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on September 7, 2026.
Source: bladeofgod/flutter-ai-harness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.