<aside> ✔️
Below is a combined Notion workspace outline with three key resources: a refactoring checklist, communication templates, and a Figma AI Scorecard.
</aside>
TEMPLATES
<aside> ✔️
Use this step-by-step audit guide whenever you receive an AI-generated mockup. It ensures the design is cleaned up and aligned with your design system.
</aside>
| CHECKLIST | DESCRIPTION | STATUS |
|---|---|---|
| Audit Design Tokens | Scan the mockup for any hardcoded colors, typography, spacing, etc. Identify and replace all hardcoded values with your canonical design tokens (colors, fonts, spacing tokens, etc.). For example, swap raw hex-colors for their token names and ensure semantic token usage matches your guidelines. | ✅ |
| Replace Placeholders | Replace any dummy content (e.g. “Lorem ipsum” text, generic images/illustrations) with real content or context-appropriate placeholders. Ensure image placeholders have descriptive alt text. | ✘ |
| Rename Layers & Components | Rename frames and layers to meaningful, consistent names (e.g. use component or semantic names rather than “Rectangle 32”). Match your naming conventions for components, variants, and groups. This helps developers recognize which design-system component each element corresponds to. | ✅ |
| Enforce Component Use | Verify that standard components (buttons, cards, etc.) are used instead of ad-hoc copies. If the AI created a custom element, replace it with the nearest approved component. Ensure variants and states are correctly applied. | ✅ |
| Check Accessibility | Perform an accessibility audit. For example, have the AI (or a tool) flag poor color contrast and missing ARIA labels. Manually verify keyboard focus order and that interactive elements are accessible (clear focus indicators, semantic roles, etc.). | ✅ |
| Clean Up Styles | Remove unused or redundant layers, resets, and notes. Organize the file structure (pages/frames) logically. Ensure there are no stray assets or off-screen objects. | ✘ |
| Final Quality Review | Preview the design in different contexts (mobile vs desktop, light/dark mode). Check consistency of spacing, alignment, and brand style. Treat the AI output as a draft and refine any shapes, shadows, or details that look off. | ✅ |
<aside> 🗣️
Use the table below as a discussion starter with your team. It highlights design tasks and notes where AI typically helps versus where human designers are needed. For example, AI can automate routine tasks but cannot replace strategic or ethical judgment.
</aside>
| WORKFLOW AREA | AI/MAKE IMPACT | EFFICIENCY GAIN | MAIN CAVEAT |
|---|---|---|---|
| Idea Generation | Prompts → draft layouts | ✅ Very high (beats blank page) | ⚠️ Drafts are generic, need heavy edit |
| Asset & Component Search | AI-enhanced visual/semantic search | ✅ High (find icons quickly) | ⚠️ Might miss oddly-named/missing assets |
| Copywriting (UI text) | Auto-rewrite & translate | ✅ High (speed up copy edits) | ⚠️ Tone/facts off, needs review |
| Content (Images) | Auto-fill images/placeholders | ✅ Medium (instantly realistic) | ⚠️ Can be irrelevant or bland |
| Prototyping (UX) | One-click interactive flow | ✅ High (fast demos) | ⚠️ Oversimplified interactions |
| Design System Adherence | Paste-your-components hint | ✅ High (ensures consistency) | ⚠️ Only follows if you remember to paste! |
| Layer & File Cleanup | Auto-naming & organizing | ✅ High (keeps things tidy) | ⚠️ Occasional mislabels |
| Developer Handoff | Code scaffolding (Make Code) | ✅ Medium (starter code) | ⚠️ Code may be non-robust / brittle |
| Accessibility & QA | AI offers placeholders only | ⚠️ Low (still manual work) | ⚠️ Misses accessibility cues |
| Team Collaboration | AI encourages experimentation | ✅ Medium (shared drafts) | ⚠️ Expectations gap (“It’s done” vs draft) |
<aside> 💡
Score: Generally, AI shines at rapid mockups, prototyping, and mundane tasks (green icon). It struggles with nuance, systems, and quality control (yellow/red icon).
</aside>