canvas-design
Apply the 90/10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.
- License 许可
- MIT
- 所属仓库
- clawic/Clawix
- 最近更新
- 2026-06-06
- Stars
- ★ 8
- Forks
- 0
01 前言 Front Matter
- name
- canvas-design
- keywords
- [ "canvas", "layout", "poster", "card", "social", "composition", "hierarchy" ]
- description
- Apply the 90/10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.
03 SKILL.md 正文
canvas-design
A canvas piece (one fixed-aspect surface that the viewer takes in at a glance) succeeds when one element dominates. The 90/10 rule:
- 90% of the canvas is the protagonist: a strong headline, a single image, a quote. One element only.
- 10% supports: attribution, date, logo, CTA, micro-copy.
Procedure
- Identify the protagonist. Ask: "if the viewer reads nothing else, what must they see?"
- Pick a Template whose dominant slot matches that intent:
- Poster announcement:
poster.announcement(heading dominant) orposter.event(hero image dominant). - Quote piece:
poster.quoteorsocial-post.square-quote. - Product showcase:
social-post.square-productorflyer.event.
- Poster announcement:
- Reduce supporting copy. Use the maxLength of supporting slots aggressively; if your text exceeds, cut.
- Pick a Style whose
accentis bold enough to anchor the protagonist. For dim backgrounds usemidnightorsignal; for warm pieces usewarmoreditorial. - Render PNG + PDF + SVG to give the user format choices.
Anti-patterns
- Three competing headlines on one canvas. Pick one.
- Dense paragraphs of body copy on a poster. If it reads like a paragraph, it belongs in a one-pager or brochure, not a canvas piece.
- Logo larger than the headline. Logo lives in the 10%.
- Stock-photo backgrounds with text on top without a scrim. Either use a clean background, or add a
shapeslot behind the text to create contrast.
Constraints
- Never use more than 2 distinct accent colors in a single canvas.
- Maintain at least 4.5:1 contrast between text and its immediate background.
- Respect platform safe zones: for
9:16story posts, keep critical content inside the middle 80% vertically.
04 同仓库更多 Skills
visual-regression
Run and interpret Clawix UI geometry, screenshot, protected-surface, and debt-baseline checks without authorizing visual repair.
ui-performance-budget
Capture and compare Clawix UI performance budgets for critical flows before optimizing visible or runtime UI behavior.
ui-implementation
Implement functional Clawix UI wiring while respecting visual mutation boundaries, pattern contracts, protected surfaces, and debt baselines.
ui-canon-review
Review whether a Clawix UI pattern, visual decision, copy change, or component extraction belongs in canon, debt, exception, or protected-surface scope.
theme-factory
Produce variants of an existing Style by shifting tone (light/dark), density (compact/relaxed), or accent (palette rotation) while preserving the brand identity. Use when the user wants alternate themes derived from one brand.
template-render
Render a Template + data + Style into a final artifact in one of HTML, PDF, PNG, SVG or PPTX. Use whenever the user asks for a concrete deliverable like "make me a poster", "render a card", "give me a one-pager".