Borrowing it
Nothing to install: this file belongs to 2514385224/middle-tool. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/2514385224/middle-tool/main/.agents/skills/frontend-design/SKILL.mdgit clone --depth 1 https://github.com/2514385224/middle-toolWrote 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/2514385224/middle-tool/frontend-design)<a href="https://agentmods.dev/skills/2514385224/middle-tool/frontend-design"><img src="https://agentmods.dev/badge/skills/2514385224/middle-tool/frontend-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/2514385224/middle-tool/frontend-design"><img src="https://agentmods.dev/badge/skills/2514385224/middle-tool/frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00060 | $0.00936 |
| Opus 5.5 | $0.00024 | $0.00374 |
| Sonnet 5.5 | $0.00012 | $0.00187 |
| Haiku 4.5 | $0.00006 | $0.00094 |
Grade A, and why
frontend-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.
What it actually says
MiddleTool Frontend Design
基于 Anthropic frontend-design，针对本项目的约束扩展。
产品定位
- 是什么：桌面端中间件连接管理器，导出 MCP 配置给 Codex
- 受众：开发者 / 运维，在本地 Electron 中高频操作
- 参考气质：VS Code 设置、Linear 内部工具、Raycast — 不是 SaaS 营销页
设计令牌（MiddleTool）
| 角色 | 值 | 说明 |
|---|---|---|
背景 --bg |
#111318 |
中性炭灰，避免蓝紫底 |
表面 --bg-surface |
#181a20 |
卡片/面板 |
边框 --border |
#2c3038 |
细线分隔 |
正文 --text |
#e8eaed |
高对比可读 |
次要 --text-muted |
#8b919e |
说明文字 |
强调 --accent |
#4a9eff |
工具蓝，不用 #6366f1 靛紫 |
| 圆角 | 4px / 6px |
小圆角，避免 12px+ 胶囊卡片 |
| 字体 UI | IBM Plex Sans | index.html 引入 |
| 字体数据 | IBM Plex Mono | 统计数字、代码、连接预览 |
禁止（AI slop）
- Emoji 作为导航主图标（🚀📋◉⬡ 等）
- 大面积紫色/靛蓝渐变、发光阴影、
box-shadow装饰 - 三列等大「统计卡片」+ 超大数字（32px+）作为首页主视觉
- Inter / 系统默认无个性堆叠 + 千篇一律的
border-radius: 12px卡片墙 - 空洞营销文案（「统一管理」「赋能」）；改用动词和操作结果
组件模式
侧边栏
- 左栏固定宽度 ~220px，品牌区一行标题 + 一行副标题（小字、muted）
- 导航项：文字为主，激活态用 左侧 2px accent 竖条，不用整块紫色底
- 图标：几何/CSS 标记或省略，不用 emoji
概览页
- 指标区：横向 metrics 条（label + value 一行），等宽分隔，mono 数字
- 快捷操作：列表行（标题、说明、右侧按钮），非卡片网格
- 信息密度适中，留白用于分组而非装饰
表单与列表
- 字段分组用细线标题，不用大色块
- 主按钮仅一个强调色；次要操作为 ghost/outline
- 表格/列表 hover 用
--bg-hover，无动画花哨
流程
- 先确认页面任务（用户要完成什么操作）
- 用上述 token，不引入新色除非有理由
- 改完后自检：是否像「AI 生成的深色 SaaS」？若是，减圆角、减渐变、减装饰
- 保持
prefers-reduced-motion、键盘 focus 可见
与全局 CSS 的关系
- 令牌定义在
src/index.css:root - 布局在
AppLayout.css，页面在各自*.css - 新页面复用
.page-header、.btn-primary、.card，不重复造变量
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 · 72 lines · 60 tokens per session scan A 6fae74bba681
frontend-design is a skill published in the GitHub repository 2514385224/middle-tool (4 stars, last pushed 9d ago), licensed MIT. It adds 60 tokens to every session and 936 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-09-12.
frontend-design compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| frontend-design2514385224/middle-tool | Skill | 4 | 9d ago | MIT | A | 60 | Claude Code, Codex |
| anti-slop-designsickn33/agentic-awesome-skills | Skill | 49k | yesterday | MIT | A | 34 | Claude Code |
| chakra-ui-builderchakra-ui/chakra-ui | Skill | 41k | yesterday | MIT | A | 214 | Claude Code, Codex |
| visual-ralphYeachan-Heo/oh-my-codex | Skill | 34k | 3d ago | MIT | A | 52 | Codex |
| open-design-setupcompozy/compozy | Skill | 2.8k | yesterday | MIT | A | 67 | Claude Code, Codex |
| frontend-visual-qadaymade/claude-code-skills | Skill | 1.5k | yesterday | MIT | A | 125 | Claude Code, Codex |
| prototype-webnexu-io/html-anything | Skill | 9.4k | 25d ago | Apache-2.0 | A | 24 | Claude Code, Codex |