Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add bovinphang/frontend-craft --skill fec-implement-from-designgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote 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.
[](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-implement-from-design)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-implement-from-design"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-implement-from-design.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00061 | $0.01644 |
| Opus 5 | $0.00030 | $0.00822 |
| Sonnet 5 | $0.00012 | $0.00329 |
| Haiku 4.5 | $0.00006 | $0.00164 |
Grade A, and why
fec-implement-from-design 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
按设计稿实现
用途
基于设计工具（Figma、Sketch、MasterGo、Pixso、墨刀、摹客）的设计上下文，高保真实现页面或组件，强调组件复用、设计 Token 映射、可访问性和面向生产的前端实现。
支持的设计工具
| 工具 | MCP 集成 | 获取设计数据方式 |
|---|---|---|
| Figma | figma / figma-desktop |
API 获取设计结构、变量定义 |
| Sketch | sketch |
MCP 获取设计选区截图 |
| MasterGo | mastergo |
API 获取 DSL 结构数据 |
| Pixso | pixso |
本地 MCP 获取帧数据和代码 |
| 墨刀 | modao |
MCP 获取原型数据、生成设计描述 |
| 摹客 | 无 MCP | 通过用户提供的截图、标注或导出的 CSS 获取 |
目标
- 尽量高还原地实现设计稿
- 在创建新组件前优先复用现有项目组件
- 尽可能把设计变量映射到现有 Token
- 保持实现结果可维护、类型明确、可测试且具备可访问性
- 避免引入重复的基础组件或并行设计系统
流程
1. 识别设计来源
按优先级选择设计数据获取方式：
figma— Figma API 集成figma-desktop— Figma 桌面端集成mastergo— MasterGo DSL 数据pixso— Pixso 本地 MCPmodao— 墨刀原型数据sketch— Sketch 选区截图- 如以上 MCP 均不可用，请求用户提供设计截图或标注（适用于摹客等无 MCP 工具）
- 如果没有权威设计稿，但任务明确要求视觉型网站、品牌页、作品集或高审美重设计，可把用户提供或本地生成的分区级参考图作为临时视觉事实来源；这种来源必须先分析后实现，并在计划中标明不是权威设计系统。
2. 读取设计上下文
通过 MCP 或用户提供的设计数据读取设计上下文：
- 检查布局结构
- 检查间距、字体、颜色、变量、状态、图标和组件层级
- 如果 MCP 提供了资源文件或 SVG / 图片源，直接使用
- 如果 MCP 已提供真实资源，不要自行造占位资源
- 如果用户提供截图而非 MCP 数据，从截图中推断布局、颜色、字体等视觉信息
- 如果使用图像/截图参考，先提取区块结构、视觉层级、主色和功能色、字体气质、间距节奏、媒体位置、交互状态暗示和响应式风险，再写代码。
- 对多区块页面优先使用清晰的分区级参考图或局部细节图；不要从压缩长图里猜测按钮、字号、间距和组件状态。
- 视觉参考中的不可读文字、假截图、不可检查素材或冲突状态不能直接照搬；需要转译成项目真实内容、真实状态或明确占位说明。
3. 搜索可复用组件
在创建新组件前先搜索代码库中的可复用组件，重点检查：
- 按钮（Button）
- 输入框 / 选择器 / 复选框 / 单选框 / 开关（Input / Select / Checkbox / Radio / Switch）
- 模态框 / 抽屉 / 对话框（Modal / Drawer / Dialog）
- 表格 / 列表 / 卡片（Table / List / Card）
- 标签页 / 面包屑 / 分页（Tabs / Breadcrumb / Pagination）
- 页面容器 / 区块容器 / 空状态 / Loading 状态
4. 产出实现计划
在改文件前先产出一份简短实现计划，计划必须包含：
- 需要改动的文件列表
- 组件拆分方案
- 状态 / 数据流
- 响应式行为
- 复用还是新建的决策
- 设计缺口或歧义点
- 图像/截图来源的可靠性，以及哪些视觉细节会被项目 token、组件约定或可访问性要求覆盖
5. 按框架实现
按仓库当前使用的前端框架进行实现：
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 8d ago First seen · 130 lines · 61 tokens per session scan A 6c245920b6ec
fec-implement-from-design is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 7d ago), licensed MIT. It adds 61 tokens to every session and 1,644 once invoked, about $0.0003 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-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
aesthetic-instrument
A committed aesthetic in the sense of skills/committed-aesthetic/SKILL.md: every rule below is checkable, and every value was read out of the source — packages/board/public/index.html and greatcto-site/styles.css — rather than chosen to write this document.
committed-aesthetic
How to write — and how to use — a skill that IS one aesthetic rather than a catalogue of them. A catalogue lets an agent pick, and it picks the modal option; a committed aesthetic makes it execute one thing precisely, against rules you can check. Use when a design keeps coming out competent and forgettable, when…
review-all
Multi-agent code review for diffs (project-agnostic). Covers standards, bugs, security, DRY, smells, perf, tests, API contracts, a11y/i18n. Verifies each finding to eliminate false positives. Use for /review-all, pre-PR/pre-commit review, or auditing uncommitted/staged changes.
peekaboo
Provides runtime observation and interaction for native macOS interfaces through accessibility state and screenshots. Use when the task depends on visible or interactive state in a running SwiftUI/AppKit app: what is rendered, focused, selected, enabled, reachable through menus/windows/dialogs, or experienced across a…
elderly-ui-audit
A code review for making websites and mobile apps easier for older people to use, based on Chinese government accessibility guidelines.