Detailed Canvas Builder
Turn rough ideas into a usable canvas spec, not a loose moodboard.
Use this skill when the user wants a detailed canvas, landing page, event page, campaign page, storefront page, or HTML canvas plan. Default to en + zh-HK when the request is bilingual or Hong Kong-facing.
Core Rules
- Start with one page goal and one primary action. If the action is unclear, ask for it or label the assumption.
- Build a journey, not a poster: discovery, understanding, decision, commitment, and after-action states must be visible.
- Prefer explicit mechanics over vague slogans. The user should understand how the page works before the CTA.
- Include trust, policy, and fallback behavior by default for any threshold, redemption, priority, inventory, or time-bound mechanic.
- Treat
enandzh-HKas parallel outputs. Do not write one language fully and loosely paraphrase the other. - Do not invent legal terms, partner claims, metrics, availability, or social proof.
Input Checklist
Collect or infer only what is necessary:
canvas_type: event, campaign, storefront, product, community, lead-gen, otherbusiness_goal: one primary conversion actionfallback_goal: optional secondary action if the main goal cannot completetarget_audience: primary audience and optional secondary audiencelocale: default toen+zh-HKfor bilingual outputbrand_tone: campaign-led, commerce-led, editorial, community-led, premium, playful, etc.reference_pattern: Broadway, SHOPLINE, both, or neitheroperational_constraints: capacity, timing, threshold, eligibility, redemption, inventory, approval, pricetrust_inputs: organizer, proof points, policies, refund/exchange logic, claims that must not be inventedplatform_constraints: HTML canvas, content-only spec, or design briefsuccess_definition: what success looks like for this page
If the request spans multiple unrelated goals, split it into separate canvases instead of overloading one page.
Reference Selection
Use references intentionally:
- Use Broadway-style references for threshold activation, private-show voting, community demand unlock, or event confirmation mechanics.
- Use SHOPLINE-style references for conversion hierarchy, storefront sequencing, trust-building, FAQ placement, and mobile-first CTA rhythm.
- When both fit, use Broadway for the mechanic and SHOPLINE for the page structure.
Reference decision rules:
- Use Broadway-style references for threshold activation, private-show voting, community demand unlock, or event confirmation mechanics.
- Use SHOPLINE-style references for conversion hierarchy, storefront sequencing, trust-building, FAQ placement, and mobile-first CTA rhythm.
- When both fit, use Broadway for the mechanic and SHOPLINE for the page structure.
- Do not overfit an event mechanic onto a normal storefront.
- Do not overfit storefront structure onto a page that needs more editorial or community framing.
Workflow
- Define the page goal, primary CTA, audience, and operating constraints.
- Select the reference mode: Broadway, SHOPLINE, both, or generic.
- Draft the section order in conversion sequence.
- Define the page states and transition logic.
- Write bilingual core copy for hero, mechanism, CTA, trust/policy, and FAQ.
- Flag unsupported assumptions and anything that needs legal, PM, or business approval.
- Output a structured canvas spec.
Required Sections
Every canvas spec should include:
- page brief
- audience
- primary CTA and optional fallback CTA
- section-by-section structure
- state model
- trust/policy block
- bilingual content blocks
- implementation notes
- open assumptions and approval items
Use this output structure:
page_brief:
canvas_type: ""
goal: ""
audience:
primary: ""
secondary: ""
primary_cta:
id: ""
label:
en: ""
zh-HK: ""
fallback_cta:
id: ""
label:
en: ""
zh-HK: ""
references_used: []
assumptions: []
sections:
- id: hero
purpose: ""
content:
en:
headline: ""
subheadline: ""
supporting_points: []
zh-HK:
headline: ""
subheadline: ""
supporting_points: []
notes: []
states:
- id: open
trigger: ""
user_message:
en: ""
zh-HK: ""
CTA:
en: ""
zh-HK: ""
trust_and_policy:
organizer: ""
proof_points: []
rules:
en: []
zh-HK: []
non_inventable_claims: []
implementation_notes:
design_direction: []
mobile_priority: []
analytics:
primary_metric: ""
guardrails: []
do_not_invent: []
review:
strengths: []
approval_required: []
failure_conditions: []
Minimum requirements:
page_brief.goalmust be explicit.primary_ctamust exist.sectionsmust include hero, mechanism, trust/policy, FAQ, and CTA.statesmust include a fallback state if the page has thresholds, inventory, timing, approval, or eligibility constraints.trust_and_policy.non_inventable_claimsmust list any information that requires human confirmation.
Section Order
Default order:
- Hero
- Why it matters
- How it works
- Progress, threshold, or availability state
- Benefits, rewards, or value
- Trust, policy, and organizer credibility
- FAQ and edge cases
- Primary CTA
- Secondary CTA or fallback state
Reorder only when the use case strongly requires it.
State Model
Always define visible states when the page logic changes over time:
draftopenin_progressthreshold_metpriority_claim_openclosedfallback
Rename the labels to fit the use case, but preserve the logic.
State requirements:
- Every state must say what happened, what the user can do now, and what happens next.
- Every state must have bilingual messaging when bilingual output is enabled.
- If the page includes priority benefits, define who qualifies and when.
- If the page includes thresholds, define what counts toward the threshold and what happens if it is not met.
- If the page includes time windows, define start and end behavior.
Bilingual Rules
- Use the same information architecture in both languages.
- Keep key terms stable across languages.
- Shorten supporting copy before shortening trust, policy, or CTA text.
- If one language needs a more natural rewrite, preserve intent and action parity.
- Use
zh-HKphrasing for Hong Kong-facing work.
Output
Return:
- A short brief summarizing the page goal and references used.
- A complete canvas spec in the schema from canvas-schema.md.
- A short review section:
- what is strong
- what needs human approval
- what would make the canvas fail
Quality Gate
Before finishing, check:
- Is the primary action obvious within the first screen?
- Is the mechanism explained before commitment?
- Are states, fallback behavior, and trust constraints explicit?
- Do
enandzh-HKsay the same thing? - Is anything invented that should have been flagged instead?