AI workflow · Prompt design · Team kit · 2026

Prompt to Prototype

AI in the design workflow · a Sportster S dashboard case

One motorcycle dashboard, four AI models, and a prompt rewritten until it worked. This is how we chose an AI, how we learned to write for it, and how one long session became a kit the whole team can reuse.

Case: Harley-Davidson Sportster S, 4-inch round TFT dashboard (HMI prototype)
Roles: Shared by all three of us across the whole project: research, model comparison, prompt writing, building the Figma prototype with Claude, testing, and the team prompt kit
Team: Group 2: Julianne Henry, Jingwen Li and Xiaolu Xi
Tools: Claude with the Figma connector, ChatGPT, DeepSeek, Gemini, Figma
Year: 2026

Fig. 01The finished Figma prototype. The dashboard on the left, and a live key panel on the right: black keys work on this screen, grey keys do nothing.

Context

A finished design, waiting to be built

The brief was a live demo: an interactive prototype of the Sportster S dashboard that the audience could watch being driven from a keyboard. We had already done the design work. A Figma page held every screen and overlay in the team’s visual style, and seven logic tables described what every handlebar key does, in every state, with rule IDs we could point at.

What we had not done was build it. Wiring a round dashboard with five pages, nested settings, media keys, calls and warnings means hundreds of frames and more than a thousand links. That is exactly the kind of work where AI can help, as long as the design decisions stay ours.

111
Frames in the final prototype: ~1,300
Interactions wired: 1,488
Link targets, none broken: 19
Spec files the AI worked from

Fig. 02Our source: the "visual elements" page in Figma. Every state frame was cloned from these screens, never redrawn.

Fig. 03The logic we handed over: seven Excel tables, Known Unknowns, Thinking Docs and the brief, 19 files in all.

AI 没有替我们设计仪表，它把我们的设计决定执行到了每一个画面。

“The AI didn’t design the dashboard. It carried our decisions into every one of 111 screens.”

What we took away from the project

Who did what

What we did, and what the AI did

We made every design and every decision. The AI did the building and much of the checking.

Stage	What we did	What the AI did
Before the build	Designed every screen and overlay in Figma in the team’s visual style. Wrote the seven logic tables with rule IDs, Known Unknowns, the Thinking Docs and the brief: 19 files. Designed the D-Pad and Music Control keys and drew the low-fidelity flow.	Nothing yet.
Setting up	Chose the tool (Figma) and the scope of the test. Wrote the prompts. Shared the file as “can edit” with the connector account.	Read all 19 files and asked what was missing: the team name, which items were required, the reference material.
Building	Sent the reference image, the team’s key design and the motion requirements from review.	Cloned our screens into 111 state frames, wired about 1,300 interactions with keyboard triggers and variables, and generated a key panel on every frame from its real interactions.
Checking and fixing	Tested it like a rider. Reported each bug with a screenshot or a screen recording. Told it what to compare against: the real bike.	Checked all 1,488 link targets, compared the logic with Harley-Davidson service info and the video’s captions, found 7 of the 13 problems itself, and worked around Figma’s limits.
Deciding	Decided every conflict between the spec and the bike, what stayed in scope, and when a version was accepted.	Listed conflicts and assumptions for us to decide. It did not decide them.
Afterwards	Ran the same prompt in four models, corrected the write-up’s scope, and turned it into the prompt archive and the team kit.	Drafted the problem-and-fix summary in Chinese and English.

Design and decisions stayed with us

Every screen, rule and key was ours before the session started. When the AI guessed at scope or style, we corrected it; the final say on what to test and which rule won was always ours.

Volume work went to the AI

111 frames, about 1,300 interactions and 1,488 link targets: the work that is slow by hand and easy to get wrong.

Checking was shared

We tested what a rider would feel; the AI checked what a rider would never see: every link, every rule, every frame.

Scope

Scope comes first

Scope is the most important line in any prompt. AI is very good at doing things outside it: more screens, more features, a polished version of something nobody asked for. Each one looks like progress.

01Why build a prototype?

To test it. A prototype is not the product; it is the cheapest thing that can be put in front of people.

02Why test it?

To find out whether the idea is good, before anyone builds the real thing.

03Why find out whether the idea is good?

Because only a good product makes money. A test that catches a bad idea early saves a business mistake later.

04So what is in scope?

Only what the test needs. Anything else, however impressive, costs time the test never gets back.

Where the AI went outside our scope

What we asked	What the AI did	Why it was out of scope
“Build a perfect interactive prototype” (no tool named)	A full HTML prototype with a simulator, an event log and 79 automated tests	The test had to run in Figma, on the team’s own screens. 22 minutes went to something we couldn’t use.
“Make the keyboard our style” (no image)	Guessed a style and removed 10 keys	It decided what the test would show.
“Keep fixing based on the files”	Six fixes against the spec	We meant the video. It picked its own target.
“Fix all the errors as fast as possible”	Eight fixes, chosen by the AI	Useful this time, but the AI, not us, decided what mattered to the test.
“Give me all the problems we ran into”	Started with environment and permission problems	We only wanted the prototype build.

In

Name what the test needs: the screens, keys and states a rider will actually press.

Out

Name what it doesn’t: “no web version,” “no simulator keys on the panel,” “don’t touch the original page.”

Done

Say what the test needs to run: “Home works on every frame; volume can be pressed again and again.”

Before every prompt: what is this prototype testing, and what does it not need?

01 · Which AI

Same prompt, four models

We gave the same task to four models. The prompt was written once, in two versions, and kept as the record of the test. What separated the results was not how “smart” each model was. It was whether the model could reach the place where the work lives.

Model	How it worked	What came back	Best used for
Claude with the Figma connector	Worked inside our Figma file. Cloned frames from the visual page, wired keyboard triggers and variables, and checked every link.	V1: 61 frames in about 5 minutes. V2: 111 frames, about 1,300 interactions, no broken links. Found its own errors against H-D service docs.	Building and checking inside the design file
ChatGPT	Given the same materials, rebuilt the screen set on its own page as named state frames.	90 state frames in the same 1600-wide layout.	A second build to compare against
DeepSeek	Could not open Figma. Returned a single HTML file, a self-check table, and a plugin script to run in Figma’s Scripter.	Clear key-by-screen logic table and a list of assumptions. The visuals drifted: the dashboard shape and the telltale row changed.	Logic review and self-check tables
Gemini	Could not open Figma. Returned an HTML prototype with a key panel.	The layout and key panel worked, but the dashboard lost its RPM ring, bezel and type. It looked like a generic player.	Quick layout drafts

Fig. 04DeepSeek: a working HTML prototype with a full key-by-screen table and an assumptions list. Strong on logic, weaker on fidelity.

Fig. 05Gemini: the key panel landed, but the round dashboard became a generic dark card.

Fig. 06Without Figma access, DeepSeek wrote a script for the Scripter plugin instead. It runs, but every visual has to be redrawn in code.

02 · What each can do

What each AI can and can’t do, what it costs, and where your files go

The test showed which model did best on our task. This part answers the question underneath it: for the work this project actually needed, what can each one do, what can’t it do, what does it cost, and what happens to our files? The rows follow our needs, in the order they mattered.

What we needed	Claude	ChatGPT	DeepSeek	Gemini
Work inside our Figma file	Yes. Its Figma connector reads the file’s data and screens. In our test it built inside the file: cloned our frames, set variables, wired every trigger.	Yes. Its Figma connection reads the file’s data and screens. In our test it rebuilt the screens on its own page instead of reusing ours.	No. It only sees what we describe in the prompt and the images we upload. Its workaround was a Scripter script, with every visual redrawn in code.	No. Same: text descriptions and reference images only. It returned an HTML prototype outside Figma.
Read our 19 files Excel tables, screenshots, a video	Excel, PDFs and screenshots. It also read our screen recording frame by frame. The YouTube reference needed a link and a timestamp.	Excel, PDFs and images. For the video, send stills or a link with the timestamp.	Text from documents and tables, and images (Flash model only). No video.	The widest range: documents, images, audio and video. The one to hand the video to.
Follow the logic tables and check itself	Strongest here. Checked every link and caught its own mistakes against Harley-Davidson service docs.	Kept one consistent layout across 90 frames. We used it as a comparison build, not as a checker.	Good at logic. Wrote a clear key-by-screen table, a self-check and a list of assumptions.	Got the layout and key panel right, but dropped the RPM ring, bezel and type without flagging it.
Leave something the team can edit	Figma frames and variables. Anyone on the team can fix them.	Figma frames, but separate from our original components.	An HTML file and a script. Only someone who reads code can change them.	An HTML file. Same as DeepSeek.
What it can’t do	Work in a file it can’t edit: share it as “can edit” with the connector’s account first. It is also bound by Figma’s own limits (see the kit).	Keep our exact components on its own: in our test it redrew them, so fidelity depended on the redraw.	Reach design tools. With no connector, it can only describe or redraw.	Reach Figma. Working from descriptions and images, it lets the visual style drift.
Plan for one person per month	Pro $20 Max from $100	Plus $20 Go $8 · Pro from $100	Free app	Google AI Pro $20 Ultra from $100
API price per 1M tokens, input / output	Opus 5.5: $4 / $20 Sonnet 5.5: $2 / $10	GPT-6.1 Sol: $2 / $10 GPT-6 Astra: $10 / $50	V4 Pro: ¥9 / ¥27 (about $1.30 / $3.80) V4.1 Flash: ¥2 / ¥8 · half price off-peak	Gemini 3.1 Pro: $2 / $12 Gemini 4 Argon: $2 / $10, rising to $4 / $20 on Dec 1

Cheapest per token isn’t cheapest per job

DeepSeek costs a fraction of the others per token, but its prototype had to be redrawn by hand. What we pay for is a usable result, not tokens.

For a team, the plan matters more than the API

Working in chat, what limits you is the monthly plan and its usage caps. API prices only matter once you automate, for example batch-checking frames.

Split the work by strength

Build with the model that can edit the file. Give the video to Gemini, and the logic review to DeepSeek or a second model.

Memory, other chats and long sessions

A build like ours runs for hours and often spills across several chats. Whether a model remembers earlier work, can look into another chat, and copes with a very long one decides how much we have to repeat.

Question	Claude	ChatGPT	DeepSeek	Gemini
Remembers you across chats	Yes. “Memory from chats” saves topics as you talk. On by default for Free, Pro and Max; Team and Enterprise opt in.	Yes. Saved memories, plus a memory summary that updates as you chat.	No. Every new chat starts blank.	Yes. “Your past chats with Gemini” in Personal context, free since February 2026 (Europe later).
Can it read another chat?	Yes. Chat search finds and cites past chats (Pro and above). Inside a project it only searches that project, and each project keeps its own memory.	Yes. “Reference chat history” draws on past chats. Not yet on Enterprise or Edu.	No. Old chats stay in the sidebar, but it can’t use them. Paste in what it needs.	Yes. With past chats on, it draws on earlier conversations.
A chat that leaves no memory	Incognito chat	Temporary Chat	Not needed: chats don’t carry over	Temporary chat
When a chat gets very long	Compacts itself. On paid plans with code execution on, earlier messages are summarized so the chat keeps going. Early details get less precise.	Slows down and starts forgetting early details. At the limit it stops taking messages, and you start a new chat.	The oldest turns drop out of what it can see. Restate them or start a new chat.	A very large context, but no automatic compaction is documented. Long chats slow down too.

