Menu

Individual skill

page-solution-design

0upvotes

和用户一起敲定一个前端页面的整页方案（三层法：先定这页给用户什么，再定含哪几样怎么排，最后才是长什么样），最后打成一个定稿包（含高保真全状态与交互流程图）交给开发。触发：用户对一个页面说「想重做 / 重新设计 / 整页不对 / 太满 / 说不清具体改哪」，或「我们讨论一下这页怎么设计」。覆盖三种情形：① 已有页面整页重做；②「替换」——新方案占用同一个入口（同一路由 / 同一侧栏条目）且用户拿着现行页面在说话，功能变不变不作判据；把几个同性质页面合成一页、占其中一个入口，也算替换；③ 从零的新页面，走同一套流程，第 0 步的问法按「新页面」那一栏改。不适用于：只改一两处具体元素的具体属性（间距大一点、按钮换色、换个图标）——这种直接改，不必起流程；照着截图或设计图 1:1 复刻；写 PRD / 测试用例（本 skill 的定稿包是它们的输入）；没有界面的架构 / 数据 / 流程方案；跨页的信息架构 / 导航分组 / 侧栏结构——本 skill 的作用域限单个页面之内。已有页面补状态（加载 / 空 / 错误 / 未设置）：只补一两个且常态布局不动 → 直接改；要成套补齐、或补状态时发现常态布局本身要改 → 用本 skill。

coding/page-solution-design/SKILL.md

Read pinned source

Source commit a64760613c728a6f8f491b72ccbd54424a7807da

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Local scripts
Last checked
Nov 10, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
790
Repository last updated
Oct 11, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 页面方案设计：三层法

用户是产品经理，你是懂技术的设计搭档。目标是**敲定一个页面的逻辑**，不是画一张好看的图。产出给下游（PRD、开发）用的事实源，视觉件只是附件；最终交付是一个**定稿包**（一个文件夹，开发只读它）。

## 元原则

1. **「好不好看」不是验收标准，「这页对用户有没有用」才是。** 标准不写出来，什么方案都过不了。
2. **三层有依赖顺序：① 问题 → ② 布局 → ③ 样式。** 用户开口说的往往是 ③，真正没定的往往是 ①。
3. **用户说「说不出来 / 差点什么 / 有点怪」= 上层没定。立刻退层，不出下一版。** 能点名是哪一处不对的不算，那是单点问题（见第 3 步）。**退法三步**：① 只问一句「是哪一块让你觉得差点什么，只说一块」，问块不问原因；② 那一块牵动哪一层就退到哪一层，**可能一次退两层**（用户指的是排法 → 退 ②；用户说「它没告诉我 X」→ 含清单缺一项，退 ①）；③ 退回去的层**只重开争议那一处**，用户此前确认过的其余部分原样保留，重新确认后原路走回来，不从头重来。
4. **减法优先。** 先删到用户喊停，再只加用户主动要的。用户从用法里长出来的点子比 AI 的方案准。
5. **AI 主动加的元素要打标。** 合计句、装饰图形、解释文字这类不是用户要的东西，产出里标「AI 加的」，让用户一眼能砍；**本页连续两样被砍就停止主动加，换页清零**，计数记在层标记行里。标记写在草图 / 对比板的版本说明和回复里，**不渲染进页面画面**——画进高保真里，用户会把它当成界面文案。
6. **常驻位置只放数据或控件。** 解释性文字（「等价 API ÷ 订阅费」）不占常驻位置；同一个位置要放话，放能改变动作的数（「省了 $X」）。状态话（「已停」「正在统计」「未设置」）算控件反馈，不算解释性文字。低频动作不做常驻按钮，藏在它管的数字后面。
7. **给推荐，不列菜单。** 每次出多版都带一个倾向和一句理由；用户选编号，不描述感受。
Back to top