Token导航 LogoToken导航

Agent Skill · 前端设计

page-cro(页面克隆)

page-cro 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息,适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。

page-cro 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为只读;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 1,902。

总安装 3,374周安装 142GitHub Stars 103下载 1,181核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:page-cro(页面克隆)
来源仓库:https://github.com/borghei/claude-skills
仓库路径:skills/page-cro
安装命令:
npx skills add https://github.com/borghei/claude-skills --skill page-cro
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/borghei/claude-skills --skill page-cro

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

page-cro 针对营销落地页提供转化率优化框架,覆盖七个维度的分析与页面类型专属策略。包括首屏工程、社会证明层级、异议处理架构与结构化 A/B 测试设计。输出可执行的文案替代方案与流量来源匹配规则,提升整体转化效能。实施前应明确页面目标与受众特征,防止通用模板导致效果稀释。

page-cro 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

来源仓库内路径:skills/page-cro

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/borghei/claude-skills --skill page-cro;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它标注为只读,先用只读任务试一次,确认行为符合预期再扩大使用范围。

常见问题

6 条

page-cro 怎么安装?

在终端执行 npx skills add https://github.com/borghei/claude-skills --skill page-cro。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

page-cro 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

page-cro 需要什么权限?

权限级别是只读。该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

page-cro 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

page-cro 用的人多吗?

公开数据是累计安装 3,374 次,近一周安装 142 次,下载 1,181 次,GitHub 103 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

page-cro 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。
  • 标注为只读权限,试用阶段不容易误改本地文件。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。
  • 只想先试试效果、不希望它改动本地文件的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
page-cro

页面克隆 · 本页

3,374103只读未明确通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Page CRO

Production-grade conversion rate optimization framework for marketing pages. Covers the 7-dimension analysis framework, page-type-specific playbooks, copy alternatives methodology, above-the-fold engineering, social proof hierarchy, objection handling patterns, and structured A/B test design.


Table of Contents


Initial Assessment

Required Context

QuestionWhy It Matters
What page type? (homepage, landing page, pricing, feature, blog)Determines the CRO framework to apply
What is the primary conversion goal?Focuses the analysis
Where is traffic coming from? (organic, paid, email, social)Drives message-match requirements
What is the current conversion rate?Establishes the baseline
What does the post-click flow look like?The page may convert fine but the next step fails
Do you have heatmaps or session recordings?Behavioral data reveals what analytics cannot
What have you already tried?Avoids re-testing failed experiments

The 7-Dimension CRO Framework

Analyze every marketing page across these 7 dimensions, in order of typical impact.

Dimension 1: Value Proposition Clarity (Highest Impact)

The 5-second test: Can a first-time visitor understand what this is, who it is for, and why they should care within 5 seconds?

SignalPassFail
Primary benefit is stated explicitly"Save 10 hours/week on reporting""Next-generation analytics platform"
Written in customer language"See which campaigns drive revenue""Multi-touch attribution solution"
Differentiator is clear"The only CRM built for agencies""A better CRM"
SpecificityIncludes numbers, timeframes, outcomesVague superlatives ("powerful", "innovative")

Dimension 2: Headline Effectiveness

Headline scoring rubric:

CriteriaScore 0Score 1Score 2
Communicates core valueNoPartiallyClearly
Specific (numbers, outcomes)GenericSomewhat specificVery specific
Addresses target audienceGenericImpliedExplicit
Matches traffic sourceNo connectionLoose matchExact message match
Emotional or logical hookNeitherOneBoth

Total: 0-10. Score < 6 = rewrite needed.

Dimension 3: CTA Hierarchy and Placement

CheckPassFail
One clear primary CTASingle, prominent actionMultiple competing CTAs
CTA visible without scrollingAbove the foldBelow the fold only
CTA copy communicates value"Start Free Trial""Submit"
CTA repeated at decision pointsAfter benefits, after social proof, at bottomOnly at top or only at bottom
Secondary CTA is clearly secondarySmaller, different color, text linkSame visual weight as primary

