A complete operation manual compiled by Will (will-ai-note) on "using the Codex Agent to write real designs directly to the Figma canvas via Figma MCP". It covers three parts: ① Environment setup — installing the Figma remote/desktop MCP server for Codex (to grant Codex permission to operate Figma) + installing/managing the official Figma Skill; ② Uses and prompts for seven core skills — figma-use (directly modify the canvas: create Frames/components/variables/Auto Layout), figma-use-slides (generate PPT inner pages), figma-generate-diagram (text → editable flowcharts/sequence diagrams/ER diagrams), figma-generate-design (code/HTML → Figma UI), figma-generate-library (codebase → design system Library), prototype-to-figma (running prototype → frame-by-frame Figma state drafts), Community skills; ③ Combined workflows — two-way sync between code prototypes and Figma, direct interface output from base screenshots, interaction framework → new interface, scanning local SVG icons for automatic semantic matching and replacement. Each section provides the Why/when to use/reusable prompts/pitfalls (e.g., figma-use requires a paid Full/Dev seat, Dev seats can only write in drafts, prototype-to-figma has spacing bugs but can split pages frame by frame). Division of labor with [[newtype-ai-coding]]: that article covers AI Coding tool stack selection and core mindsets, while this article focuses on the concrete implementation down to skills and prompts for the "design/prototype engineering" segment.
A reorganized set of Will's usage notes for Figma Make (Figma's built-in tool that lets you "describe requirements → AI generates runnable prototypes/webpages"), targeted at PMs building AI products who want to produce prototypes quickly. It covers eight major functional modules, each providing "how to use + Why + when to use + pitfalls": ① Basics (three-column interface = chat/preview/code; four input methods = typing/pasting Figma designs/uploading images/clicking the preview to make targeted edits). ② Best practices for writing Prompts and feeding attachments (define the product using a "user capability list" instead of broad category nouns; do layout first then functionality; iterate step by step; use Auto Layout to help AI understand structure; common layouts are more likely to succeed on the first try; desktop version is more stable; never write secret keys in prompts). ③ Templates (publish files with established specifications as templates for the team to copy and remix; use guidelines to lock editable scopes; create/update/unpublish/use; four examples of constraint prompts). ④ Importing Figma design library styles (export the Library as CSS → reference it in Make → UI automatically applies the company's color scheme and fonts). ⑤ Adding Guidelines.md (set rules for AI, including general rules + design system rules + component-level rules; concise and precise rules are better than piling on context). ⑥ Feeding with code files (four types including .tsx/.csv/.json/.html; generate data dashboards with real data; reuse open-source components such as shadcn; real copy typesetting) + a strongly constrained prompt for one-click full-site refactoring to shadcn/ui. ⑦ Adding a backend (connect to Supabase with one sentence to implement login/data storage/secure secret key saving; the judgment mnemonic is "Does this thing need to be remembered?"). ⑧ Publishing (get a figma.site URL with one click, bind a custom domain via TXT+CNAME, upload web fonts, advanced options such as SEO/password protection) + push to GitHub/download code. Division of labor with [[ai-ux-experience-design]]: that article covers "the process methodology of using AI for experience design", while this article is "the functional operation manual for the single tool Figma Make"; it complements the vibecoding mindset in [[ai-vibecoding-design-process]]. The target readers are non-technical PMs, with industry jargon explained in parentheses, and each section includes Why and when to use it.
Google UX Certificate Course 2 (Ideation) + Course 3 (Build Wireframes & Low-Fi Prototypes). Covers design ideation (goal statement formula + HMW + Crazy Eights + 5-step competitive audit) + user flows (4 shapes: circle for action / rectangle for page / diamond for decision / arrow for flow) + storyboards (4 elements + 6 panels + two types: big-picture vs close-up) + fidelity concept + wireframes (paper → digital + reverse engineering exercise + industry standard drawing conventions) + information architecture (IA) (organization/hierarchy/sequence + Dan Brown's 8 principles + sitemap parent-child structure) + Figma basics + Gestalt principles (similarity/proximity/common region/closure/continuity/symmetry) + low-fidelity prototypes (Figma connections + 5 benefits of paper prototypes + mobile-first). Aimed at PMs, clearly explaining the stage "from idea to clickable draft".
17 curated articles from Nielsen Norman Group’s “Organization and Design Process” collection, covering “what actions you take and what you produce during the design process.” Five major themes: ① Discovery Phase — Discovery Mindset (focus on problems rather than solutions, counter Anchoring effect + Confirmation Bias, 3 tactics: Reframe the Goal/Highlight Unknowns and Assumptions/Icebox Favorite Ideas), 7 tips for successful discovery (secure buy-in first/clarify roles and norms/write a problem statement that does not imply solutions/cluster and vote on unknown priorities/timebox to counter planning fallacy, 7-week sample plan: weeks 1–2 framing + weeks 2–4 research + weeks 3–5 analysis + weeks 6–7 opportunities and ideation/all team members participate in research/collaborative analysis and synthesis with How-Might-We), CSD Matrix (Certainties “We know”/Suppositions “We believe” testable/Doubts to be researched, rows grouped by user·business·technology·people·process·status·priority, goal = convert doubts and suppositions into certainties), 4 steps to kick off a new UX project (enter kickoff with a question list/expose information gaps through verbal discussion/schedule based on gaps/pave the way for the future, adapted for Agile + Waterfall); ② Wireframes and Collaborative Sketching — 4 steps to draw wireframes (set aspect ratio 1024x768/1920x1080·navigation and search·largest elements: headings in thick lines, body text in thin lines, images marked with crosses·details: dropdowns, radio buttons, buttons), magic formula to get stakeholders to sketch (thick Sharpie markers + small 8-grid paper + time limit of 5 minutes per sketch + intentionally ugly examples = relaxed sketchers), Promptframes (wireframes + generative AI prompts, replacing lorem ipsum placeholder text, 6 steps: define context, role, organization, goal, tone + write recording prompts + run + collaborate to test and optimize + iterate + manual refinement, 2–3 variants, for internal use only, not for senior leadership); ③ Prototype Fidelity — 7 decision questions for low-fidelity vs. high-fidelity, clickable vs. static prototypes (can all responses be predefined/can it be trialed multiple times/can all issues be fixed/is the design stable/is someone acting as the computer/is page flow the focus/do dynamic changes need to be observed), why test prototypes (save cost/avoid risk/iterate); ④ Design Specs and Deliverables — Dual design spec package (Figma design file: interaction flows·visuals·layout grids·components·real content·accessibility tab order and alt text; Linear development task ticket: goal·scope including inclusions and exclusions·assumptions·success metrics·Figma link·notes) + 4 tips for alignment with developers (invite developers early/leave time for comments/prepare tradeoffs/record and sync updates), 50+ deliverable glossary terms (affinity diagram/antipersona/archetype/CSD matrix/empathy map/experience map/Kano model/MoSCoW/RICE/RACI/service blueprint/persona including proto/qualitative/statistical/prototype/paper prototype/promptframe/sketch test...), most commonly used deliverables (survey of 86 practitioners: static wireframes/interactive prototypes 67%/flowcharts/site maps/usability reports; select by audience: management views interactive prototypes + usability reports + journey maps·clients view interactive prototypes 67% + high-fidelity mockups 47% + competitive analysis 34%·developers view interactive prototypes 63% + flowcharts 55% + style guides 51%); ⑤ Expert Review/Workshops/Storyboards/Surveys — Expert Review (three types: heuristic evaluation/independent design critique/expert review, external perspective is more objective + uncovers blind spots, 5 components: strengths list·issues list·severity high/medium/low·improvement suggestions·best practices, complementary to usability testing, conduct regular reviews every 2–5 years), Workshop Facilitation (4 goals: full and equal participation Diverge-Converge/promote mutual understanding/inclusive collaborative decision-making/shared responsibility, 6 principles: listen·inclusive space·welcome improvisation·authentic and transparent·do not give advice·embrace constructive conflict, toolkit = materials + activities post-up/affinity diagram/forced ranking/role-play/Playback + techniques silence/balancing/connecting), Storyboard (three elements: scenario + visuals + captions, differences from journey maps, 6 steps, low-fidelity sticky notes can be rearranged), In-Process Surveys (4 stages of the design cycle: discover/explore/test/listen, corresponding types for each stage: discovery phase qualitative surveys + stakeholder surveys + diary studies/exploration phase statistical persona surveys + competitor customer surveys/testing phase post-task SEQ single ease question + post-test SUS System Usability Scale 10 items/listening phase NPS 0–10·CSAT 1–5·CES, counterexample = mistakenly thinking surveys are fast and simple). Audience = non-technical product managers, terms explained in-line, decision-oriented (when to use/how to choose/counterexamples), all numbers retained.
