45 design tool brief global skill

Use when a designer needs hands-on production direction inside a tool — Canva, Figma, or Adobe Express: which template to start from, the operating order, element-by-element mapping, grid and spacing, brand kit colors and fonts, export checklist, and the dos and do-nots.

by minhnv0807·MIT license·★ 599 Stars on the repo·GitHub ↗

Use now

Files of 45 design tool brief global

minhnv0807/master1 file shown
SKILL.md
Show the full text188 lines

Design Tool Brief (Global)

A good production brief means the designer opens the right template, uses the right elements, and never hunts around. Colors, fonts, and logos come from the brand kit inside the tool or from the brand guideline (46-brand-guideline-global) — never chosen ad hoc.

This skill is tool-agnostic. The workflow is the same in Canva, Figma, or Adobe Express — only the terminology differs (Canva Brand Kit / Figma styles and variables / Adobe Express brand). State which tool the team uses at the top of the brief.

Information gathering

Read the brand guideline and the originating brief (42-image-brief-global or 43-carousel-brief-global) if available. If information is missing, ask up to 4 questions:

  1. Design type, tool, and canvas size? Post, story, carousel, presentation, or email banner — in which tool, at how many pixels?
  2. Where does the designer start? New file from blank, edit an existing template, or duplicate a previous design (link)?
  3. Is the content ready? Is the copy approved, and how many variants or sizes are needed?
  4. Deadline and approver?

Principles

  1. No fonts or colors outside the brand kit unless the lead approves in writing.
  2. No AI-generated imagery in brand content without approval — use real photography or pre-approved stock.
  3. Share a view or comment link before exporting. Do not export first and ask for approval after.
  4. Any change after the first approval requires a new approval.
  5. Never leave a file named "Untitled design" — apply the naming convention from the start.
  6. Set up the brand kit before designing: load the palette from the brand guideline, add [heading font] and [body font], and save every logo version.

Workflow

1. Identify the base

State exactly where the designer starts: a link to a brand template, a blank canvas at the correct size, or a duplicate of a specific previous design.

2. Follow the standard operating order
Step Action
1 Open or create the canvas at the exact channel size (see 50-asset-resize-global)
2 Set the background to [background color] or [light background color] per the brand guideline
3 Set accents to [primary color] or [secondary color]
4 Swap fonts to [heading font] / [body font]
5 Replace the content, preserving hierarchy (H1 largest, body smallest)
6 Verify: logo placement correct, colors in palette, text contrast sufficient
3. Map every element

Every text box, image placeholder, and color block gets explicit direction in the template below.

4. Export against the checklist

Format, resolution, color profile, file name, folder — never improvised.

Output structure

File name: design-tool-brief-[name]-[YYYYMMDD].md

# Design Tool Brief — [Design name]

## Overview
| Item | Detail |
|------|--------|
| Design type | |
| Tool | Canva / Figma / Adobe Express |
| Canvas size | |
| Base | [template link / blank / duplicate of design X] |
| Variants required | |
| Deadline | |
| Approver | |

## Brand system quick reference (from the brand guideline)
Colors:
| Name | Value | Used for |
|------|-------|----------|
| Primary | [primary color] | Headings, CTA buttons, dominant grounds |
| Secondary | [secondary color] | Highlights, accents, standout figures |
| Background | [background color] | Clean grounds |
| Text strong | [strong text color] | Body text on light grounds |
| Text muted | [muted text color] | Subtext, captions |
| Light surface | [light background color] | Section grounds, cards |

Typography:
| Used for | Font | Weight | Suggested size |
|----------|------|--------|----------------|
| Heading H1 | [heading font] | Bold 700 | 40-56px |
| Heading H2 | [heading font] | Bold 700 | 28-36px |
| Heading H3 | [heading font] | SemiBold 600 | 20-24px |
| Body | [body font] | Regular 400 | 14-16px |
| Caption | [body font] | Regular 400 | 11-13px |
| CTA button | [heading font] | Bold 700 | 14-16px |

If the tool does not carry [heading font], use the fallback named in the brand guideline.

Logo:
- Full logo: headers, covers, first slide. Icon only: watermark, story, avatar.
- Default position and clear space: per the brand guideline (commonly 16px).
- Never place the logo over a busy background that muddies it.

