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-ui-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-ui-design)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-ui-design"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-ui-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-ui-design"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-ui-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.00123 | $0.02841 |
| Opus 5 | $0.00062 | $0.01421 |
| Sonnet 5 | $0.00025 | $0.00568 |
| Haiku 4.5 | $0.00012 | $0.00284 |
Grade A, and why
fec-ui-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 6d 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 — 109 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI 设计
适用于需要把前端界面推进到“符合产品语境、可扫描、可信赖、有辨识度，并且细节稳定”的 UI 任务。需要系统化设计建议时，加载 design-intelligence.md；需要长期沉淀设计系统时，加载 master-page-overrides.md；上线前做 UI/UX QA 时，加载 pre-delivery-checklist.md。
可执行设计系统生成器位于 design-system.mjs，其原创知识包包括 product-rules.json、style-archetypes.json、ux-quality-rules.json 和 stack-ui-rules.json。
用途
为页面、组件、仪表盘和工具界面建立设计方向，并完成可落地的视觉与交互 polish。
流程
-
明确界面的工作
- 先说清它帮助用户完成什么任务，而不是先选颜色或布局。
- 判断这是日常高频工具、营销展示、内容阅读、可视化探索、游戏，还是配置/管理后台。
- 如果已有 Figma、Sketch、MasterGo、Pixso、墨刀、摹客或截图是事实来源，优先还原设计上下文，不自行发明方向。
-
读取设计语境
- 在决定布局、色彩、字体或动效前，先写出一行设计读取：页面类型、目标受众、主要任务、品牌约束和可信赖感来源。
- 判断当前界面是视觉型网站、作品/品牌展示、产品营销、工具工作区、数据密集界面、移动原生流程，还是设计稿还原任务。
- 如果 brief 有明显分歧，例如“极简但强烈实验性”，只问一个会改变方向的问题；否则基于上下文做出明确选择。
- 受监管、公共服务、医疗、金融、儿童或强可访问性场景优先稳定、清晰和可恢复，不为审美冒险牺牲可用性。
-
定义审美主张
- 写出目标用户、使用场景、可信赖感来源和一个可被记住的视觉锚点。
- 视觉锚点可以来自信息结构、真实媒体、数据形态、行业材质、字体性格、交互节奏或空间组织，而不是空泛装饰。
- 表现力必须服务业务语境：工具型界面重效率和稳定，展示型页面重主体识别和记忆点。
- 为页面类型设定设计拨盘：视觉张力、动效强度、信息密度、媒体真实性和内容说服力；这些拨盘必须随任务变化，而不是沿用同一套模板。
- 工具型和数据型界面默认提高信息密度、降低装饰动效；营销、作品集和品牌页可以提高视觉张力，但仍要保证首屏任务、主体和 CTA 可见。
- 设计拨盘用于约束实现选择：高视觉张力不等于混乱排版，高动效强度不等于滚动劫持，高媒体真实性不等于堆 stock 氛围图。
-
生成或读取设计系统
- 若项目还没有设计系统，可运行
node skills/fec-ui-design/scripts/design-system.mjs "<product audience tone>" --project "<name>"生成建议。 - 若需要跨会话复用，使用
--persist生成design-system/<project>/MASTER.md；页面差异用--page <page>写入pages/<page>.md。 - 构建具体页面时先读页面 override，再读 Master；页面规则只覆盖差异，不复制全量设计系统。
- 若项目还没有设计系统，可运行
-
建立首屏与视觉层级
- 工具型界面：首屏直接呈现核心工作区、列表、表格、画布或编辑器。
- 落地页：H1 使用品牌、产品、地点、人名或明确品类，价值说明放在辅助文案。
- 产品/对象页：首屏必须可见真实产品、对象、状态或可检查媒体。
- 首屏应留下一个明确记忆点，但不能遮挡核心任务、导航和状态反馈。
- 营销和产品页需要先写清受众、痛点、承诺、证据和行动入口；文案结构服务转化，但不使用夸张、空泛或不可验证的声明。
- 视觉型页面的首屏不能只是文字、渐变和装饰物；需要真实产品、人物、空间、品牌应用、数据状态或可检查的生成资产承担主体信息。
- 导航在桌面端应保持单行且高度克制；CTA 文案保持短而清楚，桌面端不应换成多行按钮。
What ships with it
8 files 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.
- data/product-rules.json 6.5 KB
- data/stack-ui-rules.json 3.1 KB
- data/style-archetypes.json 8.1 KB
- data/ux-quality-rules.json 5.0 KB
- references/design-intelligence.md 5.3 KB
- references/master-page-overrides.md 1.2 KB
- references/pre-delivery-checklist.md 2.1 KB
- scripts/design-system.mjs 21 KB runs code
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.
- 6d ago First seen · 109 lines · 123 tokens per session scan A f0a55b39ff8f
fec-ui-design is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 8d ago), licensed MIT. It adds 123 tokens to every session and 2,841 once invoked, about $0.0006 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-09-03.
Other skills, from other repositories
design-lint
A repeatable checker for design problems in rendered HTML and CSS, standalone prototype pages, or live URLs. It compares them with a DESIGN-TOKENS.md file, a document defining approved colors, fonts, spacing, and other visual rules, and reports pass or fail results.
design-tokens
This skill should be used when a user wants to scaffold or refactor a design token system — e.g. "set up design tokens", "create a design system foundation", "extract these hardcoded colors into tokens", "add a type scale", "theming setup", or "dark mode tokens". It produces a single source of truth for color, type…
interaction-feedback
This skill should be used when the user wants clear visual feedback for async actions and state changes — triggers like "add loading and error states", "show a success message", "add a toast/notification", "inline form validation", "optimistic UI", "empty state for this list", "this button gives no feedback", or "add…
design-system
Use when establishing visual foundations for a new product, when defining design tokens, when building or auditing a component library, before any UI work begins on a fresh codebase, or when the existing UI has drifted into hex codes and magic numbers.
gsap
A reference-guided workflow for building and reviewing web animations with GSAP, a JavaScript animation library. It covers animations in React, Next.js, Vue, and Svelte, including scroll-triggered effects.
interaction-patterns
Use when deciding how users interact with UI elements — expand vs navigate, modal vs bottom sheet, swipe gestures, tap targets, optimistic UI, loading patterns, or undo for destructive actions. Use before features get built so every screen inherits the same rules.