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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.5 | $0.00024 | $0.00658 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (22 stars, last pushed 29d ago), licensed MIT. It adds 61 tokens to every session and 1,644 once invoked, about $0.0002 per session on Opus 5.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…
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.
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…
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.