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 qiuxinyuan321/fumeng --skill ai-image-frontend-uigit clone --depth 1 https://github.com/qiuxinyuan321/fumengWrote 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/qiuxinyuan321/fumeng/ai-image-frontend-ui)<a href="https://agentmods.dev/skills/qiuxinyuan321/fumeng/ai-image-frontend-ui"><img src="https://agentmods.dev/badge/skills/qiuxinyuan321/fumeng/ai-image-frontend-ui/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/qiuxinyuan321/fumeng/ai-image-frontend-ui"><img src="https://agentmods.dev/badge/skills/qiuxinyuan321/fumeng/ai-image-frontend-ui.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.00007 | $0.04331 |
| Opus 5 | $0.00003 | $0.02166 |
| Sonnet 5 | $0.00001 | $0.00866 |
| Haiku 4.5 | $0.00001 | $0.00433 |
Grade A, and why
ai-image-frontend-ui 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 11d 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 — 255 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AI 前端 UI 生图 · INTP Way
⭐ 北极星口号： "The bar is stunning, not functional. Every pixel is intentional, every interaction is deliberate." 质量对标 Dribbble / Behance showcase。
🎯 我们的独特定位（跨越 ConardLi）：
- 单模态工具（ConardLi）：LLM 生 HTML → 人粗略验证 → 完事
- 跨模态闭环（我们）：image-2 视觉意图 → MCP 真素材 → LLM 代码 → chrome-devtools 渲染 → 跨模态 diff → 收敛
详见中枢文件
intp-triforce.md。
🧠 核心认知 1：画 UI 和画真人写真是两种完全相反的 prompt 风格。人像要"摄影器材 / 体积光 / 胶片感"，UI 要"layout / typography / exact copy / state"。混用必翻车。
🧠 核心认知 2（Anthropic 官方）：模型默认收敛到"AI slop"—— Inter 字体 + 紫粉渐变 + 3 列 feature grid。必须显式叫板默认选择。详见
anti-slop-rules.md。🧠 核心认知 3（ConardLi）：Placeholder > Fake。模型会自动编造 logo / stats / testimonials，必须用 placeholder 明确标记。详见
placeholder-philosophy.md。🧠 核心认知 4（INTP 独创）：Placeholder 是 MCP 填真的接口。能用 MCP 拿真素材的绝不用占位：
[Logo]→mcp4_logo_search✅[Component]→mcp10_view_items_in_registries✅[Latest API]→mcp3_query-docs✅[Rendered result]→mcp0_take_screenshot✅详见
mcp-toolkit.md。
何时使用本 skill
| 场景 | 适用本 skill？ |
|---|---|
| 画 SaaS dashboard 截图 | ✅ |
| 画移动 app 界面 mockup | ✅ |
| 画 landing page / marketing page | ✅ |
| 画设计系统组件展示图 | ✅ |
| 画海报（含文字排版） | ✅ |
| 画终端/IDE 风格截图 | ✅ |
| 画游戏 HUD | ✅ |
| 画真人写真 / 明星撞脸 | ❌ 用 ai-image-bypass skill |
| 画插画 / 动漫 / 3D render | ❌ gpt-image-2 擅长但不在本 skill 范围 |
模型选型（UI 场景）
| 需求 | 推荐模型 | 质量档 |
|---|---|---|
| 文字精确渲染（UI 必需） | gpt-image-2 ⭐ | high |
| 快速预览 | gpt-image-2 | low 或 medium |
| 艺术海报 / 概念图 | gpt-image-2 | high |
| 真人背景 + UI 叠加 | gpt-image-2 (image edit) | high |
| 不推荐用 Grok | grok-imagine-image | — |
为什么 UI 必选 gpt-image-2：
- OpenAI 官方强调 gpt-image-2 是 业界文字渲染第一（强过 Midjourney/SD/Flux）
- 有 4K 级高分辨率，可以塞得下桌面截屏
- 精确几何 / 网格 / 图标还原能力强
- Grok-imagine-image 画 UI 是灾难（线条扭曲、文字乱码）
核心文件导读
分层架构（从哲学 → 方法论 → 场景应用）：
🌟 Ⅰ 哲学层（先读这里奠定心智）
intp-triforce.md⭐⭐⭐ — 中枢文件：INTP Way 三位一体哲学 + 3 种能力配比模式 + 9 步闭环 + ConardLi 对比表anti-slop-rules.md⭐ — Anthropic + ConardLi 双重反 AI slop 规则（含终极反 slop 魔咒可直接拷贝）placeholder-philosophy.md— Placeholder > Fake 完整框架（6 种场景 + 可拷贝公约）
What ships with it
21 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.
- 5-slot-template.md 7.3 KB
- aesthetic-families.md 18 KB
- anti-slop-rules.md 12 KB
- claude-design-workflow.md 13 KB
- design-tokens.md 18 KB
- dimensions-and-pricing.md 4.9 KB
- intp-triforce.md 16 KB
- mcp-toolkit.md 14 KB
- placeholder-philosophy.md 8.1 KB
- playbooks/mode-a-explore.md 9.1 KB
- playbooks/mode-b-ship.md 9.3 KB
- playbooks/mode-c-audit.md 9.3 KB
- prompt-fundamentals.md 12 KB
- templates/design-system.txt 4.6 KB
- templates/ide-terminal.txt 6.2 KB
- templates/landing-page.txt 4.6 KB
- templates/marketing-poster.txt 5.0 KB
- templates/mobile-app-screen.txt 5.0 KB
- templates/saas-dashboard.txt 3.7 KB
- troubleshooting.md 7.2 KB
- visual-to-code-loop.md 12 KB
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.
- 11d ago First seen · 255 lines · 0 tokens per session scan A 3cf5218b9f6d
ai-image-frontend-ui is a skill published in the GitHub repository qiuxinyuan321/fumeng (2 stars, last pushed 4mo ago), licensed MIT. It adds 7 tokens to every session and 4,331 once invoked, about $0.0000 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-31.
Other skills, from other repositories
web-design
A web design workflow for turning a brief, reference website, screenshot, or keywords into a design specification and then web code. It covers visual style, page structure, interaction, responsive layouts, and motion.
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
fmcp-token-sync-orchestrator
Figma design token'larını kod dosyalarıyla (CSS/Tailwind/Swift/Compose) platform-agnostic senkronize eder. Diff preview + onay + write akışı zorunlu. Her platformda çalışır. Condensed-first: Essentials bölümü %80 case'i kapsar, Advanced sadece edge case'lerde.
pencilplaybook
PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.
layout-discipline
A set of rules for keeping AI-generated web pages visually consistent, including their text sizes, spacing, alignment, cards, and colors.