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 yike-gunshi/forge-skills --skill forge-design-implgit clone --depth 1 https://github.com/yike-gunshi/forge-skillsWrote 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/yike-gunshi/forge-skills/forge-design-impl)<a href="https://agentmods.dev/skills/yike-gunshi/forge-skills/forge-design-impl"><img src="https://agentmods.dev/badge/skills/yike-gunshi/forge-skills/forge-design-impl/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/yike-gunshi/forge-skills/forge-design-impl"><img src="https://agentmods.dev/badge/skills/yike-gunshi/forge-skills/forge-design-impl.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.00078 | $0.02126 |
| Opus 5 | $0.00039 | $0.01063 |
| Sonnet 5 | $0.00016 | $0.00425 |
| Haiku 4.5 | $0.00008 | $0.00213 |
Grade A, and why
forge-design-impl 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 10d 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 — 202 lines — stays where its author put it; the contents beside it link to each section on GitHub.
文档落地路径：遵循 forge-doc-policy 规范。完整白名单 + frontmatter schema 见
~/.claude/skills/forge-doc-policy/doc-paths.md。 当前文档加载顺序：先读项目CLAUDE.md、docs/README.md、docs/INDEX.md， 再读docs/DESIGN.md当前真相源和相关模块附录；历史 changelog/raw 只在追溯旧决策时读取。 详细规则见~/.claude/skills/_shared/current-doc-loading.md。
/forge-design-impl：设计实现
将 DESIGN.md 的设计规范转化为代码。只改样式和布局，不改业务逻辑。
前置条件
- DESIGN.md 必须存在且已通过 forge-design 审核（评分 ≥ B）
- 如果有
.features/{feature-id}/status.md，确认 design 行为[✅ 已完成] - 读取
docs/README.md、docs/INDEX.md、docs/DESIGN.md当前真相源和本次涉及的模块附录，理解设计体系 token、组件规范、页面布局 - 如果
.features/{feature-id}/feature-spec.md、DESIGN.md 或模块附录中有 Image 2 / Figma / 视觉稿链接，读取并作为观感参考；实现真相源仍是 DESIGN.md 的 token 和组件规则
流程
读取 DESIGN.md → 识别实现清单 → 逐项实现 → 每项自检 → 原子提交 → 全部完成后质量验证
第1步：识别实现清单
从 DESIGN.md 中提取需要实现的设计变更：
- 读取
.features/{feature-id}/status.md/ feature spec 中的设计交付项；如需追溯历史，再读docs/CHANGELOG.md顶部索引和相关DESIGN-CHANGELOG.md条目 - 列出具体实现项，每项包含：
- 变更内容（如"卡片组件圆角从 8px 改为 12px"）
- 涉及文件（定位 CSS/样式文件）
- 预计改动量（小/中/大）
- 向用户展示清单，确认后开始实现
- 若存在视觉稿，额外列出：
- 视觉稿路径
- 用户确认的关键观感（如信息密度、主次层级、空态情绪）
- 实现后需要用真实截图对比的页面/状态
第2步：实现设计变更
实现原则
1. CSS 优先
- 优先修改 CSS/样式文件，而非组件结构
- CSS 修改更安全、更可逆
- 只在布局变更时才改 HTML 结构
2. Token 驱动
- 所有样式值引用 DESIGN.md 定义的 token
- 不硬编码颜色值、字号、间距
- 使用 CSS 变量或 Tailwind 配置中的 token
3. 遵循现有代码风格
- 不引入新的 CSS 方法论
- 如果项目用 Tailwind，用 Tailwind；如果用 CSS Modules，用 CSS Modules
- 不为"更好"而重写不相关的样式
4. 响应式必须
- 所有变更都要考虑移动端
- 移动端不是缩小版桌面——要有独立的设计意义
- 断点处理遵循 DESIGN.md 定义的断点
反 AI 模板编码指导
实现时主动避免以下泛用模式：
排版：
- 不要所有文本都
text-align: center - 标题用 DESIGN.md 指定的字体，不要默认 Inter
- 行高、字间距遵循设计体系，不用浏览器默认值
配色：
- 不要用紫色渐变做英雄区背景
- 不要用彩色圆圈包裹图标
- 颜色来自 token，不要随意用 Tailwind 调色板
布局：
- 不要千篇一律的三列等宽网格
- 不要所有区块等高
- 留白要有意——不是统一的
py-20 - 圆角要有层级——按钮小圆角，卡片中圆角，模态大圆角
组件：
- 不要左边框高亮卡片（
border-left: 3px solid accent） - 不要用 emoji 做列表图标
- 不要装饰性浮动色块
2026-07 增量（对照 anthropics/frontend-design 最新版）：
- 不要"暖奶油色三件套"（#F4F1EA 类背景 + 高对比衬线 + 土红 accent）——AI 默认审美之一
- 不要"暗底 + 酸绿/朱红单色 accent"——同上
- 数字标记（01/02/03）只在内容真是序列/时间线时才用，不做装饰
- 显示字体与正文字体不要来自同一家族；字体是页面个性的载体，不选中性保险款
- 不堆砌散落的动画效果；大胆只花在一个签名元素上，周围保持克制
- Chanel 原则：交付前回看一眼，移除一件装饰
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.
- 10d ago First seen · 202 lines · 78 tokens per session scan A 273dbaf30aa6
forge-design-impl is a skill published in the GitHub repository yike-gunshi/forge-skills (13 stars, last pushed 1mo ago), licensed MIT. It adds 78 tokens to every session and 2,126 once invoked, about $0.0004 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-30.
Other skills, from other repositories
design-context-extract
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design…
figma-design-handoff
Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and visual regression with Applitools. Use when converting Figma designs to code, documenting component specs, setting up design-dev…
component-search
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system…
animation-motion-design
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
design-system-architect
Expert guide for designing, building, and maintaining scalable UI design systems with design tokens, headless primitives, Material Design 3 (M3), Tailwind v4 @theme, and WCAG 2.2 accessibility.
website-design-cloner
Analyzes and reverse-engineers website designs directly from a target URL, extracting layout structures, design tokens (colors, typography, spacing), component hierarchies, visual assets, and responsive behaviors to enable full 1:1 duplication into modern code (Tailwind CSS v4, React/Next.js, HTML/CSS). / Mempelajari…