A SynergyMarketing UI/UX designer built a new feature's wireframes, design and prototype in Claude Code instead of Figma
An in-house designer built a new scheduling feature in Claude Code instead of Figma, and reports where design-system fidelity broke down and why.
Done withCCClaude CodeFFigma
In-house designer's own account on the company's design blog (Japanese)
WHAT THEY DID
A UI/UX designer at SynergyMarketing (surname given as 渡瀬), who mainly works on the form feature of the company's marketing SaaS Synergy!, says the wireframes, design and prototype for a new appointment-scheduling feature (アポ調整), released in October 2026, were all made in Claude Code as an experiment, without Figma. The inputs were the existing design system (Figma), existing form-feature comps (Figma) and a screen spec spreadsheet that added which tap leads where.
STEP BY STEP
- Decided, as an experiment, to design the new appointment-scheduling feature in Claude Code without Figma.
- Gave Claude Code the existing design system (Figma), the existing form-feature comps (Figma) and a screen spec spreadsheet describing transitions.
- Built working screens in the early, divergent spec stage so the PM, designer and engineers discussed the same screens.
- Reviewed design-system adherence by eye and iterated with the AI to bring it from about 50–60% to about 90% for usability testing.
HOW IT WENT
The designer reports output speed was as expected and helped compare several options, but the biggest gain was that the PM, designer and engineers looked at the same working screens from the early, open-ended stage. By eye, adherence to the design system was roughly 50–60%; because the HTML was going to be used for usability testing, it had to be raised to about 90%, and that back-and-forth took the most time.
Reported results: Fast output for comparing options; the team shared the same assumptions from the start and spotted mismatches earlier. The company is now moving to a code-based design system with Storybook, and the designer pushes changes to GitHub from a Claude Code environment.
WORTH KNOWING
A dated first-person account with a concrete failure analysis: a popular UI/UX skill kept 'improving' screens the designer had asked to reproduce, and an engineer got much higher fidelity by giving Claude Code the production source code instead of Figma.
TRY IT
- Before asking an AI agent to reproduce existing screens, check which skills or plugins are installed and remove any that push their own design rules.
- Give the agent a screen spec that states what each tap leads to, not just static comps.
- Where you can, point the agent at real component code or a code-based design system (for example Storybook) rather than only design files.
Rates the entry, not the tool.
Source: 渡瀬 (DESIGN101 | SynergyMarketing) · note (DESIGN101 | SynergyMarketing)Open as a page
- Work done: not stated in the source (Exact design dates not stated. The feature was released in October 2026 (stated) and the work was presented in a lightning talk on 30 Sep 2026 (stated); when the design work started is not given.)
- Source published: Nov 5, 2026
- On 4TC: added Nov 12, 2026 · checked Nov 12, 2026
About this source
Type: Documented method · Firsthand report
- デザイナーがClaude Codeでワイヤー・デザイン・プロトタイプを作った話
渡瀬 (DESIGN101 | SynergyMarketing) · note (DESIGN101 | SynergyMarketing) · Published Nov 5, 2026 (Visible byline 2026年11月5日 13:05 (JST); JSON-LD datePublished 2026-11-05T13:05:18+09:00.) · Checked Nov 12, 2026
Primary: the designer's own write-up on SynergyMarketing's DESIGN101 note account (company design blog, ends with a recruiting link). No vendor sponsorship or affiliate tie to Anthropic or Figma found.
Access: Article is in Japanese; claims translated by 4TC.
Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.
Claims and where they come from
- The designer, a SynergyMarketing UI/UX designer who mainly works on the Synergy! form feature, made the wireframes, design and prototype for the appointment-scheduling feature (released October 2026) in Claude Code, without using Figma, as an experiment. (reported) [1]
- The inputs given to the AI were the existing design system (Figma), existing form-feature comps (Figma) and a screen spec spreadsheet. (reported) [1]
- The designer says the biggest gain was not speed but that everyone on the team shared the same assumptions from the early stage of the project. (reported) [1]
- By eye, adherence to the design system was about 50–60%; it had to be raised to about 90% for usability testing, and that took the most time. (reported) [1]
- After an in-house engineer removed the ui-ux-pro-max-skill, output followed the existing design more closely. (reported) [1]
- An in-house engineer built a skill that gives Claude Code the production source code to compose components, and reportedly got much higher fidelity on the first try. (reported) [1]
- The company is moving to a code-based design system using Storybook, and the designer pushes changes to GitHub. (reported) [1]
- The work was presented as a lightning talk at Kansai Frontend Meetup #3 in Osaka on 30 Sep 2026. (reported) [1]
4TC interpretation
Our reading, not something the source says.
The designer's conclusion is that handing an agent Figma files mostly conveyed the look, not the values and structure, while the company's Figma was only partly organized. Two conditions came out of it: keep the design system in a form AI can read, and don't let the AI optimize when you ask it to reproduce existing screens.
Designer impact
Alleged [1]
The designer reports the AI reproduced the existing design system at only about 50–60% by eye, and raising it to about 90% for usability testing was the most time-consuming part; a designer on another project hit the same problem.
- Budget review time for design-system fidelity before using AI-built screens in user tests.
- Use the AI-built screens for early alignment, and fix fidelity against real component code.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.