菜单
Use when sketching a new screen before visual design, when restructuring an existing page's content priority, when validating layout feasibility with engineering, or when communicating responsive behavior across breakpoints.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | wireframing |
| description | Use when sketching a new screen before visual design, when restructuring an existing page's content priority, when validating layout feasibility with engineering, or when communicating responsive behavior across breakpoints. |
| metadata | {"references":["references/content-hierarchy.md","references/layout-systems.md","references/wireframe-patterns.md"]} |
Given a user request for a wireframe:
Output format: ASCII block + numbered notes table + responsive notes section.
Fidelity selector:
Input: "Create a wireframe for a SaaS pricing page."
Output:
+----------------------------------------------------------------+
| [Logo] Product Pricing Docs Blog [Sign in] [Try] | (1)
+----------------------------------------------------------------+
| |
| Simple pricing. No surprises. | (2)
| Pick a plan, change anytime. |
| |
| [ Monthly | Annual -20% ] | (3)
| |
+----------------------------------------------------------------+
| +------------+ +------------+ +------------+ |
| | Starter | | Pro ★ | | Enterprise | | (4)
| | $0/mo | | $29/mo | | Contact us | |
| | - 3 seats | | - 25 seats| | - Unltd | |
| | - Basic | | - SSO | | - SLA | |
| | [Get free] | | [Start trl]| | [Talk] | |
| +------------+ +------------+ +------------+ |
+----------------------------------------------------------------+
| Compare plans (collapsible feature matrix) | (5)
+----------------------------------------------------------------+
| Logos: Acme, Globex, Initech, Umbrella | (6)
+----------------------------------------------------------------+
| FAQ accordion (5 items) | (7)
+----------------------------------------------------------------+
| Footer |
+----------------------------------------------------------------+
| # | Block | Notes |
|---|---|---|
| 1 | Header | Sticky on scroll. Trial CTA always visible. |
| 2 | Headline | Plain language. No jargon. |
| 3 | Toggle | Default = Annual (highest LTV). Persist choice in URL. |
| 4 | Plan cards | Highlight Pro with badge + scale 1.05. CTAs route to signup with plan preselected. |
| 5 | Comparison | Collapsed by default; expand updates URL hash. |
| 6 | Social proof | Grayscale logos, color on hover. |
| 7 | FAQ | One open at a time; structured data for SEO. |
Responsive:
+--------+----------------------------------------------------+
| Logo | Page title [Search] [Avatar] |
+--------+----------------------------------------------------+
| Nav | KPI 1 | KPI 2 | KPI 3 | KPI 4 |
| Home |--------+-------+-------+-------- |
| Users | |
| Data | +-------------------- Chart -------------------+ |
| Bills | | | |
| ... | +----------------------------------------------+ |
| | |
| | Recent activity (table, 10 rows, paginated) |
+--------+----------------------------------------------------+
+----------------+-------------------------------------------+
| [Search] | Subject: Re: Q3 budget review |
| [Filter ▾] | From: alex@acme.co · 2h ago |
|----------------|-------------------------------------------|
| ● Item 1 2h | |
| Preview… | Body of the selected item renders here. |
|----------------| Toolbar: Reply | Forward | Archive |
| Item 2 5h | |
| Preview… | Attachments (2) |
|----------------| |
| Item 3 1d | |
+----------------+-------------------------------------------+
More patterns (settings, form, search results, landing mobile): wireframe-patterns.md, layout-systems.md.
| Type | Format |
|---|---|
| Content | Callout with description |
| Interaction | Numbered note: "On click → opens modal X" |
| Conditional | "If logged in, show Y; else show Z" |
| Responsive | "At <768px: stack vertically" |
| Data source | "Populated from /api/v2/plans" |
| Constraint | "Max 120 chars", "16:9 ratio" |
Document at 375 / 768 / 1280px:
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.