Components:
- Primary button: fill [primary color], light text, brand radius, padding 12x24px
- Secondary button: border [primary color], text [primary color], no fill
- Card: light ground, soft shadow, radius 12px, padding 24px

## Element-by-element direction
Text boxes:
| Element | Font | Size | Color | Content (approved) |
|---------|------|------|-------|--------------------|
| Headline | [heading font] Bold | | | "[...]" |
| Subheadline | [heading font] SemiBold | | | "[...]" |
| Body | [body font] Regular | | | "[...]" |
| CTA | [heading font] Bold | | | "[...]" |

Images and visuals:
| Position | Content | Style | Source |
|----------|---------|-------|--------|
| Background | [solid / gradient / photo] | [overlay opacity if any] | [approved stock / upload] |
| Hero image | [description] | [crop style] | [link / upload] |
| Icon set | [line / filled] | [icon color] | [tool library / brand assets] |

Layout grid:
- Outer canvas padding: 40px each edge (desktop) / 24px (mobile-first)
- Element spacing: 16px (tight) / 24px (normal) / 40px (breathing room)
- Text never touches the canvas edge — minimum 24px padding

## Export checklist
- [ ] Format: JPG (static) / PNG (transparency) / PDF (documents)
- [ ] Resolution 2x; color profile RGB for digital — not CMYK
- [ ] File name: [Campaign]_[Channel]_[Size]_[Stage]_[Version]_[Status]
- [ ] Upload folder: /[Brand]/Campaigns/[CampaignName]/Assets/Final/
- [ ] Share a view or comment link with the lead before the final export

## Review
- Draft link shared: [date] — feedback via comments directly in the file
- Max revision rounds: [X] — export the final only after an approving comment

Common production mistakes to avoid

  • Leaving the template's default fonts (Poppins, Montserrat, and similar) instead of the brand fonts.
  • Picking colors outside the palette with the tool's color wheel.
  • Text too small over imagery — below 14px is unreadable on a phone.
  • Too much copy on one frame — cap body text at three or four lines.
  • Forgetting story safe zones: keep important content out of the top and bottom 250px, where platform UI overlays it.
  • Forgetting to rename the file, leaving "Copy of Copy of...".
  • Exporting at 1x when the asset will be viewed on high-density screens.
  • 42-image-brief-global and 43-carousel-brief-global: concept and content brief first; this skill covers production.
  • 41-campaign-asset-list-global: identify the asset and its deadline before opening the tool.
  • 46-brand-guideline-global: source of palette, fonts, logo, and component rules — set the brand kit from it.
  • 50-asset-resize-global: exact canvas sizes and adaptation strategy per channel.
  • 47-design-review-global: review the result after export.

Quality checklist

  • Base stated explicitly (template link / blank / duplicate of X)
  • Tool named, and its brand kit set up with palette, fonts, and logos
  • The six-step operating order is written into the brief
  • Every text box has a font, size, color, and approved content
  • Layout grid, padding, and spacing are specified
  • Export checklist covers format, 2x, RGB, naming, and folder
  • Review happens through comments in the file, with no export before approval
  • No element uses a color or font outside the brand kit