Dimension 4: Visual Hierarchy and Scannability

CheckPassFail
Most important element is most prominentHeadline + CTA dominateNavigation or image dominates
Scannable in 10 secondsKey points visible via headings, bold, bulletsWall of text
Adequate white spaceBreathing room between sectionsCluttered, dense layout
Images support the messageProduct screenshots, relevant imageryStock photos, decorative graphics
F-pattern or Z-pattern layoutContent follows natural eye flowRandom placement

Dimension 5: Social Proof and Trust

CheckPassFail
Customer logos visibleRecognizable logos above the foldNo logos or unknown companies
Testimonials are specific"Increased revenue by 40%""Great product!"
Testimonials are attributedFull name, title, company, photoAnonymous or first-name-only
Trust badges present (where relevant)Security, compliance, awardsNo trust indicators
Numbers-based proof"10,000+ teams use..."No scale indicators

Dimension 6: Objection Handling

CheckPassFail
Price/value objection addressedROI calculation, "starts at $X"No pricing context
"Will this work for me?" answeredUse cases, industry examplesGeneric positioning only
Risk reduction offeredFree trial, guarantee, no CC requiredNo risk reversal
Implementation concern addressed"Set up in 5 minutes"No setup/complexity context
FAQ section presentAddresses top 5 objectionsNo FAQ or irrelevant questions

Dimension 7: Friction Points

CheckPassFail
Form is optimizedMinimal fields, clear labelsToo many fields, unclear purpose
Next step is clearObvious path forward from every sectionConfusing navigation or dead ends
Mobile experienceFully responsive, touch-friendlyDesktop-only design
Load time< 3 seconds> 5 seconds
No distracting elementsClean, focused designPopups, auto-play video, chat widget on load

Above-the-Fold Engineering

The above-the-fold area is the most valuable real estate on any page. It determines whether visitors scroll or bounce.

Required Elements (Above the Fold)

┌──────────────────────────────────────────┐
│  [Nav: Logo + 3-5 links + Primary CTA]  │
├──────────────────────────────────────────┤
│                                          │
│  HEADLINE: Primary value proposition     │
│                                          │
│  SUBHEADLINE: Supporting detail          │
│                                          │
│  [PRIMARY CTA BUTTON]                   │
│  [Secondary CTA: text link]             │
│                                          │
│  [Social proof: logos or stat]           │
│                                          │
│  [Hero image or product screenshot]      │
│                                          │
└──────────────────────────────────────────┘

Above-the-Fold Rules

  • Headline is the largest text on the page
  • CTA button is the most visually prominent interactive element
  • Social proof appears above the fold (even just logo strip)
  • Hero image shows the product in use (not abstract graphics)
  • No auto-play video or animation that distracts from the CTA
  • Navigation is minimal (3-5 items max, CTA in nav)

Social Proof Hierarchy

Not all social proof is equal. Use the right type at the right location.

Social Proof Power Ranking

RankTypeStrengthBest Placement
1Case study with metrics"Company X increased revenue 40% in 3 months"Mid-page, after benefits section
2Named testimonial with photoFull name, title, company, headshotNear CTA, after objection handling
3Aggregate numbers"10,000+ teams" or "4.8/5 on G2"Above the fold, near headline
4Customer logosRecognizable brand logosAbove the fold, logo strip
5Awards/badges"G2 Leader 2026", "SOC2 Certified"Footer or near CTA
6Generic testimonial"Great product!" -- no specificsDo not use (no credibility)

Placement Rules

  • Logo strip: Above the fold, below the CTA
  • Testimonials: After the section that makes the claim they validate
  • Case studies: Mid-page, as their own section
  • Numbers: Inline with headline or subheadline
  • Trust badges: Near the primary CTA and near the form

Objection Handling Architecture

The 5 Universal Objections

Every product page must address these five objections. If the page does not, conversions leak.

