All skills
Design brief
figma-template-brief
Figma template specification
Writes a precise spec for a Figma template that a freelancer (or you) can build in 1-2 hours. Used for App Store screenshots, ad sets, landing-page hero.
What it does, in 10 seconds
A precise spec a freelancer can quote in minutes and finish in one Figma session. App Store screenshots, ads, landing heroes.
Inputs you provide
- Asset type (screenshots / ads / hero / etc.)
- Brand: accent color, typeface, logo
- Your ICP
- Top 3 features to show
- 2-3 reference designs you like
- Quantity needed in v1
What you get back
- Goal paragraph
- Specifications (canvas, palette, typography)
- Frame list with copy + screenshot direction per variant
- Component / variant strategy
- Acceptance criteria
Skill source
---
name: figma-template-brief
description: Writes a precise spec for a Figma template (App Store screenshots, ad sets, landing-page hero) that a designer or you can build in 1-2 hours. Used by the `design-director` agent.
---
You are writing a brief for someone who'll build a Figma template. The brief must be specific enough that a freelancer can quote a fixed price for it and finish in one session.
# Inputs
- **Asset type:** App Store screenshots / ad set / landing hero / Story cover / Instagram square / OG image
- **Brand:** product name, accent color (hex), typeface preference (or "pick a sensible one"), logo URL
- **ICP (paste from `icp-writer`):** <FILL_IN>
- **Top 3 features / outcomes to show:** <FILL_IN>
- **Reference designs you like** (2-3 URLs or app names): <FILL_IN>
- **Quantity needed in v1:** e.g., 5 App Store screenshot variants
# What to produce
A single Markdown document with these sections:
## Goal
One paragraph. What this template will be used for, who'll see it, what action it should drive.
## Specifications
- Canvas size in pixels (e.g., `1290 × 2796 px (iPhone 15 Pro Max)` for App Store screenshots)
- Color palette: 3 swatches (accent, neutral, surface)
- Typography: heading typeface + weight + size range, body typeface + size
- Logo placement
- Required asset slots:
- Headline text (max chars)
- Subtitle text (max chars)
- Screenshot image (recommended dimensions)
- Optional accent shape / decoration
## Frame list (one per asset variant)
Numbered. For each frame:
- Frame name
- Headline copy (you fill in based on ICP + features)
- Subtitle copy
- Which screenshot goes in (describe what it should show)
- Any frame-specific notes
## Component / variant strategy
Tell the builder: which elements should be Figma Components so swap-via-variant works. Keep this simple — usually a "Headline + Subtitle + Image" component with text properties exposed.
## Out of scope for v1
Be explicit about what you're NOT asking for (animation, dark mode variants, localized versions). Prevents scope creep.
## Acceptance criteria
3-5 bullets. "Done when..." statements. e.g., "Done when 5 App Store screenshot frames exist, each with editable headline + subtitle text via component properties."
# Rules
- Headlines on App Store screenshots MUST sell the outcome, not the feature. Coordinate with `copywriter` if needed.
- Don't ask for a designer-system spec ("design tokens", "OKLCH gamuts") — overkill for an indie product.
- Keep total brief under 600 words. Long briefs scare freelancers and slow down the process.
- Korean output: if any input is in Korean, output in Korean.
Install
Claude Code: create ~/.claude/skills/figma-template-brief/SKILL.md and paste the file contents above. Restart Claude Code; run with /skill figma-template-brief.
Codex CLI: drop into ~/.codex/prompts/figma-template-brief.md (path may vary by Codex version).