1---
2name: 45-design-tool-brief-global
3description: "Use when a designer needs hands-on production direction inside a tool — Canva, Figma, or Adobe Express: which template to start from, the operating order, element-by-element mapping, grid and spacing, brand kit colors and fonts, export checklist, and the dos and do-nots. Trigger on 'Canva brief', 'Figma brief', 'production direction', 'how do I build this in Canva', 'layout direction for the designer', 'the junior designer needs step by step'. Not for — the creative concept for a static, see `42-image-brief-global`; the concept for a slide sequence, see `43-carousel-brief-global`; the brand rules being applied, see `46-brand-guideline-global`; adapting one master into every size, see `50-asset-resize-global`."
4metadata:
5 version: 1.0.1
6 category: operations
7license: MIT
8triggers:
9 - "design tool brief"
10 - "Canva brief"
11 - "Figma brief"
12 - "production direction"
13 - "layout direction"
14 - "template direction"
15 - "how do I build this in Canva"
16output: "File .md — full production direction: base template, brand system quick reference, element-by-element direction, export checklist. The designer opens the tool and executes on brand."
17related:
18 - product-marketing-context-global
19 - 41-campaign-asset-list-global
20 - 42-image-brief-global
21 - 43-carousel-brief-global
22 - 46-brand-guideline-global
23 - 47-design-review-global
24 - 50-asset-resize-global
25---
26 
27# Design Tool Brief (Global)
28 
29A good production brief means the designer opens the right template, uses the right elements, and never hunts around. Colors, fonts, and logos come from the brand kit inside the tool or from the brand guideline (`46-brand-guideline-global`) — never chosen ad hoc.
30 
31This skill is tool-agnostic. The workflow is the same in **Canva**, **Figma**, or **Adobe Express** — only the terminology differs (Canva Brand Kit / Figma styles and variables / Adobe Express brand). State which tool the team uses at the top of the brief.
32 
33## Information gathering
34 
35Read the brand guideline and the originating brief (`42-image-brief-global` or `43-carousel-brief-global`) if available. If information is missing, ask up to 4 questions:
36 
371. **Design type, tool, and canvas size?** Post, story, carousel, presentation, or email banner — in which tool, at how many pixels?
382. **Where does the designer start?** New file from blank, edit an existing template, or duplicate a previous design (link)?
393. **Is the content ready?** Is the copy approved, and how many variants or sizes are needed?
404. **Deadline and approver?**
41 
42## Principles
43 
441. **No fonts or colors outside the brand kit** unless the lead approves in writing.
452. **No AI-generated imagery in brand content without approval** — use real photography or pre-approved stock.
463. **Share a view or comment link before exporting.** Do not export first and ask for approval after.
474. **Any change after the first approval requires a new approval.**
485. **Never leave a file named "Untitled design"** — apply the naming convention from the start.
496. **Set up the brand kit before designing:** load the palette from the brand guideline, add [heading font] and [body font], and save every logo version.
50 
51## Workflow
52 
53### 1. Identify the base
54 
55State exactly where the designer starts: a link to a brand template, a blank canvas at the correct size, or a duplicate of a specific previous design.
56 
57### 2. Follow the standard operating order
58 
59| Step | Action |
60|------|--------|
61| 1 | Open or create the canvas at the exact channel size (see `50-asset-resize-global`) |
62| 2 | Set the background to [background color] or [light background color] per the brand guideline |
63| 3 | Set accents to [primary color] or [secondary color] |
64| 4 | Swap fonts to [heading font] / [body font] |
65| 5 | Replace the content, preserving hierarchy (H1 largest, body smallest) |
66| 6 | Verify: logo placement correct, colors in palette, text contrast sufficient |
67 
68### 3. Map every element
69 
70Every text box, image placeholder, and color block gets explicit direction in the template below.
71 
72### 4. Export against the checklist
73 
74Format, resolution, color profile, file name, folder — never improvised.
75 
76## Output structure
77 
78File name: `design-tool-brief-[name]-[YYYYMMDD].md`
79 
80```markdown
81# Design Tool Brief — [Design name]
82 
83## Overview
84| Item | Detail |
85|------|--------|
86| Design type | |
87| Tool | Canva / Figma / Adobe Express |
88| Canvas size | |
89| Base | [template link / blank / duplicate of design X] |
90| Variants required | |
91| Deadline | |
92| Approver | |
93 
94## Brand system quick reference (from the brand guideline)
95Colors:
96| Name | Value | Used for |
97|------|-------|----------|
98| Primary | [primary color] | Headings, CTA buttons, dominant grounds |
99| Secondary | [secondary color] | Highlights, accents, standout figures |
100| Background | [background color] | Clean grounds |
101| Text strong | [strong text color] | Body text on light grounds |
102| Text muted | [muted text color] | Subtext, captions |
103| Light surface | [light background color] | Section grounds, cards |
104 
105Typography:
106| Used for | Font | Weight | Suggested size |
107|----------|------|--------|----------------|
108| Heading H1 | [heading font] | Bold 700 | 40-56px |
109| Heading H2 | [heading font] | Bold 700 | 28-36px |
110| Heading H3 | [heading font] | SemiBold 600 | 20-24px |
111| Body | [body font] | Regular 400 | 14-16px |
112| Caption | [body font] | Regular 400 | 11-13px |
113| CTA button | [heading font] | Bold 700 | 14-16px |
114 
115If the tool does not carry [heading font], use the fallback named in the brand guideline.
116 
117Logo:
118- Full logo: headers, covers, first slide. Icon only: watermark, story, avatar.
119- Default position and clear space: per the brand guideline (commonly 16px).
120- Never place the logo over a busy background that muddies it.
121 
122Components:
123- Primary button: fill [primary color], light text, brand radius, padding 12x24px
124- Secondary button: border [primary color], text [primary color], no fill
125- Card: light ground, soft shadow, radius 12px, padding 24px
126 
127## Element-by-element direction
128Text boxes:
129| Element | Font | Size | Color | Content (approved) |
130|---------|------|------|-------|--------------------|
131| Headline | [heading font] Bold | | | "[...]" |
132| Subheadline | [heading font] SemiBold | | | "[...]" |
133| Body | [body font] Regular | | | "[...]" |
134| CTA | [heading font] Bold | | | "[...]" |
135 
136Images and visuals:
137| Position | Content | Style | Source |
138|----------|---------|-------|--------|
139| Background | [solid / gradient / photo] | [overlay opacity if any] | [approved stock / upload] |
140| Hero image | [description] | [crop style] | [link / upload] |
141| Icon set | [line / filled] | [icon color] | [tool library / brand assets] |
142 
143Layout grid:
144- Outer canvas padding: 40px each edge (desktop) / 24px (mobile-first)
145- Element spacing: 16px (tight) / 24px (normal) / 40px (breathing room)
146- Text never touches the canvas edge — minimum 24px padding
147 
148## Export checklist
149- [ ] Format: JPG (static) / PNG (transparency) / PDF (documents)
150- [ ] Resolution 2x; color profile RGB for digital — not CMYK
151- [ ] File name: [Campaign]_[Channel]_[Size]_[Stage]_[Version]_[Status]
152- [ ] Upload folder: /[Brand]/Campaigns/[CampaignName]/Assets/Final/
153- [ ] Share a view or comment link with the lead before the final export
154 
155## Review
156- Draft link shared: [date] — feedback via comments directly in the file
157- Max revision rounds: [X] — export the final only after an approving comment
158```
159 
160## Common production mistakes to avoid
161 
162- Leaving the template's default fonts (Poppins, Montserrat, and similar) instead of the brand fonts.
163- Picking colors outside the palette with the tool's color wheel.
164- Text too small over imagery — below 14px is unreadable on a phone.
165- Too much copy on one frame — cap body text at three or four lines.
166- Forgetting story safe zones: keep important content out of the top and bottom 250px, where platform UI overlays it.
167- Forgetting to rename the file, leaving "Copy of Copy of...".
168- Exporting at 1x when the asset will be viewed on high-density screens.
169 
170## Related skills
171 
172- `42-image-brief-global` and `43-carousel-brief-global`: concept and content brief first; this skill covers production.
173- `41-campaign-asset-list-global`: identify the asset and its deadline before opening the tool.
174- `46-brand-guideline-global`: source of palette, fonts, logo, and component rules — set the brand kit from it.
175- `50-asset-resize-global`: exact canvas sizes and adaptation strategy per channel.
176- `47-design-review-global`: review the result after export.
177 
178## Quality checklist
179 
180- [ ] Base stated explicitly (template link / blank / duplicate of X)
181- [ ] Tool named, and its brand kit set up with palette, fonts, and logos
182- [ ] The six-step operating order is written into the brief
183- [ ] Every text box has a font, size, color, and approved content
184- [ ] Layout grid, padding, and spacing are specified
185- [ ] Export checklist covers format, 2x, RGB, naming, and folder
186- [ ] Review happens through comments in the file, with no export before approval
187- [ ] No element uses a color or font outside the brand kit
188 

Discussion

Alternatives

ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.Design & UI · Apache-2.0Apple designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.Design & UI · MITBuilding AnimationsBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.Design & UI · MITBreakRenders a component you choose in every state and scenario on a temporary page and stress tests it.Design & UI · MIT