A weekly field report on product design: the new tools, visual ideas and working methods changing how teams make and ship.
Read this week’s argumentPRODUCT DESIGN · AI WORKFLOWS · SYSTEMS · CRAFT
Figma’s agent is now generally available—and a design library can carry Markdown rules, best practices and anti-patterns that the agent reads when that library is in context.
That moves the design-system conversation beyond “which token?” A useful agent brief has to explain what a component is for, what must not change, which states matter, and where the system allows judgement. Tokens supply values; guidance supplies intent.
Figma’s launch story describes teams at Uber, Granola and Atlassian using the agent for component documentation, critique and motion. These are vendor-published customer examples, not independent evidence of broad adoption. Still, the work points to a practical design question: what knowledge currently lives only in a senior designer’s head?
For Phoenix: give one high-impact component a small, reviewable brief: anatomy, content rules, accessibility expectations, failure states, and two explicit anti-patterns. Ask a designer and engineer to try the same task with and without that context.
“With the agent in Figma, skills run where the work already happens.”
Release notes are useful when they change a decision, a handoff or the surface a customer has to understand.
Figma now supports multiple GitHub organizations on one plan. That matters for groups whose design systems and product code sit across separate orgs.
Phoenix angle: map library ownership to the right code repositories before treating a link as a source of truth.
Read the Figma release noteProtoPie’s official MCP release adds browsing of enabled libraries, IDs for targeting specific elements, and React Native in its Code MCP support. Access depends on plan: Core is listed for Pro, while Code MCP and Dev View are Enterprise.
Phoenix angle: keep layer IDs, reusable pieces and real interaction states in the handoff—not just a screenshot and a prompt.
Read ProtoPie’s announcementOpenAI introduced “Intelligent UI” in ChatGPT: answers may combine text, visuals and interactive elements, including diagrams, forms, charts and small task-specific tools. OpenAI says ordinary text remains an option; this is a Chat experience, not a Codex or API release.
Phoenix angle: design the fallback, correction path and accessible explanation as deliberately as the generated interaction.
Read OpenAI’s announcementFigma’s new customer story is promotional, so treat the results as reported examples—not a neutral benchmark. The useful detail is in how each team frames the work.
Figma reports that Uber uses agent skills to expose component anatomy, map colors to tokens and flag hard-coded values across a seven-platform system. The transferable idea: make the spec useful to both the designer reviewing variants and the engineer implementing them.
See the example and its limits
Figma reports that Granola’s designer keeps multiple versions together on the canvas, then uses a connector to attach feedback to the work. The visual lesson: compare alternatives in the same frame of reference before converging.
See the reported workflowAtlassian’s motion team has turned animated illustrations into reusable Figma components. Figma reports the agent can then help tailor easing and duration while keeping the work inside Atlassian’s system variables.
See the motion-system storyEditorial diagram of the live example · each part opens its own explanation
OpenAI’s Intelligent UI demo turns “break down the design of a 7-speed bike” into a selectable explanation of frame, wheels, drivetrain, brakes and cockpit. The useful pattern is not “put everything in a dashboard”; it is that interaction can reveal relationships that a paragraph cannot.
Borrow the principle: offer a small, task-specific interaction alongside a plain-language answer. Keep it optional, keyboard-operable, clear about uncertainty and easy to reset. This is an OpenAI product announcement, not evidence that adaptive interfaces are already the right answer for every product.
Explore OpenAI’s interactive exampleGranola’s team calls its prototype sessions “Taste the Soup.” The name is memorable; the structure is the useful part: show several live directions on the canvas, let teammates try the behaviour, and capture observations where the design will be revised.
Figma says Granola’s designer uses a connector to annotate the canvas with feedback from meeting notes and transcripts. That claim comes from Figma’s customer story. The independent lesson is modest but practical: a prototype review should leave behind decisions, not just a transcript.
PikSpec is a Chrome extension that inspects a page’s styles and exports design references such as tokens, a Tailwind theme or DESIGN.md. Its maker’s current demo shows a Spotify reference brought into Figma through a separate HTML-to-Figma plugin.
Phoenix verdict: useful for studying public references and measuring design decisions. Don’t treat extracted values as permission to copy a brand, its content or its assets.
The new /remotion-video skill in the AI Product Development Toolkit proposes an idea, shows storyboard frames, and waits for approval before rendering a short product video in code.
It reads a project’s copy, logo, colours and fonts; the release says it checks frames, timing and loudness, and avoids inventing claims. Needs Node.js and Python. The public repo has an MIT licence, setup instructions, a demo and a v1.2.0 release; maintenance looks active enough for a small trial, but its workflow claims remain maintainer-reported.
Try it on: a non-sensitive Phoenix service explainer with a storyboard approval before any render. Review the generated copy and sound, and use a sandbox project—the skill reads project files through whichever agent runs it.
Checked 9 Oct · 87 commits and 1k stars on the repository page. Stars show attention, not quality or adoption.
Inspect repo, docs and MIT licenceRules help an agent repeat the intended pattern. Exceptions tell it when not to. A beautifully documented default can still produce a brittle assistance flow if permission denial, stale location or an offline handoff are missing from the brief.
Ask: which Phoenix rule would an agent infer incorrectly from our current library?
Pick one component. Spend 10 minutes writing its “do not infer” cases, then decide who owns that guidance.
A Phoenix Design System exercise for an International SOS assistance flow · use /phoenix-design + /phoenix-content.
Scenario: a traveller requests assistance but declines location permission. Design the next useful step without shaming them, blocking help or pretending you know where they are.
It passes if the traveller can still get help, understand what location is used for, and correct the place without the interface claiming certainty it does not have.
Open the Phoenix Designer Skills field guide
Two posts worth opening.
Current-week social · 3–9 Oct 2026
Only two public visual demos from this week cleared the relevance and verification bar. We’re leaving the rest of the space open instead of recycling posts designers may already have seen.
A site becomes a set of design references.
PikSpec · Reddit demo · 7 Oct
system →
FigmaCreator demo · inspect, don’t clone
The creator demonstrates a design pack imported as editable layers. This is a maker demo, not independent evidence that the extension reliably reconstructs arbitrary sites.
Open the original post ↗Storyboard first; render after approval.
Remotion skill · Reddit demo · 6 Oct
→ frames
→ renderCreator demo · human approval gate
The post shows a video-making skill that asks for a storyboard review before building. The repository release is linked separately above; the Reddit post is a demonstration, not proof of general performance.
Open the original post ↗Dates shown are original post dates. No authenticated X feed or API was used for this issue; direct claims are checked against primary sources wherever possible.