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.5 | $0.00049 | $0.01136 |
| Sonnet 5.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 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 — 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.
- 1mo 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 (22 stars, last pushed 1mo ago), licensed MIT. It adds 123 tokens to every session and 2,841 once invoked, about $0.0005 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-09-03.
Other skills, from other repositories
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
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-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.