Why long chats slow down

Every new message is read together with everything before it. The longer the chat, the more the model rereads each time, so replies slow down and early details blur.

How to move to a new chat

Ask the old chat for a short summary: decisions, files, open issues. Paste it into a new chat with the spec and the Figma link. Claude does this step itself by compacting.

Memory is not the spec

Memory keeps topics, not your files. In a new chat, attach the spec and the Figma link again, and use an incognito or temporary chat for client work you don’t want remembered.

Privacy: what happens to the project files

Our 19 files were an internal spec, but the same setup would carry a client’s unreleased product. Before anything goes in, it is worth knowing what each AI can see, where it is kept, and whether it can end up in the model.

Question	Claude	ChatGPT	DeepSeek	Gemini
What it can access	Through the Figma connector, every file the connected Figma account can open, and edit rights wherever that account can edit. Plus anything we upload.	The same through its Figma connection: whatever the connected account can open or edit. Plus anything we upload.	Only what we type or upload into the chat.	Only what we type or upload into the chat.
Where it’s kept	Anthropic’s cloud. Chats stay until you delete them, then are removed within 30 days. If you allow training, data can be kept up to 5 years.	OpenAI’s cloud. Chats stay until you delete them, then are removed within 30 days. Temporary chats are kept up to 30 days.	Stored in the People’s Republic of China, for as long as the account exists.	Google’s cloud. Even with Keep Activity off, chats are kept 72 hours; chats picked for human review are kept up to 3 years.
Used to train the model?	Only if you opt in (Free, Pro, Max). Never on Team, Enterprise or the API.	Yes by default on Free, Plus and Pro. Off by default on Business and Enterprise.	Yes by default.	Yes while Keep Activity is on, and some chats are read by human reviewers. Work accounts follow different terms.
How to turn it off	Settings → Privacy → turn off model training.	Settings → Data controls → turn off “Improve the model for everyone,” or use a temporary chat.	Email privacy@deepseek.com. There is no in-app switch; the other option is running the open-weight model locally.	Turn off Keep Activity, or use a work or school account.

Other users can’t see your chats, but training carries them further

No one else can open your conversation. Anything used for training becomes part of what the model learns, though, so a detail from a confidential brief could in rare cases resurface in someone else’s answer. Treat “training on” as handing the material to the company.

A connector carries your whole account

It acts with the connected Figma account’s permissions, not just the one file. Connect with an account that only holds the project, and give “can edit” only for the build.

Our rule for project files

Turn training off before uploading. Keep NDAs, personal data and unreleased product details out of DeepSeek and personal Gemini accounts. For client work, use a business plan.

Test results come from the versions we used during the project. Prices, memory features and privacy terms were checked on October 29, 2026. They change often, and several are already scheduled to change.

03 · How to choose

Choose by where the work lives

From the test we ended up with five questions we now ask before choosing a model for design work. The first one decides most of it.

01Can it reach the work?

A model that can edit the Figma file builds on our real components. A model that cannot will redraw them, and the redraw is where fidelity is lost.

02Can it read everything?

Nineteen files, Excel tables, screenshots and a video. Check that the model accepts all of them, not just the text.

03Can it check itself?

Ask for a self-check table and for sources. The best results came when the AI compared its work to the spec and to the real bike.

04Is the output editable?

Frames and variables in Figma can be fixed by anyone on the team. A one-off HTML file has to be fixed by whoever can read the code.

05Who on the team can use it?

Account, plan, file permissions and privacy rules. A tool only one person can access does not become a team workflow.

Our rule now: build with the model that can work in the file, and ask a second model to review the logic.

04 · How to prompt

Every rebuild came from something we didn’t say

The whole session took 34 short messages. Afterwards we sorted them by stage and marked each one: ✓ worked first time, △ needed follow-up or rework, ✗ produced nothing. Half the stages cost us a rebuild, and each time the cause was the same: a piece of information that was in our heads and not in the message.

Stage	Time	Messages	Result	What was missing
1 · Build the prototype	08:16–08:58	12	△ built twice	Which tool (Figma, not a web page); edit access to the file
2 · Key panel	09:07–09:17	6	△ redone three times	The team’s key design image; which keys to keep
3 · Check the logic	09:25–09:29, 09:46	4	△	What to compare against; the video link
4 · Fix bugs found in testing	09:31–09:44	5	✓	Priority order
5 · Alignment and transitions	09:49–09:54	3	✓	Which layers animate, and how long
6 · Write-up	14:54–15:21	6	△ corrected once	Scope: only the prototype build

How long each prompt took

The log has a timestamp on every message, so we can see how long each prompt took, from sending it to sending the next one. The chart covers the build session, 22 prompts in about 95 minutes. These are not model run times: each bar includes the AI working plus our own reading, testing and typing.

✓ worked first time△ needed follow-up✗ produced nothing

08:16“Hi, we need to finish a task”✗ A question back<1 min

08:16The brief, pasted (bold formatting lost)△ Four questions back1 min

08:1719 files + Figma link: “build a perfect interactive prototype”△ A good HTML prototype, in the wrong format22 min

08:39“Build it straight in Figma” + three links, no edit access△ Stuck on permissions20 min

09:00File shared as “can edit” with the connector account✓ V1: 61 frames5 min

09:07Reference image + the goal (“see the keys while you play”)✓ A key panel on every frame6 min

09:13“Make it our style” (no image)△ A guess2 min

09:15“Left and right hands”△ Unsure what we meant1 min

09:16“Delete the original”✗ Three options back1 min

09:17The team’s key design image✓ Restyled in one pass8 min

09:25“Keep fixing based on the files”△ Six fixes, not the ones we meant3 min

09:28“Check frame by frame against the video” (no video)✗ A question back1 min

09:29“Find it on YouTube yourself”△ Found it, after ads and captions2 min

09:31Screenshot + “Shouldn’t Home always work?”✓ Home rule located1 min

09:32Screenshot + “Why does volume only work once?”✓ Figma limit found and worked around1 min

09:33“Fix all the errors as fast as possible”✓ Eight fixes in one run8 min

09:41“Keep polishing”✓ Call states and overlay key rules3 min

09:44“Home should work everywhere, right?”✓ Home works on all 111 frames2 min

09:46A typo✗ A wrong guess, interrupted<1 min

09:46“Check every key against the real product”✓ Wrong Trip order found3 min

09:49Screen recording + “the overlay is misaligned”✓ Cause found in six seconds<1 min

09:49Review feedback: pages fade in layers✓ Layered transitions5 min

95 min
Build session, 22 prompts: 51 min
Spent on the 7 prompts that needed follow-up: 42 min
Lost to two of them: wrong format, no edit access: ~1 min
Per bug fix with a screenshot or recording

Time taken follows scope, not quality

The long runs, from 5 to 22 minutes, were the prompts that handed over a whole job: build it, restyle it, fix everything. Whether those minutes paid off depended on whether the prompt said where and how.

A fast reply usually means something was missing

The 4 prompts that produced nothing took under 3 minutes in total. Three vague messages in a row (09:13–09:16) got a guess, a half-guess and a question; one design image at 09:17 fixed it.

Wasted time grows with what you leave out

Time taken ≈ the size of the job you hand over. Wasted time ≈ that time × whatever the prompt left out. Leave out the tool or the access, and the whole run is repeated.

Rewriting the first prompt

Stage 1 is the clearest example. Eight messages over forty minutes never said where to build, so the first result was a good web prototype that nobody had asked for. Then we lost twenty minutes to file permissions.

What we sent

"Hi, we need to finish a task."
(pastes the brief; the bold formatting is lost)
"Build a perfect, logic-error-free interactive prototype from the screens we designed on Figma page 3."
"What do you mean? Build it straight in Figma."
"Can't you just connect and build it with these?"
"There's nothing in Figma right now."
"Should you connect and build it?"
(three different file links, tried one after another)

What we should have sent

Task: In Figma, build an interactive prototype of the Harley-Davidson Sportster S 4-inch round TFT dashboard for a live demo.

Tool and access:
- Target file: <Figma edit link>, shared as "can edit" with <connector account>.
- Build on a new page in that file. Do not change the original designs on Page 3.
- No web version.

Visual source: Home, Navigation1, Media, Vehicle, Settings1, Global Navigation - Home, Screen overlays and D-pad affordance examples on Page 3. Clone every state frame from these.

Logic source (19 attached files):
- Key behaviour: Input Routing Matrix, Button Guard Table, List Item Type Overrides.
- States and events: State Transition Table, System Event Table.
- Overlays: Overlay Registry, Overlay Conflict Resolution Rules.
- If they conflict, the Excel tables win. Items still open in Known Unknowns follow the tables as written and are listed.

Input: the keyboard stands in for the handlebar controls. Arrows + Enter = D-pad; H / P / T = Home / Page / Trip; Space and , . - = are the media keys.

Scope: engine running, stopped and riding. No boot animation, no Bluetooth pairing.

Delivery and acceptance:
- Playback starts on the Home frame.
- Every link points to a frame that exists; no broken links.
- When done, list anything that could not be built, and why.

Anatomy of the prompt that worked

For the four-model test we rewrote the brief twice. Version 1 was one dense paragraph. Version 2 split it into four parts (visual style, interaction logic, key panel and transitions, build and acceptance), and the final version added a role, a research step and acceptance tests. These are its parts, in order.

01Role and goal

One line on who the AI is and what “done” means.

02Read first

A Step 0: which pages and files to read, and a short research summary before any building.

03Sources and priority

What wins when sources conflict: the prompt, then the tables, then Figma; the real bike over the tables where we said so.

04Visual spec

Colours, type, sizes and zones as tokens, copied from the design file, not described from memory.

05Logic with IDs

Every rule tagged with its table ID (G11, CR08, E16), so the AI can cite it and we can check it.

06Rules that never break

Four non-negotiables, such as “the telltale zone is never covered.”

07Deliverables

Exact formats, frame names and where to build, plus “output the full code, never ‘same as above’.”

08Acceptance tests

Fourteen tests written as things you can press and watch, not adjectives like “perfect.”

Prompts that worked

What we sent	Why it worked	The pattern
19 spec files + the Figma link, up front	The tables were detailed enough for the AI to follow rule by rule.	Give the full material first, then the request.
A reference image + “I can’t see what was pressed”	The image showed the look; the sentence named the problem.	Send a reference with the problem it solves.
The team’s own key design	One image replaced three rounds of description.	For style, send the design, not words.
Screenshot + “Home should always work, why is it black here?”	A specific frame, a specific key and the expected rule.	“On X, key Y should Z, but it does W.”
Screenshot + “volume only works once”	A repeatable step and a visible symptom led straight to a Figma limit.	Write what you did, then what happened.
Screen recording + “the overlay is misaligned”	The AI found the cause frame by frame in six seconds.	Record anything that moves.
“In the last review we were told pages fade, and the screen is layered”	Context the AI had no way to know.	Pass on what reviewers and the client said.
“Check every key against the real product”	Named the standard, so the AI read H-D service information and found the wrong Trip order.	Say what to compare against.

Two prompts we now reuse as-is

Logic check: report first, change later

Task: check only; add nothing new. Verify what every key does on every frame.

Compare against, in this order:
1. The real product: YouTube video <link>, especially <timestamp>; and Harley-Davidson service information.
2. Our specs: Input Routing Matrix, Button Guard Table.

Scope: D-pad (four directions and OK), Trip, Page, Home and the media keys, on every frame and prompt.

Output: one table with the columns Key · Frame · Prototype now · Real bike · Spec · Match? · Source. Show me the table first; change the prototype only after I confirm.

Conflicts: where the bike and the spec disagree, list them separately; we decide.

Bug report: expected vs actual, in priority order

We found these problems in testing. Please fix them in order (screenshots attached):

Bug 1 (first) Home key
- Where: every frame, especially Home – Odometer and the prompts.
- Expected: Home works on every frame and every prompt and returns to Home (on Home it changes nothing). H shows as active on every key panel.
- Actual: H is inactive on Home and on some prompts.
- Spec to update: Button Guard Table G11.

Bug 2 (first) Volume and skip keys
- Steps: on Home, press "+" twice.
- Expected: each press raises the volume by 1 (0–15), updates the number and the bar, and restarts the 1.5 s timer (CR08). Skip keys likewise, and the title changes.
- Actual: only the first press works.

Then: check every other key against the Input Routing Matrix, the Button Guard Table and the Overlay Conflict Resolution Rules, and list the changes. When done, regenerate every key panel and check that no link is broken.

05 · Team kit

Turning one session into a team habit

A good session is worth little if it lives in one person’s chat history. We turned ours into a kit: the parts below sit in a shared folder, and every new AI task starts from them.

01Prompt template

Nine labelled fields (task, access, sources, references, must have, do not, acceptance, context). Fill it in, send it once.

02Bug report line

One sentence: on this frame, this key should do this, but does that. Screenshot or recording attached.

03Specs with rule IDs

Every table row has an ID (G01–G26, CR01–CR14, E01–E22, LI00–LI12), so prompts, fixes and reviews can all point at the same rule.

04Source priority

Written once and reused: the real product, then the brief, then the tables, then Figma. Anything undecided goes in an assumptions list.

05Figma components

One Key component (Size × State) and a key panel generated from each frame’s real interactions, so the panel can’t drift from the logic.

06Workaround library

The Figma limits we hit and how we got around them, so nobody rediscovers them mid-demo.

07Self-check and acceptance

A key-by-screen table and 14 acceptance tests the AI fills in, and we re-run after every change.

08Prompt archive

Every session logged with ✓ △ ✗ and a rewritten version of each weak prompt. The archive is how the kit improves.

The prompt template

Fill in the brackets, send once

[Task] Build <deliverable, e.g. a keyboard-driven prototype> in <tool / file link>.
[Access] The file is shared as "can edit" with <connector account>.
[Visual source] Use the designs on <page / frame names>. Do not change the originals.
[Logic source] Follow <spec tables>. If they conflict, <which one> wins.
[References] <screenshots / screen recording / YouTube link + timestamp>
[Must have] <e.g. a key panel on every frame; layered fades between pages>
[Do not] <e.g. no web version; no simulator keys on the panel>
[Acceptance] <e.g. Home works on every frame; volume keys can be pressed repeatedly>
[Context] <what the client or reviewers said>

Bug report

On <frame>, pressing <key> should <expected>, but now it <actual>. (Screenshot or screen recording attached.)

Fig. 07The team’s key component: a D-Pad box for the left hand and a Music Control box for the right. Black means the key works on this screen.

Fig. 08Volume on Home: the big speed moves to the top first, so the overlay never covers it.

Fig. 09Incoming call. Only OK (answer), Down (decline), Home and volume stay black. The panel is generated from the frame’s real wiring, so it can’t lie.

Figma limits, and what we did instead

Symptom	Cause	Workaround
Volume worked once, then never again	An overlay can’t reopen itself	Two copies (A and B) that swap on each press, restarting the 1.5 s timer
Volume number and song title never changed	Frames hold fixed text	Text and bar widths bound to variables
A condition inside a condition	Only one level of if/else	Flatten into one level joined with AND
Overlays slid off the dashboard	Overlays centre on the window; tall frames scroll	Every frame 1600 × 720, so nothing scrolls
No long-press trigger	Figma has key down, click and timeout only	Shift+T stands in for holding Trip
Vehicle keys multiplied the frame count	Every cruise and turn state needs its own frames	Kept in the web version; Figma keeps one riding/stopped variable

06 · Avoid

Mistakes worth not repeating

Most of the time we lost came from the same handful of habits. They are easy to repeat because each one feels efficient in the moment.

Mistake	What happened	Instead
Opening with “Hi, we need to finish a task”	A full round trip with no information.	Send the task, the materials and the requirements together.
Never naming the tool	The AI built a web prototype; the job was in Figma.	Name the tool, the file and the page in the first line.
Sharing links before access	Twenty minutes on read-only files and the wrong account.	Share as “can edit” with the connector’s account before starting.
Adjectives instead of tests	“Perfect” and “no logic errors” can’t be checked.	Write what you will press and what should happen.
“Make it our style” with no image	The AI guessed; the design arrived four minutes later.	Attach the design in the same message.
One-word replies: “left and right hands”	Three possible readings.	Say which keys go in which group, and where.
“Delete the old one”	Unclear target; deleting can’t be undone, so the AI had to stop and ask.	Name the object and its location.
“Check it against the video” with no video	The AI searched YouTube, sat through ads, and may not have found the right one.	Paste the link and the timestamp.
“Fix all the errors”	The AI chose the scope, not us.	List the bugs and give a priority.
Trusting our own tables over the product	The Trip order and the Home key were wrong in the spec itself.	Name the real product as the standard, and let the build update the tables.
Marking the key panel by hand	Any wiring change made it lie.	Generate it from the frame’s interactions.
Interrupting a running step	The interrupted step is lost and sometimes redone.	Send a message; the AI adjusts at the next step.

Style problems: send an image. Problems that move: send a recording. Logic problems: write “should” and “actually.”

07 · Fix and check

After the first build: finding and fixing what was wrong

V1 arrived at 09:05 with 61 frames. It looked finished; one click-through showed it wasn’t. Between 09:07 and 09:54 we reviewed it, tested it like a rider, reported problems one at a time and checked every fix. This is the record of what was wrong, who found it, why it happened and how it was fixed.

13
Problems found and fixed after V1: 5
Found by our review and testing: 7
Found by the AI checking its own work: 0
Broken links in V2, out of 1,488

Problem	How it was found	Cause	Fix	Time
No way to see which key was pressed	Our review of V1: reference image + “see the keys while you play”	The brief never asked for it	A live key panel on every frame	09:07
Key panel in the wrong style, with too many keys	Our review: the team’s key design image	The AI guessed the style from words	13 keys in the team’s D-Pad and Music Control layout; black works here, grey does nothing	09:17
Home key didn’t work on every frame	Our testing: screenshot + “Shouldn’t Home always work?”	Home was not wired on Home itself or on several overlays	Home wired on all 111 frames, overlays included	09:31 · 09:44
Volume and skip worked once, values never changed	Our testing: screenshot + “Why does volume only work once?”	A Figma limit: an open overlay can’t open itself again; the text was fixed	Two copies, A and B, swap on each press and restart the 1.5 s timer; volume (0–15) and titles bound to variables	09:32
Overlays covered the big speed on Home	AI self-check against rule NN-2	Overlay placed over the speed area	Switch to the small-speed layout before showing an overlay	09:33–09:44
Riding state always 0 mph in N	AI self-check in the fix and polish runs	Only the parked state had been built	A riding variable: 45 mph in gear 4	09:33–09:44
Map could not zoom	AI self-check in the fix-everything run	↑ / ↓ not wired on the map	Zoom levels 1–5, with no effect past either end	09:33
Ride Modes only switched on and off	AI self-check in the fix-everything run	Custom modes not built	Custom A / B copy the seven settings of another mode	09:33
Some Settings links did nothing	AI self-check in the fix-everything run	Dead links	All wired; brightness (the screen dims), software update and info pages added	09:33
No state after answering a call	AI, in the “keep polishing” run	Call states missing	“On call” tag, music pauses, Play hangs up	09:41
Trip order wrong	AI check against Harley-Davidson service info and the video’s captions	Our own logic table had the wrong order	Odometer → Trip A → Trip B → Range → Temperature, and the table corrected	09:46
Overlays misaligned after scrolling	Our testing: screen recording + “the overlay is misaligned”	Overlays align to the window centre, and the frames were tall enough to scroll	Every frame resized to 1600 × 720, so nothing scrolls	09:49
Instant cuts between pages	Review feedback: pages fade in layers	No transitions set	Pages fade 0.3 s, overlays 0.2 s; the system zone stays still	09:49

The loop we used for every fix

01Test it like a rider

Press the keys in the order a rider would, on every page and overlay, parked and riding. Not just the happy path.

02Report one problem with evidence

One sentence: on this frame, this key should do this, but does that. Add a screenshot, or a screen recording if anything moves.

03Name what it should match

The real bike, the logic table, or the Figma design. “Check against the real product” is what caught the wrong Trip order.

04Check the fix and its neighbours

Re-run the same keys, then the frames around them. A fix to one overlay can break the frame that opens it.

05Write the answer back into the spec

When the bike and our table disagreed, we corrected the table, so the next build starts from the right rule.

Evidence is the fastest fix

Bugs sent with a screenshot were located in about a minute. With a screen recording, the overlay problem was traced in six seconds.

Some bugs were ours, not the AI’s

The wrong Trip order came from our own table. The AI only found it because we told it to compare against the real product, not the spec.

Some bugs were Figma’s

Volume, alignment and nested conditions hit limits of Figma itself. The workarounds are listed in the team kit, so nobody has to find them again.

08 · Result

Version 1 to version 2 in under an hour

	V1 · 09:05	V2 · final
Frames	61	111
Link targets	925	1,488
Frame	613 × 495, dashboard only	1600 × 720, dashboard + key panel
Seeing the keys	Not visible; one key card	Live D-Pad and Music Control panel on every frame, clickable
Home key	Dead on Home	Works on all 111 frames, prompts included
Trip order	Odometer → Temperature → Range → Trip A → Trip B	The bike’s order: Odometer → Trip A → Trip B → Range → Temperature
Volume and skip	Worked once; values fixed	Repeatable; volume 0–15 and titles update live
Overlays on Home	Covered the big speed	Switch to the small-speed layout first
Riding state	Always 0 mph, N	45 mph, gear 4 while riding
Transitions	Instant cuts	Pages fade 0.3 s, overlays 0.2 s; the system zone stays still

Final test: with AI vs by hand

For the final test we set the AI build against the same job done by hand in Figma. The AI side is measured from the session log. The by-hand side is estimated from the work counts in the finished file, at typical speeds for an experienced Figma user.

~13×
Faster: ~10×
Cheaper: 95 min
Our whole build session with AI, people included: ~21 h
Estimated by hand

	With AI (Claude + Figma connector)	By hand in Figma
Time	~95 min of clock time for the whole build session, from our first message to V2. That is not the model’s run time: it includes the AI working plus our reading, testing in Figma and writing each next prompt. V1 arrived about 5 min after the file was shared.	~21 hours, about two and a half working days
People	One designer directing, reviewing and testing	One designer doing every step
Cost	~$83: 95 min of designer time at $40/h, plus a $20/month plan	~$840: 21 h at $40/h
Checking	Every link checked automatically; logic compared against Harley-Davidson service docs	A manual click-through, where a wrong link among 1,488 is easy to miss
Later changes	A new rule is one message; the AI rewires the affected frames	Every affected frame rewired by hand

How we estimated the by-hand time

Task	Volume	Rate	Time
Build state frames from the visual page	111 frames	~3 min each	~5.5 h
Wire key triggers and variables	~1,300 interactions	~20 s each	~7.2 h
Draw a key panel for each frame	111 panels	~2 min each	~3.7 h
Check link targets against the tables	1,488 targets	~5 s each	~2.1 h
Fix and re-test	—	—	~2.0 h
Total			~21 h

The 95 minutes are measured from the session log, from the first message (08:16) to V2 (about 09:54), and cover people and AI together. The by-hand figures are an estimate, not a timed run. Designer time is costed at $40 an hour. Neither side counts the design work done before the build (the screens, the logic tables and the 19 files), which is the same either way, or the write-up afterwards.

Fig. 10All state frames on one page, each with its own key panel.

Fig. 11The team’s low-fidelity flow prototype. The AI build followed the same map at full fidelity.

Agree on the format first

Saying “Figma, not web” and showing the key panel up front would have saved a full rebuild.

Generate, don’t hand-mark

Anything derived from the logic should be produced from the logic.

Check against the real thing

Two of our worst bugs were in our own spec, and only the real bike exposed them.

Let the build fix the spec

Six conflicts between our documents surfaced while building. They now flow back into the tables.

Know the tool’s limits early

Long press, reopening overlays, positioning and nested conditions all need a plan before the prompt.

Keep the decisions human

The AI was fastest when every design choice was already made and written down.

09 · Next

Versions, two ideas, two ways to build, and quality control

The prototype works. These are the things we are adding so the next build is easier to hand over, and the next test is fairer.

Every version gets a time, a place and a number

During the session the versions only lived in the chat. This is what we had, and how each version will be saved from now on.

Version	When	Where	What it is
V0	Oct 27, 2026 · ~08:39	An HTML file in the chat	A web prototype with a simulator and 79 tests. Not used: the test had to run in Figma.
V1	Oct 27, 2026 · 09:05	Our Figma file, “HMI Prototype” page	61 frames, 925 link targets
V2	Oct 27, 2026 · ~09:54	The same page, updated in place	111 frames, 1,488 link targets, key panels and layered transitions

Version name: number · date and time · place · how it was built · size

V2 · 2026-10-27 09:54 · HMI Prototype page · built with Claude · 111 frames

01Save it in Figma’s version history

Each time a version is accepted, save it under the name above, so any earlier state can be restored.

02Put a version card on the first frame

Version number, date and time, who built it, and what changed since the last one.

03Keep a one-line change log

One line per version in the shared folder, linked to the prompt that produced it.

Two ideas for the next build

Show each transition’s effect on screen

When the prototype changes page, a small caption appears in the corner: “Page → Media · fade 0.3 s · system zone stays still.” Engineers read the motion spec while they watch, instead of guessing it from the animation.

Link every frame to what it was based on

Each frame carries a note with its sources: the Figma screen it was cloned from and the rule IDs it follows (G11, CR08), each as a link. When a reviewer questions a behaviour, the answer is one click away.

Two ways to build, side by side

This time we generated the whole prototype at once and fixed it afterwards. Next time we will build the same thing step by step, confirming each step before moving on, and compare the two.

	All at once, then fix	Step by step, confirming each step
How it works	One prompt builds every screen. Testing and fixes come after.	Build one part (say, Home and its keys), check it, then move on to the next.
This project	V1 in about 5 minutes, then 13 problems fixed over the next ~50 minutes	Our next test
Good for	Seeing the whole thing fast, and finding gaps in the brief early	Complex logic, where one early mistake would be copied into every frame
Risk	A mistake spreads to every frame before anyone checks (Home, volume, Trip order)	Slower to a first full version, and more messages
What we’ll measure	Time to a passing build, number of fixes, broken links	The same three, so the two can be compared fairly

Quality control: three checks before a version is accepted

Quality control asks one question: does the prototype do what the spec and the real bike say, on every frame? “It looks right” is not an answer, so we split it into three checks that each end in a pass or a fail. The AI runs the checks; we review what it flags.

Check	What it checks	Who does it	Passes when
1 · Accuracy	Every key on every frame, against the logic tables and the real bike, in a key-by-screen table	The building AI fills the table in; a person spot-checks it	Every row matches, or the mismatch is listed and we decide
2 · AI score	The whole build, scored against a fixed rubric by a model that didn’t build it	A second AI, e.g. DeepSeek for logic or Gemini for the video	Every item scores 4 of 5 or higher; anything lower comes with a reason
3 · Checklist	The fixed checklist below, item by item, on every frame	The AI: we hand it the list and it checks the build against each item	Every item marked Pass, with the frames it checked; we review every Fail

The AI score uses the same five-point rubric every time, so versions can be compared:

Rubric item	Scores 5 when
Logic	Every key does what the tables and the real bike say
Visual fidelity	Screens match our Figma design: RPM ring, bezel, type, telltales
Coverage	Every page and overlay, parked and riding
Links	No broken links and no dead ends
Readable for engineers	Key panel, transition captions and source links on every frame

Checklist we give the AI, built from what went wrong this time

☐ Home works on every frame, overlays included
☐ Volume and skip can be pressed again and again; numbers and titles change
☐ Trip order matches the bike: Odometer → Trip A → Trip B → Range → Temperature
☐ No overlay covers the speed (NN-2)
☐ Parked (0 mph, N) and riding (45 mph, 4) states both exist
☐ Overlays line up with the dashboard; no frame scrolls
☐ Pages fade 0.3 s, overlays 0.2 s; the system zone stays still
☐ Every key panel matches its frame’s real interactions
☐ Zero broken links
☐ Version card filled in; change log updated

Prompt we send with the checklist

Check the prototype against this checklist. For each item, answer Pass or Fail, list the frames you checked, and give the evidence: the frame name, or the link that fails. Report first; don’t fix anything until we confirm.

AI scores and AI checks are flags, not verdicts. They tell us where to look; a person decides whether the version passes.

Credits

Project: Sportster S HMI prototype by Group 2: Julianne Henry, Jingwen Li and Xiaolu Xi
Design and specs: Group 2: visual system, HMI zoning, physical-control mapping and the seven logic tables
AI workflow: All of Group 2, together: research, model comparison, prompts, Figma build with Claude, testing, prompt archive and team kit
References: Harley-Davidson service information and owner’s manual; Sportster S infotainment tutorial video
Year: 2026

AI 工作流 · 提示词设计 · 团队工具包 · 2026

从提示词到原型

AI 如何融入设计工作流 · 以 Sportster S 仪表界面为例

一个摩托车仪表、四个 AI 模型、一段改了又改才好用的提示词。这里记录我们怎样选 AI、怎样给 AI 写需求，以及怎样把一次长对话变成整个团队都能复用的工具包。

案例: Harley-Davidson Sportster S 4 英寸圆形 TFT 仪表（HMI 交互原型）
分工: 三人共同完成全程：研究、模型对比、提示词撰写、用 Claude 搭建 Figma 原型、测试，以及团队提示词工具包
团队: Group 2：Julianne Henry、Jingwen Li、Xiaolu Xi
工具: Claude（Figma 连接器）、ChatGPT、DeepSeek、Gemini、Figma
年份: 2026

Fig. 01最终的 Figma 原型。左边是仪表，右边是实时按键面板：黑色键在当前画面可以按，灰色键按了没有反应。

背景

设计已经完成，等着被搭出来

任务是一次现场演示：做一个 Sportster S 仪表的可交互原型，用键盘操作，观众要能看懂每一步。设计工作我们已经做完了。Figma 里有按小组视觉风格画好的所有画面和悬浮层，七张逻辑表写清了每个车把按键在每种状态下的行为，每条规则都有编号。

还没做的是“搭”。一个有五个页面、多层设置、媒体键、来电和警告的圆形仪表，要几百个画面、上千条连线。这正是 AI 能帮上忙的地方，前提是设计决定始终由我们来做。

111
最终原型的画面数: ~1,300
交互连线: 1,488
跳转目标，零断链: 19
AI 依据的规格文件

Fig. 02视觉来源：Figma 里的 visual elements 页面。所有状态画面都从这些画面复制生成，没有重画。

Fig. 03交给 AI 的逻辑依据：七张 Excel 表、Known Unknowns、思考文档和任务说明，共 19 个文件。

AI 没有替我们设计仪表，它把我们的设计决定执行到了每一个画面。

“The AI didn’t design the dashboard. It carried our decisions into every one of 111 screens.”

这个项目留给我们的结论

分工

我们做了什么，AI 做了什么

所有的设计和决定都是我们做的。搭建和大部分检查交给了 AI。

阶段	我们做了什么	AI 做了什么
搭建之前	在 Figma 里按小组视觉风格设计了所有画面和弹窗；写了带规则编号的七张逻辑表、Known Unknowns、思考文档和任务说明，共 19 个文件；设计了 D-Pad 和 Music Control 按键，画了低保真流程图。	还没有参与。
准备	选定工具（Figma）和测试范围；写提示词；把文件以 can edit 分享给连接器账号。	读完 19 个文件，并追问缺的信息：队名、哪些是必须项、参考资料。
搭建	提供参考图、小组的按键设计，以及评审对动效的要求。	把我们的画面复制成 111 个状态画面，用键盘触发和变量连好约 1,300 条交互，并按每个画面的实际交互生成按键面板。
检查和修复	像骑手一样测试；每个 bug 都附截图或录屏；告诉它要对照什么：真车。	检查全部 1,488 个跳转目标；对照 Harley-Davidson 官方资料和视频字幕核对逻辑；13 个问题里有 7 个是它自己发现的；绕开 Figma 的限制。
做决定	规格和真车冲突时以谁为准、什么在范围内、哪个版本算通过，全部由我们决定。	把冲突和假设列出来交给我们决定，自己不做决定。
之后	用同一段提示词测试了四个模型；纠正了总结的范围，并整理成提示词档案和团队工具包。	起草了中英双语的问题与解决办法总结。

设计和决定留在我们手里

每一个画面、每一条规则、每一个按键，在对话开始之前就已经是我们的。AI 猜测范围或样式时，都由我们纠正；测试什么、哪条规则优先，最终都是我们说了算。

大量重复的工作交给 AI

111 个画面、约 1,300 条交互、1,488 个跳转目标：这些手工做很慢、又容易出错。

检查是分工合作的

我们测骑手能感受到的；AI 查骑手永远看不到的：每一条连线、每一条规则、每一个画面。

范围

范围是第一位的

范围是提示词里最重要的一句。AI 很擅长做范围之外的事：多做几个画面、多加几个功能、把没人要的东西做得更精致。每一件看起来都像是进展。

01为什么要做原型？

为了测试。原型不是产品，它是能放到用户面前的最便宜的东西。

02为什么要测试？

为了确认这个 idea 是好的，在任何人动手做真正的产品之前。

03为什么要确认 idea 是好的？

因为只有好的产品才能盈利。测试早一点发现坏的 idea，就能省下之后的商业错误。

04所以范围是什么？

只做测试需要的东西。其他的，不管看起来多厉害，都是在花测试拿不回来的时间。

这次 AI 在哪些地方越出了范围

我们说的	AI 做的	为什么超出了范围
「搭建一个完美的可交互原型」（没说用什么工具）	一个完整的 HTML 原型，带模拟器、事件日志和 79 项自动测试	测试必须在 Figma 里、用小组自己的画面进行。22 分钟花在了用不上的东西上。
「把键盘变成我们的样式」（没附图）	自己猜了一个样式，还删掉了 10 个键	它替我们决定了测试要展示什么。
「根据文件继续纠错」	对照规格修了 6 项	我们指的是视频，它自己选了对照目标。
「尽快修复所有错误」	修了 8 项，由 AI 自己挑	这次结果有用，但决定什么对测试重要的是 AI，不是我们。
「给我我们遇到的所有问题」	先写了环境和权限问题	我们只要搭原型过程中的问题。

做什么

写清测试需要什么：骑手真正会按到的画面、按键和状态。

不做什么

写清不需要什么：「不要网页版」「面板上不要模拟键」「不要动原来的页面」。

做到什么算完成

写清测试能跑起来的标准：「Home 键在每个画面都能用；音量键可以连按」。

每写一条提示词之前先问：这个原型要测试什么？哪些是它不需要的？

01 · 选哪个 AI

同一段提示词，四个模型

我们把同一个任务交给了四个模型。提示词写了两版，留作这次测试的记录。拉开差距的不是哪个模型更“聪明”，而是模型能不能进到工作真正发生的地方。

模型	工作方式	交回了什么	适合做什么
Claude 通过 Figma 连接器	直接在我们的 Figma 文件里工作：从视觉页复制画面、绑定键盘触发和变量、检查每一条连线。	V1：约 5 分钟 61 个画面。V2：111 个画面、约 1,300 条交互、零断链。能对照 H-D 官方资料自己找出错误。	在设计文件里搭建和校验
ChatGPT	用同样的材料，在自己的页面上重建了一套命名好的状态画面。	90 个状态画面，同样的 1600 宽布局。	做第二个版本对照
DeepSeek	无法打开 Figma。交回一个 HTML 文件、一张自查表，以及一段在 Figma Scripter 插件里运行的脚本。	按键 × 画面的逻辑表很清楚，也列了假设。但视觉走样：仪表外形和警示灯一栏都变了。	逻辑复核、自查表
Gemini	无法打开 Figma。交回一个带按键面板的 HTML 原型。	布局和按键面板可用，但仪表丢了转速圈、表圈和字体，看起来像一个普通播放器。	快速出布局草稿

Fig. 04DeepSeek：能运行的 HTML 原型，附完整的按键 × 画面表和假设清单。逻辑强，还原度弱。

Fig. 05Gemini：按键面板做出来了，但圆形仪表变成了一张普通的深色卡片。

Fig. 06没有 Figma 权限时，DeepSeek 改写了一段 Scripter 插件脚本。脚本能跑，但每个视觉元素都要用代码重画。

02 · 能力边界

每个 AI 能做什么、做不到什么、花多少钱、文件去了哪里

测试回答的是“谁在我们的任务上做得最好”。这一部分回答它背后的问题：就这个项目真正需要的工作而言，每个模型能做什么、做不到什么、要花多少钱、我们的文件会怎样？表格的行按我们的需求排列，越靠前越重要。

我们需要的	Claude	ChatGPT	DeepSeek	Gemini
在我们的 Figma 文件里工作	能。Figma 连接器能读取文件里的数据和界面设计图。测试中它直接在文件里搭建：复制画面、设置变量、连好每一个触发。	能。通过 Figma 连接读取文件里的数据和界面设计图。测试中它在自己的页面上重画了一套，没有复用我们的画面。	不能。只能靠提示词里的视觉描述和上传的图片。替代办法是一段 Scripter 脚本，所有视觉都要用代码重画。	不能。同样只能靠文字描述和参考图片，交回的是 Figma 之外的 HTML 原型。
读完我们的 19 个文件 Excel 表、截图、一段视频	Excel、PDF、截图都能读，录屏也能逐帧看。YouTube 参考视频需要给链接和时间点。	Excel、PDF、图片都能读。视频要给截图，或链接加时间点。	能读文档和表格里的文字，以及图片（仅 Flash 模型）。不能读视频。	能读的类型最多：文档、图片、音频和视频。视频交给它最合适。
照逻辑表搭建并自查	这方面最强。逐条检查连线，还能对照 Harley-Davidson 官方资料找出自己的错误。	90 个画面布局一致。我们拿它做对照版本，而不是校验。	逻辑强。给出清楚的按键 × 画面表、自查表和假设清单。	布局和按键面板做对了，但丢了转速圈、表圈和字体，而且没有提示。
留下团队能改的成果	Figma 画面和变量，组里谁都能改。	Figma 画面，但和我们原来的组件是分开的。	一个 HTML 文件加一段脚本，只有看得懂代码的人能改。	一个 HTML 文件，和 DeepSeek 一样。
做不到什么	没有编辑权限的文件进不去：要先以 can edit 分享给连接器账号。也受 Figma 本身的限制（见工具包）。	自动保留我们原来的组件：测试中它是重画的，还原度取决于重画得好不好。	接入设计工具。没有连接器，只能描述或重画。	进入 Figma。只靠描述和图片，视觉风格容易走样。
个人套餐每月	Pro $20 Max $100 起	Plus $20 Go $8 · Pro $100 起	App 免费	Google AI Pro $20 Ultra $100 起
API 价格每百万 tokens，输入 / 输出	Opus 5.5：$4 / $20 Sonnet 5.5：$2 / $10	GPT-6.1 Sol：$2 / $10 GPT-6 Astra：$10 / $50	V4 Pro：¥9 / ¥27（高峰） V4.1 Flash：¥2 / ¥8 · 空闲时段半价	Gemini 3.1 Pro：$2 / $12 Gemini 4 Argon：$2 / $10，12 月 1 日起 $4 / $20

按 token 最便宜，不等于整件事最便宜

DeepSeek 每个 token 的价格只有别人的几分之一，但它的原型要手工重画。我们买的是能用的结果，不是 token。

对团队来说，套餐比 API 更重要

在对话里工作时，真正的限制是月度套餐和用量上限。只有做自动化（比如批量检查画面）时，API 价格才重要。

按长处分工

用能编辑文件的模型搭建；视频交给 Gemini；逻辑复核交给 DeepSeek 或另一个模型。

记忆、跨窗口与长对话

像我们这样的搭建一做就是几个小时，常常要分好几个对话。模型记不记得之前的工作、能不能读取另一个窗口的内容、对话很长时会怎样，决定了我们要重复多少遍。

问题	Claude	ChatGPT	DeepSeek	Gemini
跨对话记住你	会。「Memory from chats」会在对话中保存主题。Free、Pro、Max 默认开启；Team 和 Enterprise 需要主动开启。	会。保存的记忆，加上一份随对话自动更新的记忆摘要。	不会。每个新对话都从零开始。	会。「个人背景」里的「你和 Gemini 的过往对话」，2026 年 2 月起免费用户也能用（欧洲稍后）。
能不能读取另一个窗口的内容	能。对话搜索可以找到并引用过去的对话（Pro 及以上）。在项目里只搜这个项目的对话，每个项目也有自己独立的记忆。	能。「参考聊天记录」会用到过去的对话。Enterprise 和 Edu 暂不支持。	不能。旧对话留在侧边栏里，但它用不上，需要的内容得自己粘贴进去。	能。开启过往对话后，会参考之前的对话。
不留记忆的对话	无痕对话（Incognito）	临时对话（Temporary Chat）	不需要：对话之间本来就不互通	临时对话
对话变得很长时	自动压缩。付费套餐开启代码执行时，会把前面的内容自动总结，对话可以继续下去；早期的细节会变得不那么精确。	会变慢，开始忘记前面的细节；到上限后不能再发消息，只能开新对话。	最早的内容会从它能看到的范围里掉出去，需要重新说明，或者开新对话。	上下文很大，但没有公开的自动压缩功能，对话太长同样会变慢。

为什么对话越长越慢

每发一条新消息，模型都要连同前面所有的内容一起读。对话越长，每次要重读的就越多，回复变慢，早期的细节也会变模糊。

怎么换到新窗口

先让旧对话写一份简短的总结：做了哪些决定、用了哪些文件、还有哪些问题没解决。把总结连同规格文件和 Figma 链接一起发到新对话里。Claude 会通过自动压缩自己完成这一步。

记忆不等于规格

记忆保存的是主题，不是你的文件。在新对话里要重新附上规格和 Figma 链接；不希望被记住的客户项目，用无痕或临时对话。

隐私：项目文件进去之后会怎样

我们这 19 个文件是内部规格，但同样的流程，换成客户还没发布的产品也一样会用。上传之前，值得先弄清楚：每个 AI 能看到什么、数据存在哪里、会不会进到模型里。

问题	Claude	ChatGPT	DeepSeek	Gemini
能看到什么	通过 Figma 连接器，能打开已连接 Figma 账号能打开的所有文件，并在该账号有编辑权限的地方编辑。再加上我们上传的内容。	通过 Figma 连接同样如此：已连接账号能打开、能编辑的都能。再加上我们上传的内容。	只有我们在对话里输入或上传的内容。	只有我们在对话里输入或上传的内容。
数据存在哪里、存多久	Anthropic 云端。对话保留到你删除为止，删除后 30 天内清除；如果允许用于训练，数据最长保存 5 年。	OpenAI 云端。对话保留到你删除为止，删除后 30 天内清除；临时对话最多保留 30 天。	存储在中华人民共和国境内，账号存在期间一直保留。	Google 云端。即使关闭 Keep Activity，对话也会保留 72 小时；被抽中人工审核的对话最多保留 3 年。
会不会被拿去训练	只有你主动同意才会（Free、Pro、Max）。Team、Enterprise 和 API 一律不会。	Free、Plus、Pro 默认会。Business 和 Enterprise 默认不会。	默认会。	Keep Activity 开着就会，部分对话还会由人工审核员阅读。工作账号适用另一套条款。
怎么关掉	设置 → 隐私 → 关闭模型训练。	设置 → 数据控制 → 关闭“为所有人改进模型”，或使用临时对话。	发邮件到 privacy@deepseek.com 申请，App 里没有开关；另一个办法是在本地运行开源模型。	关闭 Keep Activity，或使用工作 / 学校账号。

别人看不到你的对话，但训练会让它走得更远

其他用户打不开你的对话。但被用于训练的内容会成为模型学到的一部分，保密资料里的细节在极少数情况下可能出现在别人的回答里。“允许训练”就等于把材料交给了这家公司。

连接器带着的是整个账号

它用的是已连接 Figma 账号的权限，不只是这一个文件。最好用只放了这个项目的账号连接，并且只在搭建期间给 can edit。

我们处理项目文件的规矩

上传前先关掉训练。保密协议内容、个人信息和未发布的产品细节，不放进 DeepSeek 和个人 Gemini 账号。客户项目用企业版套餐。

测试结果来自项目期间使用的版本。价格、记忆功能和隐私条款均于 2026 年 10 月 29 日核对，变化很快，其中几项已经公布了调价日期。

03 · 怎么选

按“工作在哪里”来选模型

测试之后，我们总结出选模型做设计工作前要问的五个问题。第一个问题基本决定了结果。

01它能进到工作的地方吗？

能编辑 Figma 文件的模型，用的是我们真实的组件；不能的，只能重画，还原度就是在重画时丢掉的。

02它能读完所有材料吗？

19 个文件、Excel 表、截图和一段视频。要确认模型全都能读，而不只是文字。

03它能自己检查吗？

要求它给出自查表和依据来源。效果最好的时候，都是 AI 把成果和规格、和真车逐条对照。

04产出能改吗？

Figma 里的画面和变量，团队谁都能改；一次性的 HTML 文件，只有看得懂代码的人能改。

05团队里谁能用？

账号、套餐、文件权限和隐私规定。只有一个人能用的工具，成不了团队流程。

现在我们的做法是：用能直接在文件里工作的模型搭建，再请另一个模型复核逻辑。

04 · 怎么写提示词

每一次返工，都来自一句没说出口的话

整个过程一共发了 34 条零碎消息。事后我们按阶段整理，并给每条打标：✓ 一次到位，△ 需要追问或返工，✗ 没有产出。一半的阶段都返工过，原因每次都一样：有一条信息在我们脑子里，却不在消息里。

阶段	时间	消息数	效果	最关键的缺失信息
1 · 搭建原型	08:16–08:58	12	△ 做了两遍	交付工具（Figma，不是网页）；文件编辑权限
2 · 按键面板	09:07–09:17	6	△ 改了三次	小组的按键设计图；保留哪些键
3 · 逻辑校验	09:25–09:29、09:46	4	△	对照标准；视频链接
4 · 修复测试发现的 bug	09:31–09:44	5	✓	修复优先级
5 · 对齐与切换效果	09:49–09:54	3	✓	哪些层参与动画、时长多少
6 · 文档整理	14:54–15:21	6	△ 纠偏一次	范围：只算搭原型的部分

每段提示词用了多久

对话记录里每条消息都有时间戳，所以能算出每段提示词从发出到我们发下一条之间用了多久。下图是搭建阶段的 22 条提示词，共约 95 分钟。这不是模型的运行时间：每一段都包括 AI 工作，也包括我们自己看结果、测试和打字的时间。

✓ 一次到位△ 需要追问或返工✗ 没有产出

08:16「你好，我们现在需要完成一项任务」✗ 只能反问<1 分钟

08:16粘贴任务说明（加粗丢失）△ 反问了 4 个问题1 分钟

08:1719 个文件 + Figma 链接：「搭建一个完美的可交互原型」△ 做出一个不错的 HTML 原型，但形式不对22 分钟

08:39「直接在 Figma 搭建啊」+ 三个链接，没有编辑权限△ 卡在权限上20 分钟

09:00以 can edit 分享给连接器账号✓ V1：61 个画面5 分钟

09:07参考图 + 目标（「用键盘操作也能看到按键」）✓ 每个画面都加了按键面板6 分钟

09:13「把键盘变成我们的样式」（没附图）△ 只能猜2 分钟

09:15「左右手」△ 不确定理解对没有1 分钟

09:16「删掉原来的」✗ 反问了 3 个选项1 分钟

09:17小组的按键设计图✓ 一次改对8 分钟

09:25「根据文件继续纠错」△ 修了 6 项，但不是我们想要的3 分钟

09:28「根据视频逐帧判断」（没附视频）✗ 只能反问1 分钟

09:29「YouTube 自己找」△ 找到了，但耗在广告和字幕上2 分钟

09:31截图 +「Home 键不是任何时候都能用吗」✓ 定位到 Home 规则1 分钟

09:32截图 +「音量键为什么只能按一次」✓ 找到 Figma 限制并绕开1 分钟

09:33「尽快修复所有错误」✓ 一次修了 8 项8 分钟

09:41「继续 polish 纠错」✓ 加了通话状态和弹窗按键规则3 分钟

09:44「Home 键应该全都能按吧」✓ 111 个画面全部可用2 分钟

09:46一条打错字的消息✗ 猜错了，被打断<1 分钟

09:46「对照真车检查每个按键」✓ 发现 Trip 顺序错了3 分钟

09:49录屏 +「悬浮页面错位了吧」✓ 6 秒找到原因<1 分钟

09:49评审意见：page 是分层渐变的✓ 加上分层渐变5 分钟

95 分钟
搭建阶段，22 条提示词: 51 分钟
花在 7 条需要追问的提示词上: 42 分钟
其中两条就占了：形式不对、没有编辑权限: 约 1 分钟
附截图或录屏时，每修一个 bug 的时间

用时取决于任务大小，而不是提示词好坏

跑得久的（5 到 22 分钟）都是交出一整件事的提示词：搭建、换样式、全部修复。这些时间值不值，要看提示词有没有说清在哪里做、怎么做。

回得快，往往是缺了什么

没有产出的 4 条提示词加起来不到 3 分钟。09:13–09:16 连续三条模糊的消息，换来猜测和反问；09:17 发出一张设计图就解决了。

浪费的时间，跟漏掉的信息成正比

用时 ≈ 交出去的任务有多大；浪费的时间 ≈ 这段用时 × 提示词漏掉的东西。漏掉工具或权限，整段就得重跑。

重写第一条提示词

阶段 1 是最典型的例子。八条消息、四十分钟，始终没说“在哪里做”，于是第一个成果是一个没人要的网页原型；之后又在文件权限上卡了二十分钟。

当时发的

「你好，我们现在需要完成一项任务」
（粘贴任务说明，加粗格式丢失）
「请根据我们在 figma page3 里设计好的界面，搭建一个完美无逻辑错误的可交互原型」
「啥意思，直接在 figma 搭建啊」
「你接入进来直接用这些搭建不就行了吗」
「现在 figma 啥也没有」
「是否应该接入搭建？」
（三个文件链接，轮流试）

应该这样发

任务：在 Figma 中为 Harley-Davidson Sportster S 的 4 英寸圆形 TFT 仪表搭建一个可交互原型，用于现场演示。

工具与权限：
- 目标文件：<Figma 编辑链接>，已以 can edit 权限分享给 <连接器账号邮箱>。
- 在该文件中新建一个页面完成原型，不要修改 Page 3 的原始设计。
- 不需要网页版本。

视觉依据：Page 3 中的 Home、Navigation1、Media、Vehicle、Settings1、Global Navigation - Home、Screen overlays、D-pad affordance examples。所有状态画面从这些画面复制生成。

逻辑依据（附件 19 个文件）：
- 按键行为：Input Routing Matrix、Button Guard Table、List Item Type Overrides。
- 状态与事件：State Transition Table、System Event Table。
- 悬浮层：Overlay Registry、Overlay Conflict Resolution Rules。
- 冲突时以 Excel 表格为准；Known Unknowns 中仍未决定的项目，按表格的当前写法处理并列出。

交互方式：键盘模拟车把按键。方向键 + Enter = D-pad，H / P / T = Home / Page / Trip，空格和 , . - = = 媒体键。

范围：发动机运转的停车和行驶两种状态；不含开机动画、蓝牙配对。

交付与验收：
- 从 Home 画面开始播放。
- 每一个跳转都指向存在的画面，没有断链。
- 完成后列出做不到的功能及原因。

一段好用的提示词由什么组成

为了四模型测试，我们把任务说明重写了两次。第一版是一整段密密麻麻的文字；第二版拆成四部分（视觉风格、交互逻辑、按键面板与切换、搭建与验收）；最终版又加上了角色、调研步骤和验收测试。下面是它的组成，按顺序排列。

01角色与目标

一句话说清 AI 的身份，以及“完成”是什么样。

02先读再做

加一个 Step 0：要读哪些页面和文件，动手前先输出一份简短的研究摘要。

03来源与优先级

冲突时谁说了算：提示词 > 表格 > Figma；我们注明的地方，真车 > 表格。

04视觉规格

颜色、字体、尺寸、分区写成 token，从设计文件里抄，不凭记忆描述。

05带编号的逻辑

每条规则都标上表格编号（G11、CR08、E16），AI 能引用，我们能核对。

06不能破的规则

四条底线，比如“底部警示灯区永远不被遮挡”。

07交付物

明确格式、画面命名和搭建位置，并写上“输出完整代码，不要写‘同上’”。

08验收测试

14 条可以按、可以看的测试，而不是“完美”这样的形容词。

有效的提示词

我们发的	为什么有效	可以学的写法
一次给齐 19 个规格文件 + Figma 链接	规格表写得细，AI 能逐条照做。	先给完整材料，再提要求。
参考图 +「虽然是用键盘交互但也能看到操作」	图说明了样子，文字说明了要解决的问题。	参考图和问题一起发。
小组自己的按键设计图	一张图顶三轮文字描述，一次改对。	样式问题直接发设计图。
截图 +「home 键不是无论何时都可以用吗，为什么这里是黑色」	具体画面、具体按键，加上期望的规则。	「在 X 画面，Y 键应该 Z，但现在是 W」。
截图 +「音量键按了一次就不会再发生一次？」	可复现的步骤和看得见的异常，直接定位到 Figma 的限制。	先写做了什么，再写发生了什么。
录屏 +「悬浮页面错位了吧」	AI 逐帧看，6 秒找到原因。	会动的问题一律录屏。
「上次评审讲过，很多 page 是渐变切换的，是分层的」	AI 无从知道的评审背景。	评审和客户提过的要求，主动告诉 AI。
「继续检查各按钮逻辑，确认与产品完全一致」	指定了对照标准，AI 去查 H-D 官方资料，发现 Trip 顺序错了。	说清对照的是什么。

现在原样复用的两段提示词

逻辑校验：先报告，再修改

任务：只检查、不加新功能。核对原型中每个按键在每个画面的行为是否正确。

对照标准（按优先级）：
1. 真实产品：YouTube 视频 <链接>，重点看 <时间点>；以及 Harley-Davidson 官方维修资料。
2. 小组规格：Input Routing Matrix、Button Guard Table。

检查范围：D-pad（上下左右和 OK）、Trip、Page、Home、媒体键，覆盖所有画面和弹窗。

输出格式：一张表格，列为「按键 · 画面 · 原型当前行为 · 真车行为 · 规格行为 · 是否一致 · 依据来源」。先给我看表格，确认后再修改原型。

冲突处理：真车与规格不一致时，单独列出，由我们决定。

Bug 反馈：期望 vs 实际，按优先级

测试中发现以下问题，请按顺序修复（附截图）：

Bug 1（优先）Home 键
- 位置：所有画面，特别是 Home – Odometer 和各个弹窗。
- 期望：Home 键在任何画面、任何弹窗下都可用，按下后回到 Home（在 Home 页则保持不变）。按键面板上 H 在所有画面都显示为可用。
- 实际：Home 页和部分弹窗上 H 为不可用。
- 需同步修改规格：Button Guard Table G11。

Bug 2（优先）音量键与切歌键
- 步骤：在 Home 连续按两次「+」。
- 期望：每次按下音量 +1（0–15），反馈中的数字和音量条更新，并重新计时 1.5 秒（CR08）。切歌键同理，歌名需变化。
- 实际：只有第一次生效。

之后：对照 Input Routing Matrix、Button Guard Table 和 Overlay Conflict Resolution Rules，逐一检查其余按键，把修改列成清单。完成后重新生成所有按键面板，并检查所有跳转没有断链。

05 · 团队工具包

把一次对话变成团队习惯

一次好的对话如果只留在一个人的聊天记录里，价值就很有限。我们把它整理成工具包，放在共享文件夹里，以后每个新的 AI 任务都从这里开始。

01提示词模板

九个带标签的字段（任务、权限、依据、参考、必须有、不要做、验收、背景）。填好，一次发出。

02Bug 反馈句式

一句话：在这个画面按这个键，应该这样，现在却那样。附截图或录屏。

03带编号的规格

每一行规则都有编号（G01–G26、CR01–CR14、E01–E22、LI00–LI12），提示词、修复和复核都能指向同一条规则。

04来源优先级

写一次、反复用：真实产品 > 任务说明 > 表格 > Figma。没定的事项进假设清单。

05Figma 组件

一个 Key 组件（Size × State），按键面板由每个画面的实际交互自动生成，不会和逻辑脱节。

06绕路方案库

把遇到的 Figma 限制和解决办法记下来，没人需要在演示前再踩一次。

07自查与验收

AI 填写的按键 × 画面表和 14 条验收测试，每次修改后重跑。

08提示词档案

每次对话都用 ✓ △ ✗ 记录，并附上弱提示词的重写版。工具包靠这份档案越用越好。

提示词模板

填好尖括号，一次发出

【任务】在 <工具/文件，例如 Figma 文件链接> 里做 <交付物，例如可用键盘操作的原型>。
【权限】文件已以 can edit 分享给 <连接器账号邮箱>。
【视觉依据】用 <页面/画面名称> 的设计，原稿不要改。
【逻辑依据】以 <规格表名称> 为准；两者冲突时以 <哪个> 为准。
【参考】<截图 / 录屏 / YouTube 链接 + 时间点>
【必须有】<例如：每个画面显示按键面板；页面渐变切换>
【不要做】<例如：不要网页版；不要模拟键>
【验收标准】<例如：Home 键在所有画面可用；音量键可连按>
【背景】<客户或评审提过的要求>

Bug 反馈

在 <画面名> 按 <键>，应该 <期望结果>，但现在 <实际结果>。（附截图或录屏）

Fig. 07小组的按键组件：左手的 D-Pad 框和右手的 Music Control 框。黑色表示这个键在当前画面可用。

Fig. 09来电时只有 OK（接听）、↓（拒接）、Home 和音量键是黑色的。面板由画面的实际连线自动生成，不会和真实行为不一致。

Figma 的限制，以及我们的替代做法

现象	原因	替代做法
音量键按一次之后就没反应	悬浮层不能再打开它自己	A、B 两份反馈互换（SWAP），每按一次重新计时 1.5 秒
音量数字、歌名一直不变	画面里只能放固定文字	文字和音量条长度绑定变量
条件里面不能再套条件	Figma 只支持一层 if/else	展平成一层，用 AND 组合
悬浮层和仪表错位	悬浮层对齐窗口中心；画面太高会滚动	所有画面改成 1600 × 720，不再滚动
没有长按触发	Figma 只有按下、点击、超时	用 Shift+T 代替长按 Trip
车辆按键让画面数爆炸	每种巡航、转向状态都要一套画面	只在网页版里做；Figma 只保留行驶/停车一个变量

06 · 避坑

不值得再犯一次的错误

大部分浪费掉的时间，都来自同样几个习惯。它们之所以容易重犯，是因为每一个在当时都显得很省事。

错误	发生了什么	更好的做法
开场白「你好，我们现在需要完成一项任务」	多了一轮对话，没有任何信息。	任务、材料和要求一起发。
始终没说用什么工具	AI 做成了网页原型，而任务要在 Figma 里做。	第一句就写明工具、文件和页面。
先发链接，后给权限	在只读文件和错误账号上卡了二十分钟。	开始前先以 can edit 分享给连接器账号。
用形容词代替验收标准	“完美”“无逻辑错误”没法检查。	写清要按什么、应该看到什么。
「把键盘变成我们的样式」却没附图	AI 只能猜，四分钟后设计图才到。	同一条消息里附上设计图。
「左右手」这样的短回复	有三种理解。	写清哪些键分在哪一组、放在哪里。
「删掉原来的」	对象不明，而删除无法撤销，AI 只能停下来问。	写明对象和位置。
「请根据视频逐帧判断」却没附视频	AI 只能自己去 YouTube 找，还要跳广告，未必是我们要的那个。	贴上链接和时间点。
「尽快修复所有错误」	范围由 AI 决定，不是我们。	列出 bug，标上优先级。
相信自己的表格胜过真实产品	Trip 顺序和 Home 键的错误，就出在我们自己的规格里。	把真实产品定为标准，让搭建结果反过来更新表格。
手动标注按键面板	连线一改，面板就和真实行为不一致。	从画面的交互自动生成。
中途打断正在运行的步骤	被打断的那一步会丢失，有时要重做。	直接发消息说明，AI 会在下一步调整。

样式问题发图，会动的问题发录屏，逻辑问题写「应该」和「实际」。

07 · 修改纠错

原型生成之后：找错、修错、验证

V1 在 09:05 交付，61 个画面。看起来已经完成，但点一遍就知道还没有。09:07 到 09:54 之间，我们逐项检查、像真正骑车一样测试、一次报一个问题，并验证每一次修复。下面记录了哪里错了、谁发现的、为什么会错、怎么修好的。

13
V1 之后发现并修好的问题: 5
由我们检查和测试发现: 7
由 AI 自查发现: 0
V2 的断链数（共 1,488 条）

问题	怎么发现的	原因	修复	时间
看不到按了哪个键	我们检查 V1：参考图 +「用键盘操作也能看到按键」	任务说明里没提这个需求	每个画面加上实时按键面板	09:07
按键面板样式不对，键太多	我们检查：发出小组的按键设计图	AI 只能根据文字猜样式	按小组的 D-Pad 和 Music Control 布局保留 13 个键；黑色可按，灰色无效	09:17
Home 键不是每个画面都能用	我们测试：截图 +「Home 键不是任何时候都能用吗」	Home 页本身和几个弹窗没有连 Home	111 个画面全部连上 Home，包括弹窗	09:31 · 09:44
音量、切歌只能按一次，数字不变	我们测试：截图 +「音量键为什么只能按一次」	Figma 的限制：已打开的悬浮层不能再打开自己；文字是固定的	A、B 两份互换，每按一次重新计时 1.5 秒；音量（0–15）和歌名绑定变量	09:32
Home 页弹窗盖住大号车速	AI 对照规则 NN-2 自查	弹窗放在了车速区域上	先切到小车速布局，再显示弹窗	09:33–09:44
行驶状态下车速始终 0、挡位 N	AI 在「全部修复」和「继续 polish」时自查发现	只做了停车状态	加上行驶变量：45 mph、4 挡	09:33–09:44
地图不能缩放	AI 在「全部修复」时自查发现	地图上没有连 ↑ / ↓	缩放 1–5 级，到头再按无效	09:33
Ride Modes 只能开关	AI 在「全部修复」时自查发现	自定义模式没有做	Custom A / B 复制另一模式的 7 项参数	09:33
部分 Settings 链接按了没反应	AI 在「全部修复」时自查发现	死链	全部连通；加上亮度（整屏变暗）、软件更新和信息页	09:33
接听电话后没有通话状态	AI 在「继续 polish」时发现	缺通话状态	“On call” 标记、自动暂停音乐、Play 挂断	09:41
Trip 顺序错了	AI 对照 Harley-Davidson 官方资料和视频字幕	我们自己的逻辑表写错了顺序	改成 Odometer → Trip A → Trip B → Range → Temperature，并修正表格	09:46
画面滚动后弹窗错位	我们测试：录屏 +「悬浮页面错位了吧」	悬浮层按窗口居中对齐，而画面高到会滚动	所有画面改成 1600 × 720，不再滚动	09:49
页面之间是瞬间跳转	评审意见：page 是分层渐变的	没有设置切换效果	页面渐变 0.3 秒，弹窗 0.2 秒，系统区保持不动	09:49

每一次修复都走同样的流程

01像骑手一样测试

按骑手真实的操作顺序按键，覆盖每个页面和弹窗、停车和行驶两种状态，而不只是走一遍顺利的路径。

02一次报一个问题，附上证据

一句话：在这个画面按这个键，应该这样，现在却那样。附截图；会动的问题附录屏。

03说清要对照什么

真车、逻辑表还是 Figma 设计。「对照真车检查」正是发现 Trip 顺序错误的那句话。

04验证修复，也检查周边

重按同样的键，再看相邻的画面。改了一个弹窗，可能会影响打开它的那个画面。

05把答案写回规格

真车和我们的表格不一致时，我们改了表格，下一次搭建就从正确的规则开始。

证据就是最快的修复

附截图的 bug 大约 1 分钟就定位到原因；附录屏的弹窗错位，6 秒就找到了。

有些错误是我们自己的

Trip 顺序错误来自我们自己的表格。AI 能发现，是因为我们让它对照真车，而不是对照规格。

有些错误是 Figma 的

音量、对齐、嵌套条件，都是 Figma 本身的限制。替代做法已经写进团队工具包，以后不用再踩一次。

08 · 结果

不到一小时，从第一版到第二版

	V1 · 09:05	V2 · 最终版
画面数	61	111
跳转目标	925	1,488
画面尺寸	613 × 495，只有仪表	1600 × 720，仪表 + 按键面板
按键可见性	看不到按了什么，只有一张说明卡	每个画面都有实时的 D-Pad 和 Music Control 面板，可以点击
Home 键	在 Home 页无效	111 个画面全部可用，包括弹窗
Trip 顺序	Odometer → Temperature → Range → Trip A → Trip B	真车顺序：Odometer → Trip A → Trip B → Range → Temperature
音量、切歌	只能按一次，数字不变	可连按，音量 0–15 和歌名实时变化
Home 页悬浮层	盖住大号车速	先切到上方小车速布局
行驶状态	车速始终 0、挡位 N	行驶时 45 mph、挡位 4
切换效果	瞬间跳转	页面渐变 0.3 秒，悬浮层 0.2 秒，系统区不动

最终测试：用 AI 与纯人工对比

最终测试中，我们把 AI 搭建和在 Figma 里纯手工完成同一件事做了对比。AI 一侧的数据来自对话记录；人工一侧按成品文件里的工作量，以熟练 Figma 用户的一般速度估算。

约 13 倍
更快: 约 1/10
的成本: 95 分钟
用 AI 的整段搭建时间，含人工: 约 21 小时
纯人工估算

	用 AI（Claude + Figma 连接器）	在 Figma 里纯手工
时间	整个搭建阶段约 95 分钟，从我们发出第一条消息到 V2 完成的实际时间。这不是模型的运行时间：里面包括 AI 工作，也包括我们看结果、在 Figma 里测试、写下一条提示词的时间。文件分享后约 5 分钟就交付了 V1。	约 21 小时，大约两天半的工作量
人力	一名设计师负责指挥、审核和测试	一名设计师完成全部步骤
成本	约 $83：设计师 95 分钟，按 $40/小时计，加上 $20/月的套餐	约 $840：21 小时，按 $40/小时计
校验	每一条连线自动检查；逻辑对照 Harley-Davidson 官方资料	人工逐个点击检查，1,488 条连线里漏掉一条很容易
后续修改	加一条新规则只要一条消息，AI 重新连好受影响的画面	每个受影响的画面都要手工重连

人工时间是怎么估算的

任务	工作量	速度	时间
从视觉页做出所有状态画面	111 个画面	每个约 3 分钟	~5.5 小时
连接按键触发和变量	约 1,300 条交互	每条约 20 秒	~7.2 小时
为每个画面画按键面板	111 个面板	每个约 2 分钟	~3.7 小时
对照规格表检查跳转目标	1,488 个目标	每个约 5 秒	~2.1 小时
修改并重新测试	—	—	~2.0 小时
合计			约 21 小时

95 分钟来自对话记录，从第一条消息（08:16）到 V2 完成（约 09:54），人和 AI 的时间都算在内。人工数据是估算，不是实测。设计师时间按每小时 $40 计。两边都不包括搭建之前的设计工作（画面、逻辑表和 19 个文件），这部分无论哪种方式都一样，也不包括之后整理文档的时间。

先定交付形式

一开始就说清“Figma，不是网页”并给出按键面板样式，能省掉一整轮重做。

自动生成，不要手标

凡是从逻辑推出来的东西，都应该由逻辑生成。

对照真实产品

最严重的两个错误出在我们自己的规格里，只有真车能暴露它们。

让搭建反过来修正规格

搭建时发现了 6 处文档冲突，现在都回写进表格。

提前了解工具的限制

长按、重复打开悬浮层、定位、嵌套条件，写提示词之前就要想好替代方案。

决定留给人来做

当每个设计决定都已经做好并写下来，AI 的速度最快。

09 · 下一步

版本、两个想法、两种搭建方式和质量控制

原型已经能用了。下面这些是我们要补上的，让下一次搭建更容易交接，下一次测试更公平。

每个版本都有时间、地点和版本号

这次的各个版本只存在于对话里。下面是我们当时有的版本，以及以后每个版本的保存方式。

版本	时间	地点	内容
V0	2026-10-27 · 约 08:39	对话里的一个 HTML 文件	带模拟器和 79 项测试的网页原型。没有使用：测试必须在 Figma 里进行。
V1	2026-10-27 · 09:05	我们的 Figma 文件，「HMI Prototype」页	61 个画面，925 个跳转目标
V2	2026-10-27 · 约 09:54	同一页，在原处更新	111 个画面，1,488 个跳转目标，按键面板和分层切换效果

版本命名：版本号 · 日期时间 · 地点 · 搭建方式 · 规模

V2 · 2026-10-27 09:54 · HMI Prototype 页 · Claude 搭建 · 111 个画面

01存进 Figma 的版本历史

每确认一个版本，就按上面的格式命名保存，任何之前的状态都能恢复。

02第一个画面放一张版本卡

写上版本号、日期时间、谁搭建的、和上一版相比改了什么。

03记一行更新日志

每个版本在共享文件夹里记一行，并链接到生成它的那条提示词。

下一次搭建的两个想法

每次切换都浮现效果说明

原型切换页面时，角落里出现一行小字：「Page → Media · 渐变 0.3 秒 · 系统区不动」。工程师边看边读到动效规格，不用从动画里猜。

每个画面都链接到它依据的材料

每个画面带一条备注，列出它的来源：从哪个 Figma 画面复制来的、遵循哪些规则编号（G11、CR08），每一项都是链接。评审对某个行为有疑问时，点一下就能看到依据。

两种搭建方式的对比

这一次我们是一次生成整个原型，之后再修复。下一次会用一步一步的方式做同一个原型，每一步确认正确再继续，然后对比两种方式。

	一次生成，然后修复	一步步生成，每步确认
怎么做	一条提示词生成所有画面，之后再测试、再修复。	先做一部分（比如 Home 和它的按键），确认正确后再做下一部分。
这次项目	V1 约 5 分钟生成，之后约 50 分钟修好了 13 个问题	下一次测试
适合	很快看到整体，也能尽早发现任务说明里的漏洞	逻辑复杂的情况：前面错一处，会被复制到每一个画面
风险	还没人检查，错误就已经扩散到所有画面（Home 键、音量、Trip 顺序）	做出第一个完整版本更慢，消息也更多
我们要比较的	做出合格版本的时间、修复次数、断链数	同样三项，这样两种方式才能公平比较

质量控制：版本确认前的三道检查

质量控制只问一个问题：原型在每一个画面上，是不是都按规格和真车说的那样运作？「看起来没问题」不算答案，所以我们把它拆成三道检查，每一道的结果都是通过或不通过。检查由 AI 来跑，我们复核它标出来的问题。

检查	检查什么	谁来做	怎样算通过
1 · 准确性	每个画面的每个按键，对照逻辑表和真车，填成一张「按键 × 画面」表	搭建的 AI 填表，人来抽查	每一行都一致；不一致的单独列出，由我们决定
2 · AI 评分	整个原型，由没参与搭建的模型按固定评分标准打分	另一个 AI，比如逻辑交给 DeepSeek、视频交给 Gemini	每一项都在 4 分以上（满分 5）；低于 4 分要写原因
3 · 检查清单	下面这份固定的清单，逐项、逐个画面检查	AI：我们把清单交给它，由它对照原型逐项检查	每一项都标「通过」并写明检查了哪些画面；标「不通过」的由我们复核

AI 评分每次都用同一套五分制标准，这样不同版本之间可以比较：

评分项	5 分的标准
逻辑	每个按键的行为都和规格表、真车一致
视觉还原	画面和我们的 Figma 设计一致：转速圈、表圈、字体、警示灯
覆盖范围	所有页面和弹窗，停车和行驶两种状态
连线	没有断链，也没有走不出去的画面
工程师看得懂	每个画面都有按键面板、切换效果说明和依据链接

交给 AI 检查用的清单：根据这次出过的错整理

☐ Home 键在每个画面都能用，包括弹窗
☐ 音量和切歌可以连按，数字和歌名会变
☐ Trip 顺序和真车一致：Odometer → Trip A → Trip B → Range → Temperature
☐ 没有弹窗盖住车速（NN-2）
☐ 停车（0 mph、N）和行驶（45 mph、4 挡）两种状态都有
☐ 弹窗和仪表对齐，没有画面会滚动
☐ 页面渐变 0.3 秒，弹窗 0.2 秒，系统区不动
☐ 每个按键面板都和画面的实际交互一致
☐ 零断链
☐ 版本卡已填写，更新日志已记录

和清单一起发给 AI 的提示词

请对照这份清单检查原型。每一项回答「通过」或「不通过」，列出你检查了哪些画面，并给出依据：画面名称，或出错的那条连线。先报告，等我们确认后再修改。

AI 的评分和检查都是提醒，不是结论。它们告诉我们该看哪里，通不通过由人来决定。

署名

项目: Sportster S HMI 原型，Group 2：Julianne Henry、Jingwen Li、Xiaolu Xi
设计与规格: Group 2：视觉系统、HMI 分区、实体按键映射和七张逻辑表
AI 工作流: Group 2 三人共同完成：研究、模型对比、提示词、用 Claude 搭建 Figma 原型、测试、提示词档案与团队工具包
参考资料: Harley-Davidson 官方维修资料与车主手册；Sportster S 信息娱乐系统教程视频
年份: 2026