ObjectionHow to AddressPage Element
"Is this worth the money?"ROI calculator, pricing comparison, "saves X hours"Benefits section + pricing context
"Will this work for my situation?"Industry examples, use case sections, persona targeting"Who uses this" section
"Is this hard to set up?""Set up in 5 minutes", onboarding preview, integration logosFeature section or FAQ
"What if it doesn't work?"Free trial, money-back guarantee, no CC requiredNear CTA
"Why this over alternatives?"Comparison table, differentiators, switcher testimonialsMid-page or FAQ

FAQ Design for Objection Handling

The FAQ section should be the last defense before conversion. Structure it to address the 5 objections:

  1. "How long does setup take?" (complexity objection)
  2. "Can I cancel anytime?" (commitment objection)
  3. "What's included in the free trial?" (value objection)
  4. "Do you integrate with [popular tool]?" (compatibility objection)
  5. "How is this different from [competitor]?" (alternatives objection)

Page-Type Playbooks

Homepage

ElementBest Practice
AudienceCold visitors who may not know you
HeadlinePosition the company, not a single feature
CTA splitPrimary: "Start Free Trial" / Secondary: "See Demo" or "Learn More"
ContentOverview of benefits, social proof, feature highlights, use cases
NavigationFull site navigation (unlike landing pages)

Landing Page (Paid Traffic)

ElementBest Practice
NavigationRemove or minimize (no escape routes)
HeadlineMessage-match with the ad that drove the click
CTASingle action, repeated 2-3 times down the page
ContentComplete argument on one page: problem > solution > proof > CTA
Social proofDirectly relevant to the ad audience

Pricing Page

ElementBest Practice
Plan presentationGood-Better-Best with recommended plan highlighted
ToggleAnnual/Monthly with savings percentage shown
Feature comparisonFull table below the fold
FAQ"Which plan is right for me?" as first question
CTAPer-plan CTA with plan-specific copy
Social proofLogos and testimonials relevant to each tier

Feature Page

ElementBest Practice
HeadlineBenefit of the feature, not the feature name
ContentUse cases > technical capabilities
DemoScreenshot, GIF, or interactive demo
CTA"Try this feature" or "Start Free Trial"
Internal linksLink to related features and pricing

Blog Post

ElementBest Practice
CTA typeContextual inline CTA matching the content topic
PlacementAfter introduction, at natural breaks, at end
CTA styleInline banner or text link, not aggressive popup
Content CTAOffer a related resource (template, checklist, tool)

Copy Alternatives Methodology

When recommending copy changes, always provide 2-3 alternatives with reasoning.

Alternative Generation Framework

For each key element (headline, subheadline, CTA), generate variants across these axes:

AxisVariant AVariant BVariant C
Benefit focusOutcome-focusedProblem-focusedFeature-focused
SpecificityNumbers and dataCustomer quoteUse case scenario
ToneDirect and assertiveConversationalAspirational

Example

Current headline: "Marketing Automation Software"

VariantCopyRationale
A (outcome)"Generate 3X More Qualified Leads Without Adding Headcount"Specific outcome + pain point
B (problem)"Stop Losing Leads Because Your Team Can't Follow Up Fast Enough"Addresses the pain directly
C (social proof)"How 2,000+ Marketing Teams Hit Their Pipeline Targets"Authority + specificity

Recommendation: Test A first (most specific), B if A does not outperform current (different psychological angle).


Traffic Source Matching

Different traffic sources require different page optimization strategies.

SourceVisitor StatePage Must Do
Paid search (brand)Knows you, high intentFast path to action, minimal education
Paid search (non-brand)Problem-aware, solution-seekingProve you solve their specific problem
Paid socialInterrupted, low intentHook attention, educate, build interest
Organic searchResearch-modeComprehensive content, gradual conversion
EmailAlready engagedDeliver on the email promise, reduce friction
ReferralPre-sold by referrerValidate referrer's recommendation, fast CTA

Message Match Audit

For paid traffic: Compare the ad copy with the landing page headline. They must share:

  • The same language/terminology
  • The same promise
  • The same offer
  • Visual consistency (if display ad)

Mismatch = wasted ad spend. Users who click an ad about "free SEO audit" and land on a generic homepage will bounce.


A/B Test Framework

Test Priority Matrix

PriorityWhat to TestExpected Impact
1Headline copy10-30% conversion lift
2CTA copy and color5-20% conversion lift
3Social proof placement5-15% conversion lift
4Above-the-fold layout5-20% conversion lift
5Form field reduction5-10% completion lift
6Hero image vs video2-10% lift (variable)

Test Design Rules

  • One variable per test (unless running a multivariate test with sufficient traffic)
  • Minimum 200 conversions per variant before declaring a winner
  • Run for full business cycles (minimum 2 weeks)
  • Track downstream metrics (not just page conversion, but lead quality / revenue)

Fix vs Test Decision

SituationAction
Obvious UX problem (broken form, missing CTA)Fix immediately, no test needed
Missing social proofAdd it, no test needed
Headline copy alternativeA/B test
Layout changeA/B test
Removing page elementsA/B test
Adding a new sectionA/B test

Metrics and Benchmarks

Conversion Rate Benchmarks

Page TypeBelow AverageAverageGoodExcellent
SaaS homepage< 2%2-4%4-7%> 7%
Landing page (paid)< 5%5-10%10-20%> 20%
Pricing page< 3%3-5%5-10%> 10%
Blog post (to email)< 1%1-3%3-5%> 5%
Feature page< 2%2-5%5-8%> 8%

Key Metrics

MetricWhat It Tells You
Bounce rateIs the page meeting visitor expectations?
Scroll depthHow much of the page are visitors seeing?
Time on pageAre visitors reading or immediately leaving?
CTA click rateIs the CTA compelling and visible?
Form start rateAre visitors beginning the conversion process?
Form completion rateAre they finishing it?

Output Artifacts

ArtifactFormatDescription
CRO Audit Report7-dimension analysisPer-dimension assessment with severity ratings
Quick Wins ListBullet list (max 5)Implementable today with expected impact
High-Impact RecommendationsStructured listEach with rationale, effort estimate, and success metric
Copy AlternativesSide-by-side table2-3 variants per key element with reasoning
A/B Test PlanPrioritized tableHypothesis, variant, success metric, priority
Traffic Source Matching AuditSource x page element tableMessage match assessment per traffic source

Related Skills

  • form-cro -- Use when the form on the page is the specific bottleneck (field optimization, validation, mobile form UX).
  • signup-flow-cro -- Use when users convert on the page but drop off during the signup/registration process.
  • popup-cro -- Use when considering a popup as an additional conversion layer on the page.
  • onboarding-cro -- Use when post-conversion activation is the real problem and the page itself converts adequately.
  • pricing-strategy -- Use when the pricing page needs structural redesign (tier structure, value metric), not just CRO tweaks.

Tool Reference

1. page_cro_scorer.py

Purpose: Score a marketing page across the 7 CRO dimensions and generate an audit report with severity ratings.

python scripts/page_cro_scorer.py page_audit.json
python scripts/page_cro_scorer.py page_audit.json --json
FlagRequiredDescription
page_audit.jsonYesJSON file with page elements and dimension checks
--jsonNoOutput results as JSON

2. headline_scorer.py

Purpose: Score headline effectiveness against the 5-criteria rubric and generate copy alternatives.

python scripts/headline_scorer.py --headline "Marketing Automation Software" --audience "B2B marketers" --traffic-source paid-search
python scripts/headline_scorer.py --headline "Marketing Automation Software" --json
FlagRequiredDescription
--headlineYesThe headline text to score
--audienceNoTarget audience description (default: "general")
--traffic-sourceNoPrimary traffic source: organic, paid-search, paid-social, email, referral (default: organic)
--jsonNoOutput results as JSON

3. conversion_benchmark_calculator.py

Purpose: Calculate conversion rate benchmarks for a given page type, traffic source, and industry, and assess current performance.

python scripts/conversion_benchmark_calculator.py --page-type landing-page --traffic paid --current-rate 8.5
python scripts/conversion_benchmark_calculator.py --page-type homepage --traffic organic --current-rate 3.0 --json
FlagRequiredDescription
--page-typeYesPage type: homepage, landing-page, pricing, feature, blog
--trafficYesTraffic source: organic, paid, email, social, referral
--current-rateYesCurrent conversion rate as percentage
--industryNoIndustry for benchmarks: saas, ecommerce, fintech, healthcare, education (default: saas)
--jsonNoOutput results as JSON

Troubleshooting

ProblemLikely CauseSolution
High bounce rate (>70%) on landing pageMessage mismatch with traffic source or poor above-the-foldAudit message match: compare ad copy with landing page headline; ensure value proposition is visible in first 5 seconds
Page converts on desktop but not mobileMobile UX not optimizedCheck touch targets (44px+), form field count on mobile, CTA visibility without scrolling; score with page_cro_scorer.py
CTA click rate below 2%CTA is generic, below the fold, or visually weakReplace "Submit" with value-specific copy; ensure CTA is visible above fold and repeated after key sections
High scroll depth but low conversionVisitors read but are not convinced to actAdd social proof near CTA positions; address objections in FAQ; add risk reversal (free trial, no CC)
A/B test shows no significant winner after 4 weeksChange too small to detect or insufficient trafficUse ab_test_calculator.py from form-cro to validate sample size; test bigger changes (headline rewrite vs word swap)
Paid traffic converts worse than organicLanding page not tailored to paid traffic intentCreate dedicated landing pages for paid campaigns with message match; remove navigation on paid landing pages
Social proof section is ignoredGeneric testimonials or poor placementUse specific, attributed testimonials with metrics; place after the section that makes the claim they validate

Success Criteria

  • Page CRO score of 70+ across the 7-dimension framework (scored by page_cro_scorer.py)
  • Headline scores 7+ on the 10-point rubric (scored by headline_scorer.py)
  • Conversion rate at or above industry benchmark for page type (verified by conversion_benchmark_calculator.py)
  • Above-the-fold contains: headline, CTA, and at least one social proof element
  • Message match verified for all paid traffic campaigns (ad copy matches landing page headline)
  • Mobile conversion rate within 20% of desktop rate
  • Every page addresses at least 3 of the 5 universal objections

Scope & Limitations

  • In scope: Page-level conversion optimization, headline effectiveness, CTA hierarchy, social proof placement, objection handling, traffic source matching, A/B test prioritization
  • Out of scope: Form optimization (use form-cro), signup flow optimization (use signup-flow-cro), popup optimization (use popup-cro), pricing structure changes (use pricing-strategy)
  • Page speed: This skill covers CRO elements, not technical performance; pages loading >3 seconds need technical optimization first
  • Traffic minimum: A/B testing recommendations require 200+ conversions per variant; low-traffic pages should implement best practices without testing
  • Qualitative input: Heatmaps and session recordings provide critical behavioral data that analytics alone cannot reveal; consider investing in these tools

Integration Points

  • form-cro -- When the form on the page is the bottleneck (field optimization, validation UX, mobile form experience)
  • signup-flow-cro -- When users convert on the page but drop off during the signup/registration process
  • popup-cro -- When considering a popup as an additional conversion layer on top of the page
  • onboarding-cro -- When post-conversion activation is the real problem and the page itself converts adequately
  • pricing-strategy -- When the pricing page needs structural redesign (tier structure, value metric), not just CRO tweaks
  • competitive-teardown -- When comparison pages need competitive data to build credible content

平台分布

Codex

35.2%
按下载量换算416

Claude

30.21%
按下载量换算357

Cursor

19.29%
按下载量换算228

Gemini CLI

9.39%
按下载量换算111

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills