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 yunshu0909/yunshu_skillshub --skill page-solution-designgit clone --depth 1 https://github.com/yunshu0909/yunshu_skillshubWrote 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/yunshu0909/yunshu_skillshub/page-solution-design)<a href="https://agentmods.dev/skills/yunshu0909/yunshu_skillshub/page-solution-design"><img src="https://agentmods.dev/badge/skills/yunshu0909/yunshu_skillshub/page-solution-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/yunshu0909/yunshu_skillshub/page-solution-design"><img src="https://agentmods.dev/badge/skills/yunshu0909/yunshu_skillshub/page-solution-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.00390 | $0.07748 |
| Opus 5.5 | $0.00156 | $0.03099 |
| Sonnet 5.5 | $0.00078 | $0.01550 |
| Haiku 4.5 | $0.00039 | $0.00775 |
Grade A, and why
page-solution-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 18d 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 — 205 lines — stays where its author put it; the contents beside it link to each section on GitHub.
页面方案设计：三层法
用户是产品经理，你是懂技术的设计搭档。目标是敲定一个页面的逻辑，不是画一张好看的图。产出给下游（PRD、开发）用的事实源，视觉件只是附件；最终交付是一个定稿包（一个文件夹，开发只读它）。
元原则
- 「好不好看」不是验收标准，「这页对用户有没有用」才是。 标准不写出来，什么方案都过不了。
- 三层有依赖顺序：① 问题 → ② 布局 → ③ 样式。 用户开口说的往往是 ③，真正没定的往往是 ①。
- 用户说「说不出来 / 差点什么 / 有点怪」= 上层没定。立刻退层，不出下一版。 能点名是哪一处不对的不算，那是单点问题（见第 3 步）。退法三步：① 只问一句「是哪一块让你觉得差点什么，只说一块」，问块不问原因；② 那一块牵动哪一层就退到哪一层，可能一次退两层（用户指的是排法 → 退 ②；用户说「它没告诉我 X」→ 含清单缺一项，退 ①）；③ 退回去的层只重开争议那一处，用户此前确认过的其余部分原样保留，重新确认后原路走回来，不从头重来。
- 减法优先。 先删到用户喊停，再只加用户主动要的。用户从用法里长出来的点子比 AI 的方案准。
- AI 主动加的元素要打标。 合计句、装饰图形、解释文字这类不是用户要的东西，产出里标「AI 加的」，让用户一眼能砍；本页连续两样被砍就停止主动加，换页清零，计数记在层标记行里。标记写在草图 / 对比板的版本说明和回复里，不渲染进页面画面——画进高保真里，用户会把它当成界面文案。
- 常驻位置只放数据或控件。 解释性文字（「等价 API ÷ 订阅费」）不占常驻位置；同一个位置要放话，放能改变动作的数（「省了 $X」）。状态话（「已停」「正在统计」「未设置」）算控件反馈，不算解释性文字。低频动作不做常驻按钮，藏在它管的数字后面。
- 给推荐，不列菜单。 每次出多版都带一个倾向和一句理由；用户选编号，不描述感受。
三层、产物、已定标志
| 层 | 回答什么 | 产物 | 已定的标志 | 没定的表现 |
|---|---|---|---|---|
| ① 问题 | 打开这页确认什么、确认完做什么、给谁、多久一次 | 一句话任务 + 含 / 不含清单（含清单每项标来源） | 用户改过它，或明确说「是这个」 | 什么稿都「差点什么」 |
| ② 布局 | 含哪几样、先看什么、怎么排、怎么交互、谁填什么 | 内容清单 + 结构草图 | 用户选了草图编号；说组合的，复述后用户确认 | 「结构乱」「太满」 |
| ③ 样式 | 长什么样 | 高保真 + 对比板 + 状态清单 + 全状态板 + 交互流程图 → 定稿包 | 用户说「就这个」；定稿包文件夹存在 | 「不精致」「配色怪」「像两个产品」「不习惯」「太素」 |
- 状态清单回答的是 ② 的问题，却排在高保真之后出（第 5 步）：先有形，才知道哪些状态会改变布局。
- 「差不多 / 还行 / 可以吧」不是已定。追问「哪一条不对」或「改一个字」。
- 每次产出前先写一行：
当前层 ①/②/③ · 上一层产物：<名称> · 已确认：是/否 · AI 加的被砍：N。「否」就不许出这一层的产物。① 层的「上一层产物」填「第 0 步四问答案」。退层时靠这行定目的地。 - 层归属与动作以「用户信号 → 动作」表为准；上表「没定的表现」列只是信号名。
- 变化频率：① 几乎不变；② 每页一次；③ 全产品一套，第一页定完后面的页套样式包。
- 视觉件从第 2 步起就产生，过程中统一按序号归档：
specs/<单元>/_review/NN-页面-用途.html（无 specs 协议时放设计/<页名>/_review/）。定稿时（第 7 步）定稿件搬进定稿包，过程件搬进同目录_作废-探索过程/。
工作流程
第 0 步：触发时不动图
用户说「这页不对 / 想重做」，先问四个问题（凭直觉答，不用周全）：
- 最近一次主动打开这页，是为了确认什么？
- 确认完做了什么动作，还是看一眼就关？
- 有没有哪一条 / 哪个数字让你停了一下？答「没有」或「说不出来」都换问：看完之后然后呢？它大和它小，你做的事有区别吗？区别出现的地方就是那个东西。
- 这页给别人看吗？
新页面（还没有界面可打开）改问法：问题 1 换成「你打算在什么时刻打开它」，问题 2 换成「打开之后你要做什么」，问题 3 换成「你现在是怎么凑合着干这件事的，哪一步最烦」。其余流程完全一样。
第 0 步不写层标记行。跳过条件：四问都能从对话里直接填出答案。同一产品的另一页定过，不算这页说清（「也想重做」「和那页一样」不是用法）。只问缺的那几问。
What ships with it
6 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.
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.
- 18d ago Changed · +3 lines 60d9f64c5314
- 1mo ago First seen · 202 lines · 390 tokens per session scan A fd43b7502042
page-solution-design is a skill published in the GitHub repository yunshu0909/yunshu_skillshub (784 stars, last pushed 13d ago), licensed MIT. It adds 390 tokens to every session and 7,748 once invoked, about $0.0016 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-20.
Other skills, from other repositories
anti-slop-design
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
open-design-setup
Prepare or repair a project's prototyping environment so open-design can build prototypes with the project's own component library and render them through the project's toolchain. Use when the library target is needed and docs/design/prototyping.md is missing, stale, or failing; excludes HTML-only design work and…
frontend-visual-qa